7 replies [Last post]
nuke
Offline
newbie
Last seen: 16 years 8 weeks ago
Joined: 2003-05-27
Posts: 5
Points: 0

I'm trying to use display:inline in a UL tag to make horizontal lists, and some browsers seem to have problems with it.

I've got a description and screenshots of it here:

http://www.j-e-t.net/temp.html

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 3 years 25 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

"inline" problem with certain browsers

I'm tempted to say that in fact the Safari/Opera version is actually correct.

Can't really explain why all that well but if I was asked to show what I thought would happen with the CSS the one on the right is what I would come up with.

It's to do with the LIs still being 'normal' DIVs so appearing underneath the other DIVs... no matter that they are encased in an inline DIV. Like I said I can't really explain why I think that so I'll stop there!

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

nuke
Offline
newbie
Last seen: 16 years 8 weeks ago
Joined: 2003-05-27
Posts: 5
Points: 0

"inline" problem with certain browsers

seems to me that a big point with css is that you can define all the look in a css file so that the html needed is a bare minimum, as in this case where the menu is all basic html with the id="" addition.

can i do the menu some other way whilst keeping it down on the "html side" of thing?

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 3 years 25 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

"inline" problem with certain browsers

Bah, you're too quick to reply...

I was just about to say that I can also see why some browsers would render it the other way, and would like some other opinions on which should be 'right' by the CSS standards. :?:

There are a couple of ways this can be done, I'd say floating boxes left with each menu inside them. But I'm still interested in the inital question.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

dbowne
Offline
Enthusiast
Washinton DC
Last seen: 16 years 9 weeks ago
Washinton DC
Joined: 2003-05-22
Posts: 53
Points: 0

rendering inline elements..

comes down to implementation of the W3C standards in the browsers. I agree, logically, the format you are looking for (inline display of the UL elements side by side) makes sense. Unfortunately, the W3C standards on this leave much to the interpretation, and the fact is that the mozzilla browsers do no support this implementation of the inline-level element

Quote:
Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). Several values of the 'display' property make an element inline: 'inline', 'inline-table', 'compact' and 'run-in' (part of the time; see compact and run-in boxes). Inline-level elements generate inline boxes.

Inline boxes may participate in several formatting contexts:

* Within a block box, an inline boxes participate in an inline formatting context.
* A compact inline box is given a position in the margin of a block box.
* Marker boxes are also given positions outside of a block box.

I agree that another solution is logical. Table is honestly the easiest solution. Tables have there place. this may be one of them. You can also use absolute positioned divs inside the CONTENT div. They will render relative to the CONTENT div (parent) and can be abolutely positioned inside of it. Need help? with that one, just let me know.

dbowne

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 3 years 25 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Re: rendering inline elements..

Been reading the W3 docs for information and the quote I needed was sat right in my face. Thanks dbowne.

Quote:
Inline-level elements are those elements of the source document that do not form new blocks of content

which I take to mean as having no new blocks inside, just text or an image (eg).

Basically you're not using it the way it was intended which explains the different implementation...

Tables or floats are the way to go.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

dbowne
Offline
Enthusiast
Washinton DC
Last seen: 16 years 9 weeks ago
Washinton DC
Joined: 2003-05-22
Posts: 53
Points: 0

Ahhh....

Thank YOU! I get it now as well. Though I read that section, totally missed the implication of that line. Agreement all around. rah rah.

dbowne

nuke
Offline
newbie
Last seen: 16 years 8 weeks ago
Joined: 2003-05-27
Posts: 5
Points: 0

"inline" problem with certain browsers

my god, since it works in explorer, does that mean that I too THINK like microsoft do?

Nooooo, it's a lie, it can't be!!!