Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: CSS hr help

  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS hr help

    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>
    ------

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    didnt work... Any other recomendations

    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???????????????????

  • #4
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    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
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #5
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by azizali88 View Post
    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:
    Code:
    .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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •