Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Positioning Problem in ie6

    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.

  • #2
    Regular Coder
    Join Date
    Apr 2006
    Posts
    111
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by MadMad View Post
    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

  • #3
    New Coder
    Join Date
    Jan 2011
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ok here is the html

    Code:
    <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

    Code:
    #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;
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •