1. Home
  2. Forums Index
  3. Browser Side / CSS 9:22 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

IE6 Absolute Positioning problem

         

cyberpunkstudio

3:08 pm on Jul 7, 2009 (gmt 0)

10+ Year Member



Hi I used absolute position to position my logo so it over laps my navigation

<snip>

However as usual in IE my logo is overlapped by the navigation for some reason.

<snip>

The HTML code: 

<div id="header">
<h1 id="logo"><a href="" title="Publishing Comics"><img src="" alt="Publishing Comics" width="203" height="195" /></a></h1>
<div id="header_banner">
<a href="" rel="external" title="Comic Book Resources"><img src="" alt="Comic Book Resources" width="728" height="90" /></a></div> 
<div id="header_network">
<a href=""><img src="" alt="Network" width="119" height="25" /></a>
</div>
<div id="header_search">
<form method="get" id="searchform" action="/"> 
<input type="text" value="" name="s" id="s" size="15" /> 
<input type="submit" id="search_submit" value="Search" /> 
</form>
</div>
</div>
 
<div id="menu_wrap">
<div id="menu">
<div id="nav_wrap">
<ul id="nav">
<li class="page_item current_page_item"><a href="" title="Home - Read our Blog">Blog</a></li>
<li class="page_item page-item-2"><a href="" title="About">About</a></li>
<li class="page_item page-item-51"><a href="" title="Create Comic Books">Create Comic Books</a></li>
<li class="page_item page-item-34"><a href="" title="Freebies">Freebies</a></li>
<li class="page_item page-item-29"><a href="" title="Store">Store</a></li>
<li class="page_item page-item-56"><a href="" title="Community">Community</a></li>
<li class="page_item page-item-31"><a href="" title="Links">Links</a></li>
</ul>
</div>
</div>
</div>

CSS code: 


div#header {
width:990px;
height:143px;
margin:0 auto;
position:relative;
background:transparent url(images/header-bk.png) no-repeat left bottom; 
}
h1#logo,
h2#logo {
position:absolute;
bottom:-80px;
left:21px;
}#menu_wrap {
height:45px;
background:url(images/menu-bk.gif) repeat-x scroll center top;
font-weight:bold;
font-size:1.5em; 
font-family:Comic Sans MS,Comic Sans, cursive;
text-transform:uppercase;
}
div#menu {
width:973px;
min-height:1%;
margin:0 auto;
padding:0;
}
div#nav_wrap {
float:right; 
height:39px; 
padding:0; 
margin:0 0 0 40px; 
}
#nav {
margin:0; 
padding:3px 0 3px 0; 
height:39px; 
list-style:none; 
white-space:nowrap; 
text-align:left; 
float:left;
}

Does any one know how to stop this in IE?

Also I noticed in IE6 there are extra margin in my elements is there a way to default so it doesnt. Or is this a IE6 margin bug?

Thanks

[edited by: swa66 at 9:45 pm (utc) on July 7, 2009]
[edit reason] No personal links allowed, please see ToS and forum charter [/edit]

swa66

9:47 pm on Jul 7, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to WebmasterWorld!

I'd first make sure my html and css fully validate, that's always a good start.

cyberpunkstudio

10:56 pm on Jul 7, 2009 (gmt 0)

10+ Year Member



Thanks, Yes I have validated it, first thing I did.

Do you have any solutions to my problem?

swa66

11:11 pm on Jul 7, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hmm, the CSS validator over at [jigsaw.w3.org...] does indeed not see any problems with "font-family:Comic Sans MS,Comic Sans, cursive; "
But I would still write it as
font-family: "Comic Sans MS", "Comic Sans", cursive;

The other one that worried me is :

h1#logo,
h2#logo {

While that's valid CSS, any single html document can only have at most *one* element with any given id.

It would help to specify what versions of IE are causing you grief. And describe the problem in a bit more detail ...

cyberpunkstudio

11:48 pm on Jul 7, 2009 (gmt 0)

10+ Year Member



Hi sorry yes I should be more clearer to what the problem is.

I have provided an image of what the website should look like in Firefox and all the other browsers:

<>

But in IE6 the logo which uses absolute positioning is overlapped by the navigation:
<>

Hope this is clear, I cant understand why it only happens in IE6. I heard I should use a negative margin but I dont really understand how.

hope you can help, thanks

[edited by: SuzyUK at 4:57 am (utc) on July 8, 2009]
[edit reason] no URIs per Charter [WebmasterWorld.com] [/edit]

DrDoc

1:54 am on Jul 8, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



A) throw a border on your logo, see if the border is overlapped as well
B1) if yes, fiddle with 
z-index

B2) if no, it's the size of the logo's container that's somehow getting messed up in IE

Are you using a full doctype? And, which versions of IE are we talking? Only IE6, or IE7/8 as well?

[edited by: DrDoc at 1:55 am (utc) on July 8, 2009]

cyberpunkstudio

10:46 am on Jul 8, 2009 (gmt 0)

10+ Year Member



I already tried using z-index but it still doesn't work :-(

I am using a full doctype: XHTML 1.0 Transitional as usual.

The problem seems to be only in IE6 and no other browsers. I hate IE6 so much makes life so difficult.

Do you have any other ideas why this maybe happening?

SuzyUK

10:55 am on Jul 8, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



ideas = Yes, it's very likely a hasLayout /position relative/ stacking order bug..

If you could post the HTML and CSS for just your header and navigation, we don't need the Logo image, just its size would be good.. also tell us the Doctype you're using please - We would be able to help you find the easiest solution for your case

thanks

sorry I didn't notice you'd already posted doctype, the code too please ;)

[edited by: SuzyUK at 10:56 am (utc) on July 8, 2009]

cyberpunkstudio

11:10 am on Jul 8, 2009 (gmt 0)

10+ Year Member



The HTML is displayed above but here it is:

[codes]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

</head>

<body>

<div id="header">

<h1 id="logo"><a href="" title="Publishing Comics"><img src="" alt="Publishing Comics" width="203" height="195" /></a></h1>
<div id="header_banner">
<a href="" rel="external" title="Comic Book Resources"><img src="" alt="Comic Book Resources" width="728" height="90" /></a></div>

<div id="header_network">
<a href=""><img src="" alt="Network" width="119" height="25" /></a>
</div>
<div id="header_search">
<form method="get" id="searchform" action="/">
<input type="text" value="" name="s" id="s" size="15" />
<input type="submit" id="search_submit" value="Search" />
</form>
</div>

</div>

<div id="menu_wrap">
<div id="menu">
<div id="nav_wrap">
<ul id="nav">
<li class="page_item current_page_item"><a href="" title="Home - Read our Blog">Blog</a></li>
<li class="page_item page-item-2"><a href="" title="About">About</a></li>
<li class="page_item page-item-51"><a href="" title="Create Comic Books">Create Comic Books</a></li>
<li class="page_item page-item-34"><a href="" title="Freebies">Freebies</a></li>
<li class="page_item page-item-29"><a href="" title="Store">Store</a></li>
<li class="page_item page-item-56"><a href="" title="Community">Community</a></li>
<li class="page_item page-item-31"><a href="" title="Links">Links</a></li>
</ul>
</div>
</div>
</div>

</body>

</html>
[/code]

The CSS: 


div#header {
width:990px;
height:143px;
margin:0 auto;
position:relative;
background:transparent url(images/header-bk.png) no-repeat left bottom;
}
h1#logo,
h2#logo {
position:absolute;
bottom:-80px;
left:21px;
}#menu_wrap {
height:45px;
background:url(images/menu-bk.gif) repeat-x scroll center top;
font-weight:bold;
font-size:1.5em;
font-family:Comic Sans MS,Comic Sans, cursive;
text-transform:uppercase;
}
div#menu {
width:973px;
min-height:1%;
margin:0 auto;
padding:0;
}
div#nav_wrap {
float:right;
height:39px;
padding:0;
margin:0 0 0 40px;
}
#nav {
margin:0;
padding:3px 0 3px 0;
height:39px;
list-style:none;
white-space:nowrap;
text-align:left;
float:left;
}

If you need anything else please let me know. Dont know why but everytime I insert an image on this forum it gets removed.

Thanks for the help

SuzyUK

12:00 pm on Jul 8, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi again.. sorry my bad, have been sending you PM's about the links/images and as mentioned in them the code isn't quite enough to recreate the problem - (check your sticky mail for more info, link beside your user name at top)

I have tried this code and it's not showing the IE6 problem, but I believe you (and I did see the screenshots shhh) and it is a known IE6 issue, just need to see exactly which bits of both your header and nav code are floated and/or relatively positioned

cyberpunkstudio

12:45 pm on Jul 8, 2009 (gmt 0)

10+ Year Member



Hi sorry I didnt notice I had messages in my inbox. I have just PM you as well.

Hope you can help

LouiseMarie

11:42 am on Jul 10, 2009 (gmt 0)

10+ Year Member



hi,

Just incase you haven't figured out a fix for this yet, I recently found out that IE6 doesn't like absolute positioned divs.

Is it possible you could change the position to relative and then use minus margins to position it in the correct place if required?

cyberpunkstudio

11:46 am on Jul 10, 2009 (gmt 0)

10+ Year Member



Hi I have discovered the problem it was acutally the IE filter that was cutting off my logo.

I did try negative margin but that just pushes everything down.

Thanks for everyones help :-)

LouiseMarie

11:48 am on Jul 10, 2009 (gmt 0)

10+ Year Member



glad you figured it out :D
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 9:22 pm May 1, 2026