Forum Moderators: not2easy

Message Too Old, No Replies

CSS list across header

         

wesg

3:10 am on Nov 15, 2008 (gmt 0)

10+ Year Member



I'm writing a header navigation bar for my website, and it works well with what I have so far, in multiple browsers, but due to the setup of the list, whenever I change a page, the width breaks. Each browser is aligned properly down to the pixel.

How can I set up CSS to take a list and make the entire list a set width and somehow figure out the padding automatically? What's the usual process to do that?

swa66

9:36 am on Nov 15, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'd try to do without "padding" by side-stepping the issue.
The trick usually boils down to using the background of a parent to fill up any remaining space instead of trying to insert a sibling to fill the gap.

Aligning down to the pixel is very tricky as IMHO it's utterly impossible to try every possible browser currently in use (let alone the future ones). It's next to impossible to own -world-wide- all possible music players, pdas, phones, game consoles, tv set-top boxes, fridges, ...

vincevincevince

10:25 am on Nov 15, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Unfortunately you cannot do that. This thread should explain a lot more on the topic. [webmasterworld.com].

Use a table or write a javascript snippet to add padding dynamically on load. For the javascript route - the key is to start with something too small, then increase it until you find that the list item height is half the list container height (i.e. it's jumped to two rows) - and then backtrack by one.