1 reply [Last post]
olliemcphee
Offline
newbie
Last seen: 6 years 37 weeks ago
Joined: 2007-09-26
Posts: 5
Points: 0

Hi All,

I am trying to place 6 inline DIV's into a DIV container

The container has a fixed width & height:

#TopNavigation
{
width:950px;
height:80px;
}

And the DIV's inside share the following class:

div.Nav
{
height:74px;
width: 157px;
display:inline;
}

Each of the DIV's also have an ID attribute. this is used to assign a unique image to each DIV in CSS. The Images are small enough for the containers.

My problem is that it works perfectly for IE6 & IE7, but not for Firefox...

I assume that its one of IE's cheats that doesnt follow W3 standards - but does anyone know how to make this work for firefox?

If i don't use

'display:inline;'

then they both render the same (each DIV is placed below on another)

but when i do use the inline property, IE has the desired effect... but FF doesn't display any DIV's at all anymore

Any help is more than welcome,

Thanks,

Ollie

Logus
Logus's picture
Offline
Enthusiast
Last seen: 5 years 30 weeks ago
Joined: 2008-01-08
Posts: 53
Points: 0

Use float

Hello
Here my version that work in Firefox,IE6, IE7 using float

DIVs inside

You can see example working at http://www.miguelmanchego.com/samples/divs_inside.html

If you don`t use DIV and use LI works well with display:inline, Does anyone know why?

"Todo habito hace nuestra mano mas habil y nuestro genio mas torpe"
Contact in my blog http://www.miguelmanchego.com