I’ve got a div on my page that used the following css code for vertical alignment:
position:relative;
top:160px;
I find that in IE6, the bottom 160 px of this page are cut off. I have tried setting the overflow in the body and html tags to “visible” to no avail. The only way to make this text visible is to manually set the height of the body tag. However, I need a way to do this dynamically to make the page the appropriate height for the content (there are several similar pages).
I have tried using the expression hack, but can’t seem to get an expression to work. If anyone has experience with expressions in css or any other suggestions to fix this, please help.
This was an issue I had to resolve on my old site as well. All relatively positioned divs on a page seem to have no size in IE6, and the content beneath them covers their content. Unfortunately, I didn’t find a nice solution that still used relative positioning. In general, you can usually avoid the need for relative positions, but if you would like to continue it, you may have to use a table just as a sort of container for the text. I know that works, as I tested it before throwing out relatives, but it should work if you can’t find a better solution. Let me know what you find.
IE6 has a lot of issues with CSS in general. Some (mostly float’ed content) can be solved by adding the position:relative; however when certain content in IE6 is given a position:relative, it needs to also have a set width and height. And then there are the cases where adding a simple <p> </p> after the content in question, with given a CSS of font-size:1px;margin:0;clear:both; can solve some issues.
This is why I hate divs sometimes. Depending on certain things it can be fine on one computer and horrible on another, (maybe it was just how I set it up), but I’ve learned and found better ways instead of using div
<div>'s are the proper way to create the layouts for websites nowadays. Using tables or other methods is considered bad practice, and should generally be avoided.
The only reason why it’s hard to get CSS-based layouts using <div>'s that work well is Internet Explorer. I guarantee you that it’s really easy to write W3C-compliant code thats works perfectly in standards-compliant browsers like Firefox, Safari or Opera. But as soon as you have to make it work in IE as well, everything breaks because Microsoft has not correctly followed the industry standards for HTML and CSS for most of the past decade.
IE7 is an improvement over IE6, but it’s still far from behind Firefox, Safari, and Opera.
I have tried throwing a <p>nbsp;</p> in there, no dice.
As ArtDutra mentioned, the use of divs (short for division iirc) is the proper way to lay out a web page. Table tags have a specific use (tables) and are not meant to be used for webpage layout.
Making a page with tables may be easier, but it’s sloppy and usually flows poorly. I’ve never been a subscriber to the (photo)shop and chop method of website layout.
For those who would like to see the problem: http://www.chrisms.net/MORT