Hi I have a div that contains a horizontal styled list to be used as a navigation. Then a div underneath for content. The content div in Mozilla does not see the height of the navigation div and starts at the top of the page instead of under the navigation div. Any ideas?
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Styled List (<ul>) navigation has not height in Mozilla 1
- Thread starter marcasii
- Start date
-
1
- #2
- Thread starter
- #3
This code below is an excerpt from my site and displays similar issues:
Code:
<head>
<style>
body {
background-color:#FAFAF8;
margin: 0;
padding:0;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #475064;
font-size: 1em;
}
#container {
position: relative;
width:770px;
text-align:left;
margin: 0 auto;
}
#navigation {
margin: 0;
position:relative;
border-style : solid;
border-color : #B998BD;
border-width : 1px 0px 1px 0px;
padding-left : 15px;
background-color : #FFFFFF;
}
#navigation ul{
padding : 0px;
margin : 0px;
color : #ffffff;
width : 100%;
white-space: nowrap;
}
#navigation ul li{
display : inline;
}
#navigation ul li a{
display: block;
padding :0.7em 0.7em;
color: #73317B;
font-size: 0.55em;
text-decoration: none;
font-weight:bold;
float: left;
border-left : 1px solid #BDB9CE;
}
#navigation ul li a:hover{ /* on mouse over */
background-color : #BDB9CE;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<div id="navigation">
<ul>
<li><a href="#">A menu Item</a></li>
<li><a href="#">A menu Item</a></li>
<li><a href="#">A menu Item</a></li>
<li><a href="#">A menu Item</a></li>
<li><a href="#">A menu Item</a></li>
<li><a href="#">A menu Item</a></li>
<li><a href="#">A menu Item</a></li>
<li><a href="#">A menu Item</a></li>
<li><a href="#">A menu Item</a></li>
<li><a href="#">A menu Item</a></li>
<li><a href="#">A menu Item</a></li>
<li><a href="#">A menu Item</a></li>
<li><a href="#">A menu Item</a></li>
<li><a href="#">A menu Item</a></li>
</ul>
</div>
<div id="middlecolumn">Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information Some information </div>
</div>
</body>Like I said, the problem is float. Main text in my Mozilla does not start at the top of the page but rather continues from the menu, just as expected in the code. You could simply add clearing to the middle column:
But that wouldn't help your #navigation to be anything more than 0 sized -- because floated elements do not expand the size of their parent element. That is why you should put a dummy div at the end of your list:
You should probably just make it a class eventually and reuse it on the page every time you need it.
Code:
#middlecolumn {
clear: left;
}
Code:
</ul>
<div style="clear: both;"></div>- Thread starter
- #5
- Status
Similar threads
- Locked
- Question
- Locked
- Question
- Locked
- Question