SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    New to CSS design; can you help with MSIE bugs?

    This is my first all-CSS site. Looks good in all browsers except MSIE 5 and 6. Could someone please advise me on what to change so that it looks acceptable in MSIE 5 and 6? Thanks!


    http://www.toprival.com/temp/css_site

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Hi RedBall,

    I'll reply in bits and pieces if that's ok..
    You've done the right thing in designing for Firefox first - good job
    IE 6 and below doesn't support 1px dotted borders... I know..
    So that's why they appear dashed, you will need to deliver either a 2px border to IE or use background images instead.

    I noticed you have used
    Code:
    * html #menu { padding-right: 0; }
    I'm not sure if you understand what this does but any CSS selectors with '* html' before it are only understood by IE 6 and below.

    So typically you can deliver specific CSS rules like
    Code:
    #example { /* Good browsers */ }
    * html #example { /* dodgy IE browsers */ }
    more later...

  3. #3
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! Actually, after I learned the gist of how to build a site with CSS, I noticed that my menus would only rollover if you moused over the text, and not the button itself. So I copied someone else's menu that worked better. I haven't yet looked carefully at what the difference is between the two methods. That one line you pulled out has something to do with a MSIE bug, but I don't yet understand it.

  4. #4
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm used to using dotted background images to make vertical divider lines when I build a site with tables; as long as you have at least an invisible pixel in the table cell, the repeating background pattern will fill the entire height of the table cell, and the table cell will automatically be as tall as the table cells to its left or right...

    But with CSS, the divs are independent of each other. If I make a separate div for a vertical divider line, the div will only be as tall as the content inside it, and it has no content. How do you solve that?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    If I make a separate div for a vertical divider line, the div will only be as tall as the content inside it, and it has no content. How do you solve that?
    You nest both divs inside a parent and the parent has the image applied to it and not the individual div. In that way as either element expands the parent also expands and the divider will increase also.

    The right column in this example is a background image repeated on the parent.

    http://www.pmob.co.uk/temp/2colblog.htm

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Most of your problems in the link above can be fixed with theese 2 lines:
    Code:
    .left { width: 434px; float: left; margin: 0 0 10px 20px;display:inline }
    
    .right { width: 180px; float: right; margin: 0 20px 10px 0; padding-left: 15px; border-left: 1px solid #ddd;display:inline }
    Its the IE double margin bug on the outside side edge of outer floats. See the faq on floats for an explanation

  7. #7
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You nest both divs...
    Wait—what two divs are we talking about? I just mentioned one; the vertical divider line div. And thanks for the help.

  8. #8
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Most of your problems in the link above can be fixed with theese 2 lines:
    Code:
    .left { width: 434px; float: left; margin: 0 0 10px 20px;display:inline }
    
    .right { width: 180px; float: right; margin: 0 20px 10px 0; padding-left: 15px; border-left: 1px solid #ddd;display:inline }
    Its the IE double margin bug on the outside side edge of outer floats. See the faq on floats for an explanation
    THANK YOU! That nailed it!

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    wait—what two divs are we talking about? I just mentioned one; the vertical divider line div.
    You mentioned each other here which seems to refer to more than one
    But with CSS, the divs are independent of each other. If I make a separate div for a vertical divider line, the div will only be as tall as the content inside it, and it has no content. How do you solve that?
    As I said above if you want an element to match other element then there is no way to find the height of both unless they are both contained within a parent that stretches with either one.

    If you wanted a divider between two divs then you wrap both divs in a parent div and apply a repeating background image to the parent div to give the illusion of equalization.

    Maybe I misunderstood the question

  10. #10
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see. Thanks!


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
  •