/    Sign up×
Community /Pin to ProfileBookmark

Header doesn’t align in IE

Copy linkTweet thisAlerts:
Nov 05.2007

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:
[url]http://z3.invisionfree.com/SYBForums/[/url]

Just see the difference in IE and FF, and tell me if there’s anyway to fix it.

to post a comment
CSS

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriNov 05.2007 — Where is your doctype? - you will never get anything uniform cross-browser unless they are in standards-complient mode via a valid doctype.
Copy linkTweet thisAlerts:
@iltloauthorNov 05.2007 — 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.
Copy linkTweet thisAlerts:
@iltloauthorNov 05.2007 — 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?
Copy linkTweet thisAlerts:
@CentauriNov 05.2007 — 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.
Copy linkTweet thisAlerts:
@iltloauthorNov 05.2007 — Doesn't CSS go in the head section?

Oh nvm I see it, I'll try and move it out of there.
Copy linkTweet thisAlerts:
@iltloauthorNov 05.2007 — Nope, still not working
Copy linkTweet thisAlerts:
@CentauriNov 05.2007 — 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 :
[CODE]<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">[/CODE]
Copy linkTweet thisAlerts:
@CentauriNov 05.2007 — 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 :[CODE]#header ul{
position:absolute;
top:[COLOR="Red"]255px[/COLOR];
display:block;
left:120px;
color:#7f8282;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: none;
[COLOR="Red"]margin:0;[/COLOR]
}[/CODE]
Copy linkTweet thisAlerts:
@iltloauthorNov 05.2007 — 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.
Copy linkTweet thisAlerts:
@CentauriNov 05.2007 — This is a default padding that FF uses to indent lists (IE uses margin), so the padding needs to be zeroed as well :[CODE]#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;
[COLOR="Red"]padding:0;[/COLOR]
}[/CODE]
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.
Copy linkTweet thisAlerts:
@iltloauthorNov 05.2007 — Thanks a lot man ?

Now it's perfect!
×

Success!

Help @iltlo spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...