I am testing my site on mobile, tablet, and cross-broswer. I have noticed that my images that are inside of an anchor tag are displaying improperly. This only happens on FireFox. Has anyone had any issues with this? I am attaching two images...the first is chrome, the second is FireFox.
The html is:
Learn More<img src="/sites/all/themes/merge/img/arrow.png" />
And the SCSS:
.body-button{ width: auto;display: block; #include open-bold; font-size: 14px; line-height: 14px; border-radius: 0px; opacity: .9; text-transform:uppercase; color:white; background: $blue; padding: 15px;}
.body-button img{ float: right; width: 9px; height: 15px;display: inline-block; }
Does anyone know why Firefox does this?
Related
I have a site with a small pricing blurb. In every browser I've tested in (Chrome, Firefox, IE, Safari for Windows, Chrome for Mac) it looks exactly as intended:
Unfortunately, though, in Safari for Mac, iOS Safari, and Chrome for iOS, the "MEMBERSHIP" text doesn't wrap to the next line and is pushed to the right farther than it should be:
Since I am not aware of any inspector for mobile, I'm having a really hard time figuring out why this text is displaying in the wrong place.
Here's the HTML:
<div id="home-cta-text">
<p style="font-size:40px; text-align:center; font-family:'Franchise-Bold', Arial, sans-serif; line-height:40px; color:#fff; margin-left:auto; margin-right:auto;">
MEMBERSHIPS AS LOW AS
</p>
<div id="home-cta-right" style="float:none; margin-left:auto; margin-right:auto;">
<p><span>$19</span><sup>.99</sup></p>
<p class="home-cta-subtext">PER MONTH</p>
</div>
<div style="clear:both;"></div>
</div>
And appropriate CSS:
#home-cta-text {
padding: 1em;
background-color: rgba(0, 0, 0, 0.4);
width: 377px;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
#home-cta-right {
float: left;
width: 156px;
}
#home-cta-left p, #home-cta-mid p, #home-cta-right p {
font-family: 'Franchise-Bold', Arial, sans-serif;
font-size: 109px;
color: #fff;
line-height: 90px;
padding-bottom: 0;
}
#home-cta-text p.home-cta-subtext {
font-size: 40px;
line-height: 40px;
}
#home-cta-text sup {
position: relative;
height: 0;
line-height: 1;
vertical-align: baseline;
font-size: 49px;
display: inline;
margin: 0;
padding: 0;
bottom: 43px;
}
Can anyone tell me what's going on here?
EDIT: I just noticed that if I remove my #font-face font, the text wraps normally. What's going on here?
I'm having the exact same problem on safari 10+ with the same font. Works perfectly on all other browsers. Looks like a problem with Franchise Bold. I'm going to try downloading it again, hoping there's something wrong in the font files.
EDIT: Apparently I got the wrong files in my assets. Downloaded the font again from Weathersbee Type (http://www.weathersbeetype.com/fonts/franchise/) and it now works in Safari 10+ (and all other browsers).
try use not 'P' just use DIV, and use just text-align center
It works in Chrome desktop
But not Safari iOS
Here is the the CSS
.button {
border: 1px outset $color3;
background: $color1;
color: $color4;
font-size: 80%; // A little smaller because it's in uppercase
text-transform: uppercase;
display: inline;
margin-left: 5px;
margin-right: 5px;
}
I tried font-size: smaller, 0.8em, etc, but it did not help. 50% or 0.5em looks good on iPhone, but is too small on the desktop. text-transform did not matter. padding: 1px; did not help.
Change display to inline-block, and add padding to the top
I am having a hard time understanding what to do to prevent Safari (on a Mac) from playing havoc with the alignment of a paragraph element, nested within some divs.
The problem can be seen using Safari web browser at www.redkitesmusic.com/redkites
After loading the page, select THE BAND.
Here is what I get in Safari:
And here is what I get in Chrome (and others)
I have tried to work this out using the web developer inspector but can't figure out what's wrong.
HTML and CSS follow.
Thank you if you can make some sense of my problem and offer a possible solution!
This is the HTML snippet:
<div id="divPopupContent" style="display: block;" class="bios">
<div style="float:left;width:30%">
<p>About me: I was born in Cameroon in 1989 but have lived in The Highlands of Scotland for most of my life. In 2010 I dropped out of my Ecology course in Aberdeen and moved to Guildford to form a band…</p>
And this is the CSS which applies
#divPopupContent {
background-color: #EEF;
border-radius: 6px 6px 6px 6px;
color: #333;
float: left;
font-size: 0.9em;
height: 92%;
letter-spacing: 1px;
line-height: 1.6em;
margin-left: 6px;
/*margin-top: -18px;*/
margin-top: 6px;
overflow: hidden;
padding: 4px;
padding-right: 18px;
position: relative;
width: 72%;
z-index: 10;
}
#divPopupContent.bios {
width: 78%;
}
#divPopupContent div:first-child {
height: 97%;
opacity: 0.8;
overflow-x: hidden;
overflow-y: auto;
padding: 6px;
}
This is because of font that you are using.
On some version of safari browser, font can't be displayed properly.
That's pretty weird. When I put your code into a Codepen in my Safari browser (Version 7.0 (9537.71), Mac OS 10.9), it looks perfectly normal:
http://codepen.io/anon/pen/JjhKk
Does that Codepen look weird in your Safari?
I was trying to make a simple help button using "A" anchor tag. The thing is it works perfectly on Firefox, Chrome, OP, Safari. Now when I tried it on Internet Explorer 10, The text wasn't properly aligned in the middle. here is what I've done so far:
HTML
<a id="help-btn"><span>?</span></a>
CSS
#help-btn {
display: table;
margin-left: auto;
margin-right: auto;
border: solid 5px #2F2F2F;
width: 10em;
height: 10em;
text-align:center;
background: #c100ff;
text-decoration: none;
vertical-align: middle;
}
#help-btn span {
color: #22002D;
font: 10em "bauhaus 93";
text-shadow: 0px 0px 5px #fff;
line-height: 100%;
}
here is a jsfiddle sample. any help would be appreciated...
so I've finally found the solution after 3 hours of digging deep, as stupid as may it sounds but the extra space was being added by the font "bauhaus 93". It renders correctly on all browsers except IE (that's a shocker). So I had to change it to another font and now it works perfectly. so if anyone face the same problem please do check the font that you are using.
play with your line-height.
Try this :
#help-btn span {
color: #22002D;
font: 10em "bauhaus 93";
text-shadow: 0px 0px 5px #fff;
line-height: 10em; // CHANGE YOUR LINE-HEIGHT SIZE
}
if the problem not fixed, try add display:block; to your #help-btn span
You need to add the line-height attribute and that attribute must match the height of the div. In your case:
Try
#help-btn span {
color: #22002D;
font: 3em "bauhaus 93";
text-shadow: 0px 0px 5px #fff;
height: 3em;
line-height: 3em;
}
I have added CSS style to the submission button form my web form. However, while it looks as I hoped it would on my laptop – I tried both Safari and Chrome and the button appeared the same – the mobile button is not properly shaped and not colored correctly.
Relevant HTML:
<html>
<body>
<form action="{{ post somewhere }}" method="post">
<strong>+1</strong><input name="number-form" placeholder="4045553829" id="number-input" maxlength="10" type="text" onkeypress="return onlyNumbers()"></input>
<input type=submit value="verify number" class="submit-button"></input>
</form>
</body>
</html>
Corresponding CSS:
body {
background-color: #fff;
display: block;
position: absolute;
height: auto;
width: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 100px;
margin-left: 0px;
}
form {
width: 650px;
margin-left: auto;
margin-right: auto;
}
strong {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 2em;
padding-right: 10px;
}
input, #number-input, #veriform {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 2.5em;
color: #181818;
}
#number-input {
width: 260px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #a8a8a8;
}
.submit-button {
background-color: #8a50c9;
color: #fff;
margin-left: 10px;
padding-left: 20px;
padding-right: 20px;
border: none;
}
I have created a JSFiddle – at http://jsfiddle.net/rpE3w/1/ – so it can be viewed in browser.
While on a PC the button is a solid-purple rectangle with white lettering, viewing it on a mobile browser seems to yield a rounded, gradient button.
Many thanks in advance.
You could roll your own with a clickable image instead of an input. Between Mac, Windows, Linux, Android, iOS, Windows Mobile and Blackberry, if you give the browser any choice in what the button looks like, it won't look the same in all browsers. An image will be more consistent.
It appears that I am not the only one who has had this problem CSS submit button weird rendering on iPad/iPhone.
As Francesco points out, this is a rendering error done by iOS devices, and to disable the button modifications I just need to add
-webkit-appearance: none;
to any classes or ids I do not want to be rendered irregularly.
Not exclusively iOS devices either. Android devices - at least those using Chrome and Firefox - have similar rendering behavior for buttons.