'clear' help needed

[al jones]

I already know this displays improperly in FireFox. One problem at a time,
please.

The problem I'm asking for help with, specifically, is best demonstrated in
http://aljones.us/630817vad.html I've introduced a 'clear left' into the
css because the images of the diary entries, where longer than the
assiciated text, would force the next image to the right. I inserted a
clear left to the <p> tag, which gives me the display you see now.

Obviously <hah??> what I'd like to see is the image on the left, with the
associated text to the right. If the image is longer, then force the
following image / text pair down until the image places itself properly to
the left.

I've had this up in alt.html.critique, but since I'm adressing particular
issues thought I should move it to a more appropriate newsgroup.

Since I'm not (obviously) a web designer, and this is strictly a family
project I'll take all suggestions you're willing to offer - and pointers to
the solution would also be willingly accepted.

thanks //al

 

[al jones]

I already know this displays improperly in FireFox. One problem at a time,
please.

The problem I'm asking for help with, specifically, is best demonstrated in
http://aljones.us/630817vad.html I've introduced a 'clear left' into the
css because the images of the diary entries, where longer than the
assiciated text, would force the next image to the right. I inserted a
clear left to the <p> tag, which gives me the display you see now.

Obviously <hah??> what I'd like to see is the image on the left, with the
associated text to the right. If the image is longer, then force the
following image / text pair down until the image places itself properly to
the left.

I've had this up in alt.html.critique, but since I'm adressing particular
issues thought I should move it to a more appropriate newsgroup.

Since I'm not (obviously) a web designer, and this is strictly a family
project I'll take all suggestions you're willing to offer - and pointers to
the solution would also be willingly accepted.

thanks //al

belatedly validated both the css and html. Fixed the 'apostrophe' in the
html. Checked again after correcting and that was the only error to
surface. //al

 

[mbstevens]

I already know this displays improperly in FireFox. One problem at a time,
please.

The problem I'm asking for help with, specifically, is best demonstrated in
http://aljones.us/630817vad.html I've introduced a 'clear left' into the
css because the images of the diary entries, where longer than the
assiciated text, would force the next image to the right. I inserted a
clear left to the <p> tag, which gives me the display you see now.

Obviously <hah??> what I'd like to see is the image on the left, with the
associated text to the right. If the image is longer, then force the
following image / text pair down until the image places itself properly to
the left.

p img {clear: left; } might be what you're looking for?
Browser support for clear is not universal. I try to avoid it when
possible.

 

[al jones]

p img {clear: left; } might be what you're looking for?
Browser support for clear is not universal. I try to avoid it when
possible.

I read that as doing a clear left for each p or img, is that correct??

As the pages are currently laid out I have an h2 followed by an <h3>
followed by a <p> which are (probably repeated for different dates on the
same page). Your solution to this would be ....?? because I obviously
don't know what I'm doing with it.

//al

 

[Bergamot]

p img {clear: left; }
Browser support for clear is not universal.

Really? Which CSS-capable browsers don't support it, or don't support it
correctly?

 

[Bergamot]

I read that as doing a clear left for each p or img, is that correct??

No, it's a descendant selector.
http://www.w3.org/TR/CSS21/selector.html#descendant-selectors

The suggestion above won't work in your case because you don't have
those images inside <p> elements.

One thing you could do is to put the <a> and image inside the associated
h3 element. Adding a clear:left to all h3's should always put the next
entry below any images.
<h3><a href...><img...></a>Thur. Aug. 20, 1863</h3>

h3 {clear:left}
h3 img {float:left; margin:...}

The other option is to add a class selector to each h3 that specifically
needs to be cleared, or add an inline style to them.

 

[dorayme]

Browser support for clear is not universal. I try to avoid it when
possible.

I am usually comfortable using it. There is an issue with
inheritance on Mac IE 5 which I bump up against now and then and
could recall if I have to... something to do with clear being
inherited in spite of child elements not being cleared or being
specifically not cleared. Easy enough to fix for this browser
with css that talks to it.

Came across a little case of my own yesterday that puzzled me -
excuse me OP - for a while and I dropped using clear: (though it
seemed so right!), instead I used margins to solve the little
problem. I am now thinking I have to think through the concepts
of floats more!

In case anyone is interested, I was supposing that when you have
a box and float stuff in it, subsequent clears in that box would
apply only to the floats in that box. But yesterday I had a clear
that took account of another float outside the box. Or sure
seemed to!

Simple enough really though: page had a left floated nav col and
a right content div box (margined to give the left nav float a
formal space to sit in). Inside the div content box, at the very
start I had a little float (to accommodate one drop-cap letter -
it is all Farmer Joe's fault), for a little one line sentence.
The point is that when I cleared the float for the next heading,
the heading jumped down to clear the nav floated box. It is no
good me knowing this is "correct" behaviour. I need to think
about it more not to be puzzled! Perhaps I have missed something
quite simple and if fixed, can go back to using clear properly!

URL? OK (click on the link "Blue" and "Maroon" - there only
temporarily to show some people possible backgrounds - to see the
difference re clear):

<http://members.optushome.com.au/droovies/khs/>

 

[mbstevens]

I am usually comfortable using it. There is an issue with
inheritance on Mac IE 5 which I bump up against now and then and
could recall if I have to... something to do with clear being
inherited in spite of child elements not being cleared or being
specifically not cleared. Easy enough to fix for this browser
with css that talks to it.

It is buggy in IE4.x, Navigator 4.x, and Opera 3.6.,
and completely unsupported in iCab 2.6-2.9.x.
Not exactly a herd of people still using these, but
I'm still holding off for a while.

 

[Bergamot]

It is buggy in IE4.x, Navigator 4.x, and Opera 3.6.,
and completely unsupported in iCab 2.6-2.9.x.

Do you honestly think that the 3 people on the planet still using any of
these antiquated browsers haven't come across worse problems before now?
I find it inconceivable that those users would be running with CSS
enabled at all.

 

[mbstevens]

Do you honestly think that the 3 people on the planet still using any of
these antiquated browsers haven't come across worse problems before now?

This problem has no necessary relation to those problems. People with
bad knees are still capable of fretting over hangnails.

I find it inconceivable that those users would be running with CSS
enabled at all.

I find it conceivable.

 

[Ed Seedhouse]

It is buggy in IE4.x, Navigator 4.x, and Opera 3.6.,
and completely unsupported in iCab 2.6-2.9.x.

Better stay away from CSS altogether then. Mosaic has lousy support for
it too.

 

[al jones]

Better stay away from CSS altogether then. Mosaic has lousy support for
it too.

Hey, guys, stop hijacking my thread!!! <chuckle>

If you all have so much time on your hands would you mind looking at
http://aljones.us/630817vad.html and seeing if you can help me get the
images aligned on the left hand edge - regardlwss of the size of the
viewport. I've gotten several suggestions, but none seem to work correctly
in all situations and I've gotten a royal headache from it.

//al

 

[mbstevens]

The suggestion above won't work in your case because you don't have
those images inside <p> elements.

From the page in question:
<p><a href="images/630904vad.jpg">
<img alt="photo of this letter"
src="images/630904vad_1.jpg" class="left-top" /></a>
This is my birthday. Here in camp on the Rappahannock River in front of
Lee's army. I wrote a letter to my dear wife today, have not heard from
home since I left there.</p>

*Some* images are not inside <p> elements. It won't work for them.

 

[mbstevens]

Hey, guys, stop hijacking my thread!!! <chuckle>

Yeah, I know. We're just exercising each other.

If you all have so much time on your hands would you mind looking at
http://aljones.us/630817vad.html and seeing if you can help me get the
images aligned on the left hand edge - regardlwss of the size of the
viewport. I've gotten several suggestions, but none seem to work correctly
in all situations and I've gotten a royal headache from it.

//al

First, either get all the images of letters inside <p> elements, or get
them all outside them. You won't get any kind of consistency until you do
that.

 

[Bergamot]

First, either get all the images of letters inside <p> elements, or get
them all outside them. You won't get any kind of consistency until you do
that.

That alone won't help. The h3 and paragraph that follow the image are to
show beside the photo. All other h3's are to clear the photo.

p img {clear:left} as you suggest won't give that result.

To the OP, I made a couple suggestions elsewhere in this thread.

 

[mbstevens]

That alone won't help. The h3 and paragraph that follow the image are to
show beside the photo. All other h3's are to clear the photo.

p img {clear:left} as you suggest won't give that result.

To the OP, I made a couple suggestions elsewhere in this thread.

Which included:

"One thing you could do is to put the <a> and image inside the associated
h3 element. Adding a clear:left to all h3's should always put the next
entry below any images.
<h3><a href...><img...></a>Thur. Aug. 20, 1863</h3>

h3 {clear:left}
h3 img {float:left; margin:...}

The other option is to add a class selector to each h3 that specifically
needs to be cleared, or add an inline style to them."

....breaking semantic markup completely. Those images are not headers.
What they are semantically are images that are associated with the
paragraphs that fall under the header. Logos, under some circumstances,
might be considered a part of a header. But these images, if you bother
to actually read the page, are just clearly not headers.

 

[mbstevens]

The problem I'm asking for help with, specifically, is best demonstrated in
http://aljones.us/630817vad.html I've introduced a 'clear left' into the
css because the images of the diary entries, where longer than the
assiciated text, would force the next image to the right. I inserted a
clear left to the <p> tag, which gives me the display you see now.

Obviously <hah??> what I'd like to see is the image on the left, with the
associated text to the right. If the image is longer, then force the
following image / text pair down until the image places itself properly to
the left.

Here. This tests fine on my laptop's newest version of IE, and in Linux
Firefox and Windows Firefox. You might want to make a version in HTML 4
-- not sure how it would react in older versions of IE, since this one
presents in xml, which throws IE into quirks mode. You'll need to move all
the images of letters into the paragraphs if you modify your page to work
like this one does.

http://www.mbstevens.com/test/vad.html

 

[dorayme]

Here. This tests fine on my laptop's newest version of IE, and in Linux
Firefox and Windows Firefox. You might want to make a version in HTML 4
-- not sure how it would react in older versions of IE, since this one
presents in xml, which throws IE into quirks mode. You'll need to move all
the images of letters into the paragraphs if you modify your page to work
like this one does.

http://www.mbstevens.com/test/vad.html

Para text does not show (except one instance).

Perhaps this is more aligned:

<http://members.optushome.com.au/droovies/test/vad.html>

 

[mbstevens]

Para text does not show (except one instance).

Interesting. What browser were you using?

 

[mbstevens]

Interesting. What browser were you using?

Oh, I see what you're saying now. You want the text following each
individual image to move down. Yes, that's a nice enhancement.