3 replies [Last post]
MercWorks
Offline
newbie
Last seen: 17 years 24 weeks ago
Joined: 2004-08-16
Posts: 2
Points: 0

So I've been working on this site, http://www.mercworks.net/newsite. The layouting is done entirely with CSS, and in IE and Opera the site renders perfectly. However any Mozilla-based browser seems to feel the need to render "588px" as being "638px", resulting in a massively f'ed up looking site. Try the site in both types of browsers. I would use the max-width property but then it's messed in Opera (IE doesn't support max-width but Opera does).

So, take a look at the CSS... it all seems to be proper, but I may be overlooking something. If there's ANY way to automatically detect if it's a mozilla-based browser and change the CSS file accordingly PLEASE let me know, it would be a great help.

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 16 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Mozilla CSS rendering woes

try making your #content width 538px;
you have 25px worth of pading which I believe mozilla is adding to your content (which I think is correct behavior BTW?) making it 638px
or just get rid of the 25px padding in #content

this makes is display nicely in mozilla... don't know what that does to the display in other browsers however...

The Finch
Offline
Enthusiast
Cincinnati
Last seen: 17 years 26 weeks ago
Cincinnati
Timezone: GMT-5
Joined: 2004-08-01
Posts: 65
Points: 0

Mozilla CSS rendering woes

THe problem is only that 25px padding on #content

You can achieve the same effect by instead using margins or padding on .text and .date. This should work across the browsers.

MercWorks
Offline
newbie
Last seen: 17 years 24 weeks ago
Joined: 2004-08-16
Posts: 2
Points: 0

Fixed

Problem solved... i couldn't change the width of #content because it messed things up in IE and Opera, but the second suggestion worked. I still had a problem with #maincontent's width due to the 2px border around it, but I simply added a new div (#maincontentbord) and made it 4px wider than maincontent. The site now works in all browsers. Thanks for all the help Tongue