CSS Floats Images and IE (Help please!)

Home | NewsGroups | Search | About

comp.infosystems.www.authoring.html

get this group's latest topics as an RSS feed

add this group's latest topics to your My MSN content

add this group's latest topics to your My Yahoo content

Subject

Author

Date

CSS Floats Images and IE (Help please!)

Daz

09-04-2005

Re: CSS Floats Images and IE (Help please!)

Jim Moe

09-04-2005

Posted by Daz on September 4, 2005, 6:55 am

Please log in for more thread options

Hello hello!

I'm trying to finish off putting my design into HTML and I've come
across a problem that I can't get my head around.

I've got divs floating in two columns, but I'm having problems trying
to put in images and floating them left or right. In safari it leaves a
gap inbetween two of my divs and the image overlaps the gap, in IE it
does the same unti you mouse over the hyperlink in the div, which then
hides the gap and puts the div below over the one above it. Is this
making sense?

Anyway, if someone can give it a once over and spot somethign that I'm
doing wrong that would be brill!

www.dazhall.com/index.htm
www.dazhall.com/css/screen.css

Ta!

Daz.

Posted by Jim Moe on September 4, 2005, 2:32 pm

Please log in for more thread options

Daz wrote:

> I've got divs floating in two columns, but I'm having problems trying

> to put in images and floating them left or right. In safari it leaves a

> gap inbetween two of my divs and the image overlaps the gap, in IE it

> does the same unti you mouse over the hyperlink in the div, which then

> hides the gap and puts the div below over the one above it. Is this

> making sense?

No. I do not see any of the behavior you describe.
Which divs? Which images?
BTW, did you see the thread "A plea: where are the links?"

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Posted by Daz on September 4, 2005, 2:57 pm

Please log in for more thread options

No. "A plea: where are the links?" is nothing to do with my problem.

I'm using IE6, Windows XP SP2. On www.dazhall.com/index.htm you will
see a title in orange "Wing Commander Watch", below this title is some
lipsum text and an image with a right float applied via
www.dazhall.com/css/screen.css. The div structure is as follows:

<div id="content-first">
<div class="copy">
<h2>Wing Commander Watch</h2>
<p><img src="..." class="right-top" />"Lorem ipsum dolor sit
amet....</p>
<p><a href="/cadets/articles/?id=101">Continue
Reading...</a></p>
</div>
</div>

There is then another div ("content-feature") below of a similar
structure with the title "Feature". The problem is that the image
overlaps the "content-first" div, whereas it should be contained within
it. The plot thickens when you mouse over the "Continue Reading..."
hyperlink, which makes the space dissappear and the "content-feature"
div move up.

In Firefox (Win & Mac) and Safari the gap is still there, but the
strange hyperlink behaviour is not. The end result I am l;ooking for is
to get the image to sit within the div, without it overlapping. This is
almost certainly a problem with clearing floats, but I can't seem to
find it.

I hope this clarifies!

Daz.

Posted by Jim Moe on September 4, 2005, 6:36 pm

Please log in for more thread options

Daz wrote:

> No. "A plea: where are the links?" is nothing to do with my problem.

True. It does give you a hint about usability.
You also do not have a DOCTYPE, and the HTML has a number of validation
errors.

> There is then another div ("content-feature") below of a similar

> structure with the title "Feature". The problem is that the image

> overlaps the "content-first" div, whereas it should be contained within

> it. The plot thickens when you mouse over the "Continue Reading..."

> hyperlink, which makes the space dissappear and the "content-feature"

> div move up.

The :hover problem is due to ".copy a:hover {border-bottom: 1px solid
#FF5126;}". Remove the border-bottom and the size change does not happen.
This leaves the problem of the gap the IE puts at the bottom of the
content-first div. I believe this is the IE "peekaboo" bug. Search for it.
A way around the problem is to put the <img> in its own <p>.

> In Firefox (Win & Mac) and Safari the gap is still there, but the

> strange hyperlink behaviour is not.

No, it is not. Not in either Firefox or Opera7 (win2k).

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Posted by Gus Richter on September 5, 2005, 5:30 am

Please log in for more thread options

Daz wrote:

> The plot thickens when you mouse over the "Continue Reading..."

> hyperlink, which makes the space dissappear and the "content-feature"

> div move up.

I believe that this is due to Collapsing Margins badly handled by IE. By
introducing a border with hover, IE (5.5 tested on this machine) does a
double-take (no collapse/collapse), whereas this does not happen in
Firefox, nor Opera.

> The end result I am looking for is

> to get the image to sit within the div, without it overlapping. This is

> almost certainly a problem with clearing floats, but I can't seem to

> find it.

!!! Failed validation, 14 errors !!!

Regarding the image overlapping the bottom border (actually background
image).

Solution#1: Move the IMG up.
Place the IMG before the H2 and thereby the IMG is moved up enough.
                 <div class="copy">
                        <img src="....">
                        <h2>Wing Commander Watch</h2>
                        <p>"Lorem ....

Solution#2: Clear the Link line.
Add to the stylesheet:
.clearimg
Add the class attribute to the html:
<p class="clearimg"><a ... Continue Reading ...
This solution also works well with IE 5.5 (Quirks).

For #content-feature increase margin-top for _both_ Solutions above:
from: {margin: 1px 1px 0 0;}
to: {margin: 20px 1px 0 0}

--
Gus

Similar Threads	Posted
clearing only local floats	November 11, 2006, 11:22 am
Clearing floats without introducing a new line. How?	August 18, 2005, 2:47 pm
margins on cleared floats in Opera	November 5, 2006, 11:34 am
images won't appear in IE	January 3, 2005, 8:40 pm
why a different tag for SVG images?	April 4, 2006, 12:18 am
two images i corners	December 11, 2004, 4:04 pm
Background images	January 25, 2005, 5:19 pm
Horizontal row of images...	June 20, 2005, 10:04 am
Using Icons As Images	June 30, 2005, 9:14 am
Can I specify that some images load before others?	December 1, 2005, 6:41 am

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML Sitemap

XML Sitemap