I am trying to create paragraphs of text where each word is actually a div containing text and a canvas above it (long story!). This means I end up with a series of divs in each paragraph, which I style as inline blocks. These divs look too close together, so I use the CSS word-spacing property to increase the spacing between them.
This works fine on every browser except Safari. On Safari (OS X and iOS), the words spill over the edge of the containing div, even when I fix the width of the container. I suspect that this is a bug in Safari, since all other browsers seem to render my HTML the same way, but does anyone have a way around it?
I have distilled the problem down to this example HTML:
<html>
<head>
<style>
#box1 {
width: 300px;
background: Red;
word-spacing: 50px;
}
#box1>div {
display: inline-block;
}
#box2 {
width: 300px;
background: Green;
word-spacing: 50px;
}
</style>
</head>
<body>
<div id="box1">
<div>This</div> <div>text</div> <div>should</div> <div>look</div <div>the</div> <div>same</div> <div>in</div> <div>both</div> <div>boxes</div> <div>but</div> <div>it</div> <div>doesn't</div> <div>in</div> <div>Safari</div>
</div>
<div id="box2">
This text should look the same in both boxes but it doesn't in Safari
</div>
</body>
</html>
This can also be viewed as a JS Fiddle here: http://jsfiddle.net/4eh6G/
P.S. On older versions of Safari, there seems to be a different problem, where word-spacing appears to have no effect at all in this example. Any fix for this would obviously be great, too!
Related
I have the following sample code:
div {
display: inline-block;
padding: 5px;
background: #f00;
}
textarea {
display: block;
}
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<div>
<p>hellohellohellohellohellohellohellohello</p>
<textarea></textarea>
</div>
It shows a red region (<div>) containing the paragraph "hellohellohello..." (<p>) and a resizable textarea (<textarea>).
Behavior in Firefox (version 72): When I resize the textarea, inline CSS properties width and height are added to the textarea element. When necessary, the containing <div> will be resized to neatly contain both the paragraph and the textarea.
Behavior in Chrome (version 80): When resizing the textarea, an additional inline CSS property margin is added to the textarea as well, causing the containing <div> to be resized together with the textarea, keeping the initial margins fixed.
Does anybody know why these behaviors are different between Chrome and Firefox?
In my current application, I prefer the Firefox behavior. How can I make Chrome to use the same behavior as Firefox? (Preferably without using JavaScript...)
Edit:
I noticed that the behavior is correct when I remove the display: block; CSS declaration from the textarea element.
So the actual questions here are:
why the textarea element's margins become "fixed" in Chrome when using display: block; in its CSS styling, and
how to avoid this behavior in Chrome while keeping display: block; in the CSS styling.
This is an interesting behavior in Mozilla. This need to be share to relative Mozilla community. For temporary solution you can override inline "margin" property by using !important property in CSS. Try below code :
div {
display: inline-block;
padding: 5px;
background: #f00;
}
textarea {
display: block;
margin:0 !important;
}
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<div>
<p>hellohellohellohellohellohellohellohello</p>
<textarea></textarea>
</div>
;
}
First time I've ever noticed this but is probably an easy one. How come IE and chrome give different heights to fonts? What are the best practices to combat this? This is messing up my header layout, I'm trying to get it to look the same on all browsers.
The code to produce Img:
<html>
<head>
<style>
body{margin:0;}
div {
margin-top: 5px;
font-size:16px;
}
.c1 {
font-family: Arial;
background: blue;
}
.c2 {
font-family: Lucida Sans Unicode;
background: red;
}
</style>
</head>
<body>
<div class="c1"> My Text 1 </div>
<div class="c2"> My Text 2 </div>
</body>
</html>
Edit: - Additionally
Here is an image of the text laid over one another. The text height in pixels is the same in each but the problem seems to be that they don't both use the same margin/padding(whatever it is) at the top and bottom of the text.
Have you tried setting defaults for the webpage?
This problem actually looks like it is line-height.
Browsers tend to render things differently from one browser to the next. Try setting defaults.
Line-height actually changes the size of the line the text sits on. Might be padding in this case...
line-height
margin
padding
font-size
Theres a lot of defaults you should/could set. This does not ensure the same look from one browser to the next. It does help alot though.
Good luck!.
It's only because you haven't set a font-size, so it uses the default size of that browser. I tried the code and had the same thing, but after setting a size it didn't show up anymore.
div {
margin-top: 5px;
font-size: 30px;
}
And just for your knowledge, you can use rem to set size by default browser size, like this:
div {
margin-top: 5px;
font-size: 1.5 rem;
}
And that gives you 1.5x the default size of the browser.
Update
Problem seems to be in line-height, which you should set for the divs. It could also be the padding of the divs. Try setting those and I hope it helped. If not then try setting div display: block.
I've spent a few good hours debugging myself, and a few good hours researching but nothing seems to be solving my problem. I have a caption in my header that is supposed to be cut-off at the bottom, which looks fine in Safari and Chrome, but in Firefox it is positioned much higher:
First window: Firefox
Second window: Safari (chrome renders the same)
I spent about an hour and a half changing everything around in my CSS thinking it had to do with other elements around it, but made no progress. Finally I decided to make an extremely simplified version to see what the problem is:
First window: Firefox
Second window: Safari (chrome renders the same)
Same exact thing. I have a CSS reset applied so that is not the problem. I've tried setting the line-height, but that didn't fix it. I've tried every value for the CSS display property. Nothing is fixing this.
HTML/CSS for test example above:
<div class="test">
<h1>Test</h1>
</div>
.test {
margin: 0;
padding: 0;
width: 100%;
height: 185px;
line-height: 185px;
border: 1px solid red;
}
.test h1 {
font-size: 12em;
}
My website can be viewed at samrapdev.com.
Quick link to CSS stylesheet
In short, I need to figure out how to get both browsers to display the text at exactly the same height
Try and specify a font-family in your stylesheet though it's not pixel perfect
#header .youAreHere h1
{
...
line-height:1;
}
line-height must be set on h1, unless you have something like
* {line-height:inherit;}
Even if you take a webfont and define the line-height of your element you can have variations due to the line-heights of the other elements.
What works for me is to define the line-height of the body on the top of using a webfont.
Also do not forget to reset margins and paddings for all elements you're using. A good trick is to use a reset.css before your actual style sheet (you can find some at http://www.cssreset.com/)
body{
line-height: 1;
}
When measurements are specified in cm or inches for an element, it is printed at exactly that size from Firefox and Internet Explorer. Chrome on the other hand makes the elements bigger.
Is there anyway to make Chrome print things at exactly the specified size, or is it something I'll just have to live with?
E.g.
<!doctype html>
<html>
<head>
<style type="text/css">
div.box {
border: 1px solid black;
width: 5cm;
}
</style>
</head>
<body>
<div class="box">box</div>
</body>
</html>
The above code prints an exact 5cm (on my printer) in both Firefox and IE, but prints at about 5.5cm from Chrome.
I have found this issue too.
After playing with MANY wasted sheets of paper, I've found that Chrome tries to scale the HTML.
For example, add a full width div to your sample below and it'll resize the box correctly, because you're asking Chrome to make the box 100% of the page and thus forcing a 1:1 scale of the page.
<!doctype html>
<html>
<head>
<style type="text/css">
div.box {
border: 1px solid black;
width: 5cm;
}
div.forcer {
width: 100%;
height: 1px;
border: 1px dotted green;
}
</style>
</head>
<body>
<div class="box">box</div>
<div class="forcer"></div>
</body>
</html>
Unfortunately, when I tried this, it didn't fix the height issue, but also I couldn't make the box 0px without it losing correct scaling.
Incidentally, take a look at the following to show how it affects the sizes when printed.
<!doctype html>
<html>
<head>
<style type="text/css">
div.box {
border: 1px solid black;
width: 5cm;
}
div.forcer {
width: 200%;
height: 1px;
border: 1px dotted green;
}
</style>
</head>
<body>
<div class="box">box</div>
<div class="forcer"></div>
</body>
</html>
In a nutshell: Chrome's printing capabilities are shocking!
Firefox works far better for printing, but runs much slower.
The solution with a 100% wide div doesn't work for me on the current Chrome version, but this works, for an A4 paper:
html, body {
width: 210mm;
}
For Chrome, just set the print margins to something, and set the body to the width of the paper, minus the margins.
E.g. For an A4 page, the width is 210mm
So for 1 inch margins (roughly 2.5cm) you can do the following
#media print
{
#page
{
margin-left: 25mm;
margin-right: 25mm;
}
body
{
width: 160mm;
}
}
The left, right, and width of the body should add up to 210mm.
For letter you'd use 1 inch margins, and a 6.5 inch width on the body.
I confirmed that I had the same issue when using your HTML, even when trying to specify some CSS rules to get rid of obvious suspects like padding and margins. From the research I've done, it looks like you're simply dealing with inconsistent browser standards when rendering media queries. If possible, I would recommend conditionally styling the box based on browser.
One other aspect seems to be that not specifying a Doctype (which is a bit of a no-no in development anyway) can lead to inconsistencies.
You can go ahead and see this topic for some more reading about the issue:
Firefox versus webkit measurements for media queries based on width
I have come across a weird kind of inconsistence in rendering in Chrome.
A simplified example of the issue can be replicated by using the following code:
<html>
<head>
<style>
input, span {
border: 1px solid #CCC;
padding: 3px 4px;
height: 23px;
width: 120px;
display: block;
font-size: 13px;
}
</style>
</head>
<body>
<div><span>123</span></div>
<div><input type='text'/></div>
</body>
</html>
So, in a few words, the span and input should have the same size, but it turns out, that Chrome renders the elements differently:
Span is rendered so it's actual size is 31px
Input is rendered so it's actual size is 23px
Upon investigation it looks like Chrome renders the span so it's "inner" (without border and padding) size is 20 px, while input is rendered so it's "outer" size is 20px.
In real application the controls are used in a "in-place edit" scenario, so when user clicks the span, the span becomes hidden and input is shown on it's place. As you can see, with such a difference in size, the transition isn't smooth. Wjat's worth is that the controls are placed in a table cell, so the difference in width and height cause the whole table to change layout a bit.
I'm working on a cross-platform application, so it should work in IE9 as well. The problem is that IE renders both input and span of the same size, so the page looks quite different in IE and Chrome. To make the my life harder, those controls are rendered by ASP.NET server controls, and I'm allowed to change css only.
I'm using Chrome 23.0.1271.91 (latest at the moment of posting) on Win7x64.
So, thre are two questions actually:
How do I fix this?
Why it's happening? Am I missing something obvious? Is it an expected behavior?
Chrome sets box-sizing: border-box; by default on input elements and textareas.
Set box-sizing: content-box to make them both behave like the span or both to border-box to make them behave like the input.
A good explanation about the box-sizing methods can be found here: http://www.quirksmode.org/css/box.html
Since Chrome supports box-sizing, try:
<html>
<head>
<style>
input, span {
border: 1px solid #CCC;
padding: 3px 4px;
height: 23px;
width: 120px;
display: block;
box-sizing:border-box;
}
</style>
</head>
<body>
<div><span>123</span></div>
<div><input type='text'/></div>
</body>
</html>
http://jsfiddle.net/9esTQ/