www.webdeveloper.com
Results 1 to 2 of 2

Thread: [RESOLVED] Cause of extra space between buttons?

  1. #1
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350

    resolved [RESOLVED] Cause of extra space between buttons?

    In the following there are 4 rows of over-sized buttons. At the moment, the buttons do not trigger events.

    The 2nd row adds some extra space after the 1st button in the row.

    I assume the extra space t is because I am trying to create a multiple line text in the button, but I don't know how to remove the space.

    Any suggestions?

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Button Menu </title>
    
    <style type="text/css">
    .menuBtn { width:150px;  height:100px; font-size:1.1em; }
    .menuBtnF { background-color:red; color:white; }
    .menuBtnO { background-color:orange; color:black; }
    .menuBtnU { background-color:green; color:white; }
    .menuBtnB { background-color:blue; color:white; }
    </style>
    </head>
    
    <body>
    <button class="menuBtn menuBtnF"> WebDeveloper </button>
    <button class="menuBtn menuBtnF"> CodingForums </button>
    <button class="menuBtn menuBtnF"> DreamInCode </button>
    <button class="menuBtn menuBtnF"> DynamicDrive </button>
    
    <br>
    <button class="menuBtn menuBtnU"> Nova<br>Southeastern<br>University </button>
    <button class="menuBtn menuBtnU"> Optometry </button>
    <button class="menuBtn menuBtnU"> Library </button>
    <button class="menuBtn menuBtnU"> Homepage </button>
    
    <br>
    <button class="menuBtn menuBtnO"> COP </button>
    <button class="menuBtn menuBtnO"> OTM-1 </button>
    <button class="menuBtn menuBtnO"> OTM-2 </button>
    <button class="menuBtn menuBtnO"> OTM-3 </button>
    <button class="menuBtn menuBtnO"> OTM-4 </button>
    
    <br>
    <button class="menuBtn menuBtnB"> Optics </button>
    <button class="menuBtn menuBtnB"> Theoritical </button>
    <button class="menuBtn menuBtnB"> Physical </button>
    <button class="menuBtn menuBtnB"> Clinical </button>
    
    </body>
    </html>
    Note: During further testing, adding some <div> tags around the rows does not change the display either.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350
    Got it...

    Change the class...
    Code:
    .menuBtn { width:150px;  height:100px; font-size:1.1em; vertical-align:top; }
    to add the vertical-align:top or vertical-align:bottom;

    Either one works well.

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