CODEWITHSUNDEEP
htmlcsshyperlink
Jeremy Maree
Jeremy Maree

Reputation: 1

Fix A-tag Height/Width?

So I've got some simple code here: 

<div id="nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
    </ul>
</div>

CSS-

ul
{
list-style-type:none;
width:700px;
height:44px;
padding:0;
}

li
{
float:left;
margin:0;
padding:0;
width:80px;
height:auto;
}

a
{
height:40px;
text-decoration:none;
border:2px solid black;
background:blue;
}

-#nav
{
width:786px;
height:66px;
border:2px solid black;
background:#C4BD97;
margin:5px;
}

This code should force my a tags to align themselves horizontally and give them a definite height/width. They align perfectly, but their height and width WILL NOT change no matter what I do. Never ran into this problem before, is my HTML broken? Thanks.

Upvotes: 0

Views: 1360

Answers (2)

bool32
bool32

Reputation: 98

Try setting the height and/or width on the anchor tags in the li. That is, push out the li using the anchor tags. You can do this in a decently uniform way using padding to make sure the entire area of the anchor is clickable. Also, this approach works back to I believe ie6(not sure about ie5, have not tested it). Following is roughly what I'm talking about:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            body, #menu, #menu li
            {
                position: relative; 
                display: block;
                padding:0px;
                margin: 0px;
            }

            #menu
            {
                list-style-type:none;
                width:100%;
            }

            #menu a
            {
                position:relative;
                display:block;
                float:left;
                width:25%;
                padding:10px 0px 10px 0px;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <ul id="menu">
            <li><a href="#">One item</a></li>
            <li><a href="#">Another item</a></li>
            <li><a href="#">hola</a></li>
            <li><a href="#">Hi</a></li>
        </ul>
    </body>
</html>

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191739

display: inline elements do not respect height. Change them to display: inline-block (or perhaps block) or use line-height to alter the height.

http://jsfiddle.net/kHkyh/

Upvotes: 2

Related Questions