css-based layout problems in Firefox
I'm teaching myself how to create css-based layouts.
I've created some pages that Internet Explorer presents correctly, but Firefox scrambles. If someone doesn't mind taking a look and can tell me what's going on, it would be much appreciated!:
(I'm imagining my current style sheets may also be a bit over-the-top re: the numbers of containers containing other containers :-) So any suggestions regarding a more stream-lined approach would be great.
Thanks in advance for any feedback.
whoa - that's a lot of placement in css...if i were to guess after looking at your files, i'd say that it's probably related to your float and auto settings on some of the css components. but it's hard to say without really getting into it and there's nothing really glaring...
[Margarita] "I'm imagining my current style sheets may also be a bit over-the-top re: the numbers of containers containing other containers"
i think what you might have is a case of too much css. css is great when you have something like a link or a header or a bit of inline text that you want to control the style for throughout the site (via css classes). where css can get to be overkill is when you use it a lot for individual items or if you are controlling attributes via css that you really just don't get any benefit from controlling...does that make sense?
hope that helps! :-)
I agree, the sheet got more complicated than need be. I'm curious though (if you have time for another question), which categories of things, in general, you think are best controlled by css elements, and which are not?
I'm asking because from what I've read so far, many css advocates (csszengarden.com is one example) advise controlling Every aspect of layout and formatting via style sheets (though a tad more efficiently than I've done so far :-).
i guess i tend to be a bit more old school (having been at this since long before css was around) - i tend to just use tables and other more simple elements to control layout, as opposed to going full css...i personally think that it's a smidge overkill, and i almost always put things like headers, nav areas, footers, etc. into global templates, which helps alleviate the need for global css control of those elements...
so basically the primary things that i always put into css are:
- link styles
- font styles
- page content styles (line-height, font, etc.)
- anything else that i don't have in a global header, nav or footer template
but that's just me - i know that a lot of people enjoy doing sites in all css, but what i've found is that the headache of getting those to work perfectly across browsers is often not worth the time spent. in other words, the primary benefit of css is that they are global styles that i can change to quickly alter the layout of a site - that's why they were invented. but i won't probably be spending a lot of time changing the nav menu spacing or other core layout elements very much, so i find it more efficient to just use plain html to control things like that and save myself what you're running into here - the bizarre little differences that pop up between browsers. i know css and styles very well, but even i will constantly find that a certain style acts differently between browsers and platforms - so when it comes to css styles that are very position-dependent, i'll typically just use plain html to get the same effect, because i know that will be much more reliable from the start across browsers...
one thing i would _strongly_ recommend against is using absolute positioning for elements. this is a death wish if you have a site that will have content changing or that needs to be maintained. i have seen sites in the past where every element on the page was positioned down to the pixel and a user wanted to double the copy in the body area - you can imagine the time that is spent to reposition everything to fit the copy and what would have been needed if everything was built to flow in relation to other things on the page...
just my $.02... :-)
Thanks for your .02 cents of advice. I'd say it was worth .03 at least! :-)
Seriously, though, I appreciated your take on things. I'm not a fan of spending hours and hours debugging issues that will (hopefully) become non-issues in the not-too-distant future. So, yours seems a very common sense approach. To some extent, it seems some folks use style sheets exclusively cause "all the cool kids are doing it"... :-)
When it comes to web-based stuff, it seems that figuring out *which* tools & technologies make the most sense to use can take as much effort as actually learning to use them.