|
CSS - Min-height Issues With Ie/ff
first off, not sure what happened with that last post but i couldn't even edit or reply to it to fix it. so i'll try again.
in firefox and ie i am having a problem making the center column stretch to 100% window size when the content within is not sufficient to take up the space of the browser window. have tried using min-height and height equaled to 100% in the body and center column. neither of which made any change. here is my css code: Code:
body, html {
font: 12px/1.5 Verdana, Arial, sans-serif;
color: #99ccff;
background-color: #ffffff;
margin: 0;
padding: 0;
}
img {
border: 0;
}
#centerColumn {
position: relative;
background: #ffffff url(images/columnBack.gif) center 0 repeat-y;
width: 800px;
left: 50%;
top: 0;
margin: 0 0 0 -400px;
}
#banner {
position: relative;
background: url(images/banner.jpg) center center no-repeat;
width: 788px;
height: 100px;
left: 6px;
top: 0;
z-index: 20;
}
#navigator {
position: relative;
background: transparent url(images/navBack.jpg) 0 0 no-repeat;
width: 788px;
height: 29px;
left: 6px;
border-top: 3px solid #99ccff;
border-bottom: 3px solid #99ccff;
z-index: 20;
}
#navList {
position: relative;
top: 3px;
left: 0;
margin: 0 112px 0 112px;
padding: 0;
z-index: 20;
}
a#nav1 {
display: block;
position: absolute;
background: transparent url(images/navIntroduction.jpg) 0 0 no-repeat;
width: 144px;
height: 29px;
left: 0;
top: -3px;
z-index: 10;
}
a#nav1:hover {
background-position: 0 -29px;
}
a#nav2 {
display: block;
position: absolute;
background: transparent url(images/navAboutUs.jpg) 0 0 no-repeat;
width: 144px;
height: 29px;
left: 144px;
top: -3px;
z-index: 10;
}
a#nav2:hover {
background-position: 0 -29px;
}
a#nav3 {
display: block;
position: absolute;
background: transparent url(images/navOnlineApplication.jpg) 0 0 no-repeat;
width: 144px;
height: 29px;
left: 288px;
top: -3px;
z-index: 10;
}
a#nav3:hover {
background-position: 0 -29px;
}
a#nav4 {
display: block;
position: absolute;
background: transparent url(images/navCalculators.jpg) 0 0 no-repeat;
width: 144px;
height: 29px;
left: 432px;
top: -3px;
z-index: 10;
}
a#nav4:hover {
background-position: 0 -29px;
}
#contentSpace {
position: relative;
background-color: transparent;
width: 788px;
left: 6px;
top: 0;
z-index: 20;
}
#contentHolder {
position: relative;
background-color: #ffffff;
width: 542px;
left: 0;
top: 0;
float: left;
clear: right;
z-index: 20;
}
#contentHolder h1 {
text-align: left;
font: 14px Verdana, Arial, sans-serif;
font-weight: bold;
font-style: italic;
margin: 10px 0 20px 20px;
}
#contentHolder h2 {
text-align: right;
font: 14px Verdana, Arial, sans-serif;
font-weight: bold;
margin: 0 15px 15px 0;
}
#contentHolder h3 {
text-align: left;
font: 12px Verdana, Arial, sans-serif;
font-weight: bold;
margin: 2px 0 0 0;
}
#contentHolder p {
text-align: left;
text-indent: 10px;
margin: 10px 15px 15px 20px;
}
#contactHolder {
position: relative;
background: #ffffff url(images/contact.jpg) center 20px no-repeat;
width: 242px;
height: 310px;
top: 0;
float: left;
clear: right;
z-index: 20;
}
#legal {
position: relative;
background-color: #ffffff;
font: 10px Verdana, Arial, sans-serif;
text-align: center;
width: 788px;
height: 14px;
left: 6px;
border-top: 3px solid #99ccff;
border-bottom: 3px solid #99ccff;
clear: both;
z-index: 20;
}
Similar TutorialsHello Just recently I had an idea for a page I wanted to make, the design is basically a 3-column layout with no traditional header or footer, the height of all three columns should run the length of the window/page height the left and rightmost column would have a fixed width or a width in em, the center column width should fill the space in between. If the content is short all columns should extend to the height of the page window, but if the content in any of the columns is longer than the window height they should all extend to reach the bottom of the page and accommodate the content length In my first attempt things didn't go so well, results varied wildly across browsers so I decided to start from scratch bit by bit Bellow is the point at which I reach consistent but undesired behaviour, I have validated and tested the code in Firefox 3/Pale Moon, Internet Explorer 8, Chromium 9, and Opera 11 I would like the end result to work in the above browsers as well as IE7 if possible I should point out now that im not interested in using faux-columns, the layout should not require images, I also wish to have absolute-positioned elements in the columns some time later Code:
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three Columns</title>
<style type="text/css">
*, html, body {
margin: 0;
padding: 0;
font-size: 100%;
}
html, body {
width: 100%;
height: 100%;
}
#maincontainer {
position: relative;
height: 100%;
background: #eee;
}
#left {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
background: #fbb;
height: 100%;
}
#mid {
position: relative;
margin: 0 200px 0 200px;
background: #efe;
height: 100%;
}
#right {
position: absolute;
top: 0px;
right: 0px;
width: 200px;
background: #bbf;
height: 100%;
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="left">
left start<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left end<br />
</div>
<div id="mid">
mid start<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid end<br />
</div>
<div id="right">
right start<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right end<br />
</div>
</div>
</body>
</html>
In the above example it works as long as the content within the columns is shorter than the window height, but if you re-size the window so that the text in the right or left column goes beyond the page, and then scroll to the bottom, the columns do not extend to the bottom of the page so there is a large gap where the content overflows beyond the column What I would like to do from this point is make the columns extend to the bottom of the page when this happens, but I'm not sure how best to proceed I also have a version of the above code which uses floated left and right columns instead of absolute positioned ones, would it be better to work from that? or does it not really matter Thanks in advance I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically?? Code: <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div> <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div> </div> <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div> <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div> </div> I'm having trouble with a div's height not extending to the page height. It extends to the viewport height, but will not go any further. Here's an image illustrating my problem. Code: http://img.thesocs.com/img.php?r=FzRq0oq9Zm84dQFiCU The entire page is wrapped in a div with an id of #wrapper. Inside #wrapper is #header (blue in the image) and #main (green in the image). The image is an edited screencap of the entire page. The difference between the viewport height and the page height is the red arrow. The problem is that no matter how tall #main gets, #header does not grow taller than the viewport originally is. If the viewport is 700px tall, #header stays 700px tall, even if #main is 21000px tall. Also, I've given the html & body tags the "height: 100%;" property along with #wrapper and #header. Here's the CSS for these divs. Code: html, body {
margin: 0;
background: #FFF;
color: #000;
height: 100% !important;
min-height: 100%;
}
#wrapper {
margin: 0;
width: 970px;
height: 100% !important;
min-height: 100%;
}
#header {
margin: 0;
padding: 10px;
width: 200px;
background: #000;
color: #FFF;
position: absolute;
height: 100% !important;
min-height: 100%;
}
#main {
position: absolute;
left: 230px;
top 0px;
width: 740px;
}
Here's the stripped down HTML for the page. Code: <!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" dir="ltr" lang="en-US">
<head>
<title>[ TITLE HERE ]</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
[ HEADER & MENU HERE }
</div><!-- #header -->
<div id="main">
[ CONTENT HERE ]
</div><!-- #main -->
</div><!-- #wrapper -->
</body>
</html>
So can anyone tell me what I am doing wrong? How can I get #header to grow to the full height of the page, rather than the viewport? I have a page which contains a header / right column / left column / footer. header, left, footer have black background right has white background when the right column grows, taller then the left column the left column has a white area, how do I get the columns to have the same height so that the color fills the entire area.... i was able to reverse the problem so that the left stayed all black, but then the right was white and black. I need them both to be able to grow, causing depending on where the user is on the site, the left can have more then the right and vice versa ... I know this has been asked a million times, I have tried all the suggested fixes in this forum and others and none seem to work. please help ....... here is the code ... thats driving me up the wall. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fixed Width CSS Layouts - 2 Column - fw-14-2-col</title>
<style type="text/css">
html { /* for good browsers */
height: 100%;
}
* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
height:100%;
}
#wrapper {
margin: 0 auto;
width: 780px;
background: #ffffff;
}
#header {
color: #FFFFFF;
width: 780px;
float: left;
padding: 0px;
height: 45px;
margin: 0px 0px 0px 0px;
background: #000000;
}
#subwrap {
height:100%;
background:#FF0000;
}
#leftcolumn {
color: #FFFFFF;
background: #000000;
margin: 0px 0px 0px 0px;
padding: 10px;
height:100%;
width: 180px;
float: left;
}
#rightcolumn {
float: right;
color: #000000;
background: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 5px;
height:100%;
width: 560px;
display: inline;
}
#footer {
border: 1px solid #FF0000;
width: 780px;
clear: both;
color: #FFFFFF;
background: #000000;
margin: 0px 0px 0px 0px;
padding: 0px;
}
</style>
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
<h2>Header</h2>
</div>
<!-- End Header -->
<div id="subwrap">
<!-- Begin Left Column -->
<div id="leftcolumn">
Link 1<br />
Link 2<br />
Link 3<br />
Link 4<br />
Link 5<br />
Link 6<br />
Link 7<br />
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="rightcolumn">
<p><font color="#FF0000" ><b>FIXED</b></font> - this div should be ALL white. it should be white all the way down to the footer( red line )</p>
<br />
<p><font color="#FF0000"><b>BUG</b></font> - left column should stretch all the way down to the footer when right column grows.
<p> </p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
</div>
<!-- End Right Column -->
</div>
<!-- Begin Footer -->
<div id="footer">
<h2>Footer</h2>
</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>
Excuse the pretty terrible code, but I was trying to come up with an example. Take a look at the following code in IE vs Firefox. You'll notice that in Firefox(3.5b) the middle section gets the majority of the height because it's attempting to fill the table's height requirement without violating the top and bottom part's set heights. IE(7) however, doesn't behave like that. How can I achieve what Firefox is doing in all browsers? Any solution is fine, divs, tables... etc. Thanks! Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
html, body { height: 100%; margin:0; padding:0; }
#wrapper td { border: 2px solid #f00; }
</style>
</head>
<body>
<table id="wrapper" height="100%" width="100%">
<tr>
<td height="10">Header</td>
</tr><tr>
<td>This section should take up most of the page</td>
</tr><tr>
<td height="50">Footer</td>
</tr>
</table>
</body>
</html>
Hello, sorry to post another problem but I am trying to give my website a minimum height and it's just not working. I have written body {min-height:100%;} and even put html.body{min-height:100%} then i've created a container with min-height 100% and it doesn't create anything. So I changed it to #container {min-height 768px;} and put everything inside that div. This creates a box 768px high but doesn't extend when the content goes beyond that. to view this please visit #www. wheretoflyguide .com# and click 'add entry'. you will see that the content_area div which holds the main component extends down but the wrapper doesn't. The hideous colours are for illustrating the problems rather than design taste! Appreciate your help. Hi, How would I set a height on an element to be a set height, and then grow taller if more content is added to it? IE: #content { width: 568px; height: 900px; background-image: url(../../images/content_bg.gif); float: left; } This works in IE, but won't grow dynamically to fit longer content in Mozilla. accidentally duplicate posted due to problem with server at school. please close and or delete this thread I have a div in my header that contains an image. The height of the image is 82px. For some reason in firefox (and chrome too) if I don't set the div height to 125px it gets cut off. It looks OK in IE6 without the height set, but with it set as needed for firefox it then creates a space in IE. My header file has: Code:
<div id= "logo" ><img src = "images/logo_LWV.gif"></div>
<div id = "topNav">
<div id = "topNavMenu">
<a class = "top" href="index.php">Home</a>
<a class = "top" href="about.php">About Us</a>
<a class = "top" href="join.php">Join</a>
<a class = "top" href="funds.php">Special Funds</a>
<a class = "top" href="contact.php">Contact</a>
</div> <!-- end topNavMenu -->
</div> <!-- end topNav -->
</div> <!-- end topBar -->
<div id = "imagebar"><img src = "images/lwvCorvallis.jpg"></div>
<div id = "greenbar">
<div id = "pagetitle">
<p>Title</p>
</div><!-- end pagetitle -->
</div> <!-- end greebar -->
and the css is: Code: #topbar
{
dispaly:block; width: 800px;
}
#logo
{
float:left;
}
#topNav
{
float:right;
width: 612px;
height: 65px;
background-color:#cc0033;
}
#topNavMenu
{
position:relative; top:40px;
text-align:left;
color: white;
}
#imagebar
{
display:block;
width: 800px; height:125px;
}
#greenbar
{
display:block;
width: 800px; height: 90px;
background: url(images/greenbar.jpg); background-repeat: no-repeat;
z-index: 0;
}
#pagetitle
{
position:relative; left: 200px;top:25px;
width: 600px;
color: white;
z-index: 1;
}
The site is he http://www.lwv.corvallis.or.us/ What's going on? I have a container containing two other divs. One is to be a left floating menu, and the other is to be a right floating content area. However, when I place these divs in a container that contains a background, the container won't expand as information is placed in the menu or the content area. My code looks like this. HTML: Code: <div class="blog-container"> <div class="blog-menu"> Some Random Menu </div> <div class="blog-content"> Some Random Content </div> </div> CSS: Code:
.blog-container {
position: relative;
text-align: center;
padding-top:15px;
width: 925px;
background-color: #eeeeee;
}
.blog-menu {
float: left;
width: 120px;
border: 1px solid blue;
}
.blog-content {
float: right;
width: 150px;
border: 1px solid red;
}
I really have no idea why it's doing this. Any help would be greatly appreciated. http://www.mvcc.edu/v2.0/img/subpage.jpg With that current template, some of the pages have text that goes over the footer. How can we make the page expand with the text? Are we looking at faux columns or what? Thanks! hello, im gonna try to explain my problem. I have a wrapper div with a background image that is repeated on Y. Within that wrapper i have a content div, there are messages that come from a database. the problem is that the wrapper (and the background) isnt expending to the text that is in the content div. How to make the wrapper expend to the size of the content div!?. here are my divs: Code:
div.wrapper{
position:relative;
width:900px;
background:transparent url(images/templatemo_content_bg.jpg) repeat-y scroll 0 0;
margin:auto;
}
div.content{
float:left;
width:550px;
margin-left:20px;
}
i changed alot to try and now im totaly lost xD greetings Razedd Hi - I'm working on a page with what I think should be a relatively simple CSS layout. Basically, I have a table on the top half of the page (it displays an address book). The table has a <thead> and <tbody>, and the <tbody> is set to overflow: auto, to give me a scrollbar when its contents gets too big. The bottom half of the page uses AJAX to fetch an entry from the address book, and display more details. It too uses overflow: auto to show scroll bars when necessary. Each element is in a <div>, and I used height: 45% (or so) on each to try to make the whole thing fit on one page, so that there is no whole-page vertical scrolling. An example of the code I'm working with can be found at http://kc9ddi.us/ex.html . My design is working nicely in Firefox, but not IE. IE does not seem to do the right thing with the height: attribute in CSS, so their is no scroll bars in the individual parts of the page, like I want. Can anyone offer any advice here? The problem I have has arisen whilst trying to create a horizontal and a vertical navigation menu using <li> tags. It is best illustrated by the following example: Code: <div style="width:100%;height:50px;"> <ul> <li style="border:1px solid black;">Hello</li> <li>World</li> </ul> </div> <br /> <div style="width:100px;height:100%;"> <ul> <li style="border:1px solid black;">Hello</li> <li>World</li> </ul> </div> and the CSS Code:
div {
border:0;
background-color:#888888;
}
ul {
margin:0;padding:0;
}
ul li {
float:left;
list-style:none;
background-color:#CCCCCC;
height:50px;
width:100px;
}
The <div> tags are set to 50px height and 100px width respectively. When an <li> element is placed within the div with the same height or width they display the way I intended. However once a 1px border is applied to the <li>'s then in IE the border is counted as part of the width or height. In Firefox the border will add 2px to the starting height and width giving the effect of width:102px or height:52px;. This is massively frustrating as I need each <li> to have the 1px border. It looks different in each browser (I have not tested it in netscape nor opera, but I suspect they will display the same as Firefox.) Can anyone provide a fix to get get round this please? Thank you in advance. In Firefox, the following code displays as expected, with a vertical scrollbar only. Code: <div style="position: relative;">lorem ipsum</div> <div style="position: absolute; white-space: nowrap; min-width: 100px; max-width: 500px; overflow: auto; height: 100px;"> <ul> <li><a hrf="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a hrf="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a hrf="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a hrf="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a hrf="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a hrf="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a hrf="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a hrf="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a hrf="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a hrf="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a hrf="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> </ul> </div> When I change Code: height: 100px; to Code: max-height: 100px; for some reason, a horizontal scrollbar appears, which is not needed or wanted since the content does not extend beyond the 500px allocated by max-width. I can't figure out how a height setting would affect the width but that is what seems to be happening. Anybody know why? or have any suggestions for coming up with a solution? Code: #hitest {
width: 700px;
height: 12px;
background-color: green;
padding: 0px;
margin: 0px;
}
I have no idea how to handle this and every hack I've seen doesn't work. Basically my div's height in IE6 WIN will not set lower than about 20px. It'll go larger. I've got an image spacer that is 12px tall that sits between the main content and the footer. Instead of a 12px height I'm getting about 20px. I've removed the height, altered the height, removed padding, margins, etc. I still have no luck. Any help is GREATLY appreciated. Hi guys, I am building a page with CSS and I'm running into some problems with the CSS buttons I'm trying to use. Right now I have a large box along the top of the page and want two rows of buttons inside of it. These text on these buttons will likely be changing on a semi-regular basis. So instead of using gif buttons made in a graphics program, I'm using CSS to create the buttons. Since each row will have multiple buttons, I first used the display:inline; item and it worked fine in IE. In FF however, the buttons lost their height and width. If I also used the float:left; it worked right, but the buttons were not centered. In looking for a solution, I discovered that inline items cannot use the height and width properties. Any ideas on how to get what I'm looking for? I can't post a link, because this is an intranet page, but here is my relevant code... CSS Code: Original - CSS Code /*the main box which will contain the buttons*/ div#Main-buttons { width:96%; margin:2%; margin-top:10px; height:100px; padding-top:10px; background-color:#84C394; border:ridge medium #004500; } /*adjustments for FireFox*/ html>body div#Main-buttons { width:90%; margin:5%; margin-top:10px; height:100px; padding-top:0px; background-color:#84C394; border:ridge medium #004500; } /*class for individual buttons*/ div#buttons { width:100px; height:30px; margin:3px; float:left; background-color:#F7F3B5; border-style:solid; border-width:2px; border-color:#ffffff; line-height:1.6; display:inline; } a.buttonLinks:link {color:#000000; text-decoration:none;} a.buttonLinks:active {color:#000000; text-decoration:none;} a.buttonLinks:visited {color:#000000; text-decoration:none;}
HTML Code: Original - HTML Code <div id="Main-buttons"> <a href="#" class="buttonLinks"><div id="buttons">Testing</div></a><a href="#" class="buttonLinks"><div id="buttons">Testing</div></a></div> <div id="Main-buttons"> <a href="#" class="buttonLinks"><div id="buttons">Testing</div></a><a href="#" class="buttonLinks"><div id="buttons">Testing</div></a></div> Thanks in advance guys! |
|||||||