Float and text problem in Netscape

text-align: center not working

[yowza]

I have a layout with two divs side by side: one floated left and one floated right.

In the left float I have an image with captions beneath it. The site is dynamic and the image size can vary. I want the captions to be centered underneath the image.

The following works in IE5, IE6, Opera, and Safari, but not in Netscape 7.

<div class="prodbox" id="prodbox">
<div class="photo" id="photo"><img src="image.gif" /><br />Caption
<div class="buynow" id="buynow">Button</div>
</div>
<h3>content</h3>
<span class="specifics" id="specifics">content</span>
</div>

.prodbox {
float: right;
}

.photo {
float: left;
margin: 3px 4px 4px 0px;
padding: 5px 4px;
text-align: center;
}

I looked everywhere for a solution, but haven't found anything.

[yowza]

I forgot to mention, in Netscape the caption is aligned on the left. In all the other browsers it is centered underneath the caption.

[rogerdp]

Why are you using the same ID and class values?

[ronin]

yowza> I just tried your code in Mozilla Firefox and it works fine - exactly as you intend.

The only thing is, I removed the id attributes.

Whilst you can give an element both an id and a class, generally you only need to give it one or the other.

If the item is unique - ie. it only appears on the page once - then it should have an id. Otherwise, as in the case of your 'prodbox', if the item occurs several times on the same page then you only need to give it a class.

[yowza]

Thanks for the info on the difference between id and class.

However, it still does not work as I would like it to in Netscape 7.1.

Thanks.

[Rambo Tribble]

Try using a position attribute on the div in question.

[HarryM]

I'm not sure if you want the caption and the button on one line, or the button below the caption. If the latter you could try adding a <br /> after Caption which would leave NS in no doubt that the line is terminated.

[rogerdp]

The button is a <div>, which is block level. There should be no doubt that it starts a new line.

[HarryM]

should be no doubt

Hell is paved with "should be's". I know you can get some odd effects with IE if you leave a line of text unterminated without a <br />. I've never seen it in NS but it's an easy thing to try.

[yowza]

The <br> did not work.

I just don't understand how it could work in every browser but NN.

[grahamstewart]

Umm.. I just tried this in Netscape 7.1 on WinXP and it looked fine to me.

[yowza]

It works on the first page, but when you go to another page (or refresh) it shifts from being centered to aligned on the left.

I don't get it. It's driving me nuts.

[edited by: yowza at 3:19 am (utc) on Mar. 16, 2004]

[HarryM]

Have you tried validating your full page?

[yowza]

Yes.

The style sheet validates and the page validates as XHTML Transitional.

[yowza]

I found out that if I declare a width in the CSS that the caption will center in Netscape.

However, my images change in size so this doesn't work for me.

I could get the image width with php and enter it dynamically, but I was hoping to do this with css alone.

[grahamstewart]

Cannot replicate this problem at all on Netscape 7.1
Refreshing the page doesn't seem to break it.

[yowza]

Wierd.

I just downloaded Firefox and I have the same problem with it too.

Oh well. It doesn't look too bad, it's just annoying to have that one little thing that doesn't work right.

[grahamstewart]

yowza: sticky me an address of a page that has this problem. I don't see it on my machine using the code above and Netscape 7.1 or Firefox 0.8

[SuzyUK]

just for info....

I don't see it on my machine using the code above and Netscape 7.1 or Firefox 0.8

ditto for me

Suzy

[Hagstrom]

The site is dynamic and the image size can vary. I want the captions to be centered underneath the image.

You can only use CSS for captions if you are sure that the text is shorter than the image width.

The technique I use is a 1-pixel-wide table:

table.imgr {margin: 5px 0px 5px 15px; font-size:x-small; text-align:center; float:right; }
<table class="imgr" width="1"><tr><td>
<img src="picture.gif" width="50" height="50" alt="">
</td></tr><tr><td>This is my wonderful picture that I made all by my little self
</td></tr></table>

[DanNL]

Hi Yowza,

Try one of the soultions on this page and let me know if they work.
[pennlinepublishing.com...]

Good Luck!
Dan