I'm held back from using CSS as I feel unsure about which properties can be used safely and cross-browserly. Safely means they will work in all modern browsers and be viewable by the majority of web surfers, perhaps 70-80% (ideally but not nessecary; just a majority is fine).
For example I'd like to know if the following CSS mehtods are safe to use and won't be risky and not exlude too many viewers from viewing them:
position absolute/relative: Are all offsets safe to use? Can I use top, left, bottom, right and feel safe about all of them?
margins: Are auto side-margins safe to use if you want to center blocks on the page? Is it only IE-windows that requires text-align for blocklevel boxes? Or, can you rely on just auto side-margins today when you want to center blocks?
divs: Is it safe today, in general, to use positioned <div>s freely? As in you can safely use positioned <div>s for layout today?
There's no quick easy answer to this. You just have to try and see the differences for yourself. They're too many, and some are subtle and depend on combinations of circumstances.All modern browsers support CSS-1, most if not all of CSS-P, and part of CSS-2. Few support all of CSS-2 and even fewer support any of CSS-3.So, "most if not all of CSS-P", you said felgall. That must mean that you can use all four positioning offsets safely right?
So if you you use: position: absolute; right: 20px; bottom: 40px; - you don't need to worry too much about bugs, is that correct? (as opposed to top & left offsets which are safer right?)
I know there are a lot of inconsistencies among browser's CSS-renderings, but as far as the majority goes, there must be a solid way to rely on. If you, say, code just with IE6x-win and Firefox 1.0x in mind, then you don't need to cover all possible and sublte bugs, you just need to focus on those browsers' way of rendering CSS. If you know that both these browsers support CSS-P almost completely, including right and bottom positioning offsets, you don't have to worry about a 1000 bugs that may exist in all browsers combined, don't you agree?You should design for Firefox and work around IE. Positioning, in most cases, works fine in both. You will then cover 95% or more of the world.Best to test in Firefox, IE, and Opera. If it works in two then you know that the problem is that IE just han't caught up with the standards yet - remember that IE is currently two browser generations behind the others in their development.Also consider testing in several versions of IE. I'm having a helluva time with several sites right now because the client wants it to look perfect in IE 5.5+
How to run multiple versions of IE in Windows (<!-- m --><a class="postlink" href="http://labs.insert-title.com/labs/article795.aspx">http://labs.insert-title.com/labs/article795.aspx</a><!-- m -->)Thanks guys, for your responds. You're just awesome, being able to reply so quickly and helping others in crucial situations. I appreciate it.Yes, you should always test in as many browsers as you can.
Don't forget about Konqueror, IE5/Mac, and Safari.
Often floats are a better choice than absolute positioning.
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/floatutorial/index.htm">http://css.maxdesign.com.au/floatutorial/index.htm</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.csscreator.com/attributes/containedfloat.php">http://www.csscreator.com/attributes/containedfloat.php</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/easyclearing.html">http://www.positioniseverything.net/easyclearing.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://css-discuss.incutio.com/?page=ClearingSpaceposition">http://css-discuss.incutio.com/?page=Cl ... ceposition</a><!-- m --> absolute/relative: Are all offsets safe to use? Can I use top, left, bottom, right and feel safe about all of them?Top and left are safe to use; keep in mind different resolutions of course, but other than that, they're fine. However, bottom and right will most likely only work in current browsers (IE6, being many years old is not current).margins: Are auto side-margins safe to use if you want to center blocks on the page? Is it only IE-windows that requires text-align for blocklevel boxes? Or, can you rely on just auto side-margins today when you want to center blocks?As far as I know only IE5(maybe 5.5 as well) and below work like that; all other CSS-supporting browsers seem to be able to properly handle automatic margins.divs: Is it safe today, in general, to use positioned <div>s freely? As in you can safely use positioned <div>s for layout today?Keep in mind your semantics--don't give up on them, DO use the tags best representing your data; 90% of default styling can be overriden (form elements are tricky to override too much, etc.)--but <div>s are meaningless elements, and if used correctly merely provide a way to group, identify, and classify other elements.I suggest you check out these CSS support charts. (<!-- m --><a class="postlink" href="http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29">http://en.wikipedia.org/wiki/Comparison ... _%28CSS%29</a><!-- m -->)
IE5+/Win does support bottom and right, but incorrectly ignores them if the property for the offset from the opposing side is also set.
When not in Standards mode, IE6 handles centering like IE5.x/Win does. (<!-- m --><a class="postlink" href="http://www.dynamicsitesolutions.com/css/center_element/">http://www.dynamicsitesolutions.com/css/center_element/</a><!-- m -->)The point with the <div>s I'm asking for is that I use 80% of them as image-containers - that is if I want a specific image in the bottom right corner of the browser window I only use divs for that; determine their width, height and then place a background-image. Hence also the bottom/right offsets which are important to me when I want exact image placement as part of the overall design.
Also, I don't understand really why, or how, floats can even rival positioning. When you float, all elements are layed out in relation to eachother - can be totally unpredictable, and certainly not fit for situations where you know where you want particular elements to be. Obviously with positioning you can place any element exactly where you want it; without having to worry about float-related stuff and sideeffects thereof. I thought floats were for floating, that's all, not positioning. Don't floats also carry a bunch of bugs with them? As in many inconsistencies depending on how, or when you use margins/paddings/widths etc? Why not stick with positioning and then get exactly what you want? Especially if most browsers support them.
Hey, thanks for the support chart-link. That's probably exactly what I need right now. Convenient indeed, and didn't know there was any fairly up-to-date charts available today. Thanks all.You're welcome.
Wikis are great for that kind of thing.
You're thinking like a print designer. The web is not print. Different people use different resolutions and not everybody keeps their browser windows maximized.
Once you understand how floats work, you can benefit greatly from how flexible they can be.
Take a look at the articles at <!-- m --><a class="postlink" href="http://www.positioniseverything.net/.You're">http://www.positioniseverything.net/.You're</a><!-- m --> thinking like a print designer. The web is not print.That's worth repeating. Print designers are great designers but they should not be allowed to try to realize a design for a web site.The big differeence between print layout design and web layout design is: When designing for print, you have complete control over every aspect of how the page is displayed; it's printed, it's on paper, it's final. With the web, it is neccesary that the layout accomodate different view resolutions and changes to the content.
As an example, say you want 3 columns with a header above and a footer below, the header and footer occupying the total width of the 3 columns. The header is easy in either absolute positioning or floats. The columns are also easy in both, they just go below the header (probably fixed height) and next to each other. Now we come to the footer. In print, you'd just always leave room at the bottom of the page, and put it there. On the web, you don't even know how big the page is going to be. With absolute positioning, you have no idea how to position the footer because you can't determine the height of the columns beforehand. You can take a guess, but you can't be sure. And, if someone who doesn't know anything about HTML/CSS has to add content (either directly into the page or through a web form of some kind), stretching the columns, they may end up overlapping the footer. With floats, you'd just give the footer a clear:both style, and it will automatically stay below the floated columns.
As far as I know, the only two ways to make the layout described work are floats and <ugh> tables.
For example I'd like to know if the following CSS mehtods are safe to use and won't be risky and not exlude too many viewers from viewing them:
position absolute/relative: Are all offsets safe to use? Can I use top, left, bottom, right and feel safe about all of them?
margins: Are auto side-margins safe to use if you want to center blocks on the page? Is it only IE-windows that requires text-align for blocklevel boxes? Or, can you rely on just auto side-margins today when you want to center blocks?
divs: Is it safe today, in general, to use positioned <div>s freely? As in you can safely use positioned <div>s for layout today?
There's no quick easy answer to this. You just have to try and see the differences for yourself. They're too many, and some are subtle and depend on combinations of circumstances.All modern browsers support CSS-1, most if not all of CSS-P, and part of CSS-2. Few support all of CSS-2 and even fewer support any of CSS-3.So, "most if not all of CSS-P", you said felgall. That must mean that you can use all four positioning offsets safely right?So if you you use: position: absolute; right: 20px; bottom: 40px; - you don't need to worry too much about bugs, is that correct? (as opposed to top & left offsets which are safer right?)
I know there are a lot of inconsistencies among browser's CSS-renderings, but as far as the majority goes, there must be a solid way to rely on. If you, say, code just with IE6x-win and Firefox 1.0x in mind, then you don't need to cover all possible and sublte bugs, you just need to focus on those browsers' way of rendering CSS. If you know that both these browsers support CSS-P almost completely, including right and bottom positioning offsets, you don't have to worry about a 1000 bugs that may exist in all browsers combined, don't you agree?You should design for Firefox and work around IE. Positioning, in most cases, works fine in both. You will then cover 95% or more of the world.Best to test in Firefox, IE, and Opera. If it works in two then you know that the problem is that IE just han't caught up with the standards yet - remember that IE is currently two browser generations behind the others in their development.Also consider testing in several versions of IE. I'm having a helluva time with several sites right now because the client wants it to look perfect in IE 5.5+
How to run multiple versions of IE in Windows (<!-- m --><a class="postlink" href="http://labs.insert-title.com/labs/article795.aspx">http://labs.insert-title.com/labs/article795.aspx</a><!-- m -->)Thanks guys, for your responds. You're just awesome, being able to reply so quickly and helping others in crucial situations. I appreciate it.Yes, you should always test in as many browsers as you can.
Don't forget about Konqueror, IE5/Mac, and Safari.
Often floats are a better choice than absolute positioning.
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/floatutorial/index.htm">http://css.maxdesign.com.au/floatutorial/index.htm</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.csscreator.com/attributes/containedfloat.php">http://www.csscreator.com/attributes/containedfloat.php</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/easyclearing.html">http://www.positioniseverything.net/easyclearing.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://css-discuss.incutio.com/?page=ClearingSpaceposition">http://css-discuss.incutio.com/?page=Cl ... ceposition</a><!-- m --> absolute/relative: Are all offsets safe to use? Can I use top, left, bottom, right and feel safe about all of them?Top and left are safe to use; keep in mind different resolutions of course, but other than that, they're fine. However, bottom and right will most likely only work in current browsers (IE6, being many years old is not current).margins: Are auto side-margins safe to use if you want to center blocks on the page? Is it only IE-windows that requires text-align for blocklevel boxes? Or, can you rely on just auto side-margins today when you want to center blocks?As far as I know only IE5(maybe 5.5 as well) and below work like that; all other CSS-supporting browsers seem to be able to properly handle automatic margins.divs: Is it safe today, in general, to use positioned <div>s freely? As in you can safely use positioned <div>s for layout today?Keep in mind your semantics--don't give up on them, DO use the tags best representing your data; 90% of default styling can be overriden (form elements are tricky to override too much, etc.)--but <div>s are meaningless elements, and if used correctly merely provide a way to group, identify, and classify other elements.I suggest you check out these CSS support charts. (<!-- m --><a class="postlink" href="http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29">http://en.wikipedia.org/wiki/Comparison ... _%28CSS%29</a><!-- m -->)
IE5+/Win does support bottom and right, but incorrectly ignores them if the property for the offset from the opposing side is also set.
When not in Standards mode, IE6 handles centering like IE5.x/Win does. (<!-- m --><a class="postlink" href="http://www.dynamicsitesolutions.com/css/center_element/">http://www.dynamicsitesolutions.com/css/center_element/</a><!-- m -->)The point with the <div>s I'm asking for is that I use 80% of them as image-containers - that is if I want a specific image in the bottom right corner of the browser window I only use divs for that; determine their width, height and then place a background-image. Hence also the bottom/right offsets which are important to me when I want exact image placement as part of the overall design.
Also, I don't understand really why, or how, floats can even rival positioning. When you float, all elements are layed out in relation to eachother - can be totally unpredictable, and certainly not fit for situations where you know where you want particular elements to be. Obviously with positioning you can place any element exactly where you want it; without having to worry about float-related stuff and sideeffects thereof. I thought floats were for floating, that's all, not positioning. Don't floats also carry a bunch of bugs with them? As in many inconsistencies depending on how, or when you use margins/paddings/widths etc? Why not stick with positioning and then get exactly what you want? Especially if most browsers support them.
Hey, thanks for the support chart-link. That's probably exactly what I need right now. Convenient indeed, and didn't know there was any fairly up-to-date charts available today. Thanks all.You're welcome.
Wikis are great for that kind of thing.You're thinking like a print designer. The web is not print. Different people use different resolutions and not everybody keeps their browser windows maximized.
Once you understand how floats work, you can benefit greatly from how flexible they can be.
Take a look at the articles at <!-- m --><a class="postlink" href="http://www.positioniseverything.net/.You're">http://www.positioniseverything.net/.You're</a><!-- m --> thinking like a print designer. The web is not print.That's worth repeating. Print designers are great designers but they should not be allowed to try to realize a design for a web site.The big differeence between print layout design and web layout design is: When designing for print, you have complete control over every aspect of how the page is displayed; it's printed, it's on paper, it's final. With the web, it is neccesary that the layout accomodate different view resolutions and changes to the content.
As an example, say you want 3 columns with a header above and a footer below, the header and footer occupying the total width of the 3 columns. The header is easy in either absolute positioning or floats. The columns are also easy in both, they just go below the header (probably fixed height) and next to each other. Now we come to the footer. In print, you'd just always leave room at the bottom of the page, and put it there. On the web, you don't even know how big the page is going to be. With absolute positioning, you have no idea how to position the footer because you can't determine the height of the columns beforehand. You can take a guess, but you can't be sure. And, if someone who doesn't know anything about HTML/CSS has to add content (either directly into the page or through a web form of some kind), stretching the columns, they may end up overlapping the footer. With floats, you'd just give the footer a clear:both style, and it will automatically stay below the floated columns.
As far as I know, the only two ways to make the layout described work are floats and <ugh> tables.