Web Development

Ask something
Discussion Locked

css borders and vertical dashed line

0 helpful
12 replies

by davoud 1 view

Closed to new repliesThis discussion is closed. It stays readable, but it takes no new replies.

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:

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

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.

I could accomplish this using

and
tags though. see the code:

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.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. 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.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.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.vertical dashed line using css borders and p and br tags

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

thanks

12 replies

by smorty71

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

by davoud

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

by jaqui

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.

by tony

I disagree.

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

-Tony

by jaqui

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. :(

by iheatseekeri

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.


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

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.

by -=<rb>=-

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

by tony

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:

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

by angel_tech

If you try something different like using tables would have better look, and hopefully thats what you looking for. Here's an example!
=========================================

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

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.

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

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

by davoud

hi everybody,

Sorry i am late in replying to your messages. @ bt582: thanks alot for your solution.Yes it's almost a solution for the problem but When you add body {margin:0, padding:0} then there is a gap on the bottom of the page right beside scroll bar, when browsing it with IE. Also, sometimes you can not put all your code inside a div, because browsers render it differently other than the way you want.

@tony:
adding the Doctype to the code solves the problem in IE but causes the opera and FF to put a gap on the top right corner. Actually I am surprised about the FF and Opera's behavior. This problem can be solved if you add a border-top though. However, what if you just want a border on the right?

@ angel6677:thanks, I like everything that works. I like to use both Table and divs where necessary. Your code adds two dashed line instead of one if you notice it and I don't understand the reason? and again you might not want to put all of your code in a table.

that is why I am thinking about using css for the body itself rather than using div or table to make this happen.

by holod

as i remember from html tutorials
You need to add smth like the following code to the CSS file:
{ border-style: dashed; border-width: 4px; border-left-width: 20px; border-right-width: 20px; border-color: green; }

This discussion is closed to new replies.