[css-d] img border
Hi,
I have this that works well:
img { border:10px solid #7B2E91 }
I would like to do one on top of another, something like this:
img { border:10px solid #7B2E91 }
img { border:20px solid #00 }
Is there a way to do this?
TIA,
Victor
__
css-discuss [cs...@lists.css-discuss.org]
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] img border
Victor Subervi wrote:
I have this that works well:
img { border:10px solid #7B2E91 }
I would like to do one on top of another, something like this:
img { border:10px solid #7B2E91 }
img { border:20px solid #00 }
It won't work, since the latter rule just overrides the former.
You could use the outline property to create a simulation of a second
border, using
img { outline:20px solid #00 }
as the second rule. Howover, outline has essentially more limited support
than border. Moreover, outline is rather special, as it appears around an
element's box and may thus cover other content - though you might use img
{ margin: 20px; } to create space for the outline.
Alternatively, you could wrap the img element inside another element and set
the other border on that element. This gets somewhat awkward, though, as you
would need to make the container dimensioned according to the img
dimensions.
The most reliable way is to not use CSS at all for the borders. Simply use
your favorite image processing software to add the desired borders into the
images themselves.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
__
css-discuss [cs...@lists.css-discuss.org]
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] img border
--
I have this that works well:
img { border:10px solid #7B2E91 }
I would like to do one on top of another, something like this:
img { border:10px solid #7B2E91 }
img { border:20px solid #00 }
Is there a way to do this?
-
Perhaps something like this:
img {
background-color: #000;
padding: 10px;
border: 20px solid #7b2e91;}
HTH,
Karey Cummins
__
css-discuss [cs...@lists.css-discuss.org]
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] img border madness
Arrgghh... it looks like I spoke too soon. The borders on the images are gone in Safari, but I still see them on Firefox and Camino. Please help! http://www.splashscreen.com/test.html with CSS at http://www.splashscreen.com/base.css Thanks :) Lorraine Peter, Dwain... That was it! Now everything validates, and the borders on images are gone. Thank you so very much, I am more grateful than you can imagine! :) Lorraine On 08 29, 05, at 12:41 PM, Peter Williams wrote: From: Lorraine Nepomuceno I'm going nuts trying to get rid of the border on my linked images. See the sample here: http://www.splashscreen.com/test.html Lorraine, A couple of things are awry with your markup: div id=navcontainer ul id=navlist Used twice on the page, an id instance can only occur once per page. img src=images/ssoffice.png alt=Test Not properly closed. Since the img element is malformed it might cause your a img rule to not apply. form method=get action=$MTCGIPath$$MTSearchScript$ Your form element is upsetting Tidy too. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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 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 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] img border madness
At 11:31 PM 8/28/2005, Lorraine Nepomuceno wrote:
Arrgghh... it looks like I spoke too soon. The borders on the images
are gone in Safari, but I still see them on Firefox and Camino.
Please help!
http://www.splashscreen.com/test.html
with CSS at http://www.splashscreen.com/base.css
Lorraine,
I got rid of the border beneath your portfolio link image (in Firefox) by
adding this rule to the CSS:
div#contentmain p a
{
border: 0 none;
}
I don't know if [div#contentmain p] is the only context in which your
linked images will appear, but without altering your HTML markup this was
the only way I could specify the portfolio image and none other on the page.
You had tried to remove it by suppressing all image borders:
a img {
border: 0 none;
}
img {
border: 0 none;
}
...however the unwanted border was an attribute of the anchor itself, not
the image within it. CSS doesn't give us a way to style an element based
on what its child elements are, so we can't remove borders from anchors
that contain images. You may need to give those anchors an identifying class.
Now, however, the image does not change at all when I hover over it, which
in my view presents a usability issue. I recommend giving the user some
visual cue when they mouse over a hyperlink -- if not a border then perhaps
a modified version of the same image (dimmed, brightened, etc.).
To avoid a time gap when the image is moused over for the first time, you
can actually store both the hover non-hover images in the same image
file, either side-by-side or one above the other, then change the
background image position on hover. Here's an article that demonstrates
that technique:
http://www.alistapart.com/articles/sprites/
Regards,
Paul
PS: I'm not familiar with the CSS rule {border: 0 none;} -- isn't that
needlessly redundant? I always use just {border: none;} and haven't had
problems, but let me know if I'm overlooking some arcane corner of styling
lore!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] img border madness
Paul and Holly,
Thank you so much- for presenting the solution, but especially for
taking the time to explain it to me. It didn't make any sense to me
until I read your emails.
To avoid a time gap when the image is moused over for the first
time, you can actually store both the hover non-hover images in
the same image file, either side-by-side or one above the other,
then change the background image position on hover. Here's an
article that demonstrates that technique:
http://www.alistapart.com/articles/sprites/
Paul, thanks for pointing me at that article!
PS: I'm not familiar with the CSS rule {border: 0 none;} -- isn't
that needlessly redundant? I always use just {border: none;} and
haven't had problems, but let me know if I'm overlooking some
arcane corner of styling lore!
I actually found that bit of code while searching through the css-d
archives today- and thought, in my desperation, that maybe a double-
whammy might work for me :)
Thanks again,
Lorraine
On 08 29, 05, at 3:18 PM, Holly Bergevin wrote:
The border is on the anchor element containing the image, not on
the image. You will probably need to add a class attribute to that
anchor, and write a selector specifically for it to remove the
border. Following is a suggestion of how to do what I'm talking
about. (extra spaces added within tags)
.noborder {border: none;}
p a href=portfolio.php class=noborder img src=images/
ssoffice.png alt=Test / /a /p
hth,
~holly
On 08 29, 05, at 3:05 PM, Paul Novitski wrote:
Lorraine,
I got rid of the border beneath your portfolio link image (in
Firefox) by adding this rule to the CSS:
div#contentmain p a
{
border: 0 none;
}
I don't know if [div#contentmain p] is the only context in which
your linked images will appear, but without altering your HTML
markup this was the only way I could specify the portfolio image
and none other on the page.
You had tried to remove it by suppressing all image borders:
a img {
border: 0 none;
}
img {
border: 0 none;
}
...however the unwanted border was an attribute of the anchor
itself, not the image within it. CSS doesn't give us a way to
style an element based on what its child elements are, so we can't
remove borders from anchors that contain images. You may need to
give those anchors an identifying class.
Now, however, the image does not change at all when I hover over
it, which in my view presents a usability issue. I recommend
giving the user some visual cue when they mouse over a hyperlink --
if not a border then perhaps a modified version of the same image
(dimmed, brightened, etc.).
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] img border madness
From: Lorraine Nepomuceno I'm going nuts trying to get rid of the border on my linked images. See the sample here: http://www.splashscreen.com/test.html Lorraine, A couple of things are awry with your markup: div id=navcontainer ul id=navlist Used twice on the page, an id instance can only occur once per page. img src=images/ssoffice.png alt=Test Not properly closed. Since the img element is malformed it might cause your a img rule to not apply. form method=get action=$MTCGIPath$$MTSearchScript$ Your form element is upsetting Tidy too. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] img border madness
Thanks Dwain and Ric, I tried both:
img {border: 0;}
and
img {border:none;}
and they don't work either. It doesn't make sense to me.. so
frustrating!
:) Lorraine
On 08 29, 05, at 12:47 PM, Ric Jude Raftis wrote:
Try this:-
img {
border: 0;
}
Regards,
Ric
http://www.splashscreen.com/test.html
The image (beneath Latest Entry) carries the same border
that is used on my links, despite having this:
a img {
border: none;
}
in my stylesheet (which is at http://www.splashscreen.com/base.css )
:) Lorraine
_
_
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] img border madness
Peter, Dwain... That was it! Now everything validates, and the borders on images are gone. Thank you so very much, I am more grateful than you can imagine! :) Lorraine On 08 29, 05, at 12:41 PM, Peter Williams wrote: From: Lorraine Nepomuceno I'm going nuts trying to get rid of the border on my linked images. See the sample here: http://www.splashscreen.com/test.html Lorraine, A couple of things are awry with your markup: div id=navcontainer ul id=navlist Used twice on the page, an id instance can only occur once per page. img src=images/ssoffice.png alt=Test Not properly closed. Since the img element is malformed it might cause your a img rule to not apply. form method=get action=$MTCGIPath$$MTSearchScript$ Your form element is upsetting Tidy too. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] img border rollovers in IE
Hi,
I'm having trouble getting my img borders to change color on hover
in IE -- works fine in everything else it seems.
The link is here: http://pandamouth.org/popup/demoLayout_lastPage.html
the css in question is
#demolayout a img {
border: 1px solid #6060A1;
}
#demolayout a:hover img {
border: 1px solid #FF;
}
for the html:
tda href=pge4.htmlimg
src=pge4sml.jpg alt=Page 1 //a/td
Thanks for the help!
Andrew
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
