SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy tableless,scriptless menubar, but not so tight

    I've been testing some alternative menubar-constructions. With CSS only.

    In this example I come very close to my goals. The menubuttons are LI-items made inline with CSS and the hover is on the <a href> link with a background-image.

    But, ... It is not so very tight to the right border of the button when you hover.
    I tried all possible margins/padding solutions, but I seem to hold that mysterious space to the right of the button:hovered.


    Anybody an idea what I'm doing wrong here?

    Cheers
    >> example with CSS code: http://www.ict-id.nl/temp/sitepoint/...ngmenus03.html
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..


  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    In your code here:
    Code:
    <div id="menu03"> 
          <ul class="x3">
            <li class="style03"> <a href="testingmenus01.html" class="menu3">example 
              01</a> </li>
            <li class="style03"> <a href="testingmenus02.html" class="menu3">example 
              02</a> </li>
            <li class="style03"> <a href="testingmenus03.html" class="menu3">example 
              03</a> </li>
            <li class="style03"> <a href="testingmenusall.html" class="menu3">all</a> 
            </li>
          </ul>
        </div>
    Change it so that your closing li tags are on the same line as the <a> tag, like so:
    Code:
    <div id="menu03"> 
          <ul class="x3">
            <li class="style03"> <a href="testingmenus01.html" class="menu3">example 
              01</a></li>
            <li class="style03"> <a href="testingmenus02.html" class="menu3">example 
              02</a></li>
            <li class="style03"> <a href="testingmenus03.html" class="menu3">example 
              03</a></li>
            <li class="style03"> <a href="testingmenusall.html" class="menu3">all</a></li>
          </ul>
        </div>
    HTML is not supposed to care about whitespace or newlines, but tell that to Microsoft and the Mozilla group.

  3. #3
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking thnx.. but nope

    Code:
    <div id="menu03"> 
          <ul class="x3">
            <li class="style03"><a href="testingmenus01.html" class="menu3">example 01</a></li>
            <li class="style03"><a href="testingmenus02.html" class="menu3">example 02</a></li>
            <li class="style03"><a href="testingmenus03.html" class="menu3">example 03</a></li>
            <li class="style03"><a href="testingmenusall.html" class="menu3">all</a></li>
          </ul>
        </div>
    nope still there...
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..


  4. #4
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy btw VGARCIA

    I changed the code in notepad, deleted whitespace and closing tags as you adviced..all on the same line.. pulled it in DW MX again.. and.. there they were again .. any idea how to fix that in DW, so doesnt change the linebreaks andso..?
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..



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
  •