Margin top IE

csa · #1 Apr 5th, 2006, 10:06

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 · #2 Apr 5th, 2006, 11:46

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

csa · #3 Apr 5th, 2006, 13:20

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 · #4 Apr 5th, 2006, 14:47

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

csa · #5 Apr 5th, 2006, 15:40

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 · #6 Apr 6th, 2006, 03:45

Quote:

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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Web page margin	dhall	Website Planning	1	Sep 2nd, 2007 04:23
Odd little image margin in FF	Zonglars	Web Page Design	8	Jul 24th, 2007 20:48
Strange Padding/Margin	MaxCurrent	Web Page Design	2	Jul 24th, 2007 10:36
Why am I getting a margin when not specified	AdRock	Web Page Design	4	Mar 14th, 2007 22:06
margin?	nasumaru	Web Page Design	14	Jan 30th, 2007 21:52

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Margin top IE