SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    790
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Looks Wacky In IE6 (Margin Problem?)

    Here is a link to the site...

    http://www.securehostserver.info/prime/

    The problem is the phone number area and tagline near the top right which I have highlighted in red as shown here...

    http://www.securehostserver.info/prime/i/ie.jpg

    I have the HTML written like this:
    Code:
    <h2 class="description">Refined Home Remodeling</h2>
            <h2 class="contact-info">Call today for a free estimate (865) 254-1750</h2>
    And the CSS for that area looks like this:
    Code:
    h2.description 									{ height: 20px; width: 239px; margin: 26px 0px 0px 344px; background: url(../i/gfx_sprite.png) no-repeat -682px -47px; }
    h2.contact-info 								{ height: 45px; width: 190px; margin: 0px 0px 0px 393px; background: url(../i/gfx_sprite.png) no-repeat -731px -67px; }

    Can someone tell me what I can do to fix this issue?
    Thank you in advance!

    Todd
    Todd Temple > T2 Design

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

    It's the expanding box bug and the double margin float bug.

    Add this:

    Code:
    h2.description, h2.contact-info {
        overflow:hidden;/* make sure small height doesn't overflow*/
        display:inline;/* fix double margin bug*/
    }
    IE6 has a double margin bug on the side of any float that is adjacent to the containing block and the margin on that side doubles in error. Adding display:inline is a nonsense fix because it should have no effect but fortunately it cures the bug.

    The expanding box bug is that IE6 will always expand a container to holds its contents. In your case the height of 20px is less than the current font-size/ line-height so IE stretches the container to accommodate. The overflow:hidden makes sure that the height is cut off at 20px as designated.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Arnhem, The Netherlands
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not exactly sure because I don't have IE6 on this machine, but you forgot to mention that there is also this in your stylesheet:

    Code CSS:
    h1.logo, h2.description, h2.contact-info {
        display: block;
        float: left;
        padding: 0;
        text-indent: -9999px;
    }

    And because your h2.contactinfo has a margin-left you may be a victim of the IE6 double margin bug. What happens if you give the h2.contactinfo a display:inline declaration?

    Off Topic:

    I don't know if it's a good idea to make a sprite like that.


    Edit: whoa, there actually is an OT tag

    Edit #2: beaten by the master...

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Hueij View Post

    Off Topic:

    I don't know if it's a good idea to make a sprite like that.
    I don't think it's too bad to put everything in a sprite as long as you keep track where everything is and compact it as much as possible. It's certainly better for the server to have one call rather than multiple etc and usually a big sprite is a smaller size than the sum of its parts.

    It may be easier to manage with a few sprites but one sprite is the most optimised way to do it. I suppose it depends whether you have hundreds of images to manage.

    Edit: whoa, there actually is an OT tag
    lol - took me years to find it also

    Edit #2: beaten by the master...
    At least we were both on the same track

  5. #5
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    790
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It's the expanding box bug and the double margin float bug.
    I have never heard of the expanding box bug. Thats a new one!

    Any ideas on why the slideshow is not showing up?
    Todd Temple > T2 Design

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Arnhem, The Netherlands
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I don't think it's too bad to put everything in a sprite as long as you keep track where everything is and compact it as much as possible. It's certainly better for the server to have one call rather than multiple etc and usually a big sprite is a smaller size than the sum of its parts.

    It may be easier to manage with a few sprites but one sprite is the most optimised way to do it. I suppose it depends whether you have hundreds of images to manage.
    Oh, I totally agree with you on this, but every element in the sprite used here is in the exact same position as it is on the page. I mean, you could just as well use your Photoshop mock-up (or Fireworks in my case) and save it wholesale (is this correct English?) as a sprite.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Hueij View Post
    Oh, I totally agree with you on this, but every element in the sprite used here is in the exact same position as it is on the page. I mean, you could just as well use your Photoshop mock-up (or Fireworks in my case) and save it wholesale (is this correct English?) as a sprite.
    Ok, I see what you mean Yes you would usually fill all the spaces up with sprites etc rather than having it laid out like a photoshop page. I suppose some people could go overboard with that approach. I always try to fill all the gaps with something unless the gap is there for a reason.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Todd Temple View Post
    I have never heard of the expanding box bug. Thats a new one!

    Any ideas on why the slideshow is not showing up?
    Slideshow seems to be working for me. Is it a specific browser?

  9. #9
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    790
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I also do not have a machine running IE6 so I am relying on Adobe Browser Lab and it displayed no slideshow, just a white background area.

    As for the sprites... I am still learning guys. I will try to close up some of the space in future instances of making my sprites... Little by little I am learning more. Bear with me.
    Todd Temple > T2 Design

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Todd Temple View Post
    I also do not have a machine running IE6 so I am relying on Adobe Browser Lab and it displayed no slideshow, just a white background area.

    As for the sprites... I am still learning guys. I will try to close up some of the space in future instances of making my sprites... Little by little I am learning more. Bear with me.
    Seemed to work in my IE6 although there's a slight delay so browserlabs probably took a shot before the page had finished loading.


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
  •