CSS Button Not Displaying Properly in Firefox

HTML & CSS
1

I have a large action button that is coded in php on my site. While the button displays fine in Safari, it does not in Firefox and Chrome. The site is www.vappingo.com.

PHP:

If I shorten the text, e.g. type “Order now” it displays fine in Chrome and Firefox but shows a complete button and then a blue block of text in Safari:

This is the css:

#slider a.big-button {
left: 80.5%;
position: absolute;
top: 250px;
z-index: 100;
display: block;
}
#slider {
width: 1064px;
}

Here is the home page code:

<h3 align=“center”
style="color: rgb(0, 109, 145); font-size: 1em; font-weight: normal; margin-bottom: 1.8em; text-align: left; display: inline !important; "><?$APPLICATION->IncludeComponent(“custom:big.button”, “.default”, array(
“TITLE” => “Free instant quote”,
“LINK” => “/order_here/”
),
false,
array(
“ACTIVE_COMPONENT” => “Y”
)
);?></h3>

I have tried playing around with the css but can’t get the button to display correctly on all three browsers. Does anyone know how to fix this please?

2

Hi Wera. Welcome to the forums. :slight_smile:

These days, CSS rounded corners are so well supported that it’s a waste of time to try methods like this. All you need is:

HTML

<a class="big-button" href="" >

CSS

.big-button {
  display: block;
  padding 10px 15px;
  -moz-border-radius: 14px; 
  -webkit-border-radius: 14px; 
  -khtml-border-radius: 14px; 
  -o-border-radius: 14px;
  border-radius: 14px;
  background: blue; /* change to suit */
}

The color, padding and radius values will need to be changed, but that’s the basic idea.

3

Thanks so much for your help.

I have implemented your suggestion and it has improved the button significantly. The only problems I have now is that a line is appearing under the button in Firefox. I assume it is because it is viewing the button as a link. Do you know how I can remove this.

Thanks again,

Sarah

4

Hm, I still think you should get rid of those strongs and just use CSS rounded corners. :slight_smile: (We don’t see images for rounded corners around here much any more.)

Anyhow, you could force the issue in FF with

.big-button {height: 31px;}
5

You’re fantastic, thanks!

I’m not quite sure what you mean re. the strongs. At the moment I have the following:

<?php if (! defined(‘B_PROLOG_INCLUDED’) || B_PROLOG_INCLUDED !== true) die() ?>
<a class=“big-button” href=“<?php echo $arResult[‘LINK’] ?>”>
<strong><strong>
<?php echo $arResult[‘TITLE’] ?>
</strong></strong>
</a>
<div class=“clear”></div>

and

#slider a.big-button {
height: 31px;
display: block;
float: right;
position: relative;
background: repeat-x left top #4f6c87;
text-decoration: none;
border: none;
color: #ffffff;
cursor: hand;
top: 250px;
right: 28px;

}

Is your suggestion the following?

<?php if (! defined(‘B_PROLOG_INCLUDED’) || B_PROLOG_INCLUDED !== true) die() ?>
<a class=“big-button” href=“xxx”>
<div class=“clear”></div>

and

#slider a.big-button {
height: 31px;
display: block;
padding 10px 15px;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
-khtml-border-radius: 14px;
-o-border-radius: 14px;
border-radius: 14px;
background: 4f6c87;

Thanks again.

6

Yes, the PHP is irrelevant in terms of the question, but here’s an example of what I mean:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style media="all">
a.big-button {
  display: inline-block;
  padding: 6px 24px;
  color: #fff;
  text-decoration: none;
  -moz-border-radius: 10px; 
  -webkit-border-radius: 10px; 
  -khtml-border-radius: 10px; 
  -o-border-radius: 10px;
  border-radius: 10px;
  background: #4f6c87;
}
</style>
	
</head>
<body>

<a class="big-button" href="#">Free instant quote</a>

</body>

</html>

This way, you can also forget about setting a height on the <a>, which is not very nice anyway. :slight_smile:

7

Thanks. I think I am almost there. The only problem now is that the button is appearing right at the top of the screen as opposed to where it should be located (above the dots of the slider). Is it possible to move it? I tried top: 250px; but that didn’t work.

8

Sorry, yes, I wasn’t focused on positioning. You could do something like this (adjust to suit):


.big-button {
  position: absolute; 
  top: 250px; 
  right: 20px;
}
9

Yes, that has fixed it.

Thanks so much for taking the time to help me, I appreciate it.

10

No worries. Glad to help! Please come back any time. :slight_smile:

11