SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Jul 2002
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question IE6 box-model hack not working?!!

    Page in question: http://northshoredesign.com/donnersmith/events.html

    Box model in question: the sign-up box in the left column, beneath the nav.

    HTML for box:

    <div id="signup">Sign-up to receive updates of our schedule.</div>
    <div id="disclaimer">We will only use your email address to send you occasional updates of our schedule or other information about Donnersmith Studios. We will never allow your address to be used by any other person or organization for any purpose.</div>


    Corresponding CSS used:

    #signup {
    margin: 34px 0 0 15px;
    padding: 10px 12px 11px 26px;
    border-style: solid;
    border-width: 1px 1px 0 1px;
    border-color: #B5ADA1;
    width: 140px;
    font-size: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    line-height: 15px;
    color: #C47B1C;
    }

    * html div#signup {
    width: 180px;
    w\idth: 140px;
    }

    #disclaimer {
    margin: 0 0 40px 15px;
    padding: 15px 12px 14px 26px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #B5ADA1;
    width: 140px;
    font-size: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    line-height: 15px;
    color: #756357;
    }

    * html div#disclaimer {
    width: 180px;
    w\idth: 140px;
    }

    Using SBMH hack, as outlined here:
    http://www.info.com.ph/~etan/w3panth...ifiedsbmh.html

    According to the SBMH hack test page (http://www.info.com.ph/~etan/w3panth...dsbmhtest.html), the Win IE6 browser that I'm having the problem with does have the requisite star-html bug, which, as far as I can tell, means that the CSS shown above should work for my site.

    Nonetheless, I'm still ending up with a box that displays at the proper 180px width (border to border) in IE5 Mac, Netscape 7 Mac & Win, and Safari, but at 140px wide in IE6 Win. After a couple hours of troubleshooting, I just can't figure it out. Endless praise to those among you who can, and are willing to share the solution with me.

    Thanks in advance.

    -Jon

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

    The problem is that you are using the xml prologue which makes ie6 run in quirks mode and use the broken box model.

    This line:
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    Its optional anyway so just leave it out and your page will work fine. (just make sure the character encoding is in the meta tag (which it is)).

    If you want to keep the xml prologue in your code (although you only need it unless your using xml etc.) then you will need to change the way the hack works.

    In quirks mode ie6 uses the broken box model just like ie5 and 5.5 do all the time (in any mode). However ie6 understands the backslash character of course and feeds itself back the incorrect value. So just feed ie5 - ie6 the same dimensions and everything should be fine.
    Code:
    * html div#signup {
    width: 180px;
    /*w\idth: 140px;*/
    }
    Hope that makes sense.

    Paul

  3. #3
    SitePoint Addict
    Join Date
    Jul 2002
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dropping the XML prolog did the trick. Thanks a bunch.

    Since you passed that test with flying colors, perhaps you can help me with this one: I added a small graphic to the box: an orange/white arrow that appears immediately to the left of the first line of text in the box. The bottom of the image currently sits on that line of text's baseline; how can I make it so that the arrow is vertically centered on the middle of the line of text (which necessitates the bottom edge of the image dropping slightly below the baseline)?

    The CSS rule that currently controls the image is this:

    #signup img {
    margin: 0 4px 0 -15px;
    }

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

    Try this:

    Code:
    #signup img {
    margin: 0 4px 0 -15px;
    vertical-align:middle;
    }
    Paul

  5. #5
    SitePoint Addict
    Join Date
    Jul 2002
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh. Duh. I guess that's what happens when one doesn't sleep enough.

    Thanks again, Paul. I really appreciate you taking the time to help.


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
  •