www.webdeveloper.com
Results 1 to 14 of 14

Thread: Strange li problem

  1. #1
    Join Date
    Mar 2006
    Posts
    81

    Strange li problem

    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

  2. #2
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    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

  3. #3
    Join Date
    Mar 2006
    Posts
    81
    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.

  4. #4
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    So make the page div width 961px.
    "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

  5. #5
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    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% ..........

  6. #6
    Join Date
    Mar 2006
    Posts
    81
    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>

  7. #7
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    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.

  8. #8
    Join Date
    Mar 2006
    Posts
    81
    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

  9. #9
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    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

  10. #10
    Join Date
    Mar 2006
    Posts
    81
    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.

  11. #11
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    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?

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

    background: #849eb3 url(imagesName.jpg) no-repeat left top;
    I build for: Firefox and tweak for IE

  12. #12
    Join Date
    Mar 2006
    Posts
    81
    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

  13. #13
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    It means that there is excess code in your css that can be removed
    Code:
    #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}

  14. #14
    Join Date
    Mar 2006
    Posts
    81
    Thanks for that Centauri

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles