|
| |
|
|
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 >
|
|
|
|
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.
| |
|
|
|
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 >
| |
|
|
|
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. 
