Strange li problem

[eddietheeagle]

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

You can see the screen grabs:
Firefox(problem):
http://216.219.94.105/FF.jpg
IE (fine):
http://216.219.94.105/IE.jpg

Thank you for any pointers, Regards, Trevor

[ray326]

It has to do with the #nav li width. Disable it or increase it to 11% and the border shows up.

[eddietheeagle]

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.

[ray326]

So make the page div width 961px.

[Centauri]

Hard to see what the problem is when your linked page is not set up as described - you have only 9 menu items and <li> width is 11% ..........

[eddietheeagle]

Hi sorry the link is:
http://216.219.94.105/david1.htm

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

#page { border: 1px solid #ddd; width: 910px; margin: 0 auto; text-align: left;}
#topnav li {display: inline; background: #849eb3 no-repeat left top; float: left; width: 10%; height: auto}
#topnav a {border-right: #d8e1e9 1px solid; display: block; background: no-repeat left top; font: 11px/20px tahoma, arial, sans-serif; width: auto; color: #fff; text-align: center}


<ul id="topnav">
<li><a title="Home" href="index.cfm">Home</a></li>
<li><a title="About Medarc" href="about.cfm">About Us</a></li>
<li><a title="Medarc Defence" href="defence.cfm">Defence</a></li>
<li><a title="Medarc Healthcare" href="health.cfm">Healthcare</a></li>
<li><a title="Medarc Property" href="property.cfm">Property</a></li>
<li><a title="Medarc Environment" href="environment.cfm">Environment</a></li>
<li><a title="Medarc National" href="national.cfm">National</a></li>
<li><a title="Medarc International" href="international.cfm">International</a></li>
<li><a title="Contact" href="contact.cfm">Contact</a></li>
<li><a title="Login" href="login.cfm">Login</a></li>
</ul>

[Centauri]

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.

[eddietheeagle]

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

[Centauri]

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.

Cheers
Graeme

[eddietheeagle]

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.

[WebJoel]

I am curious: why the:

#page { border: 1px solid #ddd; width: 910px; margin: 0 auto; text-align: left;}
#topnav li {display: inline; background: #849eb3 no-repeat left top; float: left; width: 10%; height: auto}
#topnav a {border-right: #d8e1e9 1px solid; display: block; background: no-repeat left top; font: 11px/20px tahoma, arial, sans-serif; width: auto; color: #fff; text-align: center}

If no url() is stated, -what are you not-repeating and positioning left and top? :confused:

It isn't harming anything, but typically this would be written as:

background: #849eb3 url(imagesName.jpg) no-repeat left top;

[eddietheeagle]

I don´t know the answer to that one Joel :)

What image would I use in the url??? My navigation doesn´t have images. Sorry I´m a noobie I don´t understand that one

[Centauri]

It means that there is excess code in your css that can be removed

#topnav li {display: inline; background-color: #849eb3; float: left; width: 10%; height: auto}
#topnav a {border-right: #d8e1e9 1px solid; display: block; font: 11px/20px tahoma, arial, sans-serif; color: #fff; text-align: center}

[eddietheeagle]

Thanks for that Centauri