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
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;p
<tr style="vertical-align:top"
<td style="vertical-align:top;
Some Words
</td>
</tr>
<tr>
<td height="5">
<hr> <!-- need to replace this-->
</td>
</tr>
<tr>
<td style="vertical-align:top;
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></s
Some Words<br>
</td>
</tr>
</table>
</body>
</html>
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
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;p
<tr style="vertical-align:top"
<td style="vertical-align:top;
Some Words
</td>
</tr>
<tr>
<td height="5">
<hr> <!-- need to replace this-->
</td>
</tr>
<tr>
<td style="vertical-align:top;
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></s
Some Words<br>
</td>
</tr>
</table>
</body>
</html>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
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>
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
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>
Probably should have given venloft points, too. Not sure if they care, though.
ASKER
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
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>
</td>
</tr>
</table>
</body>
</html>
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
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>
</td>
</tr>
</table>
</body>
</html>
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&
Cd&
ASKER
It seems to work with both IE & FF if you add the following changes to font-size & height
font-size:0%; text-height:0px;
font-size:0%; text-height:0px;
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&
Cd&
<hr> could be replaced with CSS border-bottom property
<div style="border-style:solid;
</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.
Open in new window
regards