...

View Full Version : CSS hr help



azizali88
07-02-2007, 11:07 PM
This is the simple small html page i have. But the page views different in IE and Firefox. you will notice that the <hr> tag occupies no space in firepox but does in IE, please help me out here i don't want the HR tag to occupy any space.

If i remove HR tag i loose the bg color and borders.

thanks in advance

----------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
hr.hidden{
visibility:hidden;
height:0px;
clear:both;
margin:0;
padding:0;}
#sidebarm{
width:300px;}
.rss{
background-color:#FFF9DE;
border:#75A7C5 1px solid;
margin:4px auto;
padding:0;}
.rss .aright{
float:right;
width:152px;
padding-top:4px;}
.rss .aleft{
float:left;
width:74px;
padding:5px 9px;
height:90px;}
</style>

</head>

<body>
<div id="sidebarm">
<ul>
<li>
<div class="rss">
<div class="aleft"><a href="#"><img src="a_files/rss.jpg" border="0" height="74" width="74"><br>Feeds Now</a></div>
<div class="aright">Email Subscription comming soon</div>
<hr class="hidden">
</div>
</li>
</ul>

</div>
</body>
</html>
------

felgall
07-02-2007, 11:24 PM
Try setting the font size to zero. IE always makes the height of elements large enough to contain text content even where there isn't any.

azizali88
07-02-2007, 11:32 PM
Thanks man but sorry it didnt work i tried the font and line-height and size attribute all doesnt make any difference.
Any other advice folks???????????????????

whizard
07-02-2007, 11:37 PM
doubt this will work but maybe you could try <hr class="hidden" />?

What is the point of having a purely presentational element, an hr, be hidden from view? What other purpose is the hr serving to justify its existence?

HTH
Dan

azizali88
07-03-2007, 06:47 AM
Okay so many of you experts are saying that There is no point of putting hr there. That is fine i will remove the HR tag from there.

BUT NOW. if i do the rss class applying to div tag does not extend to the limits and does not show the yellow BG color and border for the entire internal data.

is there any solution to that without using hr.


thanks you guys have helped me already so much... SOME more PLEASE

azizali88
07-03-2007, 06:57 AM
THANK YOUR EVERY ONE THE PROBLEM IS SOLVED
I Realized that the thing i am trying to do cannot be done.
therefore i have set the height of the RSS tag so that the bg color and borders show up to the entire tag and stretches within its elements

Sincear thanks to
whizard and felgall
Thanks again you guys Rock.

koyama
07-04-2007, 03:12 AM
I Realized that the thing i am trying to do cannot be done.
therefore i have set the height of the RSS tag so that the bg color and borders show up to the entire tag and stretches within its elements
Setting a fixed height may not always be a too good solution. If the div has an unknown amount of contents you will not in advance know what height it should have.

The problem is that a float does not automatically stretch its parent block.

For the .rss div to contain its floats one technique is like this:


.rss{
background-color: #FFF9DE;
border: #75A7C5 1px solid;
margin:4px auto;
padding:0;
overflow: hidden;
_zoom: 1; /* for IE6 */
}

To learn more: http://www.quirksmode.org/css/clearing.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum