SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict shad0w's Avatar
    Join Date
    Aug 2003
    Location
    PA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Missing borders in IE6...

    http://www.qubitdesigns.com/temp/ele...h/old/faq.html

    View that page in Firefox, then view it in Internet Explorer.

    All the items in the list should have a 1 pixel border running across the bottom. In internet explorer, these borders simply don't show up. Also, if you notice in the top orange-yellow box, the top border doesn't show up in IE, even though it's defined simply as border: 1px solid...

    Also, I created some styling for images and captions, but internet explorer refuses to display the padding or the borders on those images (yes, I know the image is broken).

    I have a feeling that this has something to do with IE's broken box model, but I'm not sure where to go from there. Can anyone help me out?

    Thanks in advance and any help is greatly appreciated.

  2. #2
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I can't figure what's the problem, but setting a background-color on li will make IE to render it.

    background-color: #FFF;

    It's a bug or another property is causing some problems to IE.

    Good luck.

  3. #3
    SitePoint Addict shad0w's Avatar
    Join Date
    Aug 2003
    Location
    PA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by beanon View Post
    Hi,

    I can't figure what's the problem, but setting a background-color on li will make IE to render it.

    background-color: #FFF;

    It's a bug or another property is causing some problems to IE.

    Good luck.
    Thanks! That fixed the border problem for the lists, but still doesn't solve the problem with borders not showing up on the intro paragraph, or on the images with image captions. Well I guess that's 1 down and 2 more to go :P Anyone have suggestions for the other problems?

  4. #4
    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,

    Its a "haslayout" issue where you have wrapped content in containers that don't have "layout". Where possible you should provide a dimension for any container that holds more than the simplest of content or "layout" issues will be sure to follow.

    Code:
    div#body {
        position: relative;
    width:100%
    }
    See the faq on "haslayout" for more info and fixes.

  5. #5
    SitePoint Addict shad0w's Avatar
    Join Date
    Aug 2003
    Location
    PA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    HI,

    Its a "haslayout" issue where you have wrapped content in containers that don't have "layout". Where possible you should provide a dimension for any container that holds more than the simplest of content or "layout" issues will be sure to follow.

    Code:
    div#body {
        position: relative;
    width:100%
    }
    See the faq on "haslayout" for more info and fixes.
    Thanks for the help!

    Unfortunately I'm at a loss as to why forcing the body div into "haslayout" pushes the content in the center column downward. I looked through your has layout FAQ, but is there anything else I can do other than look for elements that don't "havelayout"? You can see an actual page where I'll be using the design here:

    http://www.qubitdesigns.com/temp/ele.../FAQ.aspx.html

    As you can see, in IE, the content is pushed down a few hundred pixels.

    I hate to lump in some more problems, but my wonderful suckerfish menus also break in IE when I switch to an XHTML doctype. For now, to keep compatibility, I've just stayed with an HTML doctype, but I really need this to be XHTML (I know that it doesn't validate right now, but the validation problems are mostly with <img> and <br> tags which can easily be fixed.)

    Thanks, and again, any help is greatly appreciated.

  6. #6
    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 is probably that ie thinks 100&#37; is to wide as it will round the odd pixel up.

    Try something like this to offset it.

    Code:
    div#body {
        position: relative;
     width:100%;
        float:left;
        margin:0 -1px
    }
    You may also want to add this otherwise IE will drop the middle column when it meets that big image in the centre. Its not an ideal solution but it will stop the column from dropping.

    Code:
    * html div#body {overflow:hidden}
    For the suckerfish menu try adding this:

    Code:
    ul#navlist li li a { display: block; }

  7. #7
    SitePoint Addict shad0w's Avatar
    Join Date
    Aug 2003
    Location
    PA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much! You've saved me literally hours of work.

    Just a suggestion, but would you ever consider writing an article about how to tackle problems with CSS in IE?

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    The FAQ's at the top of the CSS forum have a heap of good info - Paul's been busy writing all about IE fixes and 'haslyout' - happy reading.

    Paul, add #thread_title_171943 {font-size: 200&#37;;} to the CSS


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
  •