Jump to content


Photo

Another IE CSS problem


  • Please log in to reply
9 replies to this topic

#1 jdubwelch

jdubwelch
  • Members
  • PipPipPip
  • Advanced Member
  • 85 posts

Posted 09 June 2006 - 05:20 AM

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:

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

this is an example of the css:

.floatLeft {
    float: left;
}

#header {
    margin: 0px;
    padding: 0px;
    width: 750px;
}

[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]

#2 XRayden

XRayden
  • Members
  • PipPipPip
  • Advanced Member
  • 31 posts
  • LocationQuébec

Posted 09 June 2006 - 05:43 AM

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

<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" />

meaning, no space or linebreak whatsoever between img ?

#3 king arthur

king arthur
  • Members
  • PipPipPip
  • Advanced Member
  • 335 posts
  • LocationUK HQ

Posted 09 June 2006 - 08:23 AM

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.
Sir Isaac Newton said "If I have seen farther, it is by standing on the shoulders of giants". But it is not recorded as to whether he said it before or after he was hit on the head by a falling apple.

#4 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 09 June 2006 - 11:43 AM

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?
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#5 jdubwelch

jdubwelch
  • Members
  • PipPipPip
  • Advanced Member
  • 85 posts

Posted 09 June 2006 - 03:39 PM

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) View Post[/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

<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" />

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

i tried it and got the same result.


#6 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 09 June 2006 - 04:35 PM

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
.floatLeft {
    float: left;
    _margin-left:-5px;
}

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.

NoGray.com


#7 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 09 June 2006 - 05:35 PM

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.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#8 XRayden

XRayden
  • Members
  • PipPipPip
  • Advanced Member
  • 31 posts
  • LocationQuébec

Posted 09 June 2006 - 05:51 PM

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

#9 jdubwelch

jdubwelch
  • Members
  • PipPipPip
  • Advanced Member
  • 85 posts

Posted 09 June 2006 - 06:09 PM

[!--quoteo(post=381977:date=Jun 9 2006, 10:51 AM:name=XRayden)--][div class=\'quotetop\']QUOTE(XRayden @ Jun 9 2006, 10:51 AM) View Post[/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) View Post[/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?

#10 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 09 June 2006 - 09:17 PM

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.
Disclaimer: No matter how harsh I may be, I'm always IMO only.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users