I need a div with a height of exactly 1em minus 1px. This can be achieved in most browsers like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.helper {
/* background-color: black; */
position: absolute;
top: 5em;
left: 5em;
width: 2em;
height: 1em;
}
.target {
background-color: #89f;
position: absolute;
top: 0;
bottom: 1px;
width: 100%;
}
</style>
</head>
<body>
<div class="helper">
<div class="target"></div>
</div>
</body>
</html>
The "target" div has the desired height. The problem is, that this doesn't work in IE6, because it ignores the bottom attribute, when top is set (a well known problem).
Is there a workaround for IE6 (maybe with multiple nested divs, with borders/paddings/margins/whatever), or will JavaScript be the only solution?
Please note, that I can't use Quirks Mode.
Does the target div have to be physically 1px smaller or just display 1px smaller?
The easiest way would be to add in an "ie6 only" stylesheet:
.helper {overflow:hidden;}
.target {top:auto;}
This will display target as 1em - 1px but its real height is 1em with the top 1px is hidden.
IE6 is flaky when it comes to absolute positioning support.
Another solution, instead of the code above, would be to add in an "ie6 only" stylesheet:
.target {position:static;margin:-1px 0 1px 0;}
I see you got the absolute positioned solution to work. Great!
Is it required by the client? If not then just abandon IE6 and hacks for this crappy/old browser.
Related
I am trying to center a block of dynamic height. I followed the nice guide at Vanseo Design and implemented the solution with negative margins. After a while of tweaking I got it to work in Chrome, but when trying in IE and Firefox the negative margins were way off! Chrome and Safari handles the position as expected, but not IE and FF. Had it been only IE I could have done a classic IE-CSS-hack, but with Firefox in the mix as well... Anyone who know how to get vertical cenetring with dynamic element to work in all browsers?
Screenshot from Chrome / Safari (Correct):
Screenshot from Firefox / IE (Wrong):
<!DOCTYPE html>
<html>
<head>
<title>Dead Centre</title>
<style type="text/css" media="screen"><!--
body
{
color: white;
background-color: #000;
margin: 0px
}
#content
{
position: absolute;
top: 50%;
left: 0%;
height: 64%;
width: 100%;
margin-top: -32%;
text-align:center;
background-color:#339;
}
--></style>
</head>
<body>
<div id="content">
<div class="bodytext">This box should be centered vertically</div>
</div>
</body>
</html>
Well, you put a height of 64% for your element, so let do mats :)
100-68 = 36 ,., so there is only 36% left.
then devide this by 2 and you have 18
By putting your content ID to 18% from top and removing your margin, everything should work just fine. :)
#content
{
position: absolute;
top: 18%;
left: 0%;
height: 64%;
width: 100%;
text-align:center;
background-color:#339;
}
I am trying to understand the basics of CSS layouting and have some problem with a page being too high when I add a border.
Here comes my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="KKF_00005.css">
<title>KKF 5: Border coping</title>
</head>
<body>
<div class="links_aussen">
<div class="innen">Rechts</div>
</div>
<div class="mitte_aussen">
<div class="innen">Mitte</div>
</div>
<div class="rechts_aussen">
<div class="innen">Links</div>
</div>
</body>
</html>
I use the following stylesheet:
#CHARSET "ISO-8859-1";
* {
height: 100%;
margin: 0;
padding: 0;
}
html,body {
background-color: grey;
width: 100%;
}
.innen {
border: 1px solid black;
}
.links_aussen {
float: left;
background-color: green;
width: 33%;
height: 100%;
}
.mitte_aussen {
float: left;
background-color: yellow;
height: 100%;
width: 34%;
}
.rechts_aussen {
float: left;
background-color: red;
height: 100%;
width: 33%;
}
And here is jsFiddle
My problem is that this code gives me a nice 100% layout horizontally but creates a scrollbar being to high verticcally. I would like to have no scrollbars but also see the borders (so overflow: hidden; will not help me in this one I think) - tested in Chrome and Firefox.
So: How can I tell my little browser that it should remove 2 pixels from the height so that I can have borders and no scrollbars?
Thanks in advance for any ideas and answers
André
Here is a solution for you using box-sizing: border-box. It also removes the need for the .inner div.
http://jsfiddle.net/mqchen/xHFvG/
EDIT: If anyone is wondering why this works, look down at Joakim Johansson's post. Now, back at this post. The box-sizing property simply redefines how the browser calculates the size of elements. More about it here: https://developer.mozilla.org/en-US/docs/CSS/box-sizing
This is because the default box model is content-box, and works like this:
The heights you set changes the "Content" part. So if you have height set to 100%, and border set to 1%, that will add up to 101%.
This is solved in different ways depending on what you're trying to do.
For example you can set the box-sizing attribute: http://www.quirksmode.org/css/box.html to make the height attribute work in different ways.
Can't for the life of me figure out a good solution right now (since relying on box-sizing isn't that compatible), but here's a bad one, using absolute positioning: http://jsfiddle.net/XhfmR/
Your problem is borders:
Instead of
.innen {
border: 1px solid black;
}
http://jsfiddle.net/tt13/997zC/
Use
.innen {
border-left: 1px solid black;
border-right: 1px solid black;
}
http://jsfiddle.net/tt13/997zC/1/
When you write just border it adds borders to all sides of div. In your case, bottom and top border takes extra 1px, you're getting result 2px taller in height. That's why you see scrollbar.
And always use jsfiddle for this kind of questions.
.innen {
border: 1px solid black;
}
is your problem. It creates the vertical scrollbar.
To solve this, use this code:
.innen {
border-left: 1px solid black;
border-right: 1px solid black;
}
http://jsfiddle.net/yrLtz/
Edit: Maybe the best solution is box-sizing: border-box as #mqchen suggested.
Im just wondering if this is a browser rendering issue or incorrect css.
A nice way to scale a div in a defined aspect-ratio is, using a transparent image as a child element.
I have a small demo here. Under need this question.
But why doesn't it work nicely if I want a height of 100%.
I tested this in FF10, Safari 5.1.2, IE8 and IE9. (only ie8 seems to render correctly...)
Hope somebody can explain the problem and maybe come up with a solution.
Regards,
Rik
<!DOCTYPE html>
<html lang="uk">
<head>
<title>test</title>
<style>
html
, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: green;
}
/* AUTO WIDTH - doesnt render correct when scaling the browser window to a smaller size */
.holder1 {
position: relative;
display: inline-block;
height: 100%;
width: auto;
background: yellow;
border-right: 1px solid red;
}
.holder1 .ratio {
display: block;
height: 100%;
width: auto;
}
/* AUTO HEIGHT - works fine */
.holder2 {
position: relative;
display: inline-block;
height: auto;
width: 100%;
background: yellow;
border-right: 1px solid red;
}
.holder2 .ratio {
display: block;
height: auto;
width: 100%;
}
</style>
</head>
<body>
<span class="holder1">
<img src="/images/empty_image.png" class="ratio" alt="Ratio image">
</span>
</body>
</html>
After view your question, I have some idea and suggest for your code:
1.Different between width:auto and width:100%, when you set auto for width, you leave the browser handle this width, with every different browser, they will handle width:auto follow their own rules. With width:100%, you force the browser must expand to have full width.That is what I think.
But for sure your div can expand 100% on every cross browsers, add css min-width:100%, it will do as you wish correctly.
2.About your CSS, I need you take a look at position:relative, this line of code have no sense, in this situation,
position:relative = position:static
when you use position:relative, you must describe where is the position you wish your element relative to, add top or left to do it.
Hope it can help you!
I want to make my table take up 80% of the screen, but right now its only the size of the content in the table.
#ecom-mainarea .center
{
margin-left: 10%;
position: relative;
width: 80%;
height: 80%; /* when this is 500px it works fine, but % doesn't work */
border: 1px solid;
border-bottom-color: teal;
border-top-color: gray;
border-left-color: gray;
border-right-color: teal;
background-color: white;
voice-family: "\"}\"";
voice-family: inherit;
vertical-align: text-top;
}
You need to make sure that the htmland body elements have 100% height. They need to stretch from top to bottom. If not the html and body element will just be as high as your table.
Here you have a working sample:
<!doctype html>
<html>
<head>
<title>Table height</title>
<style>
html, body
{
padding: 0;
margin: 0;
height: 100%;
}
</style>
</head>
<body>
<table style="background: cyan; height: 80%;">
<tr>
<td>
Table has 80% of the height of the body
</td>
</tr>
</table>
</body>
</html>
Works fine so long as you specify a height of the parent element (in absolute units)
You can use a bit of a hack. It uses positioning. See: http://jsfiddle.net/minitech/2vRrZ/
(Also, if you ever need vertical centering for multiple lines - that's how it's done. My invention as far as I know)
If I recall, percent is not supported for CSS heights. Gotta resort to other methods.
As a design suggestion unless you really want to have it as a percentage I'd suggest a fixed size for the table so the layout looks the same on every computer no matter what their resolution is.
My problem is that ratio of width/height (for div with id="wrapper", different is huge) isn't the same on Chrome, Mozilla and IE (IE looks like refuse attribute for heigt at all). Any help, I need two divs fixed size, one beside other .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
div#wrapper {
width: 1000px;
width:700px;
margin-left:auto;
margin-right:auto;
overflow: hidden;
}
div#left {
width: 80%;
height: 80%;
min-height: 80%;
float: left;
background-color: #DFDFDF;
border-left-width:2px;
border-left-style:solid;
border-left-color:#606060;
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:#606060;
border-top-width:2px;
border-top-style:solid;
border-top-color:#606060;
}
div#right_up {
width: 19%;
height: 80%;
min-height: 80%;
float: left;
background-color: whitesmoke;
border-top-width:2px;
border-top-style:dashed;
border-top-color:#FF2A2A;
border-right-width:2px;
border-right-style:dashed;
border-right-color:#FF2A2A;
border-left-width:2px;
border-left-style:solid;
border-left-color:whitesmoke;
}
</style>
</head>
<body id="body"">
<div id="wrapper">
<div id="left">
REFERENCE:
</div>
<div id="right_up">
</div>
</div>
</body>
</html>
First of all you cannot use percentage heights on floated elements.
Second, I see no height set on the wrapper div
Make sure that your code validates: http://validator.w3.org/ . Fixing the little errors it find will remove a lot of variance between browsers.
For instance, you've specified the width attribute twice for #wrapper, which doesn't make any sense.
Hey Rebecca and welcome to SO! :)
First of all, I don't think you could ever get mixed measurements units act the way you want. You have divs width in percentages and border width in pixels, basically you're hoping that 1% will never mean more than 2px for the wrapper width.
Let's take it step by step. First of all, you have 2 widths for the wrapper div. The second will overwrite the first and you'll end up with a width of 700px. That's very little, you should reconsider to a width of 960px or a max. of 990px (which assures you won't have an horizontal scrollbar on 99.9% of the screen resolutions today.
Let's rewrite that to:
div#wrapper {
width: 700px; /* 700 to stick to your design */
margin: 0 auto; /* which is basically the same as you have, but in one property, not two */
overflow: hidden;
}
div#left {
width: 558px; /* 80% of 700px (wrapper div) minus the border width. It will never change so there's no need to set it in percentages */
height: 80%; /* height will overwrite min-height on FF for example. Also, min-height doesn't work in IE, setting a fixed height might be the best way to go */
min-height: 80%;
float: left;
background-color: #DFDFDF;
border: 2px solid #606060; /*set a border all over the div */
border-right: 0; /* and remove the right border */
}
div#right_up {
width: 140px; /* 20% of 700px */
height: 80%; /* same height problem as you have for the other div here */
min-height: 80%;
float: right; /* float right, not left like the other one */
background-color: whitesmoke; /* please set colors in hex, not like this */
border: 2px dashed #FF2A2A;
border-left: 2px solid whitesmoke; /* again, colors in hex please */
border-bottom: 0;
}
Also, add a div with class clear in the markup like this:
<div id="wrapper">
<div id="left">
REFERENCE:
</div>
<div id="right_up">
</div>
<div class="clear"></div>
</div>
And add a class definition in the css like this:
.clear {
clear: both;
}
The last advice is to allways put your CSS in an external stylesheet and reference it in your page in the head section of the HTML like this:
<link rel="stylesheet" type="text/css" href="path/to/style.css">
Good luck!