I want the pink and blue boxes to have the same height (400px), which isn't working in Opera only. The height get dragged by bottom padding, which looks like a bug to me. Could you anyone help?
Update 1 - Just checked it in IE8 and it doesn't work either, so the prob is re-scope to IE + Opera.
Update 2 - padding-bottom changed to 50px to make issue clearer. The version of Opera I'm using is 11.62.
Html (watch pink and blue boxes height):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<table>
<tr>
<td valign="top">
<div style="display: table; width: 400px; height: 100px; background-color: wheat;">
<div style="display: table-cell; background-color: Green; padding-bottom: 50px; height: 100%;">
<div style="height: 100%; background-color: pink;">Inner</div>
</div>
</div>
</td>
<td valign="top">
<div style="display: table; width: 400px; height: 100px; background-color: blue;">
</div>
</td>
</tr>
</table>
</body>
</html>
Got it fixed by applying box-sizing: border-box.
here's the class:
.bb
{
box-sizing: border-box;
-moz-box-sizing: border-box; /*Firefox 1-3*/
-webkit-box-sizing: border-box; /* Safari */
}
Related
I am wanting to have a page with a fixed-height header and footer, and with the contents taking 100% of the remaining height.
I currently have the behavior I desire working in Chrome, but in Internet Explorer, the row will grow beyond the desired height, forcing the footer off of the page (as evidenced by the scrollbar on the page). I can't find a fix for the Internet Explorer problem for the life of me.
Here is the desired behavior (in Chrome), note the row does not expand to fit contents, and instead has the ability to scroll:
Here is the undesired behavior I am experiencing with Internet Explorer:
Here is the approach I am taking:
<head>
<style>
body {
margin: 0px;
table-layout:fixed;
}
table {
border-collapse:collapse;
}
table, tr, td {
overflow:hidden;
padding: 0px;
}
</style>
</head>
<body>
<table style="width:100%; height:100%; top:0px; bottom:0px;">
<!--HEADER-->
<tr style="height:100px;">
<td colspan="2" style="background-color:#ff0000; text-align:center;">
<h1>Piano Festival</h1>
</td>
</tr>
<!--CONTENTS-->
<tr>
<!--LEFT CONTENT PANE-->
<td style="background-color:#ff00ff;">
<div style="height:100%; overflow-y:scroll;">
<form>
<!--Form contents here-->
</form>
</div>
</td>
<!--RIGHT CONTENT PANE-->
<td style="background-color:#00ffff; width:100%;">
</td>
</tr>
<!--FOOTER-->
<tr style="height:100px;">
<td colspan="2" style="background-color:#00ff00";>
</td>
</tr>
</table>
</body>
I'd prefer to avoid using any Javascript or CSS extensions. How can I work around this problem so that I get the same behavior in IE that I have in Chrome right now (scrollable contents instead of a growing row height)?
I also highly recommend not using tables for this. Here is a refactored version using divs to get you started.
HTML:
<div class="header">
<h1>Piano Festival</h1>
</div>
<div class="registration">
...lots of stuff....
</div>
<div class="main">
Main section
</div>
<div class="footer">
footer
</div>
And here's the CSS:
body, html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
.header {
margin: 0;
background: darkgreen;
height: 10%;
}
.registration {
background: deeppink;
width: 20%;
overflow: auto;
height: 80%;
float: left;
}
.main {
display: inline-block;
}
.footer {
background: blue;
height: 10%;
position: fixed;
width: 100%;
bottom: 0;
}
Here's a working demo.
I'm having some problems with IE7 and table with fixed-layout and fixed column sizes. Most browsers use the column width to set the size of the cell including padding yet IE7 seems to set it excluding padding so there is an over-hang.
I've searched, searched and searched again for a solution but I can't find anything decent except applying "box-sizing: border-box" to everything else and thats out of the question. Dropping "table-layout: fixed" also works but too much other code relys on this.
How can I get consistency across browsers?
<!-- DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" -->
<html>
<head>
<style type="text/css">
div {
width: 200px;
height: 10px;
background-color: blue;
}
table {
width: 200px;
border-collapse: collapse;
table-layout: fixed;
}
.first {
width: 50px;
background-color: green;
}
.second {
width: 150px;
background-color: red;
}
.alt {
padding: 10px;
}
</style>
</head>
<body>
<div></div>
<table>
<colgroup>
<col class="first" />
<col class="second" />
</colgroup>
<tr>
<td>Foo</td>
<td class="alt">bar</td>
</tr>
</table>
</body>
</html>
Similar question: <col> width and padding - IE7
IE7 SS
IE9 SS
IE doesn`t support table padding. You need to apply the pad to the table data cell instead.
I've the following html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<table style="margin: 250px; width: 200px; height: 100px; background-color: Yellow; table-layout: fixed;">
<tr>
<td>
<div style="margin: auto auto auto -50px; background-color: Green; width:100px; height:50px;">L</div>
<div style="margin: auto -50px auto auto; background-color: Green; width:100px; height:50px;">R</div>
</td>
</tr>
</table>
</body>
</html>
I want the green boxes with R & L to be on the same line w/o using JS, how do I do that?
Just add "float:left;" to the style attribute on the box L
and add "float:right;" to the style attribute on the box R
then add valign="top" at the td tag. The parent tag of the boxes if you want it align to the top.
see code below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<table style="margin: 250px; width: 200px; height: 100px; background-color: Yellow; table-layout: fixed;">
<tr>
<td valign="top">
<div style="float:left;margin: auto auto auto -50px; background-color: Green; width:100px; height:50px;">L</div>
<div style="margin: auto -50px auto auto; background-color: Green; width:100px; height:50px;float:right;">R</div>
</td>
</tr>
</table>
</body>
</html>
Add css style "float:left;". It will solve this.
You can use css display: inline-block. Note that this doesn't work in older browser versions.
Alternatively you can use float: left.
<div style="margin: auto auto auto -50px; background-color: Green; width:100px; height:50px; float:left;">L</div>
<div style="margin: auto -50px auto auto; background-color: Green; width:100px; height:50px; float:left;">R</div>
You can either add css float: left to DIV L only;
Or you can add css float: left to DIV L and float: right to DIV R.
Ultimately, it depends on what you are trying to achieve here.
please can some brilliant person help me with this page layout or tell me if it is possible?
Trying to embed some flash content which resizes with the browser but has a 400px margin on the left and a 200px margin at the bottom. Have managed to get the margin on the left but cannot get the bottom margin to stay within the browser.
My div looks like this:
<div style="height:100%;margin-left:400px;">
<div id="flashcontent"></div>
</div>
The swf is embedded with swfobject into the flashcontent div dynamically, Any help with this would be greatly appreciated.
Mike
If you can afford not to support IE6, I guess you could work with position: fixed.
It's not very elegant but from the sound of it (you don't seem to have any other layout considerations to take care of on this page), it might do.
<div style="position: fixed; left: 400px; top: 0px; right: 0px; bottom: 200px;">
<div id="flashcontent"></div>
</div>
I can't test this right now, but the flashcontent div should now be able to resize according to the outlying div.
<!-- This comment makes IE render in quirks mode.. We want IE in quirks mode -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Untitled</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
}
.flash-container {
height:100%;
background-color: #f00;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:0 0 200px 400px;
}
.flash {
background-color: #fff;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div class="flash-container">
<div class="flash">
...Replace this Div with Flash
</div>
</div>
</body>
</html>
Pekkas answer is pretty good, I didn't consider the option of setting all edges. But I also made this table proposal, which should work in just about all browsers since the dawn of time.
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">
<body style="padding:0;margin:0;height:100%;">
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="width:400px;">1</td>
<td style="background-color:red;">2</td>
</tr>
<tr style="height:200px;">
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
html, body, form, table, tbody, tr {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
border-style: none;
}
tr#MainTitle
{
height: 70px;
}
div#test {
height: 100%;
background-color: blue;
}
/* If I remove the 100% here then the scrollbars are removed and the cell still fills the window but the div no longer fills the cell. */
td.MainMenu {
background-color: red;
height: 100%;
}
</style>
</head>
<body>
<form name="form1" method="post" action="#" id="form1">
<table id="Main">
<tbody>
<tr id="MainTitle">
<td>Title</td>
</tr>
<tr id="MainMenuRow">
<td valign="top" class='MainMenu' id='MainMenu'><div id="test">Test</div></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
(edit) I've tried to simplify the issue. I have a table. I want the top title row to be fixed in size and the next content row to fill the remaining screen.
As I have it set up if the content cell is height:100% Then the page is larger than the window (by the size of the title row) yet if I switch this to auto the cell is the right size for the window but the contained div does not fill the cell.
Whats going on?
tr does not accept height attribute. You need to set that on td or th element. This code should do the work.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
html, body, form, table {height: 100%;width: 100%;margin: 0px;padding: 0px;border:0;}
tr th {height:70px;}
tr td {background-color: blue;position:relative;vertical-align:top;}
.text {position:relative;height:100%;width:100%;background:yellow;}
</style>
</head>
<body>
<form name="form1" method="post" action="#" id="form1">
<table id="Main" cellpadding="0" cellspacing="0">
<tr>
<th>Title</th>
</tr>
<tr>
<td><div class="text">Test</div></td>
</tr>
</table>
</form>
</body>
</html>
The problem is being caused by the default margins on the BODY element in your code. You are specifying that the BODY should take up 100% of the available space, but by default, the BODY tag will add a margin to this, causing your elements to take up slightly more than 100% of the available screen space.
You can fix this by adding the following to your BODY style:
html, body, form {
height: 100%;
margin: 0px;
}