• Advertisement
Sign in to follow this  

[web] CSS Height

This topic is 3316 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I'm trying to create a simple menu bar with CSS. The problem I'm having is that the background is being displayed with a height of 0 if I've only got <a> tags in it. If I put some text inside it without any tags, the background bar resizes correctly. I should say that it seems to work fine in Visual Studio, but not in Internet Explorer, so I'm inclined to thinkg it's IE that's at fault. But I'd like it to work in IE. CSS:
/* Main page body */

body
{
	margin: 0px;
	background-color: #ffffff;
	border: 0px solid #000000;
	position: absolute;
	top: 0px;
	left: 0px;
	height: auto;
	width: 100%;
	z-index: 1;
	padding: 0px 0px 0px 0px;
}

/* Menu bar styles */

#menu
{
	margin: 0px;
	padding: 0px;
	border: 1px solid #000000;
	background-color: #C0C0C0;
	width: auto;
}

a.menuoption
{
	padding: 0px 5px 0px 5px;
	margin: 0px;
	border-style: none solid none none;
	border-width: 1px;
	border-color: #000000;
	width: auto;
	float: left;
	position: relative;
	cursor: pointer;
}

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="stylesheets/main.css" />
    </head>
    
    <body>
        
        <!-- Page header -->
        <div id="pagehead">
        
            <!-- Title logo -->
            <img src="images/global/title.jpg" alt="" />
        
            <!-- Menu bar -->
            <div id="menu">
                  
                <a class="menuoption" href="link1.html">
                    Link1
                </a>
                
                <a class="menuoption" href="link2.html">
                    Link2
                </a>
                
                <!-- Adding in any text will make the bar resize to fit it, but it doesnt
                     resize when there are only the links above. E.g. Uncomment the text below to see the difference -->
                <!-- Test -->
                          
            </div>
            
        </div>
        
    </body>

</html>

Share this post


Link to post
Share on other sites
Advertisement
Add an element (e.g. a div) at the end of the menu that has a 'clear:left;' (or 'clear:both;') CSS element. The links do not take up any height in the menu, because their position is relative. Removing 'position:relative' fixes the problem in IE, but firefox needs the 'clear:left' solution.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title></title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>

<!-- Page header -->
<div id="pagehead">

<!-- Title logo -->
<img src="images/global/title.jpg" alt="" />

<!-- Menu bar -->
<div id="menu">

<a class="menuoption" href="link1.html">
Link1
</a>

<a class="menuoption" href="link2.html">
Link2
</a>

<!-- Adding in any text will make the bar resize to fit it, but it doesnt
resize when there are only the links above. E.g. Uncomment the text below to see the difference -->
<!-- Test -->

<div style="clear:left"></div>

</div>

</div>

</body>

</html>

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement