...

View Full Version : Positioning Problem in ie6



MadMad
05-15-2011, 08:00 PM
First, I want to say you guys have helped me out so much, thanks for always taking the time to answer my questions. I've been working on individuallywrappedgourmet.com and just realized the header section is completely deformed in ie6. Ive got some absolute positioning in it and I believe that is the cause, but haven't figured out a way around it. Has anyone else figured out a fix in their experience? If you can take a look at the code, it would be much appreciated.

SKY-ProToSs
05-15-2011, 08:40 PM
First, I want to say you guys have helped me out so much, thanks for always taking the time to answer my questions. I've been working on individuallywrappedgourmet.com and just realized the header section is completely deformed in ie6. Ive got some absolute positioning in it and I believe that is the cause, but haven't figured out a way around it. Has anyone else figured out a fix in their experience? If you can take a look at the code, it would be much appreciated.

I'd have to take a look at your css.

When you position absolute, you want to wrap those div elements inside of a container div with position relative. I am unsure of the actual problem. It could be many issues, including margin, padding, etc..

If you make a container div for your header that is position relative, it wont matter what browser you use, it will display it the same. Because your position relative div becomes your new body for every element inside of it. You need to show the code and I'll take a look. :P

MadMad
05-15-2011, 09:24 PM
ok here is the html



<div id="header">
<div id="navbar"> </div>

<div id="bokeh">
<div id="headerwrap">
<div id="logotop"> <a href="index.html"> <img src="images/logotag.png" alt="Individually Wrapped Gourmet"/> </a> </div>
<div id="topnav">
<ul>
<li> <a href="services.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('services','','images/servicesrollover.png',1)"><img src="images/services.png" alt="See What We Do" name="services" width="143" height="80" border="0" id="services" /></a> </li>
<li> <a href="gallery.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('gallery','','images/galleryrollover.png',1)"><img src="images/gallery.png" alt="See Our Events" name="gallery" width="143" height="80" border="0" id="gallery" /></a> </li>
<li> <a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contactrollover.png',1)"><img src="images/contact.png" alt="Get In Touch" name="contact" width="143" height="80" border="0" id="contact" /></a> </li>
</ul>
</div>
</div>
</div>
</div>


and the css



#header {
background-image:url(../images/topgradient.png);
background-repeat:repeat-x;
width:100%;
height:267px;
margin:0 auto;
position:relative;
}

#headerwrap {
background:none;
height:267px;
width:940px;
margin:0 auto;
position:relative;
}



#bokeh {
background-image:url(../images/bokeh.png);
background-repeat:repeat-x;
height:267px;
margin:0 auto;
position:relative;
}

#logotop {
background-image:none;
width:462px;
height:209px;
position:absolute;
margin-left:-55px;
z-index:50;
}

#navbar {
background-color: #0d0000;
width:100%;
height: 80px;
position:absolute;
margin-top:66px;
z-index:30;
}



#topnav {
position: absolute;
z-index:40;
margin-top:66px;
margin-left:350px;
}

#topnav li {
list-style-type:none;
display:inline;
}

#topnav li a {
text-decoration:none;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum