CSS Display difference in Firefox and IE

[SteveJR]

Hi,

Would someone please explain why my site -

http://www.creative-av.co.uk/testsite/index.html

- looks different in Firefox and IE?

The main difference is on the right-hand side where the "Popular Products" and "News" links are displayed. In IE they are formatted as I want to see them but for some reason in Firefox it is not interpretting the style sheet correctly.

Also, does firefox not interpret the "middle" attribute for the align class in a tablerow?

One last thing, what do people think of the layout and colours in general?

Thanks,

Steve

 

[Vragabond]

I like the layout and the look of the page, but I don't like the logic behind it. Why is the main column floated and the right column not? It would be much easier to float both and would cause a mountain of problems simply vanish away, because the site would be built more robustly.

About the differences. News and popular products are at different heights because one is floated and the other is not. The interpretation of the margins is different for the floated and non-floated elements. As for the "Custom installation" part. It is still floated against the news in Geckos, because it still fits. And for some reason (images being inline elements) FF can fit two of them in one line while IE can only fit one. If you want only one per line, I suggest you turn them into block level elements.

 

[dkdude]

Nice site layout!

Have a look at your definitions :

[tt]#contents[/tt]
[tt]#right[/tt]
[tt].entry[/tt]

In these you define the margin property twice in the same class/id. Try cleaning that up.

The [tt]max-width[/tt] and [tt]min-width[/tt] properties are not supported by IE.

Also consider the difference in interpretation of [tt]width/height[/tt] combined with [tt]border[/tt] ... a "width" example :

[tt]FF:[/tt]
[tt](outside)width = width + border
(inside)width = width[/tt]

[tt]IE:[/tt]
[tt](outside)width = width
(inside)width = width - border[/tt]

Here's a "box lesson" - have a look, it's quite helpful:

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

Here's a css (et al) reference site I often use - it lists browser compatabilities as well:

http://www.w3schools.com/css/

Good luck


Jakob

 

[SteveJR]

Hi guys,

Thank you for the comments and the reference links. My main concern is to get the site looking professional.

The Plasma link should work aswell on the test site. I have used a different CSS layout for my "product pages" as I wanted the #right definition to be the full page width.

The site layout originally came from

http://www.oswd.org/.

I can't remember if I updated the the main/right column so that one is floated and the other isn't!

The reason for fixing the width and height is that I do not want the contents floating all over the place when the page size is changed. I liked the fixed structure as I need it for the pictures of the products I sell.

Vragabond - can you please explain what a "block level element" is?

Thanks again,

Steve

 

[dkdude]

Hi Steve,

Block-level elements... have a look at this description :

http://en.wikipedia.org/wiki/HTML_element#Block-level_and_inline_elements

Regards


Jakob

 

[SteveJR]

Thanks.

Steve