473,379 Members | 2,754 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,379 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 2534
..... 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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Roger Leigh | last post by:
Hello, I'm writing a fixed-precision floating point class, based on the ideas in the example fixed_pt class in the "Practical C++ Programming" book by Steve Oualline (O' Reilly). This uses a...
27
by: Neil Monk | last post by:
(sorry for x-post but news://macromedia.dreamweaver seem unable to help, which I find astounding.) Hi, I'm VERY new to DW MX 2004 (opk then, I'm new to DW..period!) I'm sipmly trying to do the...
3
by: JHR | last post by:
Hey all, I'm trying to make a sidebar box float to the right of various items, and for those items to wrap if a user shrinks his browser window. Instead, in every browser I've tried except for...
8
by: baustin75 | last post by:
Posted: Mon Oct 03, 2005 1:41 pm Post subject: cannot mail() in ie only when debugging in php designer 2005 -------------------------------------------------------------------------------- ...
3
by: Mark L Pappin | last post by:
<puts on Compiler Vendor hat> I've recently discovered that our compilers don't make any attempt to handle floating point overflow in add/subtract/ multiply/divide, with the result that...
3
by: Mark Reed | last post by:
I am trying to have two fields, one being a total, the next being a decimal factor for pecentage. I then want it to calculate the total plus the percentage factor... for example, 100 is the...
11
by: Brad Baker | last post by:
I'm building a small web application - I started out placing all my code in one file (config.aspx). As I continue to add code though it was becoming very unwieldy. After doing some searching...
2
by: Head In A Pan | last post by:
Hello! My JavaScripting is at novice level - and after completing a tutorial on a 'floating layer' I was proud that I got it working on Firefox, Safari, Camino & even IE5 for mac!!! But not IE7!...
18
by: n.torrey.pines | last post by:
I understand that with floats, x*y == y*x, for example, might not hold. But what if it's the exact same operation on both sides? I tested this with GCC 3.4.4 (Cygwin), and it prints 0 (compiled...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

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.