h2g2 The Hitchhiker's Guide to the Galaxy: Earth Edition

OK - been playing all day getting some nice CSS controlled, horizontal user list based navigation on a page, but this bit has caused me to scratch my head, and as it is going home time.....

Anyway, the navigation are held in a Ul in a div id "nav" defined as ;

#nav{
background-color : #336633;
color : White;
}
#nav ul{
width : 100%;
margin : 0px;
padding : 0px 0px 0px 174px ;

white-space : nowrap;
background-color : #336633;
color : White;
float : left;

}

I want it to stretch the entire width of the page, hence the 100% width - and the first List Item needs to be 174px in to align with some vertical navigation, hence the left padding of 174 - this has the effect of extending the width of the DIV by 174px over everything else on the page.

It's late (for me (ie past 17:00)) but any help would be much appreciated - I don't fully understand where an element gets its definition of "100%" from .

Cheers

CHawke

In what browser? There are still some spacing differences in different browsers and different versions of the same browser.

The 100% width should theoretically be in relationship to whatever is containing your UL or of your div, but then the float may mess that up. And if this is supposed to be 100% of the body width, you may not want to use a float at all - try absolute or relative positioning. It's hard to say without seeing the context.

Is it blah blah blah ? If so, what surrounds the and how is that positioned? Try setting the width of the #nav item itself then the UL should be 100% of that.

Did you try looking at it in Mozilla's built-in DOM Inspector? That should help give some visual definition to the hierarchy and what is forcing the sizing and positioning of your UL.

Quck reply before work - firstly thanks, several pointers.

Firefox, IE6 and Opera 7 - all has it like this - rare that I have a problem that all three of my test browsers show!

More later after I try a few things.

CHawke

OK, not the real page, that's still on the test server, but an extraction of it and placed on my personal site

http://chawke.co.uk/testbed.htm

Cheers

CHawke

Whilst not the look I was looking for

http://chawke.co.uk/testbed1.htm

Is tidier, and for now will do as I need to move on and get the page working - any suggestions as to how to get it the way I want (the dark green horizontal nav bar all across the page) welcome.

This second one I managed by moving the 174 px left pad to the DIV itself reather than the UL.

CHawke

Odd, it certainly *looks* like it should work, but I get the same behavior in Safari too, so clearly all the browsers are being consistent in their interpretation of the css.

I think the issue may be the "float". That should cause the items underneath (the #navbox) to move upwards and offset the UL. The DOM inspector in Mozilla shows that the #nav has moved horizontally 101 pixels (Safari's DOM inspector shows the same value, I don't know where the 101 comes from) and oddly Mozilla reports that it has *no* height or width - I think that refers to it's height or width based on the contents, and since the UL has floated out of the div, it in a way has no contents. It seems like the #nav is somehow inheriting it's position based on the float of the UL, which doesn't seem quite right to me so I may be way off. But then I would expect the float to make the UL look like it does in testbed1.html, not like it does here.

I'm just guessing here, and I can't test because I've got to get to work too, but that's where I'd start - with the float. Try giving things borders too - that can help debug the positioning. I give each element a different color border, so I can see which element has actually shifted unexpectedly. Also change the background color of the #nav to see if that change effects the far right part of the page or not. According to what Mozilla shows, what you are seeing there is actually the background color of the UL.

Many thanks for that - my boss actually prefered the 2nd version anyway, so not an issue - well not formally, but I will be blowed if I leave it there - I'll chase when I have time.

How do you do the DOM thing in Mozilla - a few versions ago the DOM inspector came with Firefox, but has vanished again.

I did remove the floaf, but horrible things happened (I think at one stage IE didn't show anything else on the page!)

BTW there is now a link on testbed1 to the final draft verion awaiting "client" approval - don't like linking to work pages here, so be quick, the link may not be there long

Again, thanks for the help.

CHawke

Sussed the DOM inspector - didn't realise it was one of the "custom" options on Firefox install.

That looks a powerful tool - I'll play with that later

CHawke

Why, oh why, oh why did no-one tell me about the DOM inspector before and how cool it is?????

CHawke