Jump to content

Archived

This topic is now archived and is closed to further replies.

jdubwelch

Another IE CSS problem

Recommended Posts

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]

Share this post


Link to post
Share on other sites
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 ?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
can you popst a .zip of your webpage (at least the html/css/images) ?

Share this post


Link to post
Share on other sites
[!--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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.