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?
Related
I have a problem. I suspect that the problem is a browser-side rendering problem. Maybe even an expectable behaviour, but I have no idea, and that is why I am going to ask you:
I have an <a>-element and I place two other elements (a <span> and a <div>, the <div> has even more children) inside that element.
I upload my HTML-file to my server and can access and download it (e.g. via curl or wget). There is no problem and the file is exactly the same. When I open it in web browsers (I tested Firefox and Chrome) it is still the same, but only when I open it using the "debugging" tab where I can see the original files. The displayed HTML-file (which I can access using the "inspection" tab) is different. The <div>-element got moved out of the <a>-element. Here is the code-snippet:
<div class="navbar">
A link
<a class="dropdown">
<span>A dropdown</span>
<div class="dropdown-content">
Another link
And a third link
</div>
</a>
</div>
As you can guess, it is a snipped from a navbar ;) Maybe you need the CSS (I use SCSS-files) too:
.navbar {
background-color: $navbar-color;
overflow: hidden;
padding-left: 10vw;
padding-right: 10vw;
a {
position: relative;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
color: $navbar-text-color;
}
a.dropdown {
position: static;
display: inline-block;
span::after {
content: '\f0d7';
font-family: FontAwesome;
padding-left: 6px;
}
.dropdown-content {
display: block;
position: absolute;
background-color: $navbar-color;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
a {
float: none;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
color: $navbar-text-color;
}
}
}
}
I know, the design is not perfect and not finished, but I expect I am facing an HTML problem and so I wanted to ask you first.
Do you have any hints, ideas, references, explanations or corrections for me? I would really appreciate it.
I got 2 forms at my webpage and they are wrongly aligned on iOS devices (iPhone, iPad Safari). On computers it displays correctly (Windows and actually even Mac with Safari) but on mobile devices for some reason the inputs are not centered. Interesting thing is that it's not the whole form but just the input element.
1st picture is how it looks in developer tools in Chrome for example and 2nd picture is how it looks on iphone.
HTML
<form class="newsletter-form">
<div class="newsletter-form-container">
<input id="newsletter" type="email" placeholder="name#domain.com" />
<button id="newsletter-send" type="button"><i class="material-icons">chevron_right</i></button>
</div>
<p id="newsletter-sub-status"></p>
</form>
CSS
.newsletter-form-container {
position: relative;
width: 40%;
margin: 0 auto;
}
.newsletter-form {
position: absolute;
height: auto;
bottom: -38px;
left: 0;
z-index: 50;
width: 100%;
-webkit-appearance: none;
}
.newsletter-form input {
border: none;
border-radius: 15px;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
font-weight: 300;
height: 76px;
text-align: center;
width: 100%;
-webkit-appearance: none;
}
there is one more form and that one is positioned static and the inputs are display: block and also displays wrongly. Is this just some iOS thing that I can fix with -webkit something? Couldn't find the answer on google, so I'm trying here.
PS: sorry for different picture sizes, one was taken as phone screenshot and other one is snip from PC.
So, I found out that, iOS just adds padding to the input element by default and since the default setting for the input is box-sizing: content-box; all you have to do is:
a) set padding to the input element to 0 padding: 0;
or
b) set box-sizing: border-box; and then the padding goes inside the element basically.
final CSS for the element then looks like this:
.newsletter-form input {
border: none;
border-radius: 15px;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
font-weight: 300;
height: 76px;
text-align: center;
width: 100%;
-webkit-appearance: none;
padding: 0;
}
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
.rk-adjust {
position: relative;
cursor: pointer;
font-size: 2em;
margin: 7px 0;
&__tap {
position: absolute;
width: 4000px;
height: 3000px;
top: -1500px;
left: -2000px;
}
&__adjustment {
width: 100%;
display: flex;
align-items: center;
padding-left: 9px;
padding-right: 0;
background: rgba(255,0,255,0);
height: 34px;
&:hover {
background-color: rgba(255,0,255,0);
}
}
}
When I try to hover, background color changes but extra weird lines appear on top of hovering box. Please tell me if its known issue. If not, suggest some workaround?
If the problem appears with Win 7 and IE10/11, then try Internet Options, Advanced in IE and set Use software rendering instead of GPU rendering. (Or vice-versa, maybe).
Hope that helps - I also had lots of problems with these effects especially in contentEditable elements.
Win 10, IE11 / Edge is fine in my experience.
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?