|
CSS - Space Between Divs - Why?
default template from DW.
I get these white gaps and cant get rid of them. Going mad. Any advice for a newbie appreciated. Code and pic... 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.oneColFixCtrHdr #container {
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtrHdr #header {
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
background-color: #FF9933;
}
.oneColFixCtrHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColFixCtrHdr #mainContent {
padding: 0 20px;
background-color: #00CCCC;
}
.oneColFixCtrHdr #footer {
padding: 0 10px;
background-color: #FF0000;
}
.oneColFixCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
-->
</style>
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header">
<h1>Header</h1>
<!-- end #header --></div>
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
Similar TutorialsHi all! I have some DIVs and I want only one of them to be visible. Here is some simplified code: Code:
<p>
<a href="javascript:void(0);" onclick="document.getElementById('div1').style.visibility='visible';document.getElementById('div2').style.vis ibility='hidden';">Show DIV 1</a>
<a href="javascript:void(0);" onclick="document.getElementById('div1').style.visibility='hidden';document.getElementById('div2').style.visi bility='visible';">Show DIV 2</a>
</p>
<div id="div1" style="visibility:visible">
this is the content of div 1
<br/>line 2
<br/>line 3
</div>
<div id="div2" style="visibility:hidden">
this is the content of div 2
<br/>line 2
</div>
By clicking the <a> link, one DIV becomes visible, the other is hidden. The problem is that there is a gap between them, both in FF2 and IE7. Can someone explain me why there is this gap, and if there is a way I can remove it? TIA Alex I have the following code. I realize some of you are going to cringe when you see the tables in the div tags. This application was completely tables a few months ago and I have nearly completed the switch to divs.. but this page is a generated page that is customizable and I haven't had the time to spend on converting it. unfortunately I cannot give a link to this page. I've believe I've slimmed this down to only the relevent code. The extra space occurs after the outerImageTable's content. If I set the outerImageTable's background color then the extra space also changes colors so it is part of the outerImageTable. note: There would actually be multiple instances of the innerImageTable each representing a tab. Code: <div id="content" class="ParentDivBrowse"> <div id="subContent" class="ChildDiv"> <div class="outerImageTable"> <div class="innerImageTable"> <img src="/XXXXYYYY/images/leftselected.bmp" /> <button class="XXXXTabSelected" tabindex='-1' type="submit" name="DLG1_T801_MAIN" value="0" onClick="buttonClick(this)"> Mainn </button> <img src="/XXXXYYYY/images/rightselected.bmp" /> </div> </div> <div style="float:left;"> <table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <td colspan='2' valign="middle"> <table class='XXXXDlgTable'> <tr> <td colspan="2" height="60%"></td> </tr> </table> </td> </tr> </table> <table class="XXXXActionTable"> <tr> <td class="XXXXActionTable"> <table class='XXXXActionWidthFix'> <tr align='center'> <td width='0'></td> <td align='center' class='ActionButtons'> <button title='Clear' onMouseOver="Clear_img.src='/XXXXYYYY/images/actions/shadow/action_clear.png'" onMouseOut="Clear_img.src='/XXXXYYYY/images/actions/plain/action_clear.png'" onClick='buttonClick(this)' id='button_Clear' name='Clear' tabindex='-1' value='Clear' type='submit'> <img vspace='0' width='16' height='16' name='Clear_img' src='/XXXXYYYY/images/actions/plain/action_clear.png'> Clear </button> </td> <td width='0'></td> </tr> </table> </td> </tr> </table> </div> </div> </div> Thanks if anyone can help me. CSS entrys Code:
.OmniTabSelected{
font-size: 12px;
font-family: avenir, arial;
color: white;
background-color: #826182;
border-top:1px solid;
border-bottom:1px solid;
border-top-color:black;
border-bottom-color:#826182;
border-left: 0px;
border-right: 0px;
height:19px;
vertical-align: top;
margin-right: -2px;
margin-left: -2px;
padding:0px;
padding-right:8px;
padding-left:8px;
padding-right:expression('2px');
padding-left:expression('2px');
}
.innerImageTable{
position: relative;
float: left;
cellspacing:0px;
cellpadding:0px;
border: 0px;
margin-top:-2px;
margin-top:expression('-4px');
white-space: nowrap;
vertical-align:;
}
.outerImageTable{
position: relative;
float:left;
cellspacing:0px;
cellpadding:0px;
border: 0px;
margin-top:2px;
margin-top:expression('4px');
}
.ParentDivBrowse {
position: relative;
width: 100%;
width:expression(document.body.clientWidth < 997 ? '997px' : '100%');
min-width:997px;
max-width:100%;
overflow:hidden;
}
.ChildDiv {
position: relative;
width: 100%;
width:expression(document.body.clientWidth < 997 ? '837px' : '100%');
}
Hi, I am experiencing additional space between 2 divs (#welcomeandsearch and #welcometext) but only when previewed in IE 6. They should be flush together and are when previewed in IE 8. My css all validates. Here is the css and html: Code: #welcomeandsearch {width:940px; float:left; margin: 0px}
#welcome {width:730px; float:left; color:#FFA000; font-size:1.75em; font-weight:normal; margin: 0px}
#welcometext {width:970px; float:left; padding: 0;}
#search {width:190px; float:left; color:#363636; font-size:0.75em; font-weight:normal;}
#searchbox {width:200px; float:left; color:#363636; font-size:1.0em; font-weight:normal; height:25px;}
form input.button {width:25px; height:15px; background:#FFC666; color:#363636; font-weight:bold; border:none; font-size:11px; margin:0 auto; padding:0px;}
form input.textfield {color:#363636; font-size:0.75em; font-weight:normal;}
<div id="welcomeandsearch">
<div id="welcome">
Welcome
</div>
<div id="searchbox">
<form id="form1" name="form1" method="post" action="">
<label>Search:</label>
<input name="textfield" type="text" class="textfield" id="textfield" value="enter keywords here" />
<input name="button" type="submit" class="button" value="Go" />
</form>
</div></div>
<div id="welcometext">to the Visa Europe Customer Self Help Resource. This online resource has been developed to assist all staff with their most common IT related problems and requests.</div>
Any ideas? Thanks. I'm having a hard time getting 2 DIVs to line up appropriately. The DIV in question (#main) should just sit directly below the header (#header) DIV. If I include a clearing element (hr class="clear") then I get a space between my DIVs. If I don't include the clearing element, then I get an overlap. The problem is that it only overlaps to the height of my navigation bar (#navigation). Any suggestions would be greatly appreciated. Site is he www . deepwaterchurch . com / cms i have two divs on top of eachother with images in each. there is a space i can't get rid of in IE..looks perfect in firefox. i've tried cutting out the margins and padding to no avail. seems like ie regularly has spacing problem from google searches but none of their fixes have worked yet. I know it has to be a padding or margin issue, but I cannot figure out where it is coming from. I have spent several days going back to this and trying to look at it with fresh eyes with no luck. I am sure it will be a 'duh' type of thing when I get a solution. Here is the webpage: http://www.palmettobaydesigns.com/new/layout.html I am getting extra space of about 10px it looks like between the white rounded top image that makes the top of my box and the div below it called .box - in ff4. In IE 8 I am getting about 1px space below the box. Thanks in advance! I've been trying to solve this problem about my website. My site What it is suppose to look like. Image Thanks in advance. Hi there. A very frustrating problem and so simple a situation . I have two divs, one stacked on top of the other. Nothing special with positioning or anything. Total barebones stuff. If I put an image (whether with image tag or as background-image) in the top div, the div will be padded on the bottom. This only happens in IE. As an example I have my page he URL The top div bgcolor is lime green, and you'll see it adds some extra space under the image. Compare in IE & FireFox and you'll see what I mean - green can be seen under the image in IE. The bottom of the image in the top div should be butted up against the top of the second div, whose bgcolor is red. No green should exist between the image and red. Thanks for any help, this should be rediculously simple for someone who knows CSS quirks well. page passed validation - xhtml 1.0 @ w3c.org Ive exhausted trial and errors through reading tons of these forums and am having no luck at all! I only have IE6 to preview my extremely simple yet, bugging the H out of me, buggy page. Html Code <?xml version="1.0" encoding="iso-8859-1"?> <!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> <!-- TemplateBeginEditable name="doctitle" --> <title>EvilgoodDotCom</title> <!-- TemplateEndEditable --> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --> <link href="../CSS/evilgood_style1.css" rel="stylesheet" type="text/css" /> </head> <body ><div id="container" ><div id="header" > </div ><div id="nav1" > </div ><table id="subcontainer" width="680" height="470" ><tr ><td rowspan="3" ><div id="nav2"> </div ></td ><td rowspan="2" ><div id="main_content"> </div ></td ><td ><div id="misc_content"> </div ></td ></tr ><tr ><td ><div id="contact"> </div ></td ></tr ><tr ><td colspan="2" ><div id="footer"> </div ></td ></tr ></table ></div><!--End Table "Container"-- --></body> </html> CSS Code body { white-space: nowrap; text-align: center; } #container { text-align: left; width: 680px; height: 600px; border: 0; padding :0; margin: 0; background-color: #333333; } #subcontainer { width: 680px; height: 470px; border: 0; padding :0; margin: 0; background-color: #bf7936; } #header { width: 680px; height: 100px; border: 0; padding :0; margin: 0; background-color: #666666; } #nav1 { width: 680px; height: 30px; border: 0; padding :0; margin: 0; background-color: #999999; } #nav2 { width: 100px; height: 470px; border: 0; padding :0; margin: 0; background-color: #ffffff; } #main_content { width: 360px; height: 430px; border: 0; padding :0; margin: 0; background-color: #cccccc; } #misc_content { width: 220px; height: 290px; border: 0; padding :0; margin: 0; background-color: #ff3333; } #contact { width: 220px; height: 140px; border: 0; padding :0; margin: 0; background-color: #cc3333; } #footer { width: 590px; height: 40px; border: 0; padding :0; margin: 0; background-color: #ff9999; } Am I missing something obvious and/or can anyone give me a sure-thing answer??!! -any questions you have about my procedure and stuff is absolutely welcome! P.S. how can i get a screenshot i have of the IE6 preview to someone with a potential answer??? Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Here's the site in Question: http://www.winchps.vic.edu.au It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6. Here's the CSS code for the basic layout: Code:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}
#header {
width: 802px;
}
#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}
#content {
padding: 0px;
margin: 0px;
}
#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}
#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}
#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}
#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc). Anyone got any ideas? Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. The Example I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div. How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content. Alright, I've been working on my own custom border box for a while and I've almost got it, but it has a few problems still. How I do it is I have one div that contains it all (.box) that defines the height and width of the whole box. Then I have three boxRows to lay out the images, and then I define how three cells in each of those rows should behave, very much like how custom borders used to be done with tables. Here are the problems: In both firefox and internet explorer, the bottom row and the far right column actually appear OUTSIDE the .box containing box. There are two additional problems in internet explorer. First, the middle row handles the auto height differently and only expands about 10px instead of the height of the containing box. The second is that the whole middle row for some reason appears to be pushed to the right by about 16px. Any help would be appreciated. Here's the code: HTML: Code: <html> <head> <link rel="stylesheet" type="text/css" href="reset.css" /> <link rel="stylesheet" type="text/css" href="testBox.css"> </head> <body> <div class="box"> <div class="boxRowTop"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowMiddle"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowBottom"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> </body> </html> And here is the layout css file: Code: /* Box classes */
.box {
background: rgb(120,120,120);
height: 200px;
width: 500px;
}
.boxRowTop {
height: 16px;
position: relative;
width:%100;
}
.boxRowMiddle {
height: auto;
width:%100;
position: relative;
}
.boxRowBottom {
height: 16px;
width:%100;
position: relative;
}
.boxCellLeft {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 16px;
}
.boxCellMiddle {
height: 100%;
margin-left: 16px;
margin-right: 16px;
width: auto;
}
.boxCellRight {
height: 100%;
left: 100%;
position: absolute;
top: 0;
width: 16px;
}
/* Define Cell Backgrounds/Images */
.boxRowTop .boxCellLeft {
background: url(../LandingImages/topleft_circ_corner.png) no-repeat;
}
.boxRowTop .boxCellMiddle {
background: url(../LandingImages/top_border.png) repeat-x;
}
.boxRowTop .boxCellRight {
background: url(../LandingImages/topright_circ_corner.png) no-repeat;
}
.boxRowMiddle .boxCellLeft {
background: url(../LandingImages/left_border.png) repeat-y;
}
.boxRowMiddle .boxCellMiddle {
background: rgb(255,255,255);
}
.boxRowMiddle .boxCellRight {
background: url(../LandingImages/right_border.png) repeat-y;
}
.boxRowBottom .boxCellLeft {
background: url(../LandingImages/bottomleft_circ_corner.png) no-repeat;
}
.boxRowBottom .boxCellMiddle {
background: url(../LandingImages/bottom_border.png) repeat-x;
}
.boxRowBottom .boxCellRight {
background: url(../LandingImages/bottomright_circ_corner.png) no-repeat;
}
And last, the reset CSS, which I don't think has anything to do with the problems because if I take it out it still has them. Code: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption
{
margin:0;
padding:0;
border:0;
vertical-align:baseline;
}
* {font-size:1em; font-family: inherit;}
:focus {outline:none;}
body { font-size: 62.5%; line-height:normal; font-family: Arial, Sans-Serif; color:Black; } /* 62.5% (10px), 75% (12px), 87.5% (14px), 100% (16px) */
p { margin: 0 0 1.2em 0; }
a { color:#ff0000; text-decoration:none; }
a:link { color:#ff0000; text-decoration:nonee; }
a:visited { color:#ff0000; text-decoration:none; }
a:active { color:#ff0000; text-decoration:none; }
a:hover { color:#ff0000; text-decoration:none; }
a.h1,a.h2,a.h3,a.h4,a.h5,a.h6,h1,h2,h3,h4,h5,h6
{
font-weight:bold;
display:block;
text-decoration:none;
color:Black;
}
h1, a.h1, a:link.h1, a:visited.h1, a:active.h1, a:hover.h1 { color:Black; text-decoration:none; font-size: 2.00em; }
h2, a.h2, a:link.h2, a:visited.h2, a:active.h2, a:hover.h2 { color:Black; text-decoration:none; font-size: 1.75em; } /* this is normally skipped? 1.50em */
h3, a.h3, a:link.h3, a:visited.h3, a:active.h3, a:hover.h3 { color:Black; text-decoration:none; font-size: 1.50em; } /* 1.25em */
h4, a.h4, a:link.h4, a:visited.h4, a:active.h4, a:hover.h4 { color:Black; text-decoration:none; font-size: 1.25em; } /* 1.00em */
h5, a.h5, a:link.h5, a:visited.h5, a:active.h5, a:hover.h5 { color:Black; text-decoration:none; font-size: 1.00em; } /* 0.75em */
h6, a.h6, a:link.h6, a:visited.h6, a:active.h6, a:hover.h6 { color:Black; text-decoration:none; font-size: 0.75em; } /* 0.66em WTF? */
fieldset { border:solid 1px; padding:0.25em 0.5em 0.75em; margin: 0 0 1.5em; }
legend { margin:0 0 0 2em; padding:0 1em; }
textarea, input, select { border:solid 1px #ccc; margin:0; padding:0; }
textarea, input { padding:0 .2em; }
input:focus,textarea:focus,select:focus { border:solid 1px black; }
small { font-size:.9em; }
ul, ol, dl { position: relative; padding:0 0 0 1.5em; margin:1.5em 0; }
dir, menu { margin:1.5em 0; }
/* nested lists have no top/bottom margins */
ul ul, ul ol, ul dir, ul menu, ul dl,
ol ul, ol ol, ol dir, ol menu, ol dl,
dl ul, dl ol, dl dir, dl menu, dl dl,
dir ul, dir ol, dir dir, dir menu, dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl
{
margin:0;
padding: 0 0 0 1.5em;
}
hr { margin:0.75em 0; padding:0; }
Any help would be GREATLY appreciated, as I've been working on this for a while! Thanks! In the following code...why is there a space between the two div's?? 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">
<style>
#header { background-color: cadetblue; }
#footer { background: blue; }
</style>
</head>
<body>
<div id="header">
<p>This is my header.</p>
</div>
<div id="footer">
<p>This is my footer.</p>
</div>
</body>
</html>
If I remove the <p></p>'s from each sentence the spacing disappears. If I add a "border: 1px solid black;" to each style the spacing disappears. I don't want to know how to make it go away. I want to know why it's there? I mean shouldn't the paragraphs be fully enclosed inside the div's? Such that no spacing should appear between the div's? Any insight anyone might care to share with me would be most appreciated. Thanks. Carlos I've been trying to get all the space out of IE, tried line-height and all of that, and nothing. Any hack to take out all of the space gaps so I can later on put some small margin? Thanks in advance So I am trying to move from designing in <tables> and move on to the beauty of the CSS box-model design. I have been inspired by one of the ZenGarden designs and wanted to see if I could try and duplicate it's flow. I am running into a problem. I have created the outer box "#mainBox" and nested within this I have a child "#pageHeader." Problem is that there is this big amount of space (that is present in both IE6 AND FireFox 1.0) at the bottom of "#pageHeader." See the attached pic for the exact detail. Here is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html><head><title>The Shalom Foundation</title>
<style type="text/css">
<!--
body {
text-align:center;
background-color:#666666;
margin:0 0 50px 0; /* top right bottom left */
}
p{
padding:0;
margin:0;
text-align:justify;
}
#mainBox {
float:right;
margin:9px 12px 0 0;
padding:0px;
width:733px;
text-align:left;
background-color:#999999;
}
#pageHeader{
background: url(images/layout/header.jpg) no-repeat top left;
padding:0;
margin:0;
text-indent: -15000px;
height: 290px;
overflow: hidden;
}
#nav{
position:absolute;
right:100px;
margin:0;
background: url(images/layout/menu.jpg) no-repeat top left;
padding:0;
margin:0;
width:136px;
height: 302px;
overflow: hidden;
}
-->
</style>
</head>
<body>
<div id="mainBox">
<div id="pageHeader">The Shalom Foundation</div>
<div id="nav">Nav</div>
<div id="contentHdr"><table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"><tr><td valign="middle"><img src="images/layout/hdr_about_us.gif"></td></tr></table></div>
<div id="content"><p>Magnus es, domine, et laudabilis valde: magna virtus tua, et sapientiae tuae non est numerus. et laudare te vult homo, aliqua
portio creaturae tuae, et homo circumferens mortalitem suam, circumferens testimonium peccati sui et testimonium, quia superbis resistis: et tamen
laudare te vult homo, aliqua portio creaturae tuae.tu excitas, ut laudare te delectet, quia fecisti nos ad te et inquietum est cor nostrum, donec
requiescat in te. da mihi, domine, scire et intellegere, utrum sit prius invocare te an laudare te, et scire te prius sit an invocare te. sed quis te
invocat nesciens te? aliud enim pro alio potest invocare nesciens. an potius invocaris, ut sciaris? quomodo autem invocabunt, in quem non crediderunt?
aut quomodo credent sine praedicante? et laudabunt dominum qui requirunt eum. quaerentes enim inveniunt eum et invenientes laudabunt eum. quaeram te,
domine, invocans te, et invocem te credens in te: praedicatus enim es nobis. invocat te, domine, fides mea, quam dedisti mihi, quam inspirasti mihi
per humanitatem filii tui, per ministerium praedicatoris tui.</p></div>
<div id="rightNav">rightNav</div>
<div id="pageFooter">pageFooter</div>
</div>
</body>
</html>
Thanks in advanced for any help! Im trying to change the background color of my news posts for the main page. What I want is to have every second post a darker grey than the one before. In my css file I've added the following lines to accomplish this. Sectiontable1 and 2 beeing the different posts. Code: .sectiontableentry, .sectiontableentry0 { padding: 5px; } .sectiontableentry1 { border-bottom: 1px solid #ccc; padding: 5px; background-color: #ffffff; } .sectiontableentry2 { border-bottom: 1px solid #ccc; padding: 5px; background-color: #f6f6f6; } The php code look like this(see below) when inspecting it in the browser and I can cleary see that there is a blank space in between the class name and the number. But the problem is I have no clue how I can write that space in css. Cause if I just add a blank space in the css it thinks its another class or rather a standard tag like h1 and it doesnt work. Is there some way to write a space like that in css? Code: <span class=contentpane> <div class=sectiontableentry 1></div> <div class=sectiontableentry 2></div> <div class=sectiontableentry 1></div> /* see there is a space between sectiontableentry and 1*/ </span> Hey guys! My website looks quite good, except for the footer when viewed on IE 6, 7, and 8. The problem is that the footer doesn't go all the way down to the bottom of page, rather leaving a space of about 5 pixels vertically so it doesn't look good. How do I get the footer to go and stay all the way down the page in IE? The footer is only within the <body> div, which has the property: margin: 0. The footer div has the following properties set: .footer { background:#6CBDF0; clear: both; height:45px; padding-top:5px; } So is there any way I could make changes to these elements so that the footer wouldn't leave that annoying white space below it? Thank you very much! PS. I've tried solving this for well over an hour now... |
|||||||