Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Your branding has a border applied specifically to it, disregarding any image borders you may have added.
Thread Starter
Dot
(@dianetingleyhotmailcom)
And yet when I manipulate the borders to the other images, that around the branding image changes?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Which CSS are you using for this?
Which browser & browser version are you using?
Thread Starter
Dot
(@dianetingleyhotmailcom)
Hello
What I would like is to code to ensure a grey border, with a black outline, around all but my header image!
I’m using the following code:
img {
padding:1px
border:1px solid #021a40;
background-color:#ff0;
}
#branding img {
padding: 0;
border: none;
}
img{
border:1px solid #000000!important;
}
At the moment I’m just getting a black outline, which includes my header image!
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You’re overriding the #branding img style with the preceding img style.
Generally the lower down the style in the CSS file, the higher precedence that style has.
Thread Starter
Dot
(@dianetingleyhotmailcom)
It doesn’t make any difference; I changed it around:
img {
border: 1px solid #000000 ! important;
}
#branding img {
border: 0px
padding: 0px ! important;
}
:/
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
There’s a style on line 39
img{
border:1px solid #000000!important;
}
Get rid of !important.
Thread Starter
Dot
(@dianetingleyhotmailcom)
When I take out the !important, the border of all of the images disappears!
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You’ll need to use more range of CSS selectors and avoid using !important until absolutely necessary, otherwise you’ll run into overriding styles not meant to be overridden (as you’ve just experienced).
Here’s an article of CSS specificity.