Advice for compatability
I am using XHTML 1.0 Strict and CSS.
I have added a horizontal rule on my html sheet :
<hr></hr>
then on my style sheet i have styled as :
hr
{
color: #BFCFFF;
margin: 5px;
text-align: center;
width: 75%;
}when i view the page in IE7 i see a thin blue line (as expected and required)
BUT,
when i view in FireFox V2.0.0.7 i see just a grey line (as is seen if i have no css styling in IE7).
In other words FireFox does not see/use the styling !!!
Please could someone tell me how to fix this for FireFox.
Also given i am using XHTML 1.0 Strict and CSS level2 why on earth aren't both browsers seeing the same thing? - My thinking is that XHTML 1.0 Strict was introduced to give some standardisation to all browsers.
Or have Mozilla forgotten this?
Please do not flame me - i am only querying something - no more/noe less.
Thanks for any help given.
webwiz posted this at 02:53 — 7th October 2007.
He has: 629 posts
Joined: May 2007
While Internet Explorer uses "color" for horizontal rules, Gecko (Moz, Firefox, Netscape) and Opera use "background-color".
For other styling ideas, read Styling with CSS by Marek Prokop. (Also available in Italian and Czech.) Note that this is quite old - Opera behaves itself these days.
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
dk01 posted this at 20:04 — 7th October 2007.
He has: 516 posts
Joined: Mar 2002
This is a funny actually because defining both background color and color to the same value will throw an warning on the validator (since you would never want color and background to be the same color as no one could read the text). So to get it to work in IE you have to live with the warning. Thank you Microsoft!!!
Jako posted this at 20:16 — 7th October 2007.
He has: 13 posts
Joined: Sep 2006
Many thanks for the information.
I hold little hope of a universal standard for all browsers when such issues are brought to light.
I appreciate your help dk01 and webwiz.
Megan posted this at 15:17 — 8th October 2007.
She has: 11,421 posts
Joined: Jun 1999
Using a border instead of a background colour is another option. I think I've done that in the past but I can't remember which site it was on...
Jako posted this at 13:48 — 10th October 2007.
He has: 13 posts
Joined: Sep 2006
I am trying to comply with CSS level 2 validation.
I think i saw somwhere that someone had used a table but cannot remember where i saw/read it.
What is the best way to add a horizontal rule in a color, rather than a background-color, and keep the CSS level 2 validation and make the rule the same in FF and IE?
Any help appreciated.
Megan posted this at 14:11 — 10th October 2007.
She has: 11,421 posts
Joined: Jun 1999
Using the border doesn't do that?
Jako posted this at 15:54 — 10th October 2007.
He has: 13 posts
Joined: Sep 2006
I know border-bottom doesn't do that, but i have in order to leave sufficeient gap form my div tag i would need to use margin to give me the space from the text - which plays funny tricks betwixt browsers doiesn't it?
If i'm wide of the mark please advise. I am still learning..
Megan posted this at 15:59 — 10th October 2007.
She has: 11,421 posts
Joined: Jun 1999
How does margin on an hr play funny tricks in browsers? I'll have to test this out...
Megan posted this at 16:11 — 10th October 2007.
She has: 11,421 posts
Joined: Jun 1999
Try this:
hr {border: none;
border-top: 1px solid #ccc;
height: 0;
width: 75%;
margin: 5px 0;
}
JeevesBond posted this at 21:29 — 10th October 2007.
He has: 3,956 posts
Joined: Jun 2002
I just noticed something in that HTML code:
<hr></hr>That should be:
<hr />Horizontal rule is an empty tag.
Jako posted this at 23:10 — 10th October 2007.
He has: 13 posts
Joined: Sep 2006
Megan,
Did you try the code you supplied in FF and IE?
Another issue is highlighted - both display different outputs. Color is the same as required but now the hr is in 2 different positions and 2 different widths !!!
JeevesBond
Yes, sorry i originally started out using CSS but now am using CSS level2.
But the issue was the same whatever hr style i used.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.