|
| |
|
|
yb2
Posts: 653
Joined: 1/30/2006
Status: offline
 |
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 )
< Message edited by yb2 -- 4/22/2006 13:40:21 >
|
|
|
|
Tailslide
Posts: 5927
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
yb2
Posts: 653
Joined: 1/30/2006
Status: offline
|
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
Posts: 5927
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
BonRouge
Posts: 42
Joined: 3/3/2006
Status: offline
|
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.
< Message edited by BonRouge -- 4/23/2006 3:52:21 >
| |
|
|
|
Tailslide
Posts: 5927
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
yb2
Posts: 653
Joined: 1/30/2006
Status: offline
|
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.
| |
|
|
|
yb2
Posts: 653
Joined: 1/30/2006
Status: offline
|
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
Posts: 42
Joined: 3/3/2006
Status: offline
|
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.
< Message edited by BonRouge -- 4/23/2006 11:02:32 >
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
I'm sorry you decided to leave the right path and go the wrong way. 
