FF & Opera problem with background?

[hymer]

Hello,

With limited knowledge I have created a landing page for an Amazon aStore. It appeares the way I want it to in IE but the white background does not render in either FF or Opera.

<snip>

I originally started to make the page fluid but I did not like the way all the images looked at different screen sizes. So I was willing to make the layout fixed to get 4 images in a row. I got the effect I wanted in IE but not FF and Opera.

I think the problem is in my use of this CSS that controls the white background:

.ancho{ width: 640px;
}

Can anyone see what I did wrong? Do you agree that I need the fixed layout to get the 4 across with the images?

Thanks,

Bob

[edited by: Robin_reala at 2:41 pm (utc) on July 21, 2007]
[edit reason] Removing URL as per TOS #13 [webmasterworld.com] [/edit]

[Marshall]

Look at thiis thread: [webmasterworld.com...] It covers placing text over thumbnails. I am sure it can be easily adapted for your use.

Marshall

[hymer]

Hello Marshall,

Thanks for the link. I did check it out and tried to apply it. I had the images and text out of place and could not adapt the <p> solution at the end of the post.

The problem is my lack of knowledge about how to set up the CSS/HTML and adapt it to my needs. I want it to look as it does in IE right now.

Is there a way to correct what I do have for FF and Opera or could you show me how you would do it using the simplest method?

Thanks Marshall,

Bob

[hymer]

Hello Again,

I forgot that my URL was not appropriate and was removed so I will show the CSS and HTML below. I think my problem is with the CSS .ancho.

CSS:

.astore-image{
float: left;
padding: 10px 0px 20px 48px;
margin: 0px 0px 0px 0px;
}

.caption{
color: black;
font-size: 75%;
text-align: center;
font-weight: bold;
}

.ancho{ width: 640px;
}

HTML (first in a series of 12 images):

<div class="ancho">

<div class="astore-image">
<p class="category">Chairs</p>
<a href="http://mysite/ergonomics-store.html"><img src="http://mysite/images/site/aeron-chair.gif" alt="Ergonomic Desks" width="100" height="120" border="none"></a><br>
<span class="caption"><a href="http://mysite/ergonomics-store.html">Browse Category</a></span>
</div>

[SuzyUK]

hymer.. what, if anything, happens if you add

overflow: auto;

to .ancho?

[hymer]

Hi Suzi,

Thanks so much. That solved some of the problem. The white background now renders correctly in all browsers. However, FF & Opera do not center it.

That is, FF & Opera show the white background along with the images on the left side rather than centered.

Is there another addition that might correct that?

Thanks a lot,

Bob

[hymer]

Suzi, I answered the question. I had to add

margin: 0 auto;

and that fixed the problem.

Thanks so much for your help.

Bob

[SuzyUK]

Bob, you're very welcome, am glad if it helped

"clearing floats" is a minefield but it's easier now in CSS2 as long as you remember that IE does it different ;)

[edited by: SuzyUK at 8:53 pm (utc) on July 21, 2007]