www.webdeveloper.com
Results 1 to 4 of 4

Thread: an extra space

  1. #1
    Join Date
    Mar 2012
    Posts
    22

    an extra space

    can you guys help me out and take a look at the navigation bar ?

    why is there an extra space in front of the word "about" "game" and " contact"

    i want is to fill the whole thing. jsut like when you put your mouse over home.

    http://oxtis.com/

  2. #2
    Join Date
    Nov 2002
    Posts
    2,632
    My guess is you need to zero out the padding for your <li> tags in that area. If not that, then the margin. The #nav li CSS might have overridden your previous code where you zeroed it out for a bunch of stuff.

    See also:
    http://www.htmldog.com/guides/cssadvanced/specificity/

    You also don't have proper closing </span> tags in that area.

  3. #3
    Join Date
    Jan 2012
    Posts
    31
    That is very odd behavior. My first thought was padding or margin, but they are at 0.

    I spent few a minutes in firebug trying stuff and after a few things I put a "float: left;" on those <li> tags and it seemed to work. Except for the fact that all of the links or "|" have "&nbsp;" or spaces with them, so some if extra spacing may be caused by them. Also the "|" has a font size of 30px, whereas the links are 25px, so the "float: left; will cause the "contact" link to shift up. So setting a "line-height" to the <li> may fix that somewhat. Best option is to remove those spans and use the same font size for all the text. If you have to have the "|" at 30px you may to need change the <ul> and <li> to a <div> and <span>, respectively. The <ul> and <li> tags have predefined style attributes, as they are intended for text styling, using them for a block element, like div, can be difficult. I personally avoid using <ul> and <li> for menus.


    A few side notes:
    The </> is not the correct way to closes a <span>, or any tag for that matter. I'd get rid of the "target=_blank", most users will find it annoying if your opening links in a new tab or window, only do that when the link is pointing off your website.

  4. #4
    Join Date
    Mar 2012
    Posts
    22
    thanks guys.
    i put a float left in the <li> tag and it worked.
    thanks

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