Ideas to replace <hr> using CSS

I am converting some antique html code that does not validate. I want to find an alternate for the <hr>

Does any body have any suggestions.

Below is a black table using the antique code and below is a blue table using new styling.

I need some suggestions

Thanks in advance for your suggestions.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<title>My Title</title>
<style type="text/css">

table.newstyle {margin:0;border:0;padding:0;background-color:#0000FF;color:#ffffff; width:100px;}
td.newstyle {vertical-align:top; width:100px;}

.ogLeftLine span {vertical-align:center; background-color:#ffffff; line-height:5px; width=100px;}


</style>
</head>
<body style="margin:0; border:0; padding:0; background-color:#ffffff; color:#000000">

<table  style="margin:0;border:0;padding:0;background-color:#000000; color:#ffffff; width:100px;">
  <tr style="vertical-align:top">
   <td style="vertical-align:top;text-align:left" width="100">
    Some Words
   </td>
  </tr>
  <tr>
   <td height="5">
     <hr> <!-- need to replace this-->
   </td>
  </tr>
  <tr>
   <td style="vertical-align:top;text-align:left" >
    Some Words
   </td>
  </tr>
</table>
<br><br>

<!-- trying to replace the above with something like this -->

<table class="newstyle">
  <tr class="newstyle">
    <td class="newstyle">
      Some Words<br>
      <span class="ogleftline"><br></span> <!-- looking for ideas here -->
      Some Words<br>
   </td>
  </tr>
</table>
       
</body>
</html>


LVL 17
inthedarkAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

EMB01Commented:
You could use a div and style it to look like an hr.
0
venloftCommented:
hi,

<hr>  could be replaced with CSS border-bottom property  
<div style="border-style:solid;border-bottom:thick dotted #ff0000; height:5px;float:left;width:100px;">
</div>

for the replacement ,well im of the idea of the <div> aproach to obtain more flexibility and easiest validation workflow, and just tables for tabulations.

may look like.

<!DOCTYPE HTML>
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset= ISO-8859-1">
<title>My Title</title>
<style type="text/css">
.newstyle {margin:0;border:0;padding:0;background-color:#0000FF;color:#ffffff; width:100px;}
</style>
</head>
<body>
<div class="newstyle">
<h2>Some Words</h2>
<p>
morewords,<br/>
even more words
</p>
</div>
</body>
</html>

Open in new window


regards
0
COBOLdinosaurCommented:
I cannot fathom the logic of replacing a valid tag with a simulation to hack presentation but:
<div style="height:5px;width:80%;border-top:5px solid orange;">&nbsp;</div>

Open in new window



Continuing to use a table for layout is hardly modernization by any stretch, unless the table is actually holding tabular data.

Strange day... re-invent a tag that already exists ???


Cd&
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

inthedarkAuthor Commented:
I went with the <div> and seems to work well once you get the syntax working.

In case somebody passes this way again; and googles <div background not showing as replace <hr> well here is the final working version:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en-gb">
<head>

  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">


  <title>My Title</title>
 
  <style type="text/css">
   table.newstyle {margin:0;border:0;padding:0;background-color:#0000FF;color:#ffffff; width:100px;}
   td.newstyle {vertical-align:top; width:100%;}

   div.whiteline3 {height: 3px; margin:0;padding:0; border: 0pt none ; width: 100%; background-color: rgb(255, 255, 255);}
   div.VSpacer8 {height: 8px; margin:0;padding:0; border: 0pt none ; width: 100%; }


  </style>
</head>


<body style="border: 0pt none ; margin: 0pt; padding: 0pt; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);">



<table style="width: 100px;" class="newstyle">

  <tbody>
    <tr class="newstyle">

    <td class="newstyle">
       Some Words<br>

       <div class="VSpacer8"></div>
       <div class="whiteline3"></div>
       <div class="VSpacer8"></div>
       Some Words<br>

   </td>

  </tr>

  </tbody>
</table>

       
</body>
</html>
0
EMB01Commented:
Probably should have given venloft points, too.  Not sure if they care, though.
0
inthedarkAuthor Commented:
If anybody passes by this way again stick to COBOLdinosaur's concept my addition above does not works in FF but not in IE.

The problem is that COBOLd's solution does not fully work in IE either because there is a large gap under the line.

(Like it is taking a whole text line under the top border.)

I tried messing with it but cannot make it work in both FF & IE.

I think I will abandon this and use an image of a line instead.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en-gb">
<head>

  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">


  <title>My Title</title>
 
  <style type="text/css">
   table.newstyle {margin:0;border:0;padding:0;background-color:#0000FF;color:#ffffff; width:100px;}
   td.newstyle {vertical-align:top; width:100%;}

  </style>
</head>


<body style="border: 0pt none ; margin: 0pt; padding: 0pt; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);">



<table style="width: 100px;" class="newstyle">

 
    <tr class="newstyle">

    <td class="newstyle">
       Some Words<br>
       
       <div style="height:3px; vertical-align:middle; width:80%;border-top:3px solid white; texh-height:3px; margin:0;padding:0"></div>Some Words

   </td>

  </tr>

</table>
</body>
</html>
 



0
COBOLdinosaurCommented:
Try adding marginBottom=-10px to the style.  IE9 is less than 50% standards compliant, so a lot of thing don't work the way they are supposed to in modern browsers,

Cd&
0
inthedarkAuthor Commented:
It seems to work with both IE & FF if you add the following changes to font-size & height

font-size:0%; text-height:0px;
0
COBOLdinosaurCommented:
Kewl invisible text in an empty box to create a line that's not really a line.  Some of the strange things we do to get what we want on a screen. ;^)


Cd&
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.