PDA

Click to See Complete Forum and Search --> : Header doesn't align in IE

iltlo
11-04-2007, 08:27 PM
I have everything working perfectly and just how I want it in FF, but in IE my header is aligned to the left, and the nav bar text is positioned a little bit off.

Site:
http://z3.invisionfree.com/SYBForums/

Just see the difference in IE and FF, and tell me if there's anyway to fix it.
Centauri
11-04-2007, 08:37 PM
Where is your doctype? - you will never get anything uniform cross-browser unless they are in standards-complient mode via a valid doctype.
iltlo
11-04-2007, 08:53 PM
Well it's a invision free forum, so I can't change what's on the site. All I have access to is the style sheet for the page.
iltlo
11-04-2007, 08:56 PM
Ohhh wait, I got it working now. Now there's just one problem:

In IE, the nav bar text is like 20 pixels too high. How do I solve that?
Centauri
11-04-2007, 09:10 PM
I just noticed that your coding for the container and header divs is in the wrong place - it should come after the <body> tag, right before the first table. At the moment it is in the <head> section, so I am surprised it works at all.

Try moving that to the correct place, and see how it compares then.
iltlo
11-04-2007, 09:25 PM
Doesn't CSS go in the head section?

Oh nvm I see it, I'll try and move it out of there.
iltlo
11-04-2007, 09:31 PM
Nope, still not working
Centauri
11-04-2007, 09:33 PM
Nearly there - a couple of rel links need to go back inside the <head> and the divs need to go further down after the <body> tag :
<base href="http://127.0.0.1/" />
<link rel="shortcut icon" href="http://somewhereyoubelong.com/images/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="http://somewhereyoubelong.com/images/favicon.ico" type="image/vnd.microsoft.icon">
</head>

<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" alink="#000000" vlink="#000000"><body text="#000000" link="#000000" vlink="#000000" alink="#000000" leftmargin="2" topmargin="2" marginwidth="2" marginheight="0">
<div id="container">
<div id="header">
<ul>
<li><a href="http://somewhereyoubelong.com/index.html">Home</a></li>
<li><a href="http://somewhereyoubelong.com/albums.html">Songs</a></li>

<li><a href="http://somewhereyoubelong.com/videos.html">Videos</a></li>
<li><a href="http://somewhereyoubelong.com/artwork.html">Artwork</a></li>
<li><a href="http://somewhereyoubelong.com/forum">Forum</a></li>
<li><a href="http://somewhereyoubelong.com/links.html">Links</a></li>
<li class="last"><a href="http://somewhereyoubelong.com/contact.html">Contact</a></li>
</ul>

</div></div>



<table width="800" bordercolor="#000000" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000" height="377">
Centauri
11-04-2007, 09:42 PM
Ok, that has made it easier to run my developer toolbars on it. FF has a default margin on <ul>s (and I think IE does too, but it stuffs up margin-collapse), so getting rid of the margin and adjusting the top value should fix it :#header ul{
position:absolute;
top:255px;
display:block;
left:120px;
color:#7f8282;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: none;
margin:0;
}
iltlo
11-05-2007, 03:38 PM
Ok, is everything good now? It looks good :)

Ok, one problem actually:

In IE, the text is about 50 or so pixels to the left. It's only slightly noticable but if it's fixable I might as well fix it.
Centauri
11-05-2007, 04:22 PM
This is a default padding that FF uses to indent lists (IE uses margin), so the padding needs to be zeroed as well :#header ul{
position:absolute;
top:255px;
display:block;
left:120px;
color:#7f8282;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: none;
margin:0;
padding:0;
}
This will place the menu in the same place as IE, so you may want to add to the left dimension to move it where you want it.
iltlo
11-05-2007, 04:30 PM
Thanks a lot man :)

Now it's perfect!