Strange IE and FF differences

IE and FF differences

[keios]

I'm trying to design a website with a two-column layout, with the whole thing centered on the page.

I have the layout down for the most part, but IE and FF are displaying a few things incorrectly.

IE displays everything fine except the two w3 validation links and images, it keeps applying the background image I used in a css rollover type navigation box.

FF keeps shrinking the navigation div and putting some of the content on top of it, but not all the way.

When I put in a fix that makes it display fine in FF, IE moves all the content down the page equal to the size of the navigation box.

The page can be found at <Sorry, no personal URLs. See Forum Charter [webmasterworld.com]>
and the css follows.

Thanks in advance for any help.

keios

#backlayer {
z-index:-1;
float:right;
width: 219px;
margin: 0;
padding: 1em;
}
#banner {
width: 650px;
padding: 0.5em;
border-bottom:solid #333333 1px;
}
#site {
margin: 0px;
width: 800px;
background-repeat:no-repeat;
background-position:200px 200px;
background-attachment:fixed;
float: inherit;
background-color: #FFFFFF;
}
#page {
background-color: #CCCCCC;
}

#content {
margin-left: 135px;
width: 80%;
line-height: 2em;
margin-top: 15px;
margin-right: 20px;
border-right: groove #CCC 2px;

}
.cimg {
width: 250px;
float: left;
margin-left: 4px;
height: 271px;
margin-right: 5px;
}
.p {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
line-height: 3em;
}

#navigation {
float: left;
width:100px;
padding: 1em;
margin-top: 10px;
border-right: solid #000 1px;
}
.rollover {
height: 30px;
width: 100px;
margin-top: 5px;
margin-left: 0px;
padding-left: 0px;
float: left;
margin-right: 0px;
}
.rollover a:link, a:active, a:visited {
display:block;
width:100px;
padding:0px 0px 0px 0px;
font: bold 15px sans-serif;
color:#FFFFFF;
background: url(../images/buttonover.gif) 0 0 no-repeat;
text-decoration: none;
text-align: center;
height: 30px;
}
.rollover a:hover {
display:block;
width:100px;
padding:0px 0px 0px 0px;
font: bold 15px sans-serif;
color:#000000;
background: url(../images/button.gif) 0 0 no-repeat;
text-decoration: none;
text-align: center;
height: 30px;
}
#footer {
margin-top: 10px;
right: 100px;
left: 9px;
position: absolute;
border-top: groove #ccc 5px;
border-bottom: groove #ccc 5px;
top: 1115px;
}
.flri {
float: right;
margin-right: 15px;
margin-left: 5px;
}
.mainpage {
width: 600px;
}
.style1 {
font-size: 24px;
font-weight: bold;
margin-left: 1px;
text-align: left;
}
.style3 {font-size: 16px}
body {
background-image: url(images/background1.jpg);
background-repeat: no-repeat;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.style4 {font-size: 24px

[edited by: tedster at 1:50 am (utc) on Jan. 1, 2006]

[annej]

I'm trying to do much the same thing with two columns with different but equally frustrating differences between FF & IE. I can get it all looking like I want in IE but in FF it won't center. It's all aligned to the left instead.

Here is what I'm doing.
>>this to center it. Is there something better than text-align:center;?
body {background-color: #FFFFF0;
text-align:center;
}

>>this to set the left and main columns together to be centered.
.allcontent {
width:780px;
background-color: #FFFFF0;
}

>>to set the left column for ads
.sidecol {
width:160px;
padding:5px;
float:left;
background:#CD5C5C;
}

>>to set the right column - the wide main one for content.
contentcenter {
padding:0px;
float:right;
width: 600px;
background-color: #FFFFF0;
text-align: left;
color: #330000;
padding: 5px;
font-size:14px
}

[keios]

Well, I've tried to float the content box to the right, and although it displays, it completely breaks the display, causing the content part underneath the header to ignore the #page container and fills the entire width of the screen.

I tried using padding instead of margin, and although it displays corrently in FF in IE it displays where I want to as far as lining up just next to the nav div, but it displays just below where the nav div ends.

Is this dealing with the box problem of IE?

Also, any ideas on using browser specific CSS to fix this?

[keios]

I fixed it, temporarily.

I wasn't able to get the <!--[if IE]> kind of things working, but..

<style type="text/css">
html[xmlns]#content {padding-left:130px}
</style>

worked perfectly.

I'll just have to find a fix once I.E. 7 is out :(

I hope this helps anyone that also has this problem.

[keios]

Annej,

Have you tried <div align="center">?

I've finally got the page working the way I want!

Anyway, what I did is created a div that was the entire width of the page, then a div to hold the banner, nav, and column divs.

Keios

[islandlizard]

Centre a div without using the depracated align="center" :

#maincontainer {
width: 770px;
margin-left:auto;
margin-right:auto;
}

Done, dusted.