General discussion

Locked

css borders and vertical dashed line

By davoud ·
hi,

trying to use css borders to put a vertical dashed line on one side of the body returns a solid line in the far end of the page. see the code:

<html>
<head>

<style type="text/css">
body
{
border-right: medium dashed #ff0000
}
</style>

</head>

<body>

<p> If you save this code as an html file, please note the right side of the vertical scroll bar after you open it.<br><br>

some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text.</p>

</body>


</html>


I could accomplish this using <p> and <br> tags though. see the code:

<html>
<head>

<style type="text/css">
p
{
border-right: dashed
#ff0000
}
</style>

</head>

<body>

<p>vertical dashed line using css borders and p and br tags. vertical dashed line using css borders and p and br tags.vertical dashed line using css borders and p and br tags<br><br>
vertical dashed line using css borders and p and br tags<br><br>
vertical dashed line using css borders and p and br tags. vertical dashed line using css borders and p and br tags.vertical dashed line using css
borders and p and br tags<br><br>
vertical dashed line using css borders and p and br tags. vertical dashed line using css borders and p and br tags.vertical dashed line using css

borders and p and br tags<br><br>vertical dashed line using css borders and p and br tags. vertical dashed line using css borders and p and br tags. vertical dashed line using css borders and p and br tags<br><br>vertical dashed line using css borders and p and br tags. vertical dashed line using css borders and p and br tags. vertical dashed line using css borders and p and br tags. vertical dashed line using css borders and p and br tags. vertical dashed line using css borders and p and br tags.vertical dashed line using css borders and p and br tags<br><br>vertical dashed line using css borders and p and br tags.

vertical dashed line using css borders and p and br tags.vertical dashed line using css borders and p and br tags<br><br>vertical dashed line
using css borders and p and br tags. vertical dashed line using css borders and p and br tags.vertical dashed line using css borders and p
and br tags<br><br>vertical dashed line using css borders and p and br tags. vertical dashed line using css borders and p and br tags.vertical
dashed line using css borders and p and br tags<br><br>vertical dashed line using css borders and p and br tags. vertical dashed line using css borders and p and br tags.vertical dashed line using css borders and p and br tags<br><br></p>
</body>

</html>

Now I would like to know why it does not work for the body tag and what to do to make it work.

thanks

This conversation is currently closed to new comments.

12 total posts (Page 1 of 2)   01 | 02   Next
| Thread display: Collapse - | Expand +

All Comments

Collapse -

Not sure; Works in Firefox

by sMoRTy71 In reply to css borders and vertical ...

I'm going to have to do some digging to find out exactly why it doesn't work. It does work in Firefox, though.

Collapse -

css

by davoud In reply to Not sure; Works in Firefo ...

sMoRTy71, thanks very much. I am doing some research on it too. No luck sofar.

Collapse -

no research needed...

by Jaqui In reply to Not sure; Works in Firefo ...

it's ie's spotty support for css that is the culprit.

css and xml both are at about 20% of full support in ie.

firefox is at about 80% of full support for both.

this is why it works in firefox and not in ie.

Collapse -

by davoud In reply to no research needed...

Yes, I guess I will have to wait for IE7.

Collapse -

yup,

by Jaqui In reply to

if you want it to work in ie.

I thought I had included a link to the TR article about compliancy for ie7. guess I didn't.

but if people don't start coding for standards compliancy then ms will kill the support for it.
extra effort to keep it up as standards change, and if it isn't being required then why bother putting that money out.

Collapse -

workaround

by iheatseekeri In reply to yup,

I think I found a temporary solution.
Open a div right after the open body tag and close it just before your close body tag. Set your style sheet for the div (you might need to play around with your margins a bit though.)
It might not be exactly what you want, but it might provide enough.


<html>
<head>

<style type="text/css">
div.body
{
border-right: medium dashed #ff0000; height: 100%
}
</style>

</head>

<body>
<div class="body">
<p> If you save this code as an html file, please note the right side of the vertical scroll bar after you open it.<br><br>

some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text.</p>
</div>
</body>
</html>

Collapse -

by tony In reply to no research needed...

I disagree.

While IE doesn't support 100% of the CSS2 standard, IE 6.x supports over 90%.

-Tony

Collapse -

Excellent CSS Resource

by -=<RB>=- In reply to css borders and vertical ...

I've found the css newsgroup at forums.projectseven.com to be an excellent resource for css questions like this.

Collapse -

by tony In reply to css borders and vertical ...

The problem is that you haven't define a DOCTYPE for your page. Without it, browsers don't know how to behave. Place the line:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html401/loose.dtd">

as the top line in your file, prior to the <html> line. That will fix your problem.

Collapse -

Working with tables will be better

by Angel_Tech In reply to css borders and vertical ...

If you try something different like using tables would have better look, and hopefully thats what you looking for. Here's an example!
=========================================
<html>
<head>
<style type="text/css">
.borderR{ BORDER-RIGHT: 1px dashed #ff0000; }
</style>
</head>

<body class="borderR">
<table>
<tr><td class="borderR">
<p> If you save this code as an html file, please note the right side of the vertical scroll bar after you open it.</p>
<div>some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text.</div>
</td></tr>
</table>

</body>
</html>

===============================================

This way, everything you put inside the table would have the RIght border you want. For me its better to work with tables since you can also add the margins you want for a better look..
Hope this help ya a litte... let me know if you dont like it.. Bye

Back to Web Development Forum
12 total posts (Page 1 of 2)   01 | 02   Next

Related Discussions

Related Forums