Re: [css-d] Styling the hr / element
At 10:13 AM +0200 9/12/08, Martin Möller wrote:
Christian Kirchhoff wrote:
I have read the long thread on this subject from last April, but I found it
confusing and inconclusive. I've tried using
an empty div only 1px high, with
background, but IE still insists on transparent spacing.
div.hrline hr{ /* take out the troublemaking HR */
display:none;
}
div.hrline { /* DIV that wraps and replaces the HR */
background: transparent url(images/1pixel_hex_939393.gif) repeat-x
center center;
height: 30px;
}
div.onepixel {
height: 1px;
}
That should do the trick.
Martin:
That's neat.
Here's mine:
http://www.webbytedd.com//hr/
Does mine fail to the solve the problem?
Cheers,
tedd
--
---
http://sperling.com http://ancientstones.com http://earthstones.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling the hr / element
Here's mine: http://www.webbytedd.com//hr/ Tedd, the Markup for it is: div class=hrline onepixelhr //div __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling the hr / element
Tim Dawson wrote: I want to draw a single white horizontal line, 800px wide, 1px high, between two images. I'd like to use the hr / element if possible. Is there a simple cross-browser solution ? Or have I got to edit those images ? Simple may not be the right term, but styling the hr element for same look across browser-land isn't that hard. IE's defaults have fixed dimensions, so one can override them... http://www.gunlaug.no/contents/wd_chaos_30.html regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling the hr / element
At 9:10 PM +0200 9/13/08, Martin Möller wrote: Here's mine: http://www.webbytedd.com//hr/ Tedd, the Markup for it is: div class=hrline onepixelhr //div Ahhh, I see what you are doing. Is this better? http://www.webbytedd.com//hr/ Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling the hr / element
I have read the long thread on this subject from last April, but I found it confusing and inconclusive. I've tried using an empty div only 1px high, with background, but IE still insists on transparent spacing. Please keep in mind that for empty DIVs you better insert an empty comment for IE: div!-- --/div Best regards, Christian Kirchhoff *Directmedia Publishing GmbH* · Möckernstraße 68 · 10965 Berlin www.digitale-bibliothek.de AG Berlin-Charlottenburg · HR B 58002 · USt.Id. DE173211737 Geschäftsführer: Ralf Szymanski __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling the hr / element
Christian Kirchhoff wrote:
I have read the long thread on this subject from last April, but I found it
confusing and inconclusive. I've tried using an empty div only 1px high,
with
background, but IE still insists on transparent spacing.
div.hrline hr{ /* take out the troublemaking HR */
display:none;
}
div.hrline { /* DIV that wraps and replaces the HR */
background: transparent url(images/1pixel_hex_939393.gif) repeat-x
center center;
height: 30px;
}
div.onepixel {
height: 1px;
}
That should do the trick.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Styling the hr / element
I want to draw a single white horizontal line, 800px wide, 1px high, between two
images. I know this could be done by adding a line to one of the images, but
they already exist (in several variants) and I was hoping not to have to modify
them all. I'd like to use the hr / element if possible.
Firefox is happy with 'hr {width: 800px; height: 1px; color: #FFF; margin: 0;}'
but IE7 insists on inserting transparent space above and below the line (whether
this is margin, padding, or something else is moot, but adding 'padding: 0;' to
the style has no effect).
I have read the long thread on this subject from last April, but I found it
confusing and inconclusive. I've tried using an empty div only 1px high, with
background, but IE still insists on transparent spacing.
Is there a simple cross-browser solution ? Or have I got to edit those images ?
Tim Dawson.
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling the hr / element
Hi Tim,
I think you can just call out a border on just one side of your 800px wide
image, i.e.:
img {border-bottom:1px solid #fff; }
hth,
aubrey
On Thu, Sep 11, 2008 at 3:09 PM, Tim Dawson [EMAIL PROTECTED] wrote:
I want to draw a single white horizontal line, 800px wide, 1px high,
between two
images. I know this could be done by adding a line to one of the images,
but
they already exist (in several variants) and I was hoping not to have to
modify
them all. I'd like to use the hr / element if possible.
Firefox is happy with 'hr {width: 800px; height: 1px; color: #FFF; margin:
0;}'
but IE7 insists on inserting transparent space above and below the line
(whether
this is margin, padding, or something else is moot, but adding 'padding:
0;' to
the style has no effect).
I have read the long thread on this subject from last April, but I found it
confusing and inconclusive. I've tried using an empty div only 1px high,
with
background, but IE still insists on transparent spacing.
Is there a simple cross-browser solution ? Or have I got to edit those
images ?
Tim Dawson.
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling the hr / element
Thank you. Of course. I got so completely fixated on the first thing I
thought
of that the obvious passed me by.
Tim
Aubrey Benasa wrote:
Hi Tim,
I think you can just call out a border on just one side of your 800px wide
image, i.e.:
img {border-bottom:1px solid #fff; }
hth, aubrey
On Thu, Sep 11, 2008 at 3:09 PM, Tim Dawson [EMAIL PROTECTED]
mailto:[EMAIL PROTECTED] wrote:
I want to draw a single white horizontal line, 800px wide, 1px high, between
two images. I know this could be done by adding a line to one of the images,
but they already exist (in several variants) and I was hoping not to have to
modify them all. I'd like to use the hr / element if possible.
Firefox is happy with 'hr {width: 800px; height: 1px; color: #FFF; margin:
0;}' but IE7 insists on inserting transparent space above and below the line
(whether this is margin, padding, or something else is moot, but adding
'padding: 0;' to the style has no effect).
I have read the long thread on this subject from last April, but I found it
confusing and inconclusive. I've tried using an empty div only 1px high,
with background, but IE still insists on transparent spacing.
Is there a simple cross-browser solution ? Or have I got to edit those
images ?
Tim Dawson.
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling the hr / element
Even the border's not a perfect solution. It's fine in FF3 but appears about
three pixels wide in IE7. I haven't tried IE6 yet. Is this a box model
problem; I thought they had been resolved in IE7 ?
http://www.holidaymullandiona.co.uk/
Tim Dawson wrote:
Thank you. Of course. I got so completely fixated on the first thing I
thought
of that the obvious passed me by.
Tim
Aubrey Benasa wrote:
Hi Tim,
I think you can just call out a border on just one side of your 800px wide
image, i.e.:
img {border-bottom:1px solid #fff; }
hth, aubrey
On Thu, Sep 11, 2008 at 3:09 PM, Tim Dawson [EMAIL PROTECTED]
mailto:[EMAIL PROTECTED] wrote:
I want to draw a single white horizontal line, 800px wide, 1px high, between
two images. I know this could be done by adding a line to one of the images,
but they already exist (in several variants) and I was hoping not to have to
modify them all. I'd like to use the hr / element if possible.
Firefox is happy with 'hr {width: 800px; height: 1px; color: #FFF; margin:
0;}' but IE7 insists on inserting transparent space above and below the line
(whether this is margin, padding, or something else is moot, but adding
'padding: 0;' to the style has no effect).
I have read the long thread on this subject from last April, but I found it
confusing and inconclusive. I've tried using an empty div only 1px high,
with background, but IE still insists on transparent spacing.
Is there a simple cross-browser solution ? Or have I got to edit those
images ?
Tim Dawson.
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
