Looks Wacky In IE6 (Margin Problem?)

HTML & CSS
1

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:

<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:

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

2

Hi,

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

Add this:


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

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:

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 :rofl:

Edit #2: beaten by the master…

4

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 :rofl:

lol - took me years to find it also :slight_smile:

Edit #2: beaten by the master…

At least we were both on the same track :slight_smile:

5

I have never heard of the expanding box bug. Thats a new one!

Any ideas on why the slideshow is not showing up?

6

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

Slideshow seems to be working for me. Is it a specific browser?

8

Ok, I see what you mean :slight_smile: 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.

9

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.

10

Seemed to work in my IE6 although there’s a slight delay so browserlabs probably took a shot before the page had finished loading.