[css-d] a img tag being overwritten?
at the beginning of my css, I have this:
a img{
border:none;
}
However, I am finding that my linked images have my link attribute which is
border-bottom:1px dotted black.
Why is the a img rule being ignored/overwritten?
Page is here: http://www.coffeeonmars.com/170_su/client/portfolio/
Thank you for any ideas about this!
John
__
css-discuss [css-d@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] a img tag being overwritten?
Den 11.09.2014 03:22, skrev John:
at the beginning of my css, I have this:
a img{
border:none;
}
However, I am finding that my linked images have my link attribute which is
border-bottom:1px dotted black.
Why is the a img rule being ignored/overwritten?
The border is on the link, not the image.
If you don't want borders on links with images in them, you can add a
class to those links that states that.
Example:
[a class=img] [img href=... alt=...] [/a]
a.img {border: none;}
regards
Georg
__
css-discuss [css-d@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] a img tag being overwritten?
On Sep 10, 2014, at 8:22 PM, John j...@coffeeonmars.com wrote:
at the beginning of my css, I have this:
a img{
border:none;
}
However, I am finding that my linked images have my link attribute which is
border-bottom:1px dotted black.
Why is the a img rule being ignored/overwritten?
Page is here: http://www.coffeeonmars.com/170_su/client/portfolio/
Thank you for any ideas about this!
John
Hi John,
Try this...
/* RESETS */
*{margin:0;padding:0;}
/* LINKS NAV */
a:link{
text-decoration:none;
border-bottom:0px dotted rgb(0,0,0);
color:rgb(0,0,0);
}
a:visited{
text-decoration:none;
border-bottom:0px dotted rgb(0,0,0);
color:rgb(0,0,0);
}
a:hover{
color:rgb(206,4,4);
border-bottom:0px dotted rgb(0,0,0);
}
a:focus{
color:rgb(206,4,4);
border-bottom:0px dotted rgb(0,0,0);
}
a:only-child {
border-bottom:1px dotted rgb(0,0,0) !important;
}
a:link:only-child {
border-bottom:1px dotted rgb(0,0,0) !important;
}
a:visited:only-child {
border-bottom:1px dotted rgb(0,0,0) !important;
}
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com
__
css-discuss [css-d@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] a img tag being overwritten?
On Sep 10, 2014, at 6:49 PM, Georg ge...@gunlaug.com wrote:
The border is on the link, not the image.
If you don't want borders on links with images in them, you can add a class
to those links that states that.
Example:
[a class=img] [img href=... alt=...] [/a]
a.img {border: none;}
Thank you, Georg; I made an .img class per your example and that had no effect,
but I’m puzzled by something you said that the border is on the link not
image; isn’t the stuff between the opening and closing a tags the “link?” Be
that a word or an image?
I do get the idea you’re talking about and maybe something is overrulling my
rules?
John
__
css-discuss [css-d@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] a img tag being overwritten?
On Sep 10, 2014, at 9:17 PM, Karl DeSaulniers k...@designdrumm.com wrote:
On Sep 10, 2014, at 8:22 PM, John j...@coffeeonmars.com wrote:
at the beginning of my css, I have this:
a img{
border:none;
}
However, I am finding that my linked images have my link attribute which is
border-bottom:1px dotted black.
Why is the a img rule being ignored/overwritten?
Page is here: http://www.coffeeonmars.com/170_su/client/portfolio/
Thank you for any ideas about this!
John
Hi John,
Try this...
/* RESETS */
*{margin:0;padding:0;}
/* LINKS NAV */
a:link{
text-decoration:none;
border-bottom:0px dotted rgb(0,0,0);
color:rgb(0,0,0);
}
a:visited{
text-decoration:none;
border-bottom:0px dotted rgb(0,0,0);
color:rgb(0,0,0);
}
a:hover{
color:rgb(206,4,4);
border-bottom:0px dotted rgb(0,0,0);
}
a:focus{
color:rgb(206,4,4);
border-bottom:0px dotted rgb(0,0,0);
}
a:only-child {
border-bottom:1px dotted rgb(0,0,0) !important;
}
a:link:only-child {
border-bottom:1px dotted rgb(0,0,0) !important;
}
a:visited:only-child {
border-bottom:1px dotted rgb(0,0,0) !important;
}
Alternatively you could maybe do something like this.
img:only-child {
border-bottom:1px dotted rgb(0,0,0) !important;
}
and make sure your images are wrapped in a div.
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com
__
css-discuss [css-d@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] a img tag being overwritten?
The a is a stylable element independent of the img.
On Wednesday, September 10, 2014, John j...@coffeeonmars.com wrote:
On Sep 10, 2014, at 6:49 PM, Georg ge...@gunlaug.com javascript:;
wrote:
The border is on the link, not the image.
If you don't want borders on links with images in them, you can add a
class to those links that states that.
Example:
[a class=img] [img href=... alt=...] [/a]
a.img {border: none;}
Thank you, Georg; I made an .img class per your example and that had no
effect, but I’m puzzled by something you said that the border is on the
link not image; isn’t the stuff between the opening and closing a tags the
“link?” Be that a word or an image?
I do get the idea you’re talking about and maybe something is overrulling
my rules?
John
__
css-discuss [css-d@lists.css-discuss.org javascript:;]
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/
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@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] a img tag being overwritten?
On Sep 10, 2014, at 9:20 PM, Karl DeSaulniers k...@designdrumm.com wrote:
On Sep 10, 2014, at 9:17 PM, Karl DeSaulniers k...@designdrumm.com wrote:
On Sep 10, 2014, at 8:22 PM, John j...@coffeeonmars.com wrote:
at the beginning of my css, I have this:
a img{
border:none;
}
However, I am finding that my linked images have my link attribute which is
border-bottom:1px dotted black.
Why is the a img rule being ignored/overwritten?
Page is here: http://www.coffeeonmars.com/170_su/client/portfolio/
Thank you for any ideas about this!
John
Hi John,
Try this...
/* RESETS */
*{margin:0;padding:0;}
/* LINKS NAV */
a:link{
text-decoration:none;
border-bottom:0px dotted rgb(0,0,0);
color:rgb(0,0,0);
}
a:visited{
text-decoration:none;
border-bottom:0px dotted rgb(0,0,0);
color:rgb(0,0,0);
}
a:hover{
color:rgb(206,4,4);
border-bottom:0px dotted rgb(0,0,0);
}
a:focus{
color:rgb(206,4,4);
border-bottom:0px dotted rgb(0,0,0);
}
a:only-child {
border-bottom:1px dotted rgb(0,0,0) !important;
}
a:link:only-child {
border-bottom:1px dotted rgb(0,0,0) !important;
}
a:visited:only-child {
border-bottom:1px dotted rgb(0,0,0) !important;
}
Alternatively you could maybe do something like this.
img:only-child {
border-bottom:1px dotted rgb(0,0,0) !important;
}
and make sure your images are wrapped in a div.
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com
Oops that should be...
img:only-child {
border-bottom:0px dotted rgb(0,0,0) !important;
}
Karl DeSaulniers
Design Drumm
http://designdrumm.com
__
css-discuss [css-d@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] a img tag being overwritten?
On Sep 10, 2014, at 9:22 PM, Karl DeSaulniers k...@designdrumm.com wrote:
On Sep 10, 2014, at 9:20 PM, Karl DeSaulniers k...@designdrumm.com wrote:
On Sep 10, 2014, at 9:17 PM, Karl DeSaulniers k...@designdrumm.com wrote:
On Sep 10, 2014, at 8:22 PM, John j...@coffeeonmars.com wrote:
at the beginning of my css, I have this:
a img{
border:none;
}
However, I am finding that my linked images have my link attribute which
is border-bottom:1px dotted black.
Why is the a img rule being ignored/overwritten?
Page is here: http://www.coffeeonmars.com/170_su/client/portfolio/
Thank you for any ideas about this!
John
Hi John,
Try this...
Alternatively you could maybe do something like this.
img:only-child {
border-bottom:1px dotted rgb(0,0,0) !important;
}
and make sure your images are wrapped in a div.
Oops that should be...
img:only-child {
border-bottom:0px dotted rgb(0,0,0) !important;
}
Yep, just tested this theory and it worked for me.
Wrap your images you dont want a border on in a div and put this css.
CSS ---
/* RESETS */
*{margin:0;padding:0;}
/* LINKS NAV */
a:link{
text-decoration:none;
border-bottom:1px dotted rgb(0,0,0);
color:rgb(0,0,0);
}
a:visited{
text-decoration:none;
border-bottom:1px dotted rgb(0,0,0);
color:rgb(0,0,0);
}
a:hover{
color:rgb(206,4,4);
border-bottom:1px dotted rgb(0,0,0);
}
a:focus{
color:rgb(206,4,4);
border-bottom:1px dotted rgb(0,0,0);
}
img:only-child {
border-bottom:0px dotted rgb(0,0,0) !important;
}
HTML --
...
div id=right-col
div id=text-6 class=widget widget_text
div class=textwidget
a class=img
href=http://www.coffeeonmars.com/170_su/client/category/illustration/;
h3 class=three-col-box-headillustration/h3
div!-- ADDED THIS HERE, NOW IMG IS ONLY
CHILD--
img
src=http://www.coffeeonmars.com/170_su/client/wp-content/themes/coffee-on-mars-2014/images/illus.jpg;
width=270 height=270 alt=web thumbnail
/div
/a
pSee my illustration. span class=morea
href=http://www.coffeeonmars.com/170_su/client/category/illustration/;More
gt;/a/span/p
/div
/div
/div
...
Karl DeSaulniers
Design Drumm
http://designdrumm.com
__
css-discuss [css-d@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] a img tag being overwritten?
On Sep 10, 2014, at 7:21 PM, Tom Livingston tom...@gmail.com wrote: The a is a stylable element independent of the img. OK..then would that mean that an empty a tag would have an underline? a class=“has-border-bottom” href=“#”/a ^^ this would produce the bottom border of some length, even tho nothing is between the a tags? Or do you mean that, when something IS between the a tags, that the resulting bottom-border is on the a tag and not on what’s between the a tags? Sorry..I’m getting a bit loopy here..trying to understand. Thank you! John __ css-discuss [css-d@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] a img tag being overwritten?
On Wed, Sep 10, 2014 at 10:32 PM, John j...@coffeeonmars.com wrote:
On Sep 10, 2014, at 7:21 PM, Tom Livingston tom...@gmail.com wrote:
The a is a stylable element independent of the img.
OK..then would that mean that an empty a tag would have an underline?
a class=“has-border-bottom” href=“#”/a
^^ this would produce the bottom border of some length, even tho nothing
is between the a tags?
No because it's wrapping nothing. It's empty. Even if you gave it a width
and a height, it's won't show a text-decoration or border unless you put a
character in it. And, at least in FF, a space isn't even good enough to
make the decoration show. But that doesn't mean it's not a style-able
element.
Or do you mean that, when something IS between the a tags, that the
resulting bottom-border is on the a tag and not on what’s between the a
tags?
Yes. In the case of a href=img src=myimg.jpg //a to remove
text-decoration, you add text-decoration: none; to the a not the img.
In the case of:
a img{border: none;}
This is actually valid in some cases as some email clients (and older
browsers maybe, I can't recall right now) will add a blue border around
images that are wrapped in an a. But that's different than what you
originally asked.
Sorry..I’m getting a bit loopy here..trying to understand.
Thank you!
John
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@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] a img tag being overwritten?
On Sep 10, 2014, at 8:11 PM, Tom Livingston tom...@gmail.com wrote: This is actually valid in some cases as some email clients (and older browsers maybe, I can't recall right now) will add a blue border around images that are wrapped in an a. But that's different than what you originally asked. Oh, I remember that blue border… Thank you..this has been very illuminating for me… John __ css-discuss [css-d@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] a img tag being overwritten?
On Wed, Sep 10, 2014 at 11:11 PM, Tom Livingston tom...@gmail.com wrote: On Wed, Sep 10, 2014 at 10:32 PM, John j...@coffeeonmars.com wrote: On Sep 10, 2014, at 7:21 PM, Tom Livingston tom...@gmail.com wrote: The a is a stylable element independent of the img. OK..then would that mean that an empty a tag would have an underline? a class=“has-border-bottom” href=“#”/a ^^ this would produce the bottom border of some length, even tho nothing is between the a tags? No because it's wrapping nothing. It's empty. Even if you gave it a width and a height, it's won't show a text-decoration or border unless you put a character in it. And, at least in FF, a space isn't even good enough to make the decoration show. But that doesn't mean it's not a style-able element. Or do you mean that, when something IS between the a tags, that the resulting bottom-border is on the a tag and not on what’s between the a tags? Yes. In the case of a href=img src=myimg.jpg //a to remove text-decoration, you add text-decoration: none; to the a not the img. Reading this over again, a href=img src=myimg.jpg //a wouldn't have any text-decoration anyway. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@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/
