Tue, 2003-05-27 17:30
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:
Tue, 2003-05-27 18:59
#1
"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!
Tue, 2003-05-27 19:03
#2
"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?
Tue, 2003-05-27 19:07
#3
"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.
Tue, 2003-05-27 19:55
#4
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.
Tue, 2003-05-27 20:29
#5
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.
Tue, 2003-05-27 20:38
#6
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.
Wed, 2003-05-28 12:26
#7
"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!!!