|
CSS - Questions Regarding Padding And 100% Height
I'm still fairly new to CSS-only layouts, having always relied on tables heavily until just recently. I'm having a couple of problems that I can't seem to fix by myself. Here is an image of how the layout should look, so you can understand what I'm aiming for: http://squirrel.10pinleague.com/img/layout.jpg. And here is what it currently looks like: http://squirrel.10pinleague.com/. Here is the code that I have so far, they should be fairly clear to follow. Firstly, "index.php":
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel='stylesheet' type='text/css' href='style.css'> <title>Red Squirrel Website!</title> </head> <body> <div id="minHeight"></div><!-- Safari hack --> <div id="outer"> <div id='topspace'> | <a href='#'>Home</a> | <a href='#'>Contact</a> | <a href='#'>Sitemap</a> | </div> <div id='header'> <div class='logo'> </div> <div class='search'> <form method='post' action='index.php'> <input type='text' name='frmSearchText'> <input type='submit' value='Search' name='frmSearch'> </form> </div> <div class='links'> <table width='315' height='25'> <tr> <td width='100' background='img/headerlink.gif'> <a href='#'>Link 1</a> </td> <td width='5'> </td> <td width='100' background='img/headerlink.gif'> <a href='#'>Link 2</a> </td> <td width='5'> </td> <td width='100' background='img/headerlink.gif'> <a href='#'>Link 3</a> </td> <td width='5'> </td> </tr> </table> </div> </div> <div id='mainarea'> <div id='directory'> Directory > Home </div> <div id='leftlinks'> <div class='top'> <div class='10padtop'>Hot Links</div> </div> <div class='main'> <div class='10padleft'> <a href='#'>Link 1</a><br> <a href='#'>Link 2</a><br> <a href='#'>Link 3</a><br> <a href='#'>Link 4</a><br> <a href='#'>Link 5</a> </div> </div> <div class='bottom'> </div> <div class='top1'> <div class='10padtop'>Hot Links</div> </div> <div class='main1'> <div class='10padleft'> <a href='#'>Link 1</a><br> <a href='#'>Link 2</a><br> <a href='#'>Link 3</a><br> <a href='#'>Link 4</a><br> <a href='#'>Link 5</a> </div> </div> <div class='bottom1'> </div> </div> <!-- close "leftlinks" div --> <div id='content'> Hello!<p> </div> <!-- close "content" div --> </div> <!-- close "mainarea" div --> <div id='clearfooter'></div> </div> <!-- close "outer" div --> </div> <!-- close "minHeight" div --> <div id='footer'>Created by Rob Masters 2007 </div> </body> </html> Style.css: Code:
a:link {text-decoration: none; color: #fff; font-weight: bold;}
a:visited {text-decoration: none; color: #fff; font-weight: bold;}
a:active {text-decoration: none; color: #fff; font-weight: bold;}
a:hover {text-decoration: underline; color: #fff; font-weight: bold;}
body { font-family: verdana, arial; background-color: #f0fdee; margin: 0px; }
html,body {margin:0;padding:0}
/* commented backslash hack \*/
html, body{height:100%;}
/* end hack */
#outer{
min-height:100%;
margin-bottom:-22px;
height:auto;
width: 800px;
margin-left: auto;
margin-right: auto;
background-color: #f0fdee;
}
* html #outer{height:100%;}
div#topspace {
position: relative;
width: 800px;
height: 20px;
text-align: right;
font-size: 12px;
}
#topspace a:link {text-decoration: none; color: #000; font-weight: bold;}
#topspace a:visited {text-decoration: none; color: #000; font-weight: bold;}
#topspace a:active {text-decoration: none; color: #000; font-weight: bold;}
#topspace a:hover {text-decoration: underline; color: #000; font-weight: bold;}
div#header {
position: relative;
width: 800px;
height: 100px;
float:left;
vertical-align:top;
border:0;
margin: 0px;
background-color: #7e3b29;
}
#header .logo {
width: 170px;
height: 75px;
background-image: url('img/logo.jpg');
}
#header .search {
position: absolute;
left: 580px;
top: 0px;
width: 220px;
height: 50px;
padding-top: 8px;
color: #fff;
text-align: center;
font-size: 12px;
}
#header .links {
margin-left: 485px;
margin-top: 75px;
width: 315px;
height: 25px;
color: #fff;
text-align: center;
font-size: 12px;
}
div#mainarea {
position: relative;
margin-top: 5px;
height: 100%;
}
#mainarea .leftlinks {
position: absolute;
left: 0px;
top: 0px;
width: 175px;
height: 100%;
float: left;
}
div#directory {
position: absolute;
left: 175px;
top: 0px;
width: 625px;
height: 20px;
background-color: #5ca354;
}
div#content {
position: absolute;
left: 175px;
top: 20px;
width: 625px;
height: 100%;
background-color: #fff;
margin-top: 1px;
}
#leftlinks .top {
width: 170px;
height: 40px;
background-image: url('img/leftlinks_top.jpg');
text-align: center;
color: #fff;
font-weight: bold;
}
#leftlinks .main {
width: 170px;
min-height: 80px;
background-image: url('img/leftlinks_bg.jpg');
}
#leftlinks .bottom {
width: 170px;
height: 18px;
background-image: url('img/leftlinks_bottom.jpg');
}
#leftlinks .top1 {
width: 170px;
height: 40px;
padding-top: 5px;
background-image: url('img/leftlinks_top.jpg');
text-align: center;
color: #fff;
font-weight: bold;
}
#leftlinks .main1 {
width: 170px;
min-height: 80px;
padding-left: 10px;
background-image: url('img/leftlinks_bg.jpg');
}
#leftlinks .bottom1 {
width: 170px;
height: 18px;
background-image: url('img/leftlinks_bottom.jpg');
}
#10padtop { padding-top: 10px; }
#10padleft { padding-left: 10px; }
#footer {
clear:both;
height:20px;
width: 800px;
margin-left: auto;
margin-right: auto;
color: #000;
border-top: 2px solid #7e3b29;
font-size: small;
font-variant: small-caps;
font-style: italic;
text-align: right;
}
#clearfooter {
clear: both;
height: 22px;
}
div>p {margin:0}
html>body #minHeight{float:left;width:0px;height:100%;margin-bottom:-22px;} /*safari wrapper */
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }
td.padded { padding: 5px; }
td.lmargin10 { margin-left: 10px; }
As you can see at the url for the page I'm working on, the main content section with the white background does not stretch the 100% height to where the footer is. I'm sure this problem is to do with the div that the content div is nested within, called 'mainarea'. This is because the content div does indeed stretch to the 100% height of 'mainarea', but mainarea does not stretch all the way to the footer despite me adding the "height: 100%;" attribute. How can I fix this? Another problem is regarding padding. For some reason when I give a div a padding attribute, it changes the size of the div as well! I have illustrated this problem by using padding only on the 2nd "Hot Links" section on the left. I need to use padding to get the text in the correct position but as you can see, this padding is causing each div to expand, which in turn means that the background images do not appear as they should. What can I do to fix this as well? Thanks a lot for any help regarding either of these issues! Similar TutorialsHi, Im trying to make a simple bar with text in the center. Im having a lot of problems with it however, because its height is 50px not 25px. The bars in question are the ones that say "Description, Payment" etc I started by setting its height to 25px in the CSS but this didnt work. Ive tried adding padding: 0px to what I thought was the relevant tag, but this doesnt change it either! This is the address to the test page: http://www.zombiemod.com/test.html This is the code: 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" xml:lang="en" lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing</title>
<style type="text/css">
/*<![CDATA[*/
#title {
border-top:2px #000000 solid;
border-bottom:3px #000000 solid;
}
#mainNav {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
float: right;
height: 61px;
}
#mainNav li {
float: left;
margin-top: 38px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 0px;
}
#mainNav li a {
margin: 0px;
background-attachment: scroll;
background-image: url(http://img12.imageshack.us/img12/3157/tabs2d.png);
background-repeat: no-repeat;
background-position: right 0px;
font-weight: normal;
color: #efeeee;
font-family: Verdana;
text-decoration: none;
height: auto;
width: auto;
float: left;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 0px;
}
#mainNav li a:hover {
font-weight: bold;
color: #efeeee;
}
#mainNav li a span {
background-attachment: scroll;
background-image: url(http://img12.imageshack.us/img12/3157/tabs2d.png);
background-repeat: no-repeat;
background-position: 0px 0px;
display: block;
padding-top: 6px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 30px;
height: 19px;
width: auto;
float: left;
cursor: pointer;
cursor: hand;
margin: 0px;
}
#horinav li {
float:left;
width:23%;
text-align:center;
}
p.c13 {text-align: left}
span.c12 {color: #efeeee}
h3.c11 {color: #000000; font-family: Verdana; text-align: center}
div.c10 {text-align: left}
table.c9 {border-collapse: collapse}
span.c8 {font-family: Verdana; font-size: 80%}
p.c7 {font-family: Verdana; font-size: 80%}
span.c6 {color: #000000; font-family: Verdana; font-size: 14}
p.c5 {text-align: center}
span.c4 {font-family: Arial, Helvetica, sans-serif; font-size: 200%}
tr.c3 {background-image: url(http://img6.imageshack.us/img6/3518/63387888.jpg)}
tr.c14 {background-image: url(http://img6.imageshack.us/img6/2466/bgthin.jpg)}
span.c2 {font-family: Arial, Helvetica, sans-serif; font-size: 120%}
span.c1 {color: #232323}
</style>
<style type="text/css">
/*<![CDATA[*/
img.c7 {padding: 5px; border: 1px solid #ffcc00;}
tr.c6 {background-color: #000033}
td.c5 {background-color: #FFFFFF}
tr.c4 {background-color: #FFFFFF}
li.c3 {list-style: none}
tr.c2 {background-color: #FFEDA3}
span.c1 {color: #EFEEEE}
/*]]>*/
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" id="title">
<tr class="c3">
<td align="left"><span class="c2"><strong><span class="c1"><a name="top" id="top"><img src="http://img200.imageshack.us/img200/9856/alienware.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /></a></span></strong></span>
<ul id="mainNav">
<li><a href="#Description"><span>Item</span></a></li>
<li><a href="#Payment"><span>Payment</span></a></li>
<li><a href="#Shipping"><span>Shipping</span></a></li>
<li><a href="#Policies"><span>Pictures</span></a></li>
</ul>
</td>
</tr>
</table>
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr class="c4" valign="top">
<td align="center">
<div class="c10">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="c9">
<tr class="c14 c2">
<td width="100%" colspan="3">
<p class="c5"><strong><span class="c6"><a name="Description" id="Description"><span class="c1">Description</span></a></span></strong></p>
</td>
</tr>
<tr>
<td width="49%" align="left" valign="top">
<p class="c7"><br />
Test.</p>
</td>
<td width="2%" align="right" valign="top"></td>
<td valign="top" width="49%">
<ul>
<li class="c3"><br /></li>
<li><span class="c8">Test</span></li>
<li class="c3"><br /></li>
</ul>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr class="c14 c2">
<td>
<p class="c5"><strong><span class="c6"><a name="Payment" id="Payment"><span class="c1">Payment</span></a></span></strong></p>
</td>
</tr>
<tr class="c6">
<td class="c5" height="2"><br />
<br />
<span class="c8">Test.<br /></span><br />
<br />
<br /></td>
</tr>
<tr class="c14 c2">
<td>
<p class="c5"><strong><span class="c6"><a name="Shipping" id="Shipping"><span class="c12">Shipping</span></a></span></strong></p>
</td>
</tr>
<tr class="c6">
<td class="c5" height="20"><br />
<br />
<span class="c8">Put your Shipping information here.<br />
There are <br> tags here to fill the cell, take them out after inserting you text.</span><br />
<br />
<br /></td>
</tr>
<tr class="c14 c2">
<td>
<p class="c5"><strong><span class="c6"><a name="Policies" id="Policies"><span class="c12">Pictures</span></a></span></strong></p>
</td>
</tr>
<tr class="c6">
<td class="c5" height="20">
<p class="c13"><br />
<br />
<span class="c8"><br /></span></p>
<ul id="horinav">
<li><span class="c8"><img class="c7" src="http://img528.imageshack.us/img528/4149/100nw3.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></span></li>
<li><span class="c8"><img class="c7" src="http://img528.imageshack.us/img528/4149/100nw3.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></span></li>
<li><span class="c8"><img class="c7" src="http://img528.imageshack.us/img528/4149/100nw3.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></span></li>
<li><span class="c8"><img class="c7" src="http://img528.imageshack.us/img528/4149/100nw3.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></span></li>
</ul>
<br /></td>
</tr>
</table>
</body>
</html>
Ive put it through a validator, now it validates, but it still doesnt work. I believe the tag in question is c14 and c2. Hey all... I'm doing some testing in Firefox, and I've encountered a problem. Code: <div style="background-color: #FF9801; height: 33px; width: 99px; text-align: center; display: inline; padding-top: 8px;">Help</div> My intention here is to create a box that is 99px high, 33px wide, and with the text in the middle. In IE6, this appears to be fine. However, when testing it out in FF, I don't get the spacing that I want. Here's the kicker: When I add the float element, (float: left), it comes out the way I want it to. But it does seem to add a bit of whitespace above and to the left of it. I don't want the whitespace! Can anyone help with a compromise that will work in both browsers? My CSS usage has been pretty light until up to this issue. Thanks in advance! I have been struggling with this problem since i first started creating this layout (ages ago, but for development reasons, i stuck static width/heights in, just to work on my screen). I have searched google numerous times, but with no avail, as sites go on about something which is irrelevant to what im wanting (so maybe vague/bad use of keywords in search). any way i did a quick search on here, and any help given, does not seem to fix up my layout. My first basic problem is having a side navigation bar to fill the height of the screen, plus the header which is a static height. All this without creating scroll bars for the browser My second problem, which may be more or less the same as the above (miss-understanding of css), having a 100% height which includes padding. Link: http://dlym.net/testing/css_help.php Source (html) Code: <html> <body> <div id="container"> <div id="top">header</div> <div id="sidebar">laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br></div> <div id="content"> <div id="childcontainer"> <div id="paddedbox"> <div id="test1">title</div> <div id="test2"> <div id="myElement"><a onclick="">main content</a></div> </div> </div> </div> </div> </div> </div> </body></html> CSS Code:
html, body
{
margin:0px;
padding:0px;
width:100%;
height:100%;
}
#container
{
width: 100%;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
max-height:100%; /* real browsers */
background-color:grey;
position: relative;
}
#top
{
width: 100%;
height: 100px;
background-color:pink;
}
#main
{
width:100%;
height:100%;
}
#sidebar
{
background-color:red;
width: 150px;
height: 100%;
float: left;
}
#content
{
background-color:blue;
overflow:hidden;
padding:10px;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
max-height:100%; /* real browsers */
}
#childcontainer
{
background-color:white;
padding:10px;
}
#paddedbox
{
background-color:green;
margin-bottom:0px;
margin-top:0px;
overflow:hidden;
}
#test1
{
width:100%;
height:20px;
background-color:yellow;
}
#test2
{
width:100%;
height:100%;
background-color:lime;
}
The above is a simplified version of my site's layout, but they are the core div containers which i am trying to get positioned correctly. I seriously will thank any one who gives any help which leads me to fix this problem, as i am not too skilled with css, and this has been troubling me for some time. Thank you So I'm working on a new css-based design for my site and everything looks great.. until I open it in IE. I'm using rounded corners in 2 div boxes placed both on the top and bottom of my <div> body, they are both positioned correctly. The rounded images are used as background images in the <div>'s and not as an <img>. Problem #1: There is either a margin or padding that is separating the first and second <div> containers that make up the top and bottom rounded corners. I've tried *{margin..padding:0} to eliminate it from all elements (to no avail). Problem #2: I've set each <div> container used for the rounded corners to 12x12px, because that is the size of the image (rounded corner image). For some reason, in IE both containers are bigger than 12px in height, no idea why this is. In Firefox everything is working as it should, anyway here is the.. HTML: Code: <html> <head> <title>P_TITLE</title> <link href="skin.css" rel="stylesheet" type="text/css"> </head> <body> <div id="tlcorner"></div><div id="trcorner"></div> <div id="divbody"> <div style="float:left;width:75%"><div id="logindiv"></div><br><div id="searchdiv"></div></div><div id="logo">logo..</div> </div> <div id="blcorner"></div><div id="brcorner"></div> </body> </html> CSS: Code: html {
height: 100%;
margin: 0px;
padding: 0px;
}
body {
background-color: #CFCFCF;
margin: 3px;
padding: 0;
}
#logindiv {
background-color: #FFF000;
float: left;
width: 100%;
height: 120px;
}
#searchdiv {
background-color: orange;
float: left;
width: 100%;
height: 35px;
}
#logo {
background-color: #000000;
float: right;
width: 155px;
height: 155px;
}
#divbody {
background-color: #FFFAF0;
height: 700px;
padding-left: 12px;
padding-right: 12px;
}
#tlcorner {
background-color: #FFFAF0;
background-image: url(images/tl_corner.gif);
background-repeat: no-repeat;
background-position: top left;
float:left;
width: 12px;
height: 12px;
margin:0px;
}
#trcorner {
background-color: #FFFAF0;
background-image:url(images/tr_corner.gif);
background-repeat: no-repeat;
background-position: top right;
height:12px;
}
#blcorner {
background-color: #FFFAF0;
background-image: url(images/bl_corner.gif);
background-repeat: no-repeat;
background-position: bottom left;
float:left;
width: 12px;
height: 12px;
}
#brcorner {
background-color: #FF0000;
background-image:url(images/br_corner.gif);
background-repeat: no-repeat;
background-position: bottom right;
height: 12px;
}
I'm sure if you use any image that is 12x12 you should see the same problems I am getting. Notice the padding or margin on the top left <div> element, and the incorrect height for both. Thank you very much for any suggestions. Hello, Is there a way to have padding (say 15px) all around a cell, but allow for expections, like having one div element float:left and align far left against cell border while everything else is inset 15px. ie. Code:
<style>
#menubox {
float:left;
margin-left:15px;
margin-bottom:7px;
}
.main_cell {
padding:15px;
}
</style>
<body>
<table width=600 border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign=top class="main_cell"><div id="menubox">table with menu items taht is achored far left against cell wall</div>
Some text that wraps around "menubox" but needs to be padded around cell walls.</td>
</tr>
</table>
</body>
Thanks, Rey Hey everyone, I am making a design to kill some time, and I have come across a problem. I have a menu at the top which has no top padding unless I give it padding of 87px. I find this very odd, and it happens in every browser( Firefox 2.0.0.3, Opera 9, IE6-7 ); is it a bug in CSS itself or am I doing something wrong? Here is my code, maybe I am missing something. html4strict Code: Original - html4strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <style type="text/css"> body { background-color: #082567; color: #FFFFFF; margin: 0; padding: 0; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; font-size: 12px; text-align: justify; } #top-menu { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; height: 130px; } #top-menu h1 { float: left; font-weight: bold; letter-spacing: -3px; font-size: 31px; padding: 5px; } #menu { float: right; list-style-type: none; text-align: center; } #menu li { display: inline; } #menu a { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; color: #FFFFFF; padding: 50px; } #menu a:hover { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=0C39A1&EndColor=082567&Format=jpeg ); background-repeat: repeat-x; } </style> </head> <body> <div id="top-menu"> <h1>ryon.hunter</h1> <div id="menu"> <ul> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> </ul> </div> </div> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" I validated it and it validates fine, any suggestions? Hi all, I am trying to automate everything on my test website and I have one more angle to cover. In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height. Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder) My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement. Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values? I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit. Whew! I've never done much CSS work, but I know this has to be an easy fix. Each DIV appears to be 10px higher when viewed in IE. I want them to be 8px high and they end up being 18px high. In Firefox, Netscape, and Opera it works fine. Anyone mind correcting this imbarrassing little problem? 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" xml:lang="en" >
<head>
<title>IE 10px Padding Problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin:0px; }
#container {
position:relative;
margin:auto;
width:730px; }
#header {
height:110px; }
.textualtop {
border:1px solid #000000;
height:8px; }
.textualbottom {
border:1px solid #000000;
height:8px; }
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<p>Notice how in IE6 each DIV is 10px higher then in FF. Why is it doing this?</p>
</div>
</body>
</html>
It seem that everytime I added the image tag, the div'x area get bigger in IE but not in Mozilla/Firefox browser. So, I thought by added the "margin-bottom:-360px;" to the div would fix it but it had an opposite effect. Meaning it worked in IE but Mozilla show a vertical scrollbar. So, does anyone know how can I make the <img> overlap one another without being stacked on one after another in height for IE if I take out the "margin-bottom: -360px;"? Thanks... Code:
div.divBox1
{
width: 286px;
height: 359px;
float: left;
}
div.divClearFloat
{
clear: both;
height: 0px; /* For IE Stupidity (it added some spaces after clearing the float) */
font-size: 1pt; /* For IE Stupidity (minimum height only work with current font-size somewhere) */
}
div.divDottedLineAdvertisementSeperator1
{
width: 575px;
height: 3px;
background-color: #ff0000;
font-size: 1pt; /* For IE Stupidity (minimum height only work with current font-size somewhere) */
}
Code: <div class="divBox1"> <div style="margin-bottom:-360px;"> <img src="images/doctor.jpg" style="position:relative;top:0px;left:0px;z-index:2;"> <img src="images/we_help.jpg" style="position:relative;top:-360px;left:0px;z-index:1;"> </div> </div> <div class="divClearFloat"></div> <div class="divDottedLineAdvertisementSeperator1"></div> Hello 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 Hello everybody! I have been having a big problem with my webpage for a long time now and hope I can find an answer to my problem with your help. I want a div that contains the content of my pages (which varies in length depending on the individual page) to stretch the length of my page, but it only stretches the length of the window. Here's the HTML and CSS: HTML (I only included the very basic structure): <html> <body> <div class="container"> <div id="content"> <div id="..."></div> <div id="..."></div> <div id="..."></div> <div id="..."></div> </div> </div> </body> </html>` CSS: html, body { height: 100%; font-family: Arial; font-size: 10px; color: #000000; background: #FFF url(../../images/body.png) no-repeat center 40px; margin: 0; position: relative;} .container { height: 100%; width: 960px; margin-right: auto; margin-left: auto; position: relative;} #content { width: 939px; min-height: 100%; position: relative; top: 210px; left: 6px; box-shadow: 0px 0px 8px #666; -moz-box-shadow: 0px 0px 8px #666; -webkit-box-shadow: 0px 0px 8px #666; background-color: #FFF;} I tried to set the content div to overflow: auto, but that includes a scroll bar for the content div that I do not want. It does, however, create the desired effect of the shadow and background of the #content div all the way to the end of the page. Am I missing anything? I thought min-height would work, but it doesn't! It only stretches the content div to page height and everything else is overflow, but without the content div's background color and shadow. Does anybody maybe see where the problem lies? Thank you so much in advance for your help. If you look at the bottom of the page at www.res-technologies_DOT_com/index.php?jos_change_template=restech2 in both IE and FF, you will see that it looks fine in IE, but in FF the page length is extended by exactly the height of the header image at the top of the page. Trying to figure out what's causing this is driving me nuts! Can anyone help? thx dh My web page has a display bug in IE 5+ on Windows. Specifically, I have a DIV within which I wish to place two images. The two images are the same height and width, and I want to layer them (the top one is a PNG with transparency, but I have already solved that problem, this is a positioning problem) exactly on top of each other. I have done this by positioning them relatively within the DIV. The first image is top:0;left:0 and the second is top:-150;left:0 (the images are 150 px tall). They layer fine, but the DIV is twice the height (as if the second image were still following the first, making he DIV 300 px tall). I have tried many things and am stumped. Here is the site: URL Here is the relevant CSS: Code: #bannerPhoto {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
height: 150px;
width: 750px;
}
#bannerPic {
position: relative;
z-index: 1;
left: 0px;
top: 0px;
}
#bannerText {
position: relative;
z-index: 2;
left: 0px;
top: -150px;
}
And the HTML: Code: <div id="bannerPhoto"> <div id="bannerPic"><img src="../images/bannerPhotos/image.jpg" height="150" width="750" /></div> <div id="bannerText"><img src="../images/text-cover.png" height="150" width="750" /></div> </div> Anyone? Thanks, Denver. I am having a problem trying to get one column match the height of another. Within a large DIV box, I created two columns separated by about 20 px. I floated one to the left, then pushed one over to the right. Both boxes will expand depending on the amount of content, but I would like them to match the same height. The boxes will be used throughout the entire website, so it would not make sense to create a background image to try and trick it into being the same height.. or actually specifying the height. Is there any way to tell the left box to be the same height as the right box?? I tried to link to my site but it won't let a new member link to a website. i came across a solution for this a while ago and can't repeat the result i have 3 columns, div format with a left left right float. 1 2 3 #2 contains content that varies with the page, #1 and #3 contain background elements. i need 1 and 3 to extend the full height of 2, even tho the actual content is much less. thanks for the help! Does anyone know much about IE 7? In particular does it conform to the WWW consortium's box model (margins and padding). This would reduce a whole lot of extra CCS elements and headaches. Does is finally support transparent PNG files? Support for PNG will change the look of the web dramatically! Hi Guys, Consider the following box: PHP Code: <div style=border: 1mm black Solid; width: 148mm; height: 98mm;'> </div> 148mm + 1mm + 1mm = width of 150mm 98mm + 1mm + 1mm = width of 100mm Now why does neither firefox or ie manage to get it? Firefox is about 2mm out and ie is about 3mm out? Any ideas or is it some quirk? Charlie Hey everyone, I am working on a new template: http://4xp.net/temp.html The colors are there just so I can see the divs, so don't worry. If you look at the page in IE, it looks fine, with some padding between the green and orange div, and to the right of the orange div. When you look at it in Firefox, there is a bunch of white padding to the top and bottom of both the orange and green divs, and I can't seem to get it to go away. The weird thing is, if I add a 1px border to the orange div, the green div aligns to the top, and the orange background expands to fill in the white area above and below the orange div. Does anyone know how to remove this padding? Thanks! |
|||||||