Margin top IE

[csa]

Currently my navigation lines up nicely in the middle of the Quick Search area in FireFox, but despite adding a margin-top to try and get this working in IE, the nav appears to the top of the div.

http://www.tedbakerart.co.uk/march06/indexnew.html

What have I done wrong?

Thanks

Code: Select all

/* CSS Document */
/* CSS Document */
body {
text-align:left;
background:#000000; 
margin-top: 0px;
font-family:Arial, Helvetica, sans-serif;
}
#container{
width: 991px;
border: solid white 0px; 
position: relative;
}
#logo{
width: 991px;
height: 37px;
border-bottom:1px solid #FFFFFF;
float: none;
}
#nav{
width: 990px;
height: 37px;
border: solid red 0px; 
}
#homeimages{
width: 760px;
height: 97px;
}
h1{
font-size:14px;
color:#FFFFFF;
font-weight:bold;
}
#bodyright{
width:230px;
float:right;
background-color:#000000;
padding-top: 40px;
margin-top: 0px;
text-align:left;
padding-left: 20px;
}
#bodymiddle{
width:520px;
float:right;
background-color:#000000;
text-align:left;
padding-top: 40px;
padding-right: 30px;
margin-top: 0px;
padding-bottom: 10px;
}
#bodyleft{
width: 150px;
float:left;
background-color:#000000;
padding-top: 10px;
}
p{
font-size: 12px;
color:#FFFFFF;
line-height: 1.5em;
}
p span{
font-size: 12px;
color:#9D9264;
}
ul{
}
#listone{
display:block;
font-size: 11px;
color:#F5EFBD;
padding-right:25px;
}
#topnav{
font-size: 11px;
color:#FFFFFF;
}
#bottomlinks{
width: 700px;
float:left;
padding-left: 190px;
padding-top: 3px;
}
.goldlinks{
font-size:10px;
color:#9D9264;
text-align:left;
}
a.goldlinks{
font-size:10px;
color:#9D9264;
text-decoration:none;
}
a.goldlinks:hover{
font-size:10px;
color:#9D9264;
text-decoration:underline;
}
.artistlinks{
font-size:10px;
color:#FFFFFF;
padding-top: 8px;
text-align:left;
}
a.artistlinks{
font-size:10px;
color:#FFFFFF;
text-decoration:none;
}
a.artistlinks:hover{
font-size:10px;
color:#FFFFFF;
text-decoration:underline;
}
#topnavright{
width: 360px;
height: 30px;
float:right;
padding-top: 0px;
color:#FFFF00;
}
#topnavmiddle{
width: 840px;
float:right;
padding-top: 0px;
padding-left: 0px;
text-align:left;
color:#9D9264
}
.topnavmiddle{
font-size:12px;
color:#9D9264;
padding-top: 8px;
text-align:left;
}
a.topnavmiddle{
font-size:12px;
color:#9D9264;
text-decoration:none;
}
a.topnavmiddle:hover{
font-size:12px;
color:#FFFFFF;
text-decoration:underline;
}
#topnavleft{
width: 140px;
height: 30px;
color:#FF99FF;
text-align:left;
padding-left: 1px;
padding-top: 15px;
float:left;
}
#navlist li
{
display: inline;
list-style-type: none;
font-size: 12px;
color:#9D9264;
text-align:left;
font-weight:bold;
}
a.navlist{
list-style-type: none;
font-size: 12px;
color:#9D9264;
text-decoration:none;
}
a.navlist:hover{
font-size: 12px;
color:#FFFFFF;
text-decoration:none;
}
#navlistcheckout li
{
display: inline;
list-style-type: none;
font-size: 12px;
color:#FFFFFF;
text-align:left;
font-weight:bold;
}
a.navlistcheckout{
list-style-type: none;
font-size: 12px;
color:#FFFFFF;
text-decoration:none;
}
a.navlistcheckout:hover{
font-size: 12px;
color:#9D9264;
text-decoration:none;
}
a.bodylinks{
font-size: 12px;
color:#9D9264;
text-decoration:underline;
}
a.bodylinks:hover{
font-size: 12px;
color:#9D9264;
text-decoration:underline;
}
#backline{
width:991px;
height: 20px;
background-image:url(images/lineback.gif);
clear:both;
}

[herkalees]

This is a quick reply, but have you instead tried padding top?

[csa]

It kinda works! In IE the page now looks as I would like, however in FF the navigation now appears just under the centre and as a consequence the text Fine Art Reproductions and the image of the frame are touching the images above.

[herkalees]

Hooray for IE. I hate that browser. Keep fudging with it, and remember that padding and margin produce entirely different results in IE.

[csa]

Are us saying, there's not much else I can do in order to get this working correctly in both browsers?

The clients using FF on a Mac, so I need to make sure it looks spot on for him, however the majority of people will be looking at the site in IE.

Should I always be able to get a site working exactly as it should in both browsers? I thought the answer to this was yes.

Thanks

[herkalees]

Originally Posted by csa

Should I always be able to get a site working exactly as it should in both browsers? I thought the answer to this was yes.

This is actually debate-able. Many say it's possible to get a site to look the same in every 'major' browser on the three 'major' operating systems.

I've been doing this for years and years and I've come really close, but it is never exactly the same in all browsers.

The short answer is 'no', you can't get a site to look the same in every browser (unless it's a giant .jpg with image maps). A lot of purists say that since all browsers are different, the world needs to accept the fact that sites will render differently in them.

This doesn't give you the right to make crap code and then claim, "well, the browsers are different, so I won't bother to tighten my code up", because as I said above, it's possible to get the VERY close.

It would be like asking you to get into a porsche, take it for a spin, then hop into a pickup truck and take it for the same spin, all the while expecting the results to be THE EXACT SAME THING. The source might be the same, but the medium isn't; things will be different.