PDA

Click to See Complete Forum and Search --> : Verticly align a hr

k0r54
01-25-2005, 04:09 AM
Hi,

I am trying to get the hr to be exactly in the middle of the div verticly for all broswers.

IE displays hr completely differently to the other browsers.

Using verticle-align:middle only work in IE although it is not exactly the middle.

This is the code i have


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#straplinehr {
height: 75px;
background-color:#000000;
}

.straplinehr {
width: 300px;
text-align: center;
height: 2px;
color: #FFCC33;
background-color: #FFCC33;
border: 0;
}
</style>
</head>

<body>
<div id="straplinehr">
<hr class="straplinehr">
</div>
</body>
</html>


Many Thanks

k0r54
Fang
01-25-2005, 06:15 AM
from W3C hr (http://www.w3.org/TR/REC-html40/present/graphics.html#h-15.3)
The amount of vertical space inserted between a rule and the content that surrounds it depends on the user agent.

Use an empty div with style="width:300px;border-bottom: 2px solid #fc3;"
k0r54
01-25-2005, 08:27 AM
ok that works but i cant seam to figure out how you align it verticly to the middle and horizontaly to the centre.

Thanks
k0r54
Fang
01-25-2005, 08:39 AM
Dead center (http://www.wpdfd.com/editorial/thebox/deadcentre4.html)