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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Gap after Navigation in IE6

    Hi folks, this is totally buggin me.

    I have a ul wich is my navigation. then after theres a div with a background image. In all browsers it works, except in ie6, i get a gap between the navigation and div.

    heres my site: website

    heres the problem (only ie6): PROBLEM IN IE6

    my html:
    Code:
    <div id="page-wrap">
        
    <!--HEADER-->
    
            <h4 id="logo">Auberge L'Aghjalle</h4>
    
            <ul id="nav">
            <li class="auberge"><a href="index.html">Auberge</a></li>
            <li class="chambres"><a href="chambres.html">Chambres</a></li>
            <li class="gite"><a href="gite.html">Gite</a></li>
            <li class="contact"><a href="contact.html">Contact</a></li>
            </ul>
            
            <div id="header2"></div>   
            
    <!--CONTENT-->
    my css:
    Code:
    @charset "utf-8";
    /* CSS Document */
    * {
            margin: 0;
            padding: 0;
            }
    
    body { 
            background: url(images/bg.jpg) center repeat;
            }
    
    ul { 
            list-style: none inside; 
            }
            
    h1 {
            font-style: italic;
            padding-top: 40px;
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 1.4em;
            color: #334228;
            }
    
    h2 {
            font-style: italic;
            padding-bottom: 10px;
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 1.2em;
            color: #334228;
            
            }
    
    h3 {
            font-style: italic;
            padding-top: 20px;
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 1.0em;
            color: #334228;
            
            }
    
    h4 {
            font-style: italic;
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 1.0em;
            color: #334228;
            
            }
            h4#logo {
                    width: 900px;
                    height: 85px;
                    background: url(images/header1.jpg) no-repeat;
                    text-indent: -9999px;
                    }
    
    h5 {
            font-style: italic;
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 1.0em;
            color: #334228;
            
            }
                            
    p {
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 1.0em;
            color: #53311C;
            padding-left: 10px;
            
            }
    
    .room {
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 0.9em;
            color: #53311C;
            
            }
    
    .english {
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 0.7em;
            color: #334228;
            font-style: italic;
            padding-top: 5px;
            
            }
    
    #page-wrap {
            width: 900px;
            height: 900px;
            margin: 0 auto;
            }
            
            #header2 {
            height: 57px;
            width: 450px;
            background:url(images/header2.jpg) top left no-repeat;
            font-size:1px;
            display: block;
            overflow: hidden;
            
            }
            
            #content-header {
            height: 83px;
            width: 900px;
            background:url(images/main_01.jpg) top left no-repeat;
            display: block;
            padding-left: 60px;
            overflow: hidden;
            
            }
            
            #content-main1 {
            height: 197px;
            background:url(images/main_02.jpg) top left no-repeat;
            display: block;
            padding-left: 60px;
            padding-right: 250px;
            overflow: hidden;
            
            }
                    
            .floatLeft { 
        float: left;
            border:none;
            
                    }
                    
            .floatRight { 
        float: right;
            
                    }
                    
            #content-main2 {
            height: 355px;
            background:url(images/main_03.jpg) top left no-repeat;
            display: block;
            padding-left: 60px;
            padding-right: 50px;
            overflow: hidden;
    
            }
    
            #content-footer {
            height: 123px;
            background:url(images/main_04.jpg) top left no-repeat;
    
            }
    
    .sub-left {
            padding-top: 20px;
            padding-left: 20px;
            width: 360px;
            float: left;
            
            }       
            
    .down{padding-top: 10px;}
            
    .clear-both {
            clear: both;
    }
    
    a.rollover1 {
            display: block;
            width: 120px;
            height: 120px;
            text-decoration: none;
            background: url(images/img/room1.png) no-repeat;
            float:left;
            margin-left: 10px;
            margin-right: 10px;
    
            }
    
    a.rollover1:hover {
            background-position: bottom;
    
            }
    
    a.rollover2 {
            display: block;
            width: 120px;
            height: 120px;
            text-decoration: none;
            background: url(images/img/room2.png) no-repeat;
            float:left;
            margin-left: 10px;
            margin-right: 10px;
    
            }
    
    a.rollover2:hover {
            background-position: bottom;
    
            }
            
    a.rollover3 {
            display: block;
            width: 120px;
            height: 120px;
            text-decoration: none;
            background: url(images/img/room3.png) no-repeat;
            float:left;
            margin-left: 10px;
            margin-right: 10px;
    
            }
    
    a.rollover3:hover {
            background-position: bottom;
    
            }
    
    a.rollover4 {
            display: block;
            width: 120px;
            height: 120px;
            text-decoration: none;
            background: url(images/img/room4.png) no-repeat;
            float:left;
            margin-left: 10px;
            margin-right: 10px;
    
            }
    
    a.rollover4:hover {
            background-position: bottom;
    
            }
            
    #images {
            width:850px;
            padding-left: 10px;
            padding-top: 20px;
            
            }
            #images img {
                    margin-right: 15px;
                    border: solid;
                    border-color: white;
                    border-width: 3px;
                    
                    }
                    
                    #images a:hover img {
                            border: solid;
                            border-color: #334228;
                            border-width: 3px;
                    
                            }
    
    ul#nav {
    
            }
            ul#nav li {
                    display: inline;
            
                    }
                    ul#nav li a {
                            display: block;
                            height: 57px;
                            text-indent: -9999px;
                            border:0;
                            float:left;
                            
                            }
                            ul#nav li.auberge a {
                                    width: 127px;
                                    background:url(images/nav/nav-auberge.jpg) bottom center;
                                    }
                            ul#nav li.chambres a {
                                    width: 121px;
                                    background:url(images/nav/nav-chambres.jpg) bottom center;
                                    }
                            ul#nav li.gite a {
                                    width: 77px;
                                    background:url(images/nav/nav-gite.jpg) bottom center;
                                    }
                            ul#nav li.contact a {
                                    width: 125px;
                                    background:url(images/nav/nav-contact.jpg) bottom center;
                                    }
                            
                            ul#nav li a:hover {
                                    background-position: top center;        
                                    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Adding float:left; to #nav and dropping width from #header2 may fix it, though I'd recommend you to avoid slicing that image into two. Use it as a single image and apply as the background of a <div> and use absolute position to place it over there.

    PS: Nice design!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Banned
    Join Date
    Jul 2010
    Posts
    66
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by universe123 View Post
    Hi folks, this is totally buggin me.

    I have a ul wich is my navigation. then after theres a div with a background image. In all browsers it works, except in ie6, i get a gap between the navigation and div.

    heres my site: website

    heres the problem (only ie6): PROBLEM IN IE6

    my html:
    Code:
    <div id="page-wrap">
        
    <!--HEADER-->
    
            <h4 id="logo">Auberge L'Aghjalle</h4>
    
            <ul id="nav">
            <li class="auberge"><a href="index.html">Auberge</a></li>
            <li class="chambres"><a href="chambres.html">Chambres</a></li>
            <li class="gite"><a href="gite.html">Gite</a></li>
            <li class="contact"><a href="contact.html">Contact</a></li>
            </ul>
            
            <div id="header2"></div>   
            
    <!--CONTENT-->
    my css:
    Code:
    @charset "utf-8";
    /* CSS Document */
    * {
            margin: 0;
            padding: 0;
            }
    
    body { 
            background: url(images/bg.jpg) center repeat;
            }
    
    ul { 
            list-style: none inside; 
            }
            
    h1 {
            font-style: italic;
            padding-top: 40px;
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 1.4em;
            color: #334228;
            }
    
    h2 {
            font-style: italic;
            padding-bottom: 10px;
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 1.2em;
            color: #334228;
            
            }
    
    h3 {
            font-style: italic;
            padding-top: 20px;
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 1.0em;
            color: #334228;
            
            }
    
    h4 {
            font-style: italic;
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 1.0em;
            color: #334228;
            
            }
            h4#logo {
                    width: 900px;
                    height: 85px;
                    background: url(images/header1.jpg) no-repeat;
                    text-indent: -9999px;
                    }
    
    h5 {
            font-style: italic;
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 1.0em;
            color: #334228;
            
            }
                            
    p {
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 1.0em;
            color: #53311C;
            padding-left: 10px;
            
            }
    
    .room {
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 0.9em;
            color: #53311C;
            
            }
    
    .english {
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 0.7em;
            color: #334228;
            font-style: italic;
            padding-top: 5px;
            
            }
    
    #page-wrap {
            width: 900px;
            height: 900px;
            margin: 0 auto;
            }
            
            #header2 {
            height: 57px;
            width: 450px;
            background:url(images/header2.jpg) top left no-repeat;
            font-size:1px;
            display: block;
            overflow: hidden;
            
            }
            
            #content-header {
            height: 83px;
            width: 900px;
            background:url(images/main_01.jpg) top left no-repeat;
            display: block;
            padding-left: 60px;
            overflow: hidden;
            
            }
            
            #content-main1 {
            height: 197px;
            background:url(images/main_02.jpg) top left no-repeat;
            display: block;
            padding-left: 60px;
            padding-right: 250px;
            overflow: hidden;
            
            }
                    
            .floatLeft { 
        float: left;
            border:none;
            
                    }
                    
            .floatRight { 
        float: right;
            
                    }
                    
            #content-main2 {
            height: 355px;
            background:url(images/main_03.jpg) top left no-repeat;
            display: block;
            padding-left: 60px;
            padding-right: 50px;
            overflow: hidden;
    
            }
    
            #content-footer {
            height: 123px;
            background:url(images/main_04.jpg) top left no-repeat;
    
            }
    
    .sub-left {
            padding-top: 20px;
            padding-left: 20px;
            width: 360px;
            float: left;
            
            }       
            
    .down{padding-top: 10px;}
            
    .clear-both {
            clear: both;
    }
    
    a.rollover1 {
            display: block;
            width: 120px;
            height: 120px;
            text-decoration: none;
            background: url(images/img/room1.png) no-repeat;
            float:left;
            margin-left: 10px;
            margin-right: 10px;
    
            }
    
    a.rollover1:hover {
            background-position: bottom;
    
            }
    
    a.rollover2 {
            display: block;
            width: 120px;
            height: 120px;
            text-decoration: none;
            background: url(images/img/room2.png) no-repeat;
            float:left;
            margin-left: 10px;
            margin-right: 10px;
    
            }
    
    a.rollover2:hover {
            background-position: bottom;
    
            }
            
    a.rollover3 {
            display: block;
            width: 120px;
            height: 120px;
            text-decoration: none;
            background: url(images/img/room3.png) no-repeat;
            float:left;
            margin-left: 10px;
            margin-right: 10px;
    
            }
    
    a.rollover3:hover {
            background-position: bottom;
    
            }
    
    a.rollover4 {
            display: block;
            width: 120px;
            height: 120px;
            text-decoration: none;
            background: url(images/img/room4.png) no-repeat;
            float:left;
            margin-left: 10px;
            margin-right: 10px;
    
            }
    
    a.rollover4:hover {
            background-position: bottom;
    
            }
            
    #images {
            width:850px;
            padding-left: 10px;
            padding-top: 20px;
            
            }
            #images img {
                    margin-right: 15px;
                    border: solid;
                    border-color: white;
                    border-width: 3px;
                    
                    }
                    
                    #images a:hover img {
                            border: solid;
                            border-color: #334228;
                            border-width: 3px;
                    
                            }
    
    ul#nav {
    
            }
            ul#nav li {
                    display: inline;
            
                    }
                    ul#nav li a {
                            display: block;
                            height: 57px;
                            text-indent: -9999px;
                            border:0;
                            float:left;
                            
                            }
                            ul#nav li.auberge a {
                                    width: 127px;
                                    background:url(images/nav/nav-auberge.jpg) bottom center;
                                    }
                            ul#nav li.chambres a {
                                    width: 121px;
                                    background:url(images/nav/nav-chambres.jpg) bottom center;
                                    }
                            ul#nav li.gite a {
                                    width: 77px;
                                    background:url(images/nav/nav-gite.jpg) bottom center;
                                    }
                            ul#nav li.contact a {
                                    width: 125px;
                                    background:url(images/nav/nav-contact.jpg) bottom center;
                                    }
                            
                            ul#nav li a:hover {
                                    background-position: top center;        
                                    }
    Check out with your padding and width because IE6 takes pixels as square
    10px in all browsers is different from 10px in IE6 so it is better to check with width padding etc and one more thing IE9 is released and IE6 Is considered to be a dead browser
    all top website stop supporting IE6 i am in confusion why still u want to have your website in IE6

  • #4
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thx alot guys, ill give absolute positioning a try.

    i know ie9 is out and ie6 is almost dead, but theres still a few pople using that old bugger.

    if that doesnt work i just leave it that way.

    cheers

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    if that doesnt work i just leave it that way.
    That should work (or let's make it work)!

    PS: You'd need to save the images as transparent pngs and apply some hacks for IE6 to get the alpha transparency.

    Edit: The way you've sliced and placed the logo in your document is also wrong. Get it as a single(transparent) image and add an <img> tag(with a proper alt attribute) to render it. In that way your document would become semantic.
    Last edited by abduraooft; 11-20-2010 at 01:25 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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