CSS Help Request
March 18, 2005 8:39 AM Subscribe
Strange CSS problem with my departmental website when using cookies to set text sizes. On any font size but the standard, content is (correctly) centered. Using the standard size, content is left-justified. Both XHTML and CSS* validate. This is killing me.
Site is here. Things often look OK on first load, but try changing font sizes using the menu on the sidebar... it gets messy in FF.
I'm using the relative font sizing + stylesheet switcher mechanism discussed here on A List Apart to allow resizing of fonts on the site. The main body of text is fine, but there's a centered DIV that holds the main navigation menu... it refuses to stay centered unless I change font sizes away from the default in Firefox. Upon first setting the cookie, it sometimes is centered but always immediately jumps to the left upon page refresh. Works fine in IE, but the whole thing seems to always stay left-justified in Opera no matter what I do. At any rate if it only works correctly in IE it makes me suspect that there's something screwy going on here with my admittedly haphazard coding, and the fact that it is never centered in Opera makes me think it isn't just a Firefox bug.
The only thing that is changed on resetting text size is a cookie: nothing else in the XHTML or CSS changes at all.
The center content is a bunch of floated DLs, with an image added as styling. It used to be tables and I killed them because layout tables suck. Currently if the page is resized small enough the content ends up as one single column, which is also how it displays in older browsers. Nothing inside the DL is resized, that text stays static to make my life and my layout easier.
Any help on this would make my life easier...
(*CSS validation caveat: Using the moz-border-radius on some block elements, which technicaly isn't valid, but the rest is 2.0.)
Site is here. Things often look OK on first load, but try changing font sizes using the menu on the sidebar... it gets messy in FF.
I'm using the relative font sizing + stylesheet switcher mechanism discussed here on A List Apart to allow resizing of fonts on the site. The main body of text is fine, but there's a centered DIV that holds the main navigation menu... it refuses to stay centered unless I change font sizes away from the default in Firefox. Upon first setting the cookie, it sometimes is centered but always immediately jumps to the left upon page refresh. Works fine in IE, but the whole thing seems to always stay left-justified in Opera no matter what I do. At any rate if it only works correctly in IE it makes me suspect that there's something screwy going on here with my admittedly haphazard coding, and the fact that it is never centered in Opera makes me think it isn't just a Firefox bug.
The only thing that is changed on resetting text size is a cookie: nothing else in the XHTML or CSS changes at all.
The center content is a bunch of floated DLs, with an image added as styling. It used to be tables and I killed them because layout tables suck. Currently if the page is resized small enough the content ends up as one single column, which is also how it displays in older browsers. Nothing inside the DL is resized, that text stays static to make my life and my layout easier.
Any help on this would make my life easier...
(*CSS validation caveat: Using the moz-border-radius on some block elements, which technicaly isn't valid, but the rest is 2.0.)
It doesn't work right on OSX Safari and Firefox either, so it is more likely a coding problem rather than a browser bug.
When you float an element, you take it out of the document flow. Maybe that's conflicting with the centering of the menu container?
But yes, talk to the css-discuss folks, good luck!
posted by lychee at 5:40 PM on March 18, 2005
When you float an element, you take it out of the document flow. Maybe that's conflicting with the centering of the menu container?
But yes, talk to the css-discuss folks, good luck!
posted by lychee at 5:40 PM on March 18, 2005
This thread is closed to new comments.
One tip that I have heard is to write your CSS for a standards-compliant browser FIRST, then do the workarounds for IE (not the other way around). "Looks fine in IE" is the way madness lies.
That being said (I haven't looked at your page code) but does Point Number 7 on this page, have anything to do with your problem? See also the additional information/corrections on these same 10 points here.
posted by spock at 9:13 AM on March 18, 2005