lines (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

curious monkey -> lines (5/23/2006 12:44:49)

is there a way just to draw a line in CSS, not a border around something but just a line?



rdouglass -> RE: lines (5/23/2006 12:47:49)

<hr style="width:50%;left:20px;"> (an example)

Something like that perhaps? The <hr> element does support CSS styles.

That help?



jaybee -> RE: lines (5/23/2006 13:06:49)

If you're going for xhtml then make sure you close it.

<hr />

or with Roger's style above

<hr style="width:50%;left:20px;" />

If it's going in an external stye sheet then put it in as:

hr {width:50%;left:20px;}



Tailslide -> RE: lines (5/23/2006 13:27:57)

I do this: 

hr {border:0; color: #ccc;background-color: #ccc;height: 1px; }


I have no idea why - pretty sure it was to make it work cross-browser as there are some "issues"



jaybee -> RE: lines (5/23/2006 13:48:29)

Yes there are issues. It's to do with FF rendering the line differently to IE. SURPRISE!!!

I have
hr{height:5px; color:#cc99ff;border: 1px solid #ffffcc;}
the idea being that it's a lilac coloured line with a cream coloured border. FF gives me the border with a blank middle. One example of IE rendering better than FF.

(I shall now go and wash my mouth out with carbolic)

Whoa! I've just noticed what Opera does with it. Same as FF but it ignores floats and goes straight through them. [&:]



jaybee -> RE: lines (5/23/2006 14:01:17)

Right, to have a background for the line, IE uses color, all the others use background-color so to have them appear the same in all browsers you need to specify both so my style line above becomes:

hr{height:5px;
color:#cc99ff;
background-color:#cc99ff;
border: 1px solid #ffffcc;}

Still doesn't help with Opera ignoring the floats though.



curious monkey -> RE: lines (5/23/2006 14:17:12)

Thanks I appreciate it.
now if i can just convince my employeer to let download FF![&o]



jaybee -> RE: lines (5/23/2006 14:23:08)

You need it for testing purposes.



curious monkey -> RE: lines (5/23/2006 14:39:07)

they don't care...

oh well



Tailslide -> RE: lines (5/23/2006 14:45:11)

tell 'em that it's more likely to work properly in IE7 if you can check it against a good browser like FF - unless they'd prefer you to download the beta!



curious monkey -> RE: lines (5/23/2006 15:01:12)

speaking to them about web stuff is like explaining a bowel movement to a child. they just know its there, have no idea how it got there or why, but it's there.



Tailslide -> RE: lines (5/23/2006 15:05:19)

quote:

ORIGINAL: curious monkey

speaking to them about web stuff is like explaining a bowel movement to a child. they just know its there, have no idea how it got there or why, but it's there.


That's a classic line - I will be stealing it often!



curious monkey -> RE: lines (5/23/2006 15:35:05)

thanks...[:)][8D]



curious monkey -> RE: lines (5/23/2006 15:41:49)

hmmm.... does the <hr> tag not validate?

quote:

Error Line 71 column 8: end tag for element "HR" which is not open.
<hr></hr>


but there's the <hr> right infront of it!



rdouglass -> RE: lines (5/23/2006 16:08:46)

quote:

<hr></hr>


Needs to be <hr />



jaybee -> RE: lines (5/23/2006 16:16:41)

Some things have an opening and closing tag

<li>list item</li>
<p>paragraph</p>

Horizontal rule, line break are just specified with a single tag

<hr>
<br>

In Xhtml they have to be closed so you do it by putting a space followed by a /

<hr />
<br />





curious monkey -> RE: lines (5/23/2006 16:20:39)

oh i get it now. i thought when you guys were saying to close it it was </hr>[sm=icon_redface.gif]





whoop whoop. Im valid![sm=yupi3ti.gif][sm=banana.gif]



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875