Re: [css-d] Problems styling an hr in FF 1.5.0.4
Allison,
I really wish I knew. I'm from the tables as layout school of thought
and have only fairly recently started to deal with the voodoo that is
css extensively. So I really couldn't tell you if that article is out of
date.
However, I can share this approach that I found - haven't tested it
fully yet across browsers. http://www.sovavsiti.cz/css/hr.html I tweaked
their output because I didn't need/want to use a background image.
In the style sheet...
div.hr {
height: 1px;
background-color:#333;
}
div.hr hr {
display: none;
}
Where this displays the thin black rule...
div class=hrhr //div
Will that provide the level of accessibility you are looking for? Of
would the none property on the hr style confuse the reader?
Actually, looking at the result, I may elect to remove the border
approach I was using and go this route instead.
Regards,
Daniel
-Original Message-
From: Allison Bloodworth [mailto:[EMAIL PROTECTED]
Sent: Tuesday, June 13, 2006 5:38 PM
To: Venditelli, Daniel - Web Development Administrator;
css-d@lists.css-discuss.org
Subject: RE: [css-d] Problems styling an hr in FF 1.5.0.4
Thanks very much Daniel--I was actually using borders originally but
decided
I wanted to use an hr for its semantic value. We are a public
university
and I think this could be an accessibility issue for blind users as they
wouldn't see the borders (and the div contains nothing else to tell
them
it's a section break.
Is the article I referenced about how to accomplish this in
Mozilla-based
browsers out of date? I got the link from this thread from only a year
ago:
http://forum.stylegala.com/about1038.htmlhighlight=
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Venditelli,
Daniel
- Web Development Administrator
Sent: Tuesday, June 13, 2006 5:30 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Problems styling an hr in FF 1.5.0.4
Allison,
I had a similar issue earlier today and ended up using this instead:
#subsection {
position: static;
border-width: 1px;
border-top-style: solid;
border-color: #ccc;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
And then this where I wanted the rule:
div id=subsection/div
I'm controlling the width with a parent div but you should be able to
just add width to the above. Also I'm using the margin info for dealing
with text on the same page. You may or may not need that.
Best of luck,
Daniel
---
Daniel E. Venditelli, jr
Web Development Administrator
City of Yuma
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Allison
Bloodworth
Sent: Tuesday, June 13, 2006 5:23 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] Problems styling an hr in FF 1.5.0.4
Hi,
I am trying to style an hr and am having trouble applying a color to
it in
Firefox 1.5.0.4/PC. It looks fine in IE 6.0/PC. I'm following these
instructions: http://www.sovavsiti.cz/css/hr.html
And the code is:
div class=AdminTablelessDivider id=input name=inputhr/div
.AdminTablelessDivider hr
{
color: #CC;
background-color: #CC;
height: 1px;
}
I can't show the page because it's a web app that requires log in. Any
idea
what could be wrong? I searched the archives and didn't find anything.
Thanks!
Allison Bloodworth
Principal Administrative Analyst
Technology Program Office
University of California, Berkeley
(415) 377-8243
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Problems styling an hr in FF 1.5.0.4
Hi,
I am trying to style an hr and am having trouble applying a color to it in
Firefox 1.5.0.4/PC. It looks fine in IE 6.0/PC. I'm following these
instructions: http://www.sovavsiti.cz/css/hr.html
And the code is:
div class=AdminTablelessDivider id=input name=inputhr/div
.AdminTablelessDivider hr
{
color: #CC;
background-color: #CC;
height: 1px;
}
I can't show the page because it's a web app that requires log in. Any idea
what could be wrong? I searched the archives and didn't find anything.
Thanks!
Allison Bloodworth
Principal Administrative Analyst
Technology Program Office
University of California, Berkeley
(415) 377-8243
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problems styling an hr in FF 1.5.0.4
Allison,
I had a similar issue earlier today and ended up using this instead:
#subsection {
position: static;
border-width: 1px;
border-top-style: solid;
border-color: #ccc;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
And then this where I wanted the rule:
div id=subsection/div
I'm controlling the width with a parent div but you should be able to
just add width to the above. Also I'm using the margin info for dealing
with text on the same page. You may or may not need that.
Best of luck,
Daniel
---
Daniel E. Venditelli, jr
Web Development Administrator
City of Yuma
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Allison
Bloodworth
Sent: Tuesday, June 13, 2006 5:23 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] Problems styling an hr in FF 1.5.0.4
Hi,
I am trying to style an hr and am having trouble applying a color to
it in
Firefox 1.5.0.4/PC. It looks fine in IE 6.0/PC. I'm following these
instructions: http://www.sovavsiti.cz/css/hr.html
And the code is:
div class=AdminTablelessDivider id=input name=inputhr/div
.AdminTablelessDivider hr
{
color: #CC;
background-color: #CC;
height: 1px;
}
I can't show the page because it's a web app that requires log in. Any
idea
what could be wrong? I searched the archives and didn't find anything.
Thanks!
Allison Bloodworth
Principal Administrative Analyst
Technology Program Office
University of California, Berkeley
(415) 377-8243
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problems styling an hr in FF 1.5.0.4
Thanks very much Daniel--I was actually using borders originally but decided
I wanted to use an hr for its semantic value. We are a public university
and I think this could be an accessibility issue for blind users as they
wouldn't see the borders (and the div contains nothing else to tell them
it's a section break.
Is the article I referenced about how to accomplish this in Mozilla-based
browsers out of date? I got the link from this thread from only a year ago:
http://forum.stylegala.com/about1038.htmlhighlight=
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Venditelli, Daniel
- Web Development Administrator
Sent: Tuesday, June 13, 2006 5:30 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Problems styling an hr in FF 1.5.0.4
Allison,
I had a similar issue earlier today and ended up using this instead:
#subsection {
position: static;
border-width: 1px;
border-top-style: solid;
border-color: #ccc;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
And then this where I wanted the rule:
div id=subsection/div
I'm controlling the width with a parent div but you should be able to
just add width to the above. Also I'm using the margin info for dealing
with text on the same page. You may or may not need that.
Best of luck,
Daniel
---
Daniel E. Venditelli, jr
Web Development Administrator
City of Yuma
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Allison
Bloodworth
Sent: Tuesday, June 13, 2006 5:23 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] Problems styling an hr in FF 1.5.0.4
Hi,
I am trying to style an hr and am having trouble applying a color to
it in
Firefox 1.5.0.4/PC. It looks fine in IE 6.0/PC. I'm following these
instructions: http://www.sovavsiti.cz/css/hr.html
And the code is:
div class=AdminTablelessDivider id=input name=inputhr/div
.AdminTablelessDivider hr
{
color: #CC;
background-color: #CC;
height: 1px;
}
I can't show the page because it's a web app that requires log in. Any
idea
what could be wrong? I searched the archives and didn't find anything.
Thanks!
Allison Bloodworth
Principal Administrative Analyst
Technology Program Office
University of California, Berkeley
(415) 377-8243
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
