Previous Message
Next Message

images repeat top section

Sent by Holly Bergevin on 13 October 2004 02:02


From: Trish Meyer [EMAIL-REMOVED]>

>I now have one style (.imgfloatrighthead) with 0 top margin that I 
>apply to the first header image, and a second style (.imgfloatleft) 
>with an 8px top margin for any secondary images that run below the 
>copy.
>
>Oddly enough, now the second image overlaps the last paragraph 
>slightly, even with the 8 pixels top margin. See
>http://www.wildscaping.com/plants/plantprofiles/Ceanothus_YankeePt.htm
>
>It looks okay in Mozilla on Windows, but overlaps in Explorer on both 
>platforms.

Hi Trish, 

Both of your image classes need {position: relative;} added to them for IE to cooperate and position
those images where you want them to be. This seems to be because they are being laid out before
#profile, which is also positioned relatively, is shifted down by 20px, and therefore are ending up
too high. 

The other thing you may want to consider is that IE is not respecting your <br style="clear: both">
clearing element. Because of this it won't draw your lavender border all the way down to the bottom
of the column. Switch to a different clearing element; a <div style="clear: both"></div> will work.


You may need to test in various browsers to see if you need a space in that div, or if you need any
other declarations in there. If you do, it might be good just to create a class holding all the
rules and apply that to the div. That way the class can be reused whenever you need it.

hth,

~holly 
 
                   
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread:

Possibly related: