Vote

Border Issue With Div

Posted by topdog 679 days ago Questions| margin div font All
I am having a strange issue, someone please help! When I change the height of my container <div> to auto, the boarder dissapears.
Here is my css:
CODE
body{
margin:0px;
height:100%;
font-size:10pt;
font-family:"Tahoma", Arial, Sans-serif;
}
h1{
font-size:14pt;
font-family:"Tahoma", Arial, Sans-serif;
font-weight:100;
color:tan;
margin-bottom:0px;
margin-top:0px;
margin-left:10px;
margin-right:10px;
}
h2{
font-size:8pt;
font-family:"Tahoma", Arial, Sans-serif;
font-weight:100;
color:#aaa;
margin-bottom:0px;
margin-top:0px;
margin-left:10px;
margin-right:10px;
}
#container{
position:relative;
margin-left:auto;
margin-right:auto;
height:100%;
width:800px;
border-style:solid;
border-width:1px;
border-color:#ddd;
}
#header{
position:absolute;
top:0px;
left:0px;
height:70px;
}
.nav{
position:absolute;
top:70px;
left:0px;
height:25px;
width:800px;
}
#navbar{
position:absolute:
height:25px;
width:800px;
left:0px;
border:0px;
border-style:none;
font-size:10pt;
text-align:center;
font-family:"Times New Roman", Times, serif;
}
.hrslim{
height:1px;
background-color:#ddd;
border:0px;
margin-bottom:0px;
margin-top:0px;
}
.hrfat{
height:12px;
background-color:tan;
border:0px;
margin-bottom:1px;
margin-top:1px;
}
a:link{
text-decoration:none;
color:black;
}
a:active{
text-decoration:none;
color:black;
}
a:visited{
text-decoration:none;
color:black;
}
a:hover{
text-decoration:none;
color:#aaa;
}
.para{
margin-left:10px;
margin-right:10px;
}
.content{
position:absolute;
top:96px;
}


here is my html:
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">



<html>

<head>

<TITLE>

Thul Tile Company

</TITLE>

<link rel="StyleSheet" type="text/css" href="style.css" media="screen" />

</head>



<body>



<div id="container">



<div id="header">

<img src="images/header.png" />

</div>



<div class="nav">

<hr class="hrslim" />

<table id="navbar">

<tr>

<td>

<a href="home.htm">Home</a>

</td>

<td width="1px">

<img src="images/divider.png"/>

</td>

<td>

<a href="portfolio.htm">Portfolio</a>

</td>

<td width="1px">

<img src="images/divider.png"/>

</td>

<td>

<a href="services.htm">Services</a>

</td>

<td width="1px">

<img src="images/divider.png"/>

</td>

<td>

<a href="design.htm">Design</a>

</td>

<td width="1px">

<img src="images/divider.png"/>

</td>

<td>

<a href="about.htm">About Us</a>

</td>

<td width="1px">

<img src="images/divider.png"/>

</td>

<td>

<a href="contact.htm">Contact</a>

</td>

</tr>

</table>

</div>



<div class="content">



<hr class="hrfat" />

<img src="images/mainpage.png" />

<hr class="hrfat" />



<br />



<h1>Thul Tile Company</h1>

<h2>marble / granite / ceramic / related products</h2>

<p class="para">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper orci vel ligula tincidunt auctor. Duis metus enim, imperdiet iaculis tempor sed, vestibulum a dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros quis viverra pellentesque, nulla ligula commodo nisl, vitae auctor magna ipsum eu velit. Mauris at urna augue, vel vehicula nulla. Curabitur non lectus nec dolor interdum congue cursus ut quam. Phasellus non enim velit, ut pretium felis. Pellentesque dapibus ligula nec metus auctor in tincidunt ligula feugiat. Sed at leo in lectus semper varius. Sed nibh elit, tincidunt vel eleifend a, euismod in justo. Morbi id libero sit amet sem scelerisque blandit. Praesent elit ante, rhoncus in pulvinar tempus, aliquam in diam. Nulla elementum odio nec eros tempus bibendum. Aenean dui mi, sagittis in rhoncus nec, lacinia vitae sapien. Praesent ante neque, pharetra non viverra ut, auctor eu velit. Ut auctor sagittis lorem, sit amet aliquam justo tempor eu. Maecenas neque felis, tempus sed tristique ac, aliquam sed erat. Aliquam erat volutpat. Quisque vel augue vitae ligula convallis dapibus quis in dui. Proin dui dolor, tincidunt placerat laoreet ut, mattis et ante.

</p>



</div>

</div>



</body>



</html>


Thank you in advance!
Discuss Bury


Who Voted for this Question