Help on browser compatibility?

Hello!

I am not very experienced at coding, but have tried to build a site using css to govern the layout. The site http://www.realityends.com works very well with Explorer 6.0 and i have validated most pages as html 4.0 transitional and also validated the style sheet.

I downloaded Netscape Navigator 8.0 and i got a little shocked by the results. The content colum does not expand the way it does in IE 6.0 and it seems to ignore some padding? And after lurking a bit on this forum i downloaded the firefox browser and got the same bad results there :(

Could anyone help me out a bit to make the layout of the website more compatible with other browsers than IE 6.0? The page layout is divided in div.toppfelt (the header), div.menufield (the menu columm at the left side), div. contentfield (the main area for content and placed in centre) and finally div.rightfield (the right menu collumn).

Here is the css i have used for the layout part:

div.toppfelt {
background : url("/img/top.jpg");
width : 100%;
background-repeat : no-repeat;
margin : 0;
margin-left : 4px;
border : 2px solid #ff9900;
}

div.menufield {
float : left;
width : 150px;
height : 720px;
margin-left : 4px;
margin-top : 10px;
padding : 1em;
background : url("/img/background-red.jpg");
color : #ffffcc;
border : 2px solid #ff9900;
}

div.contentfield {
margin-left : 156px;
margin-right : 150px;
margin-top : 10px;
margin-bottom : 10px;
height : 720px;
padding : 1em;
background-color : #ffffcc;
border : 2px solid #ff9900;
}

div.rightfield {
float : right;
width : 150px;
height : 720px;
margin : 0;
margin-top : 10px;
padding : 1em;
background : url("/img/background-red.jpg");
color : #ffffcc;
border : 2px solid #ff9900;
}

I have tried to understand what to improve, but i feel i need som knowledgable pointers.... grateful for any help!

arvek :)

The content colum does not expand the way it does in IE 6.0Of course it doesn't. It's not supposed to. This is a bug in IE. Never, ever design for IE. It is old, buggy and non-standard. The worst browser out there. Always design in modern browsers like Firefox first, then adjust your code for IEs quirks and bugs.

Google for "clearing floats" to possibly solve your problem. I have to leave but someone else may help you out here.

You set a height to your .contentfield, can't do that if you expect the container to resize to the text
div.contentfield
{
margin-left:192px;
margin-right:188px;
margin-top:10px;
margin-bottom:10px;
padding:1em;
background-color: #FFFFCC;
border:2px solid #FF9900;
}
Use the above for your contentfield div. In your footer use clear:both; instead of clear:left; You also use old tags like center and bold. CSS should take care of that. margin:auto; for block level elements like tables or divs, and font-weight:bold; to make things bold.

Thank you so much! That fixed my most immediate concerns and made my site viewable in firefox and netscape as well. :thumbsup:

I will do an effort to stop using old tags like <i> and <b> and leave it all up to the style sheet, starting with the pages i create from now and then do some clean ups on old pages when time permits.

I really appreciate the help, it lets me use more time creating content instead of struggling with coding! :D