Forum Moderators: open
I have been writing a XHTML 1.0 Transitional page which has an image on the left and some text to the
right of the image. The text does not come down to the bottom edge of the image. I've used
<br clear="left" /> so that the new heading below both the image and the text, would be in clear space
and at the left margin.
ie.
<img src="images/****.jpg" width="347" height="117" alt="****" align="left" hspace="12" vspace="8" />
<p>text,text,text,text,text,text,text,text,text,etc</p>
<br clear=left" />
<p>New heading here</p>
With Internet Explorer 5+ and even Netscape 4.x this works just fine, but with Netscape 6.x or 7.x or
Firefox the new heading is moved down the page by at least 6 lines leaving a large gap of white space.
The way I get around this is to use a number, maybe 5 or 6 simple line breaks ie. <br />,
then all is well. I could continue to do this but would love to know a better way. I've tried <br clear="all" /> which has the same problem.
Why does Netscape 6+ handle line breaks differently to other browsers and is there a neat way around this
other than what I'm already doing?
Many thanks.
See: [webmasterworld.com...]
Does that give you any help?
[w3.org...]
Firstly, many thanks for taking the time to reply but no, unfortunately it doesn’t seem to be the difference between quirks and true standards mode.
I have been using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
but if I remove this and have no DTD at all, it makes no difference to the problem I’m experiencing.
It’s very odd, is there anything else you can think of?
Before you go any further, I assume you ran your page through the W3C Validator, but if not do that first and deal with any errors.
After you've done that, then let's look at a few things...
1) Is it just a copy/paste error, or are you really missing a quote mark around clear=left"?
2) I suggest you get rid of the hspace and vspace attributes (they're deprecated) and use css padding or margins instead.
3) Similarly, instead of using the align attribute in the image tag, use css and a float="left" rule for the image.
Yes, I’m sure it’s something that I am doing that’s at fault.
“Before you go any further, I assume you ran your page through the W3C Validator”
Yep, I use Tidy routinely and it also passes the W3C Validator test.
BTW the missing quote mark was just an example of my rotten typing.
I would love to get rid of the hspace and vspace tags and use CSS but when I do so the page goes pear shaped when viewed with Netscape 4.x and I’ve never been able to find away around this.
Try viewing the following HTML, the laptop I’m using has Netscape 7.1 and IE 5.5 and these two browsers illustrate what I’m seeing very clearly. Removing the table cures the problem, but its needed to hold the page together.
<html>
<head>
<title></title>
</head>
<body>
<table width="750" cellspacing="0" cellpadding="0" summary="The table contains...">
<tr>
<td>
<p>Heading</p>
<img src="***.jpg" width="347" height="117" alt="***" align="left" hspace="12" vspace="3" border="1">
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
<br clear="left">
<br>
<p>New heading here</p>
</td>
</tr>
</table>
</body>
</html>
How about dropping all the <br> approach -- which is semantically questionable anyway. Give the <p> tag a style:
<p style="clear:left;">New heading here</p>
Thanks tedster, that was useful. In future I will use the <p style="clear:left;"> method.
