CSS Floats Images and IE (Help please!)

[Daz]

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.

[Jim Moe]

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)

[Daz]

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.

[Jim Moe]

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)

[Gus Richter]

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 {clear:right;}
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

[Daz]

I sorted the overlapping image out using the holly hack, and a block
display. I couldn't get the guillotine bug fixed for IE, so I've just
removed the border from the link in IE (I don't use IE so I'm not
fussed - it's not like anyone else will notice!)

Thanks anyway Gus!

[Gus Richter]

Daz wrote:

I sorted the overlapping image out using the holly hack, and a block
display. I couldn't get the guillotine bug fixed for IE, so I've just
removed the border from the link in IE (I don't use IE so I'm not
fussed - it's not like anyone else will notice!)

Thanks anyway Gus!

For the resulting rendition that you have now, Solution#2, by only
applying the Clear, gets the same result without any hack. I have not,
nor do I intend to, check out your use of the hack, since no hack is
necessary.

Now I ask you, why would you prefer to use a hack instead of simply
applying the rules properly?

I can understand your pride in having found a solution, partial at that,
although questionable if it will hold as a template with different
content. On the other hand, by your original questions, you do not have
a clear understanding of floats and clears. My two solutions, if you
check out the methods and reason them out, should clear that up.
Instead, you seem to indicate that you have not tried my solutions, are
going with your applied hack and still don't clearly understand floats
and clears. Whatever rings your bell.

BTW, Solution#2 is my recommendation. Solution#1 is there only for
information, insight and understanding, since it may not be robust
enough as a template with different content.

--
Gus

[Daz]

I did indeed try your suggestion, which did indeed solve the problem of
the guillotine bug, but it forced the <p class="clearimg"><a ...
Continue Reading ... down below the image, which is not what i'm after.

Why do you assume I have gone with my solution because of pride? I
understand you may be upset that you have worked out a solution,
partial at that, although questionable if it will hold as a template
with different content, and then not have it used, but I have found a
workaround which suits my needs, and having already spent a fair amount
of time looking into the guillotine bug I cannot devote any more to
doing so when I have a perfectly adequate solution right now.

I'm not aiming for any coding awards here, and no, I don't expect to
get any either. Yes I know that to some people I'm committing heracy to
even suggest that a quick bodge it will do, but hey, this is the real
world and as long as it's not got any major problems then I'm OK with
that, the end user's aren't going to have a cluie that I wanted a boder
of the links, so it makes no difference if I hack it or not.

Why is it that the only people who have replied to my posts have been
rude, un-friendly, know-it-alls? For goodness sake get away from your
darkened rooms lit only by your monitor and learn some bloody
inter-personal skills, not to mention some netiqette. It doesn't take
much to be poilte and welcoming, all I did was ask for some help and
I'm shot down for taking a shortcut.

[Gus Richter]

Daz wrote:

I did indeed try your suggestion, which did indeed solve the problem of
the guillotine bug, but it forced the <p class="clearimg"><a ...
Continue Reading ... down below the image, which is not what i'm after.
Solution#1 does not clear the link below the image. That was why I
presented it as well. I guess you didn't try that one.
Why do you assume I have gone with my solution because of pride?
Since I see no other reason for not applying the rules properly and
instead going with a hack?
I understand you may be upset that you have worked out a solution,
partial at that, although questionable if it will hold as a template
with different content, and then not have it used, but I have found a
workaround which suits my needs, and having already spent a fair amount
of time looking into the guillotine bug I cannot devote any more to
doing so when I have a perfectly adequate solution right now.
I don't care in the least what you end up using. I took your question in
good faith requesting to know how and why ("Help please!"). I showed you
how and tried to point out the why. The normal way is to use the tools
provided by the specs, that is to say; simply applying the rules
properly. If it is not possible, then one goes on to trying hacks. You,
on the other hand, from what I surmised and from what you say now,
choose to ignore the norm and choose a hack. It simply boggles my mind
and I expressed that you still did not understand the how and least of
all the why and to top it off, you seem to not care. It undercuts the
good faith part.
I'm not aiming for any coding awards here, and no, I don't expect to
get any either. Yes I know that to some people I'm committing heracy to
even suggest that a quick bodge it will do, but hey, this is the real
world and as long as it's not got any major problems then I'm OK with
that, the end user's aren't going to have a cluie that I wanted a boder
of the links, so it makes no difference if I hack it or not.
The biggest difference between people's work, no matter in what
endeavor, is that of pride in their work.
Why is it that the only people who have replied to my posts have been
rude, un-friendly, know-it-alls? For goodness sake get away from your
darkened rooms lit only by your monitor and learn some bloody
inter-personal skills, not to mention some netiqette. It doesn't take
much to be poilte and welcoming, all I did was ask for some help and
I'm shot down for taking a shortcut.

I understand what you say and why you say it, considering this newsgroup
where it is commonplace for the regulars to respond only with cryptic
responses and demeaning statements. I, on the other hand, certainly was
trying to be helpful and clear. You were not even listening and wasted
both of our times.

My solutions apply the rules properly with minor differences. The
difference in Solution#2 does not suit you, but Solution#1 should suit
you, yet you are going with an unnecessary, applied hack and still don't
clearly understand floats and clears, hence the "Whatever rings your
bell" (meaning: use what you want to use and are happy with, plus good
luck to you).

I'm beginning to understand (not condone) what has driven the regulars
to their cryptic and often rude responses.

--
Gus

[kchayka]

Daz wrote:

learn... some netiqette.

You might want to take your own advice and learn the accepted posting
and quoting conventions of this group before you start complaining.

Failure to properly quote, or attribute quotes, is common among those
using that abominable google groups to post to usenet. Do yourself and
everyone else a favor and get yourself a proper newsreader.

I'm always amazed at the number of people posting throught GG, but don't
bother using it for the only thing it's really designed for--searching
newsgroup archives. It doesn't seem to occur to them that they might
even find their own answers. :-\

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.