SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 Layout Problems

    Hey there, I'm having difficulty identifying the problem I'm having with the layout of my site in IE6. From what I can tell from Browsershots, it's working ok in IE7.

    I'm not sure I can post all the code here, it'd probably be a bit overwhelming - but please, if I need to, let me know.

    If not, the offending site is here. I can't see a double-margin float bug, or an expanding box... argh, I just can't pin it down

    Please help!

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, I'd fix the problems that the validator explains

    http://validator.w3.org

    Most of these are because you're not self closing tags and they're therefore having a knock on effect.

    These probably won't fix the problem but they'll certainly rule out there being any problems in the HTML.

    Also, you don't really need to use an extra <div> to get around the double-margin bug in IE. If you use display: inline; at the end of the styles which include the float and the margin then this will snap IE6 back into place and have no adverse affect on other browsers

    If you fix those problems with the HTML first though then it'll be easier to find the problem in the CSS

  3. #3
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by csswiz View Post
    First, I'd fix the problems that the validator explains

    http://validator.w3.org

    Most of these are because you're not self closing tags and they're therefore having a knock on effect.
    Hey, thanks for getting back to me so quick. Am I being dense? I thought I'd made sure I had the site validated before I posted it up in here, because I guessed that would be the first thing anyone suggested. What're you seeing that I'm not?

    Quote Originally Posted by csswiz View Post
    Also, you don't really need to use an extra <div> to get around the double-margin bug in IE. If you use display: inline; at the end of the styles which include the float and the margin then this will snap IE6 back into place and have no adverse affect on other browsers
    Great stuff! I'm very happy about that!

    So - just IE6 layout issues, and now just noticed a Safari issue with the fieldset border... Any further suggestions?

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry about that, I've just validated and it works fine... I'd downloaded the page and was using that so presumably something was amiss in the transfer but seems odd (unless you've fixed the HTML errors?).

    I suspect that it's the way that you're using negative margin's so I'd try removing them and readjusting the width to see if it fixes the problem (just for debugging purposes.) Personally I'd probably have done the background as an image and then made the container slightly larger than this so that I could do the overlap without the need for negative margin's so that may be an option.

    For styling fieldset's and legends, John has a great article on this here

    http://www.tyssendesign.com.au/artic...ends-of-style/

    Both have problems with styling cross browser, even in modern browsers so using a <div> and <span> are a much tidier solution.

    Hope that helps.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The problem in iE is that you are placing inner elements that are bigger than their parents container. Firefox ignores the overflow but IE stretches the parent to accomodate the extra width.

    Therefore you need to use a different approach to satisfy both.

    Something like this:

    Code:
    div#title {
        width:769px; 
        height:155px; 
        margin: 0 ;
        z-index:100;
        position:relative;
    }
    * html div#title img{
        position:absolute;
        left:-14px;
        top:0;
    }
    #right_sidebar {
        float:right;
        display:inline;
        margin: 65px -55px 0 0;
        width:255px;
        position:relative;
      
    }
    
    
    
    #menu {
        float:left;
        display:inline;
        margin: 2px 0 0 10px;
        padding: 19px 0 0 1px;
        width:107px;
        height:172px;
        background: url(http://www.designbygecko.com/SonicRoar/images/nav_tab.png) no-repeat 0 0;
        list-style: none outside;
        overflow:hidden;
    }
    That should fix the major issues

  6. #6
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's a huge help! I get what you're saying about building things the right size - I'll do that from the start next time.

    That should fix the major issues
    Indeed it does - now I know I'm chancing my luck here, but could you help me with some pernickity smaller problems?

    The list-in-a-list descendant selector thing has me going round in circles - my ul.feed has a ul#dates in it, and I'm only getting the #dates list-style-images coming up.

    Second little problem is the content of my #right_sidebars won't position consistently across browsers - anybody got any clues?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HIi,

    The list image disappears because of the width on ul#feed and is a bug in IE where it loses the bullet when the element has layout.

    You will need to remove the width from the ul and wrap a div around the whole UL and apply the width to that.

    Code:
    #feedwrap{width:380px}
    #feed {   
    /* width removed*/
    margin:0;
    padding:0 0 0 40px;
    }

    Code:
    <div id="feedwrap">
     <ul id="feed">
         <li>
    .......etc.
    ....
    ...
     </ul>
    <div>
    For the second problem move the text-align:center form the ul and into the list instead because IE was centering the nested block child when it shouldn't .

    Code:
    ul#latest_releases {
        background: url(http://www.designbygecko.com/SonicRoar/images/latest_releases_cont.jpg) repeat-y;
        margin: 0;
        padding: 0;
    /* text-align:center removed */
    }
    ul#latest_releases li {
        list-style-type: none;
        width: 150px;
        border-bottom: 1px solid #000;
        padding: 10px;
        margin: 0 0 0 24px;
     text-align:center
    }

  8. #8
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow - that was both succinct and impressive. Thanks so much for your help. If I was being paid for this I'd feel like giving you your cut. But a cut of nothing is still nothing, sorry about that!


Bookmarks

Posting Permissions

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