Display differences on different computers/devices - background image and button

HTML & CSS
1

This site (http://gaudetelectricllc.com) is displayed differently depending on the computer or phone used.

On most in Chrome and, apparently all, in FF, Edge, Opera, a background image and text/button with color ffff00 (yellow) are displayed. On some computers/devices using Chrome (same version), the image is not displayed and the text color is black.

I am attaching a comparative image. The left side shows what some Chrome users see and the right what everyone else sees.

900×386 74.5 KB

I have no ideas about the cause of the problem.

2

The element that I see which displays differently is that with the class bbbseal which appears to be rendered by javascript.

3

Thanks.
Would that affect the display of the yellow lightning bolt and the “Call now” text? It shouldn’t. Perhaps I need to put that in its own layer?

4

Can you identify which specific systems are showing the problem or is it just random?

I’ve tested in Chrome on PC, Mac and ios and all our showing the correct image and color so its very difficult to debug unless we can find a machine it happens on.

There are a couple of things to check and you do have a js error in the console which may upset something along the way.

1956×851 326 KB

Fix that error (probably will require a trip to the js forum).

I also note that your html for the button is invalid.

<a class="telephoneCTA" href="tel:7817913150"><button>Call Now<br>781-791-3150</button></a>

A button cannot be a child of an ‘a’ element (or vice versa). I wouldn’t be surprised if some browsers get confused by that. Either it’s a link or its not. A button is an action and has its own methods. They are not compatible with each other although they can at times appear to do the same things. Use one or the other but not both at the same time :slight_smile:

There may also be an issue where some browsers automatically style telephone numbers but I don’t think that’s an issue here.

5 Likes
5

Thanks. I discovered that adding the BBB image to a separate layer/div took care of the problem.

about the button/a issue: is a button assumed to have a link? I have always used links in the past but not buttons.

Thanks,

6

No.

A button is an element that has an action (like posting a form). It has nothing to do with navigating to different destinations.

A link on the other hand is specifically for jumping to another destination whether that is on the same or completely different page.

Whether you use a button or a link will depend on the use case. As always with html you use the correct semantic tag for the job in hand.

4 Likes
7

Thanks. that helps my understanding.

2 Likes
8

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