Forum Moderators: not2easy
Still that leaves us with wanting to know what a good result is, and the easiest path to get there.
A good result in my book has to allow
Now current browsers in use out there include IE6 and IE7. Both are potential horrors and they can't be ignored due to their market share. Conditional comments to make them work are your best possible option. Make sure not to apply the conditional comments on IE8. Microsoft promised it would be standards compliant, we'll need to continue to twist their hand into giving us what they promised, and not let them have any excuse that the "stuff out there" won;t work unless they keep their errors of the past.
So that leaves how to get there the easiest.
The path I use currently is:
Where to learn:
though css based layouts are in the market from ancient time, still no one can say the layouts will work in all browsers
the issues related to layouts based on Floats and absolute positioning.
As for being sure a layout work in all browsers: you're never going to be sure. In fact you can be pretty sure it'll degrade in certain (older) environments. That's why it's important to have the html itself make some sense. To make sure current and future browsers
handle it properly one's best odds are standards. That's why validating and keeping IE fixes out of them are important.
Float based layouts or absolute positioned layouts and the advantages/disadvantages in using them both
Floats are the decedents of what an <img> was that had align="left" (or right) applied to it. It's still linked to the flow: the vertical position is derived from the original unfloated position; and it influences the flow: pushing away stuff that would end up under it.
So there's little, to anything bad to say about floats as such, they work nicely with the flow and they too will degrade nicely.
That's until you run into something where everything is a float, nested many levels deep. You can have too much of a good thing for sure.
Absolute positioning takes out the element of the flow entirely. I was never a big fan as it's very difficult to do this with things you don't know the size of. Still it does have useful aspects. I use it e.g. to position a search box over a background so that I can put it where it "fits" in the image. If CSS wouldn't be there it'll stay in a place where it fits logically.
Absolute positioning also has the potential of making how things look entirely independent of the order in which they are placed in the html.
The main drawbacks are IE6's poor support (e.g. it never obeys when I tried to use things like "bottom:0", it doesn't stretch boxes when entering both top and bottom positions etc.). And as said before the inability to position boxes dependent on the place of other absolutely positioned boxes.
To me both floats and absolutely positioning can be good, but I guess both can be abused much like we abused tables in the past.
Consider to just fix the display. It's pretty hard to find logic in the bugs. I just work around the display problem, and once it's ok, I'll forget it.
Just curious, how "ok" is ok for you? Can you give an example of where you might draw the line? :)
Just curious, how "ok" is ok for you? Can you give an example of where you might draw the line? :)
For IE7 I mostly can get it to display the same as the standards compliant browsers. Detail like different fonts etc are going to remain unfixable.
For IE6 I've settled for degraded display that's still functional. E.g. a sliding doors menu where there's a need for a li:hover that can't be moved to an <a> tag. I'll change the hover to look different.
Printing is similar: IE6 tries to print so enlarged that it almost never fits a regular page. I can either waste a lot of time or hope those still not upgraded will do so eventually and forget about it (most website won't fit the width of the page in IE6 so it's just one more).
This will get worse once we get more browser support for CSS3 features: E.g. rounded corners, either we can continue to add superfluous divs and background images, or we can embrace the real rounded corners and let them degrade to aquare corners for obsolete browsers.
Graceful degradation is enough, unfortunately many of the IE bugs aren't exactly graceful.
As to where I draw the line in regard to code for IE: I don't care if it validates (if I need zoom:1, that's going to be it). I don't care why it works (if a margin of 700px does the trick, that's going to be the one I use, I not wasting my time understanding why when those crafting the browser won't fix it anyway). I don't care what technology it uses (if I need a min-width, I'll use the scripted version). As long as it looks ok, I'm ok with it.
Use a "live" CSS editor that allows you see what your changes will do in realtime - then copy those changes to the permanent stylesheet. For example this plugin for firefox: [editcss.mozdev.org...] but there are others, like in the WebDeveloper plugin.
Even for a CSS pro, this can be very helpful to see how minor changes to rules affect the page.
I also like this plugin which allows you to mouse-over any object to see it's properties instantly: [addons.mozilla.org...]
[edited by: amznVibe at 9:11 am (utc) on Oct. 6, 2008]
Regards
Malcolm
most CSS templates just take into account the 2/3 column header footer look, but what you find is the code behind the scenes is the same as you would use if you were e.g. trying to fit "those 2/3 columns" into your portal "grid"
it's really hard to visual without sketching the rough layout idea out first..
take this visual example (3) [w3.org] (ignore the actual module for now).. that is technically a three column layout, and the columns then have further columnar layouts inside them.. e.g. the four cars in the right column is a four column layout with header, it could be marked up as list of choices so it still makes sense if/when it degrades but then the <li> items can floated into a four column layout.
The "gridlines" being demonstrated in that page actually help visualise that the whole template is just a series of columns separated by margins/whitespace, I think anyway ;) - so perhaps even incorporating that into your sketch may help?
Absolute positioning would not work well at all for something like this, as getting the page to flow would not work.. floats all the way IMHO
..then all the "hacks" for various browsers
I really feel we need to dispel this little myth ;)
Lets not muddy the issue - you do not need to "hack" any more. If you do decide to provide a slightly less enhanced version for IE browsers because a particular version doesn't yet support some enhancement you'd like to use then there are simple ways to do so. Floats are well supported by all browsers.
What about: IE5/6 Doubled Float-Margin Bug? Maybe I used wrong word - "hack". The point is theoretically the same CSS code should be interpreted in the same way by all the browser. But it does NOT! Than you have problem and you must use some tricks or hacks or bug fix or call it what you want in order to fix the problem.
I think we all agree that the miserable support of the currently in use versions of IE is a major pain. But you can work around or get a degraded solution for all those IE versions (6 and 7, next to nobody uses 5 anymore these days).
The bugs in IE6 really are something we all should be very vocal about against Microsoft, not against CSS. The standard is not at fault, the implementation in IE is.
It's especially sad that over the years Microsoft never bothered to fix even the best known bugs, nor that they managed to convince their customers to upgrade to IE7.
When you do use the conditional comments the bugs in IE bother you just a bit less: you just fix the result. E.g. if you see the margins to wide: just reduce them, don't bother with the reason, the stuff you could add that don't set the other browsers off isn't important anymore.
As for understanding CSS: it's *much* easier if you make/read CSS that's not stuffed with things to make IE behave.
E.g. 9 out of 10 times we see "position:relative", it's got no top/left/right/bottom to go along with it and as such it's there in all likelihood either due to ignorance what the real position:relative is supposed to do (position:static is the default), or either more likely there for side effects in IE that should not be there to start with.
So I would agree all those fixes that are outside a conditional comment really are counterproductive.
w3.org has all the definitions what CSS is supposed to do online. E.g. the position stuff is here: [w3.org...] , floats are here: [w3.org...] .
I completely agree with you! I don't want to bug fix! Unfortunately 30-40% of my company site visitors uses IE6. I can't afford to lose 40% of my clients.I hope that one day all the browsers will have same standard.
I come from a print background and after 10 years on the web finally realized YOU CAN'T MAKE IT LOOK RIGHT. So... serve content. Serve it pleasantly. And all browsers (all) will deal with a simple container, simple columns, headers and footers. Use the KISS method and all goes well...and you can get back to what it's all about: content or content and advertising (whatever floats yer boat!).
And take advantage of SSI or PHP includes, depending on platform and expertise.
These days I do it dirt simple...with no errors regardless of browser.
What is the correct way to design layouts using CSS and how to learn
Don't. It's a pain in the ass. (I am not very helpful)
I hope that one day all the browsers will have same standard.
(sigh) you and every other person who has ever coded html/css. Sorry, old salty dog reply here.
and pleased to hear you got your layout done, dukelips :)
