SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <table> with <hr>

    Hi! I was wondering, if it's possible to somehow separate different tables with the <hr> tag, bacause it seems that I'm not skilled enough to do it. My idea is like this:
    <GENERAL TABLE>
    Text text text text text <table with an image aligned on the right side>
    <hr> (this is the part which doesn't obay my plans)
    <!-- and again the same text, table with an image etc. -->
    </END OF THIS GENERAL TABLE>

    If we look at the code of the table, it should be something like this:

    HTML Code:
    <table align="right" height="142" border=0 cellpadding=0 cellspacing=0>
    	<tr>
    	        <td background="images/logo.png"><img src="images/image.jpg" /></td>
    	</tr>
    </table>
    <hr>
    <table align="right" height="142" border=0 cellpadding=0 cellspacing=0>
    	<tr>
    	        <td background="images/logo.png"><img src="images/image.jpg" /></td>
    	</tr>
    </table>
    Unfortunatelly the HR doesn't justify my expectations - it doesn't start a table on a new line, instead it ends this HR at the start of the table. Sorry for my English, hope you understood, if not - feel free to ask questions.

  2. #2
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,171
    Mentioned
    232 Post(s)
    Tagged
    1 Thread(s)
    First, <hr> is just a horizontal line, and you probably want a space... that would be <br>

    Second, for the kind of layout you are talking, I don't see the need of a table at all. You have different methods with less code, such as using a div and put the image inside it and float it to the right.

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's the align attributes you use in your tables that cause this problem. They are funcionally equivalent with the float CSS property, which means you need to clear the <hr>:
    Code HTML4Strict:
    <hr style="clear:both">
    Birnam wood is come to Dunsinane

  4. #4
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,171
    Mentioned
    232 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    It's the align attributes you use in your tables that cause this problem. They are funcionally equivalent with the float CSS property, which means you need to clear the <hr>:
    Code HTML4Strict:
    <hr style="clear:both">
    My apologies. I think you are right. For some reason I assumed keisfootball really didn't want the horizontal line, only to have the tables separated. In that sense, I thought that adding a bit of white space was enough and then a br element made more sense (although I'd probably use CSS to do it)

    But reading the question again, and his code, probably he does want that horizontal line.

    I read it too quickly

  5. #5
    SitePoint Addict
    Join Date
    May 2006
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick response - this was the thing I was searching for - million thanks!

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,784
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You'd get a more consistent appearance between browsers if you set a border to create the line rather than using <hr> since <hr> has a different default appearance in different browsers and can't be styled to look the same in all.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    On the other hand, that may not matter if all she/he is after is a horizontal separator. Not everyone worries that their pages look identical in different browsers. And few 'normal' users, I suspect, open the same site in multiple browsers and send hate mail to the authors if there's a few pixels' discrepancy between them.
    Birnam wood is come to Dunsinane

  8. #8
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall
    ... since <hr> has a different default appearance in different browsers and can't be styled to look the same in all.
    The ruler itself can be styled to look the same in all, but the horizontal spacing can't.

    In the two major browsers it can though.
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>CSS Ruleset For More Consistent &lt;hr&gt; Style</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
     
    div{ margin:20px; border:1px solid #ccc; background:#ffe}
    h1,h2{ margin:0; border-bottom:1px solid #ccc; text-align:center; font:16px/1.2 arial; color:#333}
    p{ margin:0; border-bottom:1px solid #ccc; font-size:0}
     
    .styled hr{
      border:0;                   /* for FF; border reset */
      border-top:10px solid gold; /* set hr thickness for good browsers, set style and color for all */
      height:10px;                /* set hr thickness for IE */
      background:transparent;     /* for Opera and Safari; remove default hr color */
      font-size:14px;             /* for FF to mimic the fix "margins" on hr in IE */
    }
    .styled .hr1{
      border-top:1px solid red;
      height:1px;
    }
    .styled .hr2{
      border-top:2px solid blue;
      height:2px;
    }
    .styled .hr5{
      border-top:5px solid green;
      height:5px;
    }
    </style></head><body>
     
    <h1>Horizontal ruler size and spacing styled for Firefox and Internet Explorer</h1>
     
    <div><h2>&lt;hr&gt; default / &lt;hr size=1 red&gt; / &lt;hr size=2 noshadow blue&gt;</h2>
    <hr><p></p>
    <hr size="1" color="red"><p></p>
    <hr size="2" noshade color="blue"></div>
     
    <div class="styled"><h2>&lt;hr&gt; consistently styled for FF & IE (in other space differ) 1px / 2px / 5px</h2>
    <hr class="hr1"><p></p>
    <hr class="hr2"><p></p>
    <hr class="hr5"></div>
     
    </body></html>
    Happy ADD/ADHD with Asperger's


Bookmarks

Posting Permissions

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