PDA

View Full Version : DIV moves position in Firefox when <br> tag



SpeciMan
Mar 21st, 2007, 03:13 PM
In the code below, the div moves position ever so slightly to the right in Firefox (v2.002) when I add a <br /> tag under the image in the tag. In Internet Explorer 7 the code below renders the image in the same position with or without the <br /> tag being present.

I wish to keep the <br /> in this code but how can I prevent Firefox from moving the div position when I put the <br /> below the image tag?




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Moving Image</title>
</head>

<body>

<div style="text-align:center">
<img src="http://homepage.ntlworld.com/speciman/call_for_price.jpg">
<br />
</div>
</body>
</html>

Nightfire
Mar 21st, 2007, 03:33 PM
What do you need the <br /> tag there for? If it's to make a gap, use margin-bottom for the image or margin-top for whatver going underneath it

nexosis
Mar 21st, 2007, 03:41 PM
What do you need the <br /> tag there for? If it's to make a gap, use margin-bottom for the image or margin-top for whatver going underneath it
Avoid margin for god's sake. Use padding, it's going to be a lot better.

SpeciMan
Mar 21st, 2007, 03:42 PM
That code is a small selection taken from a shopping cart which displays images in divs and has the <br /> tag underneath. Am trying to avoid removing the <br /> tag as it may have a knock on effect elsewhere in the cart - however I'll backup my files & try what you have suggested.

Thanks.

jlhaslip
Mar 21st, 2007, 10:54 PM
Just wondering if there is a scrollbar being added or removed with the addition or removal of the extra line?
When the page is long enough, the scrollbar appears and takes up about 18pixels in the window, so the page side shifts to accommodate it. The cure is to set height: 100.1% and force the scrollbars to appear at all times. No side shift results then.

antex
Mar 21st, 2007, 11:01 PM
Avoid margin for god's sake. Use padding, it's going to be a lot better.

Why avoid the use of margin?

jlhaslip
Mar 21st, 2007, 11:25 PM
Some Browsers have difficulties with margins, but not padding, on items.
Margins are (or should be) outside the "box" and padding is "inside", assuming the Box Model is being followed by the Browser. IE will double the Margins.

*200 posts * Yippee! I'm getting a life next week...

antex
Mar 21st, 2007, 11:33 PM
Every day, my hatred for IE grows that little bit more. One of two things should happen:


Internet Explorer stops screwing up compliant code.
Internet Explorer gets hacked to death.


Boycotting IE would also be pretty nice; maybe just by not trying to fix the code for it, a la http://www.ff00aa.com/ (view in IE <= 6).

Arbitrator
Mar 21st, 2007, 11:41 PM
<div style="text-align:center">
<img src="http://homepage.ntlworld.com/speciman/call_for_price.jpg">
<br />
</div>This particular line‐break can be invoked by applying the CSS declaration display: block to the image; thus, the br element is not required. With that in place, you can center the image by applying margin: 0 auto to it.


The cure is to set height: 100.1% and force the scrollbars to appear at all times.I would say that overflow: scroll is a better way to force scroll-bars.


Some Browsers have difficulties with margins, but not padding, on items.
Margins are (or should be) outside the "box" and padding is "inside", assuming the Box Model is being followed by the Browser. IE will double the Margins.I thought that Internet Explorer 6ís doubled margin bug only occurred to the left of a left‐floating element and to the right of a right‐floating element?

jlhaslip
Mar 22nd, 2007, 12:25 AM
There are several problems with IE and floats.

http://www.brunildo.org/test/