Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Where is the space between these menu items coming from?

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • July 28, 2011 at 8:45 pm #33696
    TreeTopStudio
    Member

    In the dark red tab menu at center of page…

    There is padding/margin between “General Business Financing,” “Franchise Financing” & “Equipment Dealer Financing.”

    I looked through all html and css with firebug and can’t figure out where it’s coming from! There needs to be some space between the tabs, but I didn’t add the space that’s there now!

    Thanks,
    CM

    July 28, 2011 at 8:49 pm #84188
    TheDoc
    Member

    You have non-breaking spaces in your markup:

        |    

    Speaking of the menu, you are going to create horizontal scroll bars if you give it that big of a width.

    July 28, 2011 at 9:55 pm #84191
    wolfcry911
    Participant

    It comes from the carrige return in the markup. you could do two things: end the li after a return and start the next li on the same line, or float the li instead of display: inline;

    July 28, 2011 at 9:58 pm #84192
    TreeTopStudio
    Member

    I don’t have any non-breaking spaces in this menu…

    I understand what you’re saying about the menu in the header. I think it will be best to use text-align right rather than the absolute positioning I’m currently using.

    Thank you… CM

    July 28, 2011 at 10:01 pm #84193
    TreeTopStudio
    Member

    Thank you wolfcry911. I didn’t know a carriage return could do that. I thought white space didn’t effect html mark-up…

    I learned something new.

    July 29, 2011 at 12:41 pm #84222
    TheDoc
    Member

    Ummmm… am I looking at something else? This is the source code of the nav that I see:

    July 29, 2011 at 12:41 pm #84223
    TheDoc
    Member

    Oooohhh, I’m dumb. I thought you were talking about the MAIN nav.

    July 29, 2011 at 5:26 pm #84240
    carlbennettnz
    Member

    In line 191 of ucbl-styles.css you’ve got this:

    ul.main-nav-list li {
    
display: inline;
    
padding-right: 5px;
    
}

    If you remove the padding then the red rectangles should touch again

    July 29, 2011 at 9:12 pm #84250
    TreeTopStudio
    Member

    wolfcry911 figured it out… After I let all the list items in the unordered list run together in the markup the extra space disappeared. Then I added the 5px of padding-right into the css. It was bugging me that there was space that I didn’t add.

    Markup went from what you see in post above to this…

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.