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
Related
1.) This works in Chrome.
In Firefox, however, a django tables table that we are rendering on our site is not observing the overflow style. From what I read, table cell elements may be a "per browser" decision because they aren't pure block elements (if I am understanding the standard correctly), but here's a picture of my problem.
I've tried fussing with the max-width tag (to no effect other than the width changes but the overflow is still garbled into the next cell). I could technically wrap the line (white-space), but we don't want huge table rows on the page.
The Mozilla developer page (Overflow) says "In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap." The height property doesn't seem to change this either. No other CSS property I've tried seems to have an effect.
I keep thinking that this is something Firefox may not support (i.e. table cells aren't "block-level"?), but I can't quite say that for certain.
EDIT: Here's the html. It's just a basic table produced by django tables. Please ignore the inline style I attempted which is commented out.
EDIT: Here's inline code and a JSFiddle link at the bottom.
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<head>
<style>
<body {font-family: Arial, Helvetica, sans-serif;}
th {
padding: 8px;
}
td {
padding: 8px;
}
td.content {
overflow-x: scroll;
max-width: 0;
white-space: nowrap;
}
</style>
</head>
<body>
<table>
<thead><th>Column 1</th><th>Column 2</th><th>Column 3</th></thead>
<tbody>
<tr><td>Other stuff</td><td class="content">A REALLY REALLY REALLY
REALLY LONG MESSAGE</td><td>Other stuff</td></tr>
</tbody>
</table>
</html>
JSFiddle
I made a simple code for you, i hope help you, tell me if this is what you want:
.msg_list{
border:1px solid red;
}
.td-content{
border:1px solid blue;
max-height:100px;
max-width:100px;
}
.content{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
.content div{
width:200px;
}
<table class="msg_list">
<thead>
</thead>
<tbody>
<tr>
<td class="td-content">
<div class="content">
<div>One really really really really really long message</div>
</div>
</td>
</tr>
</tbody>
</table>
If you watch you can see in the css the class .content and his property max-width, i tested it in firefox, you can try it
How can I center one div inside another div?
Thank you!
You have some fundamenatal syntactic issues to face here:
You should stop using div to encase image tags and instead use the figure tag in HTML5.
You should (as commented by Hevlastka) remove the size defined in the <img> tag and have the sizing only defined in CSS.
You have set a max-width without setting a width which can cause issues on IE based browsers.
IE10 and IE11 do not appear to support overriding min-width or max-width values using the initial value.
IE7 doesn't support min-width on input button/submit button/reset button.
max-width doesn't work with images in table cells in IE.
Using Normalize CSS is highly recommended (esp. if you don't want to use javascript).
You should try and get out of the habit of using <style> as soon as possible and instead put your CSS in its own specific file to be called by the HTML file.
Edits to your code that I've used to make it work for me on IE 11 and Edge:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title is REQUIRED in HTML head area</title>
<style>
div {
text-align:center;
}
/*
The picture and the div must be Centered
inside their container!
*/
figure {
border: 1px solid red;
padding:20px;
text-align:center;
display:inline-block;
margin:auto;
}
img {
border: 1px solid black;
width: 100%;
max-width:640px;
height: auto;
margin:auto;
}
</style>
</head>
<body>
<div>
<figure>
<img src="https://image.ibb.co/bE3eVF/my_Picture.jpg">
</figure>
</div>
</body>
</html>
Adding Modernnizr.js is solving the problem.
Add this between your <head> tags.
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
and remove display: table; from your CSS.
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/
I am learning HTML and CSS, and I want to create a fixed-width page which has a silver background color. I also want the background color outside of the fixed-width area to be black.
The problem is that there is a small black gap above the fixed-width area (above the heading), and I would like to remove this black gap, so that it's replaced with silver color.
How do I solve this?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my Homepage</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main">
<h1>Welcome to my homepage.</h1>
<p>This is just a test.</p>
</div>
</body>
</html>
CSS:
body {background-color: #000000;}
.main {
width: 640px;
margin: 0 auto;
background-color: silver;
}
try
body {padding:0; margin:0; background-color:#000; }
try:
border-width:0px;
border and margin are two different things... here's a nice picture for you:
http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/
You can do below:
body {margin:0; padding: 0; background-color:#000; }
.main {
position: absolute;
width: 640px;
left: 50%;
margin-left: -320px;
background-color: silver;
}
problems like this one will be quite common when writing HTML & CSS, it is a hotly debated subject but I would strongly recommend you use a reset style sheet.
All browsers have their own set of rules as to how elements are displayed on a webpage, a reset style sheet goes a very long way to minimise the effect of browser specific style meaning your code reads much more logically and it easier to spot what is going on especially when you have a problem. That said, even with a reset style sheet you should always cross browser check a project as there are always quirks.
Here is one of the most widely used reset style sheets.
http://meyerweb.com/eric/tools/css/reset/
Just paste this above your website CSS on your style.css sheet or create a new stylesheet called reset.css and reference it BEFORE your site.css.
I'm 10 lines in to my second attempt at HTML and CSS and it is immediately doing completely barmy things.
I have the following code (this the entire page):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Some page title</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.1/build/cssreset/reset-min.css" />
<link rel="stylesheet" type="text/css" href="47926.css" />
<link rel="stylesheet" type="text/css" href="960Clear.css" />
</head>
<body>
<div id="rootDiv">
<div class="container_16" id="topBarDiv">
<div id="topBarLogoDiv">
<a id="topBarLogoLink" href="~/Home/ComingSoon" title="Coming soon page"/>
</div>
</div>
</div>
</body>
</html>
And here's the CSS (960Clear.css, the others are 960 grids and YUI reset):
#rootDiv {
height: 70px;
background-color: #F7F7F7;
}
#topBarLogoDiv {
background-image: url('file:///C:/Users/Public/Documents/~Main/Vuplan/S26.Vuplan.Web.Application/Images/logo-vuplan-color-on-alpha-172x49.png');
background-color: #F7F7F7;
background-repeat: no-repeat;
margin-left: 20px;
height: 50px;
width: 172px;
display: block;
overflow: hidden;
}
#topBarLogoLink {
height: 50px;
width: 172px;
min-height: 50px;
min-width: 172px;
display: table-cell;
}
This simple, simple page doesn't work. Internet Explorer was my initial problem, rendering up to four logos in the top corner, but let's ignore Internet Explorer for now because even Firefox is doing the nuttiest thing.
I render another, whole anchor element outside of the wrapper div and this oddness is even visible as another line of code in the F12 diag tools window!
I took a screen shot to demonstrate:
http://0olmuq.bay.livefilestore.com/y1pxx75x_th_V0FX15uiLSOAK7MbKnHOQ17L9WMLg4K1TrIoZ0_xEaTgveh0_xF0S8o1Ae8WVvQLNWjQzyGl5AXsPpMV9MW0aDI/One%20Anchor%20Tag%20Renders%20Two%20Anchor%20Tags%20Crap.jpg?psid=1
For me, HTML+CSS work is a punishment served in Hell, but this takes the biscuit. What on Earth is going on here?
Note
My fault - I should've added this disclaimer before.
The code above seems to have tickled some people. Please remember that it's in an experimental state as I try to work out why I am getting multiple logos and general oddness.
I haven't got as far as correcting local links (which will be completely different in production and generated via ASP.NET MVC methods anyway).
Imagine that someone is having problems plumbing a house and you go to investigate. The house may not be finished yet; please ignore the missing carpet ;-)
You can't close an A tag with /> you need to close it with Link
The double rendering is Firefox/Firebug parsing invalid HTML.
First of all, if you're know you're going to write bad code at least let the browser know in advance. Use a more forgiving doctype than strict (technically this doesn't really do much, but every bit helps I think)
Next, unlike most other languages, grid frameworks and aids like that are actually better for intermediate and advanced users. Those new to CSS are more likely to be confused by them. (This is subjective, I know, but it is a sentiment expressed by many, and we are giving out advice here, aren't we?)
Now for the site logo. Its a matter of personal preference I suppose, but its usual to see logos being marked up as h1s. There are multiple ways of achieving what you want here, I'll just give the one I habitually use:
HTML:
<h1>
Site Name
</h1>
CSS:
h1 {
float: left;
overflow: hidden;
}
h1 a {
display: block;
background: url('path/to/logo.png') no-repeat;
width: 100px;
height: 100px;
text-indent: -9999px;
}
You're URLs are incorrect: ~/Home/ComingSoon and file:///C:/Users/Public/Documents/~Main/Vuplan/S26.Vuplan.Web.Application/Images/logo-vuplan-color-on-alpha-172x49.png might work locally, but you need to use relative paths if you are going to place this onto a server (assuming you are not going to use server-side scripts to generate those URLs)
#topBarLogoLink {
height: 50px;
width: 172px;
min-height: 50px;
min-width: 172px;
display: table-cell;
}
The min-height and min-width declarations are useless: They are only useful if you do not declare a fixed width and height. min-height and max-height properties, and their width counterparts, are used for fluid layouts, where the designer give the browser a certain degree of flexibility to accommodate for different screen sizes and other uncontrollable factors.
The display: table-cell declaration is also slightly suspicious: if you want the inline a element to expand out to the size of its parent div you can just use display: block
#topBarLogoDiv {
background-image: url('file:///C:/Users/Public/Documents/~Main/Vuplan/S26.Vuplan.Web.Application/Images/logo-vuplan-color-on-alpha-172x49.png');
background-color: #F7F7F7;
background-repeat: no-repeat;
margin-left: 20px;
height: 50px;
width: 172px;
display: block;
overflow: hidden;
}
Other than the url issue, the background color should also not be redeclared - HTML elements have transparent background color by default. Declaring display: block here is also unnecessary - divs are block level elements.
Oh, and I'm really really sorry if you feel offended by that comment. I really am. Consider this me making up for that, okay?
Try not making the <a> self-closing. It should be Text or .