homepage Welcome to WebmasterWorld Guest from 174.129.103.100
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
IE6 Absolute Positioning problem
cyberpunkstudio




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

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




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

Welcome to WebmasterWorld!

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

cyberpunkstudio




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

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

Do you have any solutions to my problem?

swa66




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

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




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

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




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

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




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

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




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

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




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

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




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

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




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

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

Hope you can help

LouiseMarie




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

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




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

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




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

glad you figured it out :D

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved