unable to remove border on button with css. please suggest any method after trying in chrome browser and ie browser

Question

Please open the below link in chrome browser and try to remove the border without affecting the design. The are blue buttons with border if you see in chrome or ie browsers.

http://web-chief.co.uk/podocare/?page_id=136

i tried various methods but still no progress.

Please don't mark this as duplicate question as i have tried all the soln available here with no result.

please include the relevant code in the question itself. Linking to a website isn't considered good practise as when the site is changed, the question becomes obsolete. — web-tiki, Nov 17 '14 at 13:27
You are using image in that buttons. And if image(src="" or no src or src="validURL") is not present border will appear — Shoaib Chikate, Nov 17 '14 at 13:27
There is an `img` inside the `a` which has no `src` specified. Hence the default blank image placeholder. — Abhitalks, Nov 17 '14 at 13:27
but it is generated via short code [button] in wordpress... so what should i do ? — nfsmw_kiddie, Nov 17 '14 at 13:29
In short codes, there will be some place where you can give url to image. — Shoaib Chikate, Nov 17 '14 at 13:30
okay if you manually add a src with some valid url in image tag will it remove the border? i tried in firebug but no result. — nfsmw_kiddie, Nov 17 '14 at 13:32
If you're not setting an image, why are you using the image tag??? — jbutler483, Nov 17 '14 at 13:41
Yes, if ur not using img then remove it...your problem will be solved — Shoaib Chikate, Nov 17 '14 at 13:41

Shoaib Chikate · Accepted Answer · 2014-11-17T13:38:37.843

1

You have to give value of src to img tag in order to work else border will appear.It means that src="" or src or src="nonexistingURl.jpg" is unable to find your image.

<button>No border<img height="50" width="50" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRG38VK4-kYeMdF1fQ6RbhfDoUjbE8smcnFrvJrVg5n1xwP4tN"></button>

<button>Default border<img height="50" width="50" src="noValidUrl.jpg" alt="Image not found"></button>

In firefox, if src of img tag is invalid then it doesn't show any box which is behavior of browser.

In chrome- Box will be shown saying that there some image missing here.

Solution: If you are not using img tag then remove it else give valid url to img tag using your wordpress.

edited Nov 17 '14 at 13:38

answered Nov 17 '14 at 13:33

Shoaib Chikate

8,665
12
47
70

it shows border. open my link in chrome and in the firebug locate the image tag and edit it there and paste your html. border still appears. – nfsmw_kiddie Nov 17 '14 at 13:38
You have to give valid url or remove img tag from button. Please run the code snippet – Shoaib Chikate Nov 17 '14 at 13:40
You can accept the answer if you are satisfied with answer :D – Shoaib Chikate Nov 17 '14 at 13:54

score 0 · Answer 2 · answered Nov 17 '14 at 13:32

0

My guess: The border you see is applied by the browser to alert user that the image source is missing or empty. You cannot place img in html without specifing the image src , otherwise every browser will affect the design and show the frame.

answered Nov 17 '14 at 13:32

MRSoft

77
3

it works fine in firefox but this issue is caused only in ie and chrome – nfsmw_kiddie Nov 17 '14 at 13:34

score 0 · Answer 3 · answered Nov 17 '14 at 13:39

0

I guess you are using Google Map Lightbox Popup wordpress plugin

As it is shown in their settings panel, if you check the checkbox to show a custom image instead of theirs you should include the image path. Without the image path it will generate the img tag without the src attribute just like in your case. So either insert a custom image (for example the blue box with the arrow) or you would have to rework the plugin files.

enter image description here

answered Nov 17 '14 at 13:39

Bojan Petkovski

6,835
1
25
34

To hide the image just add .click_it{opacity: 0;} and it will work :) – Bojan Petkovski Nov 17 '14 at 13:53

unable to remove border on button with css. please suggest any method after trying in chrome browser and ie browser

3 Answers3