This is a strange one I donīt have a clue why this is happening, for some reason a division is left out on a UL LI on this page http://216.219.94.105/divs.htm
It has to do with the #nav li width. Disable it or increase it to 11% and the border shows up.
"Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan
Thanks for the tip but it doesnīt work see what is does here: http://216.219.94.105/david.htm The thing is that there are 10 lis so the width is 10%, the topnav lis are all 95px, the topnav a is border-right: #d8e1e9 1px solid; which is what doesnīt show and the width of the page div is 960px.
Last edited by eddietheeagle; 07-23-2007 at 03:39 PM.
"Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan
I have now changed it so that it works on IE and FIrefox however I really need to understand why it works. What I did is the following and I changed the width to auto. It seems to work but why?! The width of the page is 910px there are 10 lis (width 10%), topnavīs width is auto with a border-right of one pixel. So the width of the ul is 10% of 910px which is 91px and the topnav a width is 90px + 1px of border right? Is this a good setup would there be a better way to do it? What is the best way to do this?
Thank-you
What you have is fine. There is probably no need to even specify any width at all for the <a> tags - the block display will ensure they fill the available width anyway.
Thank Centauri for the reply. So basically the fact that I have display inline means that the li will always be fine. I googled the display:inline and so now I know that it means that the element (in this case li)is displayed inline, inside the current block (in this case topnav div which has width auto). The topnav a I always want to be the same size as the li. It seems not to matter that the ul isnīt defined-why is this not an issue?
This ia all fine then for 10 lis- if I want to have 9 lis then things get tricky. This is the difficult part as (I imagine) that 100% divided by 9 is not an integer. How does this work?
Sorry all the questions but I really need to understand how this works so I can stop being such an experimental css coder and do things and know they will work instead of guessing!!
TIA
Actually, in this case the <li> isn't being displayed inline.... As the <li> is floated left, it automatically becomes a block element, which means it can accept explicit size (if it is an inline element, it cannot be given size). As far as most browsers go, the inline display can be removed from the <li>s without any effect (although list bullets will appear due to the inline display declaration killing bullets, but these can be removed by list-style:none anyway). the main reason for using inline display for floated elements is to kill any chance of IE6's doubled-float margin bug from causing problems - other browsers ignore the inline rule.
The <ul> is normally an inline element as well. If the sum of all the <li>s is a little short, a background colour on the <ul> will not fill the gap as the <ul> is only the width it needs to be. If the <ul> is set to block display, it will automatically fill the width of its container, but will not have any actual display height due to its contents (the <li>s) being floated. If the <ul> is cleared (by using overflow:hidden for instance) (or given an appropriate height) and displayed as block, a background colour on the <ul> will fill any gaps if the width of the menu is a little short. If the % division does not produce an integer, set the <li>s to the next smallest pixel value, and any remaining gap can be evened up with padding on the <ul>.
There is nothing wrong with being an experimental css coder - experimenting is a great way to teach yourself what does what with experience.
Thanks Graeme really appreicated, so I learnt a new thing today the difference between block level elements and inline elements! That is what I was missing- I will get to work on dominating the subject.
Thanks again, Regards, Ed
HTML elements are classified as either block-level or inline (text-level).
Block-level elements
Headings, paragraphs, lists, or tables are "large" structures containing other blocks, inline elements, or text (but see nesting rules). They are usually displayed as independent "blocks" separated from other blocks by vertical space (margins).
Inline or text-level elements
Hyperlinks, citations, quotations, or images are "small" structures that represent or describe small pieces of text or data. They may contain only text or other inline elements, and are usually displayed one after another on a line within the block that contains them.
Reply With Quote
Bookmarks