SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    display:block; fixed the problem but i dont understand why?

    Greetingfs from the digital epicentre that is Wetherby UK :-)

    On this page http://tutorial.davidclick.com/2menu.html & illustrated here http://i216.photobucket.com/albums/c...ps8122b377.jpg by pure Googlisation i got a fix to a problem which i dont understand.

    Basically i wanted a solid black thick line to appear when you hover over the menu items:
    arctic fox gray fox desert fox swift fox red fox

    Ok so i did it with adding this bit of CSS:

    #header ul a
    {
    text-decoration:none;
    color:green;
    display:block;
    }

    but my question is..."Why did the display:block; declaration solve the problem"?

    Any insights welcome :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You don't actually need the display:block for the border to show (apart from in IE7 and under). It will work without display:block just fine (indeed better as you won't get the jump in the page when the border appears). You can add padding and border to inline elements but they won't affect the flow of content around them because that is controlled by the line-height of the element and any content that exceeds the line-height just overlaps other elements and will not disturb the flow of the document.

    If you really do need the element to be display:block then you should avoid causing a re-flow and not change the dimensions on hover. Instead give the element a white border by default and then just change the color only on hover and thus causing no re-flow to occur and a smooth transition to the hover state.

    IE7 won't show full padding and borders on inline elements unless you add position:relative (but that's just a nonsense fix for a buggy browser).

    So the basic answer is no you don;t need to make the elements display:block but when you add padding and border they won;t affect the floa of the document (which most of the time is what you want for inline elements.)

  3. #3
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Paul you fixed it :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com


Bookmarks

Posting Permissions

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