I am encountering a peculiar text behavior with different browsers. I cannot say which browser of the 3 is acting peculiar. Before I give out the details of my problem let me illustrate the issue I am encountering..
Outputs::
layout format::
Now the corresponding css codes are as follows::
#feature_links_inner_block {
width: 205px;
height: 390px;
margin: 0 auto;
}
#side_nav_links {
width: 99%;
height: 375px;
margin: 0 auto;
}
.one_third_side_nav_block {
width: 100%;
height: 125px;
}
.one_third_side_nav_block h4 {
margin: 3px 0px 0px;
padding: 0;
font-family: "marcellus sc";
font-size: 19px;
color: #f1d000;
text-align: center;
}
.one_third_side_nav_block img {
float: left;
margin: 1px 3px 0px 1px;
}
.one_third_side_nav_block p {
margin: 3px 0px 5px 0px;
font-family: "trebuchet ms",Arimo, sans-serif;
font-size: 14px;
color: #fff;
}
HTML::
<div id="feature_links_inner_block">
<div id="side_nav_links">
....
<a href="news_media_blurbs.html">
<div class="one_third_side_nav_block white_bottom_border">
<h4>News, Media & Blurbs</h4>
<img src="../Images/png/apply.png" alt="News and Media image" />
<p>What is happening now?</p>
</div>
</a>
...
</div>
</div>
I am trying to figure out what is causing this to happen. Its the same code but rendered different. I have tried to look at the computed values in each browser but they all seem to be the same. If anyone wants it i have the computed values of chrome and firefox copied as a text file.
Ideally I want the final output to look like the chrome output. This is just a small part of the page. I have other sections in the page which runs into similar issue.
Is chrome rendering correctly and the rest 2 not? or is it the other way around?
Any help is appreciated. Thanks in advance
Addendum::: I forgot to mention that I am using HTML5-Boilerplate as my template
The issue here was that the div containing the H4 element was not rendering with a large enough width in Chrome to display the H4 on a single line and the text was wrapping. The OP said that this was actually the desired effect, so I suggested manually adding in a line break to force the H4 to break at the desired point.
If the OP had wanted the H4 to remain on one line, they could have, alternatively, reduced the font-size by a point or two to allow the H4 enough room to exist on one line across all browsers.
This ended up working for the OP:
<h4>News, Media &<br/>Blurbs</h4>
Related
The problem
I recently discovered an encoding problem in my backend for when calculating the initials of a user when the first letter is germanic letter (e.g Ö and Ä). Those letters couldn't be parsed and ended up being a question-mark.
But what I also discovered is a rather peculiar behavior (and the reason I seek advise) in my markup that simply makes no sense to me whatsoever.
I've replicated simplified example below:
ul {
padding: 0;
display: flex;
}
li {
list-style-type: none;
font-family: 'Roboto', sans-serif;
flex-direction: column;
margin: 15px;
width: 260px;
min-height: 200px;
padding: 30px 15px;
text-align: center;
background: white;
border: 1px solid #E8E8E8;
}
.avatar {
height: 35px;
width: 35px;
border: 2px solid #333;
line-height: 35px;
padding: 1px 2px;
align-self: auto;
margin: 10px auto 0;
position: relative;
}
.avatar span {
left: 50%;
position: absolute;
transform: translateX(-50%);
}
<ul>
<li>
<div class="avatar">
<span>?N</span>
</div>
<h4>Örjan Norberg</h4>
<span>orjan#example.com</span>
</li>
<li>
<div class="avatar">
<span>II</span>
</div>
<h4>Isaac Ibarra</h4>
<span>isaac#example.com</span>
</li>
<li>
<div class="avatar">
<span>WW</span>
</div>
<h4>Wyatt Williams</h4>
<span>wyatt#example.com</span>
</li>
</ul>
You'll see that "Örjans" initials are ?N, but also that the "N" is being pushed down to the next line. This doesn't seem to be related to the avatar width because I tried with both long and short initials.
In fact, even if I put WWWWW or something else (pic) that overflows the avatar, there is no line-break which is as expected. I also tried other special characters, such as & and %, but those behave just as any other character or letter.
Question
What causes this behavior when using the question-mark specifically? Is it somehow related to the font (Roboto) or is it my css?
Also, (see pics below) how come this happens when the question-mark is followed by a letter, but not when the order is reversed (letter first) or when followed by another question-mark?
What's going on here??
EDIT 1: Using OSX/Chrome.v59, though can replicate in Windows7/IE11
EDIT 2: Apparently the — character also causes this behavior (thanks to #MrLister for finding this)
What you see happening is that the bounding client rectangle for the combination ?N is too wide to fit without overflow, and so the browser does whatever it should do when it sees overflow, based on default rules and CSS overrides. Part of the reason is that the translate and scale transforms do not reposition elements, they only draw them somewhere else, so your transform does not counteract your absolute positioning. Have a look at http://jsbin.com/gujafokiwe/edit?html,css,output and notice that as far as the DOM is concerned that span is still in its original position, we've only told CSS to draw it somewhere else.
When the browser sees ?N (and specifically: some browsers. Not all of them) it might see that it needs to break the line based on the bounding client rect dimensions. However, browsers are free to pick their rules for when and how to break text sequences (CSS does not specify which rules must be used, only that for unicode content outside of CJK it is advisable to use http://www.unicode.org/reports/tr14/tr14-37.html) and while your example works fine in my Firefox, not breaking the text at all, my Chrome does see overflow, and does try to break up the sequence(s) as best as it knows how to.
Unfortunately, the only true answer on why it does that is in the code for the text render engine - that's either in Blink, or in Webkit, both of which are (mostly) open source and so unless you happen to get the eyes of the person or people who implemented it on this question, you're going to have to seek them out rather than hope they browser Stackoverflow and find your question: your best bet is to read through http://www.chromium.org/blink#participating and then post this question to their dev mailing list.
(Solutions for your problem are varied: remove the .avatar span rule and just text-align: center the parent div, or even better: use flexbox rules)
The ? in the first span is a word-break opportunity; after all, the N is the start of a word. This doesn't happen in the other spans, since those contain a whole word each only. So what you should do is apply white-space: nowrap to the span, so that it no longer wraps.
Edit: while this is not the explanation to what's actually happening - it doesn't happen with most other non-word characters, so "word boundary" is not the whole of the story; see comments - it still provides a practical workaround, so I'm leaving this up.
ul {
padding: 0;
display: flex;
}
li {
list-style-type: none;
font-family: 'Roboto', sans-serif;
flex-direction: column;
margin: 15px;
width: 260px;
min-height: 200px;
padding: 30px 15px;
text-align: center;
background: white;
border: 1px solid #E8E8E8;
}
.avatar {
height: 35px;
width: 35px;
border: 2px solid #333;
line-height: 35px;
padding: 1px 2px;
align-self: auto;
margin: 10px auto 0;
position: relative;
}
.avatar span {
left: 50%;
position: absolute;
transform: translateX(-50%);
white-space:nowrap;
}
<ul>
<li>
<div class="avatar">
<span>?N</span>
</div>
<h4>Örjan Norberg</h4>
<span>orjan#example.com</span>
</li>
<li>
<div class="avatar">
<span>II</span>
</div>
<h4>Isaac Ibarra</h4>
<span>isaac#example.com</span>
</li>
<li>
<div class="avatar">
<span>WW</span>
</div>
<h4>Wyatt Williams</h4>
<span>wyatt#example.com</span>
</li>
</ul>
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
IE 7's rendering:
Everything else's rendering:
There are a few problems between those two images, but the one I'm concerned with is that there is way too much spacing between lines. I set the line-spacing to 0px, and then the "page name here" at the top looks right, but everything else is messed up. Set everything else to 1.2 and everything looks somewhat fine... but that messes every other browser up. What should I do? Is there another property I'm missing, or do I have to ind a work-around?
Code:
The div around the top "Page Name Here"
#TopBar {
padding: 0px;
height: 50px;
max-height: 50px;
overflow: hidden;
z-index: 250;
}
The actual h1 element of the "Page Name Here"
.TitleText {
font-size: 2em;
color: white;
text-align: center;
line-height: 1.2;
}
Everything:
* {
padding: 0px;
margin: auto;
font-family: Tahoma;
line-height: 1.2;
}
I tried messing with the values a bit but I can only get it to look good on either IE7 or everything else
Figured it out while posting my code...
In my code:
* {
padding: 0px;
margin: auto;
font-family: Tahoma;
line-height: 1.2;
}
I set the margin for everything to be auto by default, making IE7 render a different value other than 0px. By setting it to 0px for the margin-top property, it gets rid of the extra space at the top of the title bar and fixes the cutting off problem.
use this IE7 hack:
#TopBar { *height: 40px; }
My designer colleague obviously aligns his text nicely justified in his Photoshop.
How can I apply his design to my code when there will always be some space around text?
I mean I can fiddle with things like negative margin, line-height (see example) or anything. But that can't be a solution.
This question most likely arose already
An example: http://jsfiddle.net/bfpPS/
html:
<section>
<h1 class="wrong">WRONG</h1>
<img src="http://creativemedias.files.wordpress.com/2010/02/a_beautiful_day___wp_pack_by_little_stock.jpg" />
<h1 class="right">Isn't it beautiful!</h1>
</section>
css:
section, img, h1 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
line-height: 1.4285714285714em;
vertical-align: baseline;
background: transparent;
font-family:'Lato', Arial, Arial, Helvetica, sans-serif;
font-weight: normal;
letter-spacing: 0;
}
img {
height: auto;
max-width: 100%;
width: 50%;
float: left;
}
h1 {
font-size: 2em;
}
.wrong {
float: left;
}
.right {
line-height: 0.7em;
}
We all know that "WRONG" is the right way to code this. Your designer is wrong here, not your CSS. Normally when I encounter situations like this, I ignore the exact design and do it how I know is the right way to do it, and then if anyone complains, I tell them that's how the web works. Even if you set a negative margin or do something else hacky, it's going to look wrong in someone's browser who has a different font available or a larger font size set, etc. Why bother with the hacks? Just do it right.
Is it possible to achieve line-height consistency in all browsers?
I have attached an image. You will notice a red rectangular box and a green rectangular box (both of the same width and height) which I have added via photoshop manually to aid in showing the the space/gap difference between the dotted lines (below the red box) and the "Followers: 3197179" text.
It seems that Firefox is the only one that is displaying the elements differently. I notice this when I apply a line-height. Any way I can make this consistent with all browsers?
I am using Firefox 3.6.13, Safari 5.0.3, Opera 10.63 and Chrome 8.0.552.231.
.clearfix,
.container {
display: block;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
position: relative;
margin: 0 0 0 0;
padding: 12px 0;
border-bottom: 1px dotted #E7E7E7;
}
li img {
float: left;
margin-top: 0;
}
li p {
margin: 0 0 0 58px;
padding: 0;
font-weight: normal;
border: none;
font-size: 1em;
line-height: 1.3em;
}
li p.name {
position: relative;
padding-top: 0;
font-size: 1.1em;
font-weight: bold;
}
<ul>
<li class="clearfix">
<img width="50" src="http://localhost:3000/images/foobar.gif" alt="thumb">
<p class="name">
Jessica Simpson
</p>
<p>Blurred out text here</p>
<p>Followers: 3197179</p>
</li>
</ul>
Your currently using em's. Maybe you can try to be more specific by trying to use px in both line-height and font-size. Also try to use padding in those texts, maybe it'll work, I think ;).
In any cross browser thing you do. There's is no concrete way of doing things to make it same on every renderer. It's always a dream that most client's don't understand. For me, it's better to always explain to them what they want and how much time we spend in things like 1px/2px differences. It's plain normal. You may check this video by Andy Clarke speaking about cross browser and some other cool stuff.
Are you using a CSS reset? These help alleviate most of the cross-browser issues. Meyer Web has a popular one: http://meyerweb.com/eric/tools/css/reset/
You can add line-height for Mozilla only, by using:
#-moz-document url-prefix() {
*, body {
line-height: [as per your requirement];
}
}
Have you specified any common rules? e.g:
* {
margin: 0;
padding: 0;
}
body {
font-size: 100%;
line-height: 1;
}
Sometimes it's helpful, even without full reset.css approach.
It might be how the font is being rendered. Try using this as a font family.
font-family:"Arial Unicode MS","Lucida Sans Unicode";