Another IE CSS problem

[jdubwelch]

My header is made in photoshop and i sliced it up into images. Then using css, I'm applying a float left class to each image to get them to line up properly. All images are wrapped inside a header div with the width set to 750 (the width of all the images together). Everything looks fine in FireFox and Safari, but not in IE.

here's the example of the header code:

[code]<div id="header">
  <img src="images/header_01.gif" alt="" width=750 height=5 class="floatLeft" />
  <img src="images/header_02.gif" alt="" width=227 height=109 class="floatLeft" />
  <img src="images_top/top001.jpg" alt="" width=352 height=109 class="floatLe" />
  <img src="images/header_04.gif" alt="" width=171 height=109 class="floatLeft" />
</div>[/code]

this is an example of the css:

[code].floatLeft {
    float: left;
}

#header {
    margin: 0px;
    padding: 0px;
    width: 750px;
}[/code]

[a href=\"http://www.jwelchdesign.com/ao/2006css/\" target=\"_blank\"]view the page[/a]
[a href=\"http://www.jwelchdesign.com/ao/2006css/styles/NEWMASTER.css\" target=\"_blank\"]view the css[/a]

[XRayden]

I know that IE is ... somewhat of an asshole when interpretting stuff... but have you tried this kind of html

[code]<img src="images/header_01.gif" alt="" width=750 height=5 class="floatLeft" /><img src="images/header_02.gif" alt="" width=227 height=109 class="floatLeft" /><img src="images_top/top001.jpg" alt="" width=352 height=109 class="floatLe" /><img src="images/header_04.gif" alt="" width=171 height=109 class="floatLeft" />[/code]

meaning, no space or linebreak whatsoever between img ?

[king arthur]

Think you have to set the height of the div as well as the width, for floats to work in IE. I think you have to set it to anything other than 'auto', I may be wrong.

[moberemk]

Well, divs work without a specific width for floats. But because they are block elemente, they will always go to the next line. Can you be more specific about the problem?

[jdubwelch]

here's the problem...


this is what it looks like in safari and firefox:

[img src=\"http://www.jwelchdesign.com/images/safari.gif\" border=\"0\" alt=\"IPB Image\" /]

and this is what it looks like in IE:

[img src=\"http://www.jwelchdesign.com/images/ie.gif\" border=\"0\" alt=\"IPB Image\" /]



[!--quoteo(post=381748:date=Jun 8 2006, 10:43 PM:name=XRayden)--][div class=\'quotetop\']QUOTE(XRayden @ Jun 8 2006, 10:43 PM) [snapback]381748[/snapback][/div][div class=\'quotemain\'][!--quotec--]
I know that IE is ... somewhat of an asshole when interpretting stuff... but have you tried this kind of html

[code]<img src="images/header_01.gif" alt="" width=750 height=5 class="floatLeft" /><img src="images/header_02.gif" alt="" width=227 height=109 class="floatLeft" /><img src="images_top/top001.jpg" alt="" width=352 height=109 class="floatLe" /><img src="images/header_04.gif" alt="" width=171 height=109 class="floatLeft" />[/code]

meaning, no space or linebreak whatsoever between img ?
[/quote]

i tried it and got the same result.

[nogray]

You don't actually need to float the images, you can just put them one next to the other and add a <br /> at the end of the line.

IE usually put a small margin next to the floated element, if you still want to float them, you can try this
[code]
.floatLeft {
    float: left;
    _margin-left:-5px;
}
[/code]

I am not sure if it'll work as you want, you may have to change the -5 to something else.

Oh yeah, Line breaks are considered a space in IE, and if there is no <br /> or a closing tag after the image, you'll get a small margin below the image.

[moberemk]

I just don't get why it is that you're using images for that. You could probably pull that effect off with just plain CSS and text.

[XRayden]

can you popst a .zip of your webpage (at least the html/css/images) ?

[jdubwelch]

[!--quoteo(post=381977:date=Jun 9 2006, 10:51 AM:name=XRayden)--][div class=\'quotetop\']QUOTE(XRayden @ Jun 9 2006, 10:51 AM) [snapback]381977[/snapback][/div][div class=\'quotemain\'][!--quotec--]
can you popst a .zip of your webpage (at least the html/css/images) ?
[/quote]

you can download a zip of everything [a href=\"http://www.jwelchdesign.com/ao/2006css_example.zip\" target=\"_blank\"]here[/a]

[!--quoteo(post=381969:date=Jun 9 2006, 10:35 AM:name=moberemk)--][div class=\'quotetop\']QUOTE(moberemk @ Jun 9 2006, 10:35 AM) [snapback]381969[/snapback][/div][div class=\'quotemain\'][!--quotec--]
I just don't get why it is that you're using images for that. You could probably pull that effect off with just plain CSS and text.
[/quote]

because i tried, but it took a really long time. I'm doing for my brother who designed it in photoshop. Gave me the psd. He's not very good at css and coding so i do it for him. If i gave you the psd file... could you show me how to pull that all off with css and text?

I finally got it working! I took out the floats and it works fine. I does anyone know why IE doesn't like floats then?

[moberemk]

It's simple. All you'd need to do is create an element with a white background in the middle of the header with some padding to make it large and dark green borders at the top and bottom.