Reluctant border

HTML & CSS
1

Hi

I have a blue border around an image that I want to remove. Easy, I know, but I’ve tried a million permutations, and NO GOOD!

This is the applicable css

 .img-container{
margin:0 auto 0;

	border-radius:0;
	border:none;
	padding-top:0;
	width:100%;/* adjust to suit*/
}
.img-container img{
position:static;
	width:auto;
	height:auto !important;
	display:block;
}


div .ad {
padding:20px 0 0 8px;
margin:0 auto;

}

and this the HTML

<div class="ad">
<div class="img-container"><img title="Tipping" alt="Tipping" src="images/DomRepMoney.jpg"></div>
</div>

I’ve added this to the <header>

    <style>
    div .ad img{
    border:0;
    }
    .img-container img{
    border:0;
    }

</style>

in the header i tried the .ad with and without the div

2

Why don’t you add border: none; to the .img-container img{ in your css file?

3

But that’s what I did! (I tried border:none and border:0

if you mean in the main css instead of the <header> the reason is that the css controls over 60 pages and if I change something there God knows what it might affect.

In any case, in the main css or in the html it should make no difference

4

Try opening the page using Chrome and right clicking on the image and select “Inspect element”.

The box on the right should show all the related styles including related styles which can be toggle using re;ated checkbox.

5

Ok but then the order of appearance in the header is important.
Check what style is being used like John says. If you’re using FF, use firebug. It also shows you what styles are being overridden by the final one used, so you can see if the style you put in the header is being considered.

1 Like
6

Hi John

I wish I knew how to dicypher that Chrome box…

here is what I saw. Time to learn how to use it

582×685 72.6 KB

7

The striped through styles are the ones not used because overridden by other styles.
If you scroll down you should see the styles you inserted in the header as well. If not, they are not taken into consideration for some reason.

8

Can it be that it is media queries taht’s controlling the image?

This is the link.

http://pintotours.net/Americas/DomRepublic/DomRepTipping.html

If you could explain a bit of what I should have looked for in theinfo of Chrome, I will very grateful.

9

Try opening buttons.css and going to line 956

With a bit of luck you should find the following:

img {
  margin:0 auto;
  margin-bottom: 7px;
  border-: 1px double #6495ed;
  border-width: 2px;
  max-width:400px;
}

Change the border values, save buttons.css file temporarily add this amendent to override the CSS cached file:

<link href="buttons.css?ver=2015-06-05" rel="stylesheet" type="text/css"/>

Edit:

Try remmng this line from buttons.css

/*   border: 1px double #6495ED; */
  border: 0px double #6495ED; /* should also work */
10

Firebug in FF shows me that your header style is being overridden by the style defined in buttons.css

You might want to try to invert the order in your header: first your header defined styles, then the include of buttons.css

11

Hi

I’m embarrassed! I never looked for the obvious in the stylesheet!

I’ve sorted it out by adding the code to the < header> but cannot understand John’s post about adding this

12

I just looked at your actual html web-page source and this is the relevant line:

 <link rel="stylesheet" href="/Pinto/buttons.css">

Replace this with the following:

<link rel="stylesheet" href="/Pinto/buttons.css?ver=2015-06-05" >

Adding a version parameter will ensure that the old cached button.css file is not loaded.

1 Like
13

But I’ve never had that problem before, or did I…?

besides, in this case, I don’t think there is an earlier version, as all the subsequent changes are done in the html

PS - but I get your point and will look at adding the version to all my stylesheets.

1 Like
14

Hi

But the way it is I override the css with styles needed for the page in question. I’m getting confused…

15

To get rid of the border either remove the border setting from the original rule or over-ride with a rule of same specificity.

#content #box4 .img-container img{border:none}
1 Like
16

Hi

Thank you, Paul

As I mentioned above I am ashamed…

I sorted it out now by over-riding the #content #box4 img {
which had the original code

I thought I would give you all some peace and quiet for a while, but I couldn’t keep away…

Regards

17

Thank you, John

i learned something with the css versions, which I did not know about and make a lot of sense.

1 Like
18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.