fixed width list (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

yb2 -> fixed width list (4/22/2006 12:28:33)

this little ditty

li
{
display: inline;
text-align:center;
width: 100px;
}

only works in IE

Does anyone know the CSS that will give me a fixed width list item in FF and the others? It's for a horizontal menu so I can't use any of the parent containers to constrain it ( as far as I know )



Tailslide -> RE: fixed width list (4/22/2006 12:59:32)

Have a look at the horizontal lists here: http://css.maxdesign.com.au/listamatic/ there are loads of different options.

The code you posted works for me in FF as it does in IE (except the color bit is incorrect, should be color: green; instead). So if you're getting problems then it may be something else interfering with the rule.



yb2 -> RE: fixed width list (4/22/2006 13:54:56)

fixed the little green bit - thanks! (many eyes...:)

It's not doing the fixed width bit for me - is it fixed width for you? That's the important aspect for me.



Tailslide -> RE: fixed width list (4/22/2006 14:13:27)

There's not enough formatting on your snippet of code to see.

width-wise, you could set a width on the <ul> itself and just add padding to the <li>s to allow for different lengths of text if you need the menu to be a certain width. That said there's nothing in particular stopping you from setting widths on the <li>s if that's the approach you prefer.

If you want the effect where it sort of looks like a button and the whole thing highlights when you hover over any of it (not just the link itself) then you might be better off floating the <li>s and making them display:block rather than doing display:inline.

Here's an example from the site I quoted with a specific width set on each list item: http://css.maxdesign.com.au/listamatic/horizontal09.htmhttp://css.maxdesign.com.au/listamatic/horizontal09.htm



yb2 -> RE: fixed width list (4/22/2006 17:24:56)

Thanks for the help, much appreciated, but ended up using a table.

I can't wait for the day they standardise elements attributes so I can add a width without using 20+ lines of CSS to get nowhere quick.[;)]

The link was very interesting though, it has been bookmarked! [8|]



BonRouge -> RE: fixed width list (4/23/2006 3:33:03)

I think the problem you are/were having is the fact that inline elements do not have width - block-level elements do. You're taking a naturally block-level element and making it inline, so the width value is disregarded. IE gives it a width because it's stupid and doesn't know the rules. I'm sure you've sorted it out now by looking at Listamatic, but if you want a horizontal menu with fixed with list items, you need to float them. The funny thing is if you do this and you put a margin on the li elements, you'll need to add 'display:inline;' to your li rules due to an IE bug. Good browsers will ignore that rule, as floated elements are, by nature, kind of block-level. Without it, IE will double the margin that you set, because it's a bit insane like that. For some reason, which God only knows (or maybe just one of the IE developers...), adding the 'display:inline;' kills that bug.

As far as making the whole of the li change colour on hover goes, you'll need to set the 'a' tag to 'display:block;'. Even doing this might not be enough for IE6, which is riddled with bugs. Tons of them, there are. IE has this great little feature called hasLayout which is the cause of masses of rendering problems and the source of the famous 'holly hack' (* html). I think, with IE7 coming up, it may be best to put the extra rule in IE conditional comments: the extra code being something to trigger hasLayout, for example... 
li a {
zoom:1;
}

It's not standard, but neither are conditional comments. Neither of these will cause any problem with the W3C validator, however, and it should fix that problem.

I hope this has helped.



Tailslide -> RE: fixed width list (4/23/2006 5:29:10)

About 3am this morning. That was when I remembered about inline elements not being able to have a width!

I hate haslayout issues - they can be very obscure.

As far as standardising elements goes - well the rules are there already as you know. 95% of issues arise because of IE's slack or inaccurate interpretation of those rules.



yb2 -> RE: fixed width list (4/23/2006 6:30:41)

Thanks for the help. I was just frustrated that it was so difficult to achieve what I wanted to do. There are loads of things, as you quite rightly point out, that are non standard about IE etc, but I wasn't really going down that path. There are lots of things the W3C have still not done to html and css that needs doing - at that moment I wanted a width attribute!! (rightly or wrongly)

Block and float didn't work for me. I set up a test form with only the menu and a new stylesheet with only the relevant styles, and stuff from Listomatic. After a couple of hours mucking around it still wasn't doing what I wanted, so I used a table - it took 5 minutes (if that) and it worked.

There were added complexities about the design that I didn't get into at first, because I find it's best to start off complex questions simply (IMO), and by the time it needed the extra info I'd used a table and fixed it!

I didn't want to use a table, as it's not strictly tabular data, but then ho hum, as long as it works.

Thanks again, do really appreciate it.



BonRouge -> RE: fixed width list (4/23/2006 7:28:54)

[:(] I'm sorry you decided to leave the right path and go the wrong way. [&o]

Although the table took five minutes and you were finding it difficult to get your list right without CSS, I think it's really worth perservering with the whole semantic-code thing and CSS for style. When it all falls into place in your mind, it'll be a lot easy for you to make that list look good without a table than with one and you'll benefit from the ease with which you can its style. For example, if you decided to use the same list as a vertical menu - maybe on a different page - you'd just remove the float property from the CSS and you'd be sorted.

Anyway, better luck next time...



yb2 -> RE: fixed width list (4/23/2006 7:36:43)

quote:

For example, if you decided to use the same list as a vertical menu


how does that make CSS useful? It's supposed to help me do what I want, not the other way round!

Like everything, CSS has it's limitations. The site validates with w3c in both xhtml and css. It's a simple, clear design, and I'm working hard on as many accessibility features as I can. That still doesn't mean that I should use CSS for everything, or that it would ultimately be useful, or that I've gone "the wrong way".

A table did what I wanted in less code, less time, and less effort. The proof of the pudding is in the eating.



BonRouge -> RE: fixed width list (4/23/2006 8:19:11)

Yes, CSS has its limitations, but I'm not really talking about CSS - I'm talking about HTML. The idea of HTML is to label your content as what it is - paragraphs go in 'p' tags, headings go in 'hx' tags, etc. I could make a page where every element was either a div or an h1 tag, for example. It would pass the validation with flying colours, but it would still be wrong.

The reason I say you chose to do it the wrong way is that you've mislabeled your content. As you mentioned, that's not tabular data you've got there, therefore it's mislabeled and wrong. I'm not denying that it works OK - I'm sure it works really well and looks good too - but it's still wrong.

Of course, you're free to do whatever you like. I just wanted to lend a bit of encouragement and hope you manage to do it correctly next time.



yb2 -> RE: fixed width list (4/23/2006 8:34:14)

Anyway, it is in a table so I'll correct myself and say it is table data and everything is alright.
Dictionary.com backs me up.
[:D]



BonRouge -> RE: fixed width list (4/23/2006 9:05:21)

Fair enough. I guess you're right... [sm=rolleyes.gif]



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125