Member Avatar for kained

Basicly I have defined an img tag to have a black border around it using this bit of code.

img {border:4px solid; color:#000000 }

I was going to use a text based logo but have used a non standard font so it looks rubbish. I now need to design a logo which i have done, but beacuse of the code above it has a box round it.(im just inserting it in <img></img> tags)

Is there anyway i can stop this happening eihter by telling a paticular inmstance of a tag to ignore that bit of CSS or by creating a new tag to handle the logo.

I have tried doing it like this .logo{ image: url(graphics/logo1.gif) } and the n using a span tag but that doesn't work.

so umm any ideas???

  • 4 Contributors
  • 6 Replies
  • 194 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by Rashakil Fol

Dani AI

Generated

Short answer for : your global image rule is simply applying a border to every <img>, and because you also set the element color the border shows as black. The cascade decides which rule wins — is right about that. 's inline style works, but using a class or a more specific selector (as suggested) is cleaner and easier to maintain.

Three practical ways to remove the box for just your logo:

/* add a class to the logo image */
img.logoImage {
  border: none;
  outline: none;
}
/* make a selector more specific so it beats the generic rule */
.header img.logoImage {
  border: none;
}
/* if you cannot edit the HTML, target by filename fragment (use sparingly) */
img[src*="logo"] {
  border: none !important;
}

If you prefer not to use an <img> at all, use a background image on an inline-block element so the global img rule never applies:

.logoBlock {
  display: inline-block;
  width: 220px;
  height: 90px;
  background: url("graphics/logo.gif") no-repeat center/contain;
}

Quick troubleshooting tips: open the browser inspector and look at the computed styles to see which rule is applying the border; check specificity and the order of your stylesheet; avoid !important except as a last resort. Also note that a border shorthand without an explicit color will use the element's current color, which explains why a color declaration elsewhere can make the border visible. Prefer a dedicated class or container selector for a durable fix.

Recommended Answers

All 6 Replies

Member Avatar for tgreer

Remember that the "C" in CSS stands for "Cascading". That means there is a hierarchy of styles. If two style definitions conflict, the most specific wins. So for a particular img, if you wish to override the class definition, then provide an inline definition for that image.

Member Avatar for kained

i see what your saying but can't work out the code. im trying.
<img src="graphics/logo1.gif" width="234" height="134" border:0px> as the img tag but it is not overiding it. what am i doing wrong.

Member Avatar for peter_budo

i see what your saying but can't work out the code. im trying.
<img src="graphics/logo1.gif" width="234" height="134" border:0px> as the img tag but it is not overiding it. what am i doing wrong.

It is supposed to be like this

<img src="graphics/logo1.gif" width="234" height="134" style="border:0px;">

With inline declaration you have to call "style" for CSS and then change parameters.

Member Avatar for tgreer

Exactly, I should have been more clear. You have to use the "style" property, and the value contains your delimited style declarations. Thanks, Peter.

Member Avatar for kained

ahh that makes sense. will have to try and remember tht one. cheers to you both.

Member Avatar for Rashakil Fol

Also, I recommend learning about the use of 'classes' and 'ids' involving CSS, since trying to use CSS without classes or ids is like trying to play the piano without any fingers.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.