471,618 Members | 1,156 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,618 software developers and data experts.

Help with H3 element floating in the wrong place

I have an annoying problem with the site I am developing. This is how I see
the problem appear:

In a paragraph (<P>) I start with an IMG tag that has an 'align=left' OR
'align=right' (with the proper quoting of course). The validator complains
that 'align' is not a proper XHTML attribute but I have not seen a suitable
CSS alternative that works comparatively well.

Then after that paragraph there is a heading (H1/H2/H3/H4) element with
background and there is the problem:

1. On FireFox the paragraph flows nicely on the side (left or right) of the
image (<img align='xxx'/>) but then if the paragraph is not long enough the
following H* element will display as if it was behind the image rather than
AFTER the image.

2. On IE 7 the text does NOT flow nicely around the image, only the first
line is shows beside the image and the rest of the paragraph AFTER the image
but the heading (H*) are properly placed.

See http://clientes.coralys.com/Province...ousPanama.aspx and excuse
some look issues, I am not too concerned about fonts and sizes just yet.

Anybody knows what trick I might need to have this work well on both
browsers? before it used to be ok for both but not anymore.

Emilio
Sep 18 '07 #1
13 2439
..... www.FocusOnPanama.com .... wrote:
I have an annoying problem with the site I am developing. This is how I see
the problem appear:

In a paragraph (<P>) I start with an IMG tag that has an 'align=left' OR
'align=right' (with the proper quoting of course). The validator complains
that 'align' is not a proper XHTML attribute but I have not seen a suitable
CSS alternative that works comparatively well.
"float"?

try float: left; or float: right;

>
Then after that paragraph there is a heading (H1/H2/H3/H4) element with
background and there is the problem:

1. On FireFox the paragraph flows nicely on the side (left or right) of the
image (<img align='xxx'/>) but then if the paragraph is not long enough the
following H* element will display as if it was behind the image rather than
AFTER the image.
Now look up "clear"

clear: left; or clear: right; or clear: both;
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Sep 18 '07 #2
Thanks, that does it indeed. I was using the br clear before but now I
stayed away from it because it keeps complaining that it is not valid XHTML
but then again, CSS does not appear to offer any alternative to not
using it, go figure!. So I am just now plugging in the <br clear="..."/tag
there.

Same thing goes for <div align="center"it says it is not proper XHTML
Transitional but then I could not find any good CSS alternative that did not
have some side effect or one browser or the other.

Emilio

"Jonathan N. Little" <lw*****@centralva.netwrote in message
news:da***************************@NAXS.COM...
.... www.FocusOnPanama.com .... wrote:
>I have an annoying problem with the site I am developing. This is how I
see the problem appear:

In a paragraph (<P>) I start with an IMG tag that has an 'align=left' OR
'align=right' (with the proper quoting of course). The validator
complains that 'align' is not a proper XHTML attribute but I have not
seen a suitable CSS alternative that works comparatively well.

"float"?

try float: left; or float: right;

>>
Then after that paragraph there is a heading (H1/H2/H3/H4) element with
background and there is the problem:

1. On FireFox the paragraph flows nicely on the side (left or right) of
the image (<img align='xxx'/>) but then if the paragraph is not long
enough the following H* element will display as if it was behind the
image rather than AFTER the image.

Now look up "clear"

clear: left; or clear: right; or clear: both;
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Sep 18 '07 #3
..... www.FocusOnPanama.com .... wrote:

## Don't top-post please ##
Thanks, that does it indeed. I was using the br clear before but now I
stayed away from it because it keeps complaining that it is not valid XHTML
You do not appear to understand nor need *xhtml*. Do yourself a favor
and abandon it and use html 4.01 strict.
but then again, CSS does not appear to offer any alternative to not
using it, go figure!. So I am just now plugging in the <br clear="..."/tag
there.
No, your should not use deprecated html attributes "align" and "clear"
etc, but in your stylesheet define

div { /* whatever */}
..someClass { /* whatever */ }
#someID {/* whatever */ }
>
Same thing goes for <div align="center"it says it is not proper XHTML
Transitional but then I could not find any good CSS alternative that did not
have some side effect or one browser or the other.
div { width: 80%; margin: 0 auto; }

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Sep 18 '07 #4
..... www.FocusOnPanama.com .... wrote:
Thanks, that does it indeed. I was using the br clear before but now I
stayed away from it because it keeps complaining that it is not valid
XHTML but then again, CSS does not appear to offer any alternative to
not using it, go figure!. So I am just now plugging in the <br
clear="..."/tag there.
..clear { clear: both; } (or left, or right)
Same thing goes for <div align="center"it says it is not proper
XHTML Transitional but then I could not find any good CSS alternative
that did not have some side effect or one browser or the other.
div.cent { text-align: center; }

<div class="cent">This will be centered.</div>

Please don't top-post. Thanks for your consideration.

--
-bts
-Motorcycles defy gravity; cars just suck
Sep 18 '07 #5
Jonathan N. Little wrote:
.... www.FocusOnPanama.com .... wrote:
>>
Same thing goes for <div align="center"it says it is not proper
XHTML Transitional but then I could not find any good CSS alternative
that did not have some side effect or one browser or the other.

div { width: 80%; margin: 0 auto; }
Oops, fingers before brain... <div align="center"means center aligned
text, been awhile!

Try

div { text-align: center; }

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Sep 18 '07 #6
On 2007-09-18, .... www.FocusOnPanama.com .... <fi*******@mailbox.nowwrote:
Thanks, that does it indeed. I was using the br clear before but now I
stayed away from it because it keeps complaining that it is not valid XHTML
but then again, CSS does not appear to offer any alternative to not
using it, go figure!. So I am just now plugging in the <br clear="..."/tag
there.

Same thing goes for <div align="center"it says it is not proper XHTML
Transitional but then I could not find any good CSS alternative that did not
have some side effect or one browser or the other.
There are CSS alternatives for both those things and others. See
http://www.cs.tut.fi/~jkorpela/html2css.html for a list.
Sep 18 '07 #7
Beauregard T. Shagnasty wrote:
>
font-family: "Bodoni MT Black", "Bookman Old Style", "Comic Sans MS",
Verdana, Arial;

(not that I would pick those. How many visitors will have Bodoni MT
Black installed on their computers?)
More importantly, how many visitors will go blind or insane if they have
to look at Comic Sans?

That's the mark of a true amateur. :)

--
Berg
Sep 18 '07 #8
Bergamot wrote:
Beauregard T. Shagnasty wrote:
>>
font-family: "Bodoni MT Black", "Bookman Old Style", "Comic Sans MS",
Verdana, Arial;

(not that I would pick those. How many visitors will have Bodoni MT
Black installed on their computers?)

More importantly, how many visitors will go blind or insane if they
have to look at Comic Sans?
Looking up Bodoni, it seems to be a half-bold (how to describe? - fat on
one side, skinny on the other) serif font. I was wondering more about
that than the Comic Sans.
http://www.myfonts.com/fonts/agfa/bodoni-mt/
That's the mark of a true amateur. :)
F.O.P. has two serif, one 'casual', and two sans-serif, but no fallback.
Heh, Comic Sans was designed for the word balloons in Microsoft Bob!

--
-bts
-Motorcycles defy gravity; cars just suck
Sep 18 '07 #9
Joshua Cranmer wrote:
Jonathan N. Little wrote:
>Aw! What's wrong with Bob! Don't you just love it when MS tries to be
cute!

Like Clippit?

My teacher uses Comic Sans... Georgia looks so much better to me.
http://www.littleworksstudio.com/tem...eByeClippy.jpg
ByeByeClippy.jpg (JPEG Image, 149x136 pixels)

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Sep 19 '07 #10

"Bergamot" <be******@visi.comwrote in message
news:5l************@mid.individual.net...
More importantly, how many visitors will go blind or insane if they have
to look at Comic Sans?

That's the mark of a true amateur. :)

That comment is just nasty and does not offer any solution so I will choose
to ignore it ;-) and why? because Comic Sans ONLY appears together with
Bodoni in the CSS and then ONLY for special headings such ash H1..H4 and
table section headings and NOT paragraphs. It would help not to jump to
conclusions without getting the facts ;-) I am not a font expert that is for
sure and like I said in the original post at this test point I had not yet
concerned myself with the fonts, basically just the layout and the technical
stuff behind the site.
Sep 19 '07 #11
No problem Jonathan :) the thing is my text is invariably left aligned. The
only times I use the <div align="center"is when I want to center a box
within the alloted space. For example having a TABLE horizontally centered
on the screen (rather than sticking to the left) or as in most of the cases
horizontally centering an IMG element such as a banner or an image in
between text paragraphs.

When I attempted that text-align: center I did not produce the correct
results. That is what someone had suggested before in some other place but
did not work as desired.

Any other ideas?

"Jonathan N. Little" <lw*****@centralva.netwrote in message
news:79**************************@NAXS.COM...
Jonathan N. Little wrote:
>.... www.FocusOnPanama.com .... wrote:
>>>
Same thing goes for <div align="center"it says it is not proper XHTML
Transitional but then I could not find any good CSS alternative that did
not have some side effect or one browser or the other.

div { width: 80%; margin: 0 auto; }

Oops, fingers before brain... <div align="center"means center aligned
text, been awhile!

Try

div { text-align: center; }

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Sep 19 '07 #12
That is a great link, thanks.

"Ben C" <sp******@spam.eggswrote in message
news:sl*********************@bowser.marioworld...
>There are CSS alternatives for both those things and others. See
http://www.cs.tut.fi/~jkorpela/html2css.html for a list.

Sep 19 '07 #13
..... www.FocusOnPanama.com .... wrote:

Hey Focus, please do not top post, it get very confusing after a few
replies. I if "fix" your posting here...
>Jonathan N. Little wrote:
>>.... www.FocusOnPanama.com .... wrote:
Same thing goes for <div align="center"it says it is not proper
XHTML
>>>Transitional but then I could not find any good CSS alternative
that did
>>>not have some side effect or one browser or the other.
div { width: 80%; margin: 0 auto; }
Oops, fingers before brain... <div align="center"means center
aligned
>text, been awhile!

Try

div { text-align: center; }
No problem Jonathan :) the thing is my text is invariably left aligned. The
only times I use the <div align="center"is when I want to center a box
within the alloted space. For example having a TABLE horizontally centered
on the screen (rather than sticking to the left) or as in most of the cases
horizontally centering an IMG element such as a banner or an image in
between text paragraphs.

When I attempted that text-align: center I did not produce the correct
results. That is what someone had suggested before in some other place but
did not work as desired.

Yes, then my original post was what your want. it is margins on the
*block element* not text-align. Note that by default an image is inline
not block. For this to work the block element must have a defined width
and then your set the left and right margins to auto. Examples, well my
first would works for a DIV

div { width: 80%; margin: 0 auto; }

for an image you must change it to display as block.

img { display: block; margin-left: auto; margin-right: auto; }
Now another posting on Usenet 101 lesson, since you are using Outlook
Express that is notorious for top-posting and not removing signatures
you may have to manually do this. You should remove signatures from your
replies, the bit after the "-- " below...
>--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Sep 19 '07 #14

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Roger Leigh | last post: by
27 posts views Thread by Neil Monk | last post: by
3 posts views Thread by JHR | last post: by
3 posts views Thread by Mark L Pappin | last post: by
3 posts views Thread by Mark Reed | last post: by
11 posts views Thread by Brad Baker | last post: by
18 posts views Thread by n.torrey.pines | last post: by
1 post views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.