|
CSS - Vertical Space Between Divs
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.
Similar TutorialsThis is my first css based site...i'm having a nightmare time and wonder why this is so much better than tables when its taking me 4 hours in css what takes me 5 minutes with tables? that being said if you go he www . chhs . unh . edu / v3 . html on the right side here is the issue: in FF the contained divs are larger than the containing div in IE there is like 20 pixels of space at the top of the first containted div here is the code for this section, the sidebar is the container and the other 2 are the divs inside, quicklinks is the first one. Code:
.twoColFixRtHdr #sidebar1 { width: 300px; float:right; text-align:left; background-color:#00F; padding:0px; display:inline; line-height:100%; }
div#quicklinks{
display:block;
width:300px;
margin: 0px 0px 0px 0px;
background-image:url(/images/v2/quicklinks_bg.png);
background-position:top right;
background-repeat:no-repeat;
background-color:#AEAE5D;
padding: 5px;
color:#FFF;
vertical-align:top;
}
div#photo_gallery_links{
width: 300px;
margin: 10px 0px 0px 0px;
background-image:url(/images/v2/photosbg.png);
background-position:top right;
background-repeat:no-repeat;
background-color:#283C6F;
padding: 5px;
color:#FFF;
}
can anyone help me? i haven't used a board like this in like 8 years so i'm sorry if i'm doing it wrong. thanks! My site I am redesigning this site for a theater camp company. I want to create the effect of stage lights shining with a image rollover and am partly there. I am stuck now because I want to use an HR as the cross beam with images of stage lights directly below (take a look at the site to understand). I do not know how, or if it's possible, to line up the images directly below the HR (bar) so there is no space at all. Any help? I have a region with a div, an image and another div stacked vertically. For some reason, there are a few pixels of blank space between the image and the bottom div. http://www.brucethorn.com/index.php...maritime-sunday On another page, I have regions with a "line-height + vertical-align:middle" centering of an image that make up thumb nails. There too is a few pixels of blank space, but at the top and images, pushing them down and slightly outside of the div that contains each of them. http://www.brucethorn.com/index.php/paintings I suspect these are the same problem, but I could be wrong. The issue is most visable in FF, and noticable in Opera. I only see something sporadic for the second occurence in IE Code: body {background-color:#999999; margin:0px; padding:0px; border:0px; text-align:center; font-family:"Courier New", Courier, mono;}
h1.header {height:16px; width:800px; _width:776px; font-size:100%; font-weight:bold; margin:0px 0px 0px 24px; text-align:left; background-color:#333333;}
h2.header {margin:0px; font-size:90%; font-weight:bold;}
div {text-align:left;}
h2.infoleft {text-align:left; height:16px; width:576px; font-size:90%; margin:0px 0px 0px 24px; _margin:0px 0px 0px 12px;float:left;}
h2.inforight {text-align:right; height:16px; width:176px; font-size:90%; margin:0px 24px 0px 0px; _margin:0px 0px 0px 0px;float:left;}
div.black {background-color:#000000; color:#999999;}
div.block {margin:8px 24px 8px 24px; text-align:justify; font-size:90%;}
div.block2 {margin:8px 0px 8px 12px; _margin:0px 0px 0px 4px;}
div.block3 {margin:8px 0px 0px 12px;}
img {border:0px; margin:0px; padding:0px;}
img.left {float:left;}
img.right {float:right;}
div.bar {height:16px; width:auto; text-align:center;}
div.title {height:48px; width:800px; margin:auto;}
div.content {height:392px; width:800px; margin:auto; text-align:center;}
div.subbar {height:16px; width:800px; background-color:#333333;}
div.menu {height:18px; width:480px; float:left; margin:30px 0px 0px 20px;}
div.copyright {height:16px; width:800px; margin:auto; text-align:right; font-weight:bold; font-size:75%;}
div.scroll {height:344px; width:800px; margin:8px 0px 0px 0px; overflow:auto;}
div.filmunit {height:128px; width:128px; border:4px; border-style:solid; border-color:#000000; background-color:#999999; margin:8px; padding:0px; float:left; text-align:center; line-height:128px;}
img.filmimage {vertical-align:middle;}
Hi, I'm trying to avoid using absolute positioning (and using a margin or padding) to vertically place two divs. clear:both seems to be close but it clears double the amount of space that I want. 1. What determine's how much space is cleared? 2. Is it a problem that neither of the divs is floated? http://www.sabahseaside.com/sti/testindex.php Code: #homecontent {
position:relative;
margin:10px;
}
#homecontent p {
text-align:justify;
margin:0 1em 2em;
}
.hometop {
margin:0; padding: 0;
border: 1px solid black;
}
.homebottom {
margin:0; padding: 0;
border: 1px solid black;
clear:both;
/*margin-top:4em;*/
}
http://www.sabahseaside.com/sti/layout.css Oh yeah, and the images in those divs are floated! AHHH! I am trying to style a css layout. I keep getting a vertical space between two different block containers. here is the html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title></title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <div id="menu"> </div> </div> </div> </body> </html> Here is the CSS: Code:
#wrapper{
margin: 0 auto;
width: 977px;
}
#header {
margin: 0;
background: url(images/header_01.jpg) no-repeat 0 0;
width: 977px;
height: 198px;
}
#menu{
margin: 0;
background: url(images/header_02.jpg) no-repeat 100% 0;
float: left;
width: 977px;
height: 44px;
position:relative; top: 100%
}
My theory: the top part of the header is 154 px tall. The bottom part is 44px tall. That makes 198px height. so with header being 198px tall, and the smaller image with a relative position 100% down from the top should correctly line up the two images. But yet I have a HUGE gap?!?! Why? Even if I put 154px instead of 100% for top ... it will not line up correctly. I'm going through hell trying to make a site look the same in IE and Firefox. The biggest problem is the gaping spaces IE adds between elements. What is the best way to fix this? Example at patrolmag.com/new. Any advice or help would be most appreciated. P.S. How the page looks in Firefox 3 is ideal. I just need to make at least IE7 come somewhere close to matching it. I am trying to style a form using CSS instead of tables but am getting unwanted space above form elements when i use float:right to position them to the right of the prompt text. I have spent some time reading about the problem which appears to be an error with IEs rendering of CSS. I have tried several solutions posted on the web with no success. Can anyone recommend a solution to my problem. Thanks. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css" media="screen"> .form { font-size:10px; text-align:left; } .form input { width: 100px; font-size: 9pt; border: 1px solid #891C46; margin-left: 12px; padding-top:0px; float:right; } .form select { width: 100px; float:right; font-size: 9pt; border: 1px solid #891C46; } .form textarea { width: 100px; float:right; font-size: 9pt; border: 1px solid #891C46; } .form li{ list-style-type: none; clear:both; } .form img{ padding-top:10px; float:right; } </style> </head> <body> <table cellpadding="0" cellspacing="0" width="500"> <tr> <td width="50%" valign="top" class="form"> <ul> <li>Your name:<input name="textfield" type="text"></li> <li>Your email address:<input name="textfield" type="text"></li> <li>Your company:<input name="textfield" type="text"></li> <li>Your position:<input name="textfield" type="text"></li> <li>Subject:<select name="select"><option>Digital Advertising</option></select></li> <li>Query/comment:</li> <li><textarea name="textarea" cols="20" rows="8"></textarea></li> <li><img src="/carlton-newsite/img/contactus/send.gif" name="send" width="50" height="25" id="send"></li> </ul> </td> <td valign="top">sfasfasfasdfasdfasdfasdf</td> </tr> </table> </body> </html> How do I reduce the vertical space between form elements that I put inside a div? I have text "username" with the textbox below it but there is like 25 pixels of vertical space between them. Brad Argh. Tried a number of variations on this probably simple task. Nonetheless: In this example how do I get the 'sidebar' to fill the vertical space of the container, and ensure the 'footer' remains positioned at the bottom (which it currently does) http://www.mandgweb.net/css_test/css_test.html Thank you i really need to vertical align a div to always be at the bottom of a main div... Code: <div class="container"> <div class="menu"></div> </div> i want .menu to always be at the bottom of .container .... no matter the height of the container div I've been having problems trying to vertically align an image within a div. I'm trying to align it to the bottom of the div. CSS as follows: #col1r1 { float: left; height: 40%; width: 33%; display: inline; text-align: right; } div#col1r1 div#image { bottom: 66%; left: 60%; color: black; vertical-align: bottom; } div#col1r1 div img.pagegr { width: 60%; } HTML: <div id="col1r1"> <div id="image"><img class="pagegr" src="images/blah.gif" alt=""></div> </div> Unfortunately this code will be appearing on multiple pages with a different image on each page - some portrait, some landscape, and of varying sizes - otherwise, I would have added some blank space to the top of image itself to make it fit and sit nicely aligned with the bottom of the box. I'd really appreciate some help. Thanks in advance. 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>
Hi, Below is part of my code. Sorry could not upload everything otherwise code would look cumbersome, also could not load images but each image is 234 X 110. What I have is a left column. I firstly want to place a list and then three divs, each div containing an image (with text), that is also a link. I assumed with normal flow the list would appear first and then the divs, one after another. For some reason the divs go to the top of the column and are hidden by the list. I want a normal flow so that the list appears first and then the divs. Any suggestions? I would be grateful for all help. 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" lang="en">
<head>
<title>Test Page</title>
<style type="text/css">
h1, h2, h3, h4, h5, h6, p{
margin:0;
padding:0
}
img { border:none }
a{color:#000;text-decoration:none}
a:hover { text-decoration: underline; }
body {
color:#000;
font-family:Verdana, Geneva, sans-serif;
}
#wrap {
min-width: 71.08em;
margin:auto;
overflow:hidden;
}
#left
{ width: 17.38em;
padding: 0;
border: 0.125em solid #FF0000;
}
#left.column
{ text-align: justify;
}
#left ul
{ margin: 0;
padding: 0;
}
#left ul li
{ list-style-type: none;
}
#left ul li a, #left ul li a.first_in_list
{ float: left;
display: block;
width: 16em;
margin-left: 0.4em;
padding: 0.28em 0 0.28em 0.25em;
background-color: #FFD700;
border-top: 1px dotted #FFFFFF;
font-family: arial, verdana, sans-serif;
font-size: 1em;
font-weight: normal;
color: #000000;
}
#left ul li a:hover
{ text-decoration: none;
}
#left ul li a:hover span
{ text-decoration: underline;
}
#left ul li a.first_in_list
{ width: 16em;
font-size: 1em;
font-weight: bold;
margin-top: 1.8em;
padding: 0.8em 0 0.8em 0.25em;
border-top: none;
}
#leftVLink, #leftSLink, #leftGLink
{ text-align: right;
border: none;
margin: 0.3em 0 0 1em;
}
#leftVLink a:link,#leftSLink a:link,#leftGLink a:link
{ color: #333;
width: 15em;
height: 7em;
display: block;
font-size: 0.95em;
font-family: Verdana;
}
#leftVLink a:hover,#leftSLink a:hover,#leftGLink a:hover
{ color: #000;
text-decoration: underline;
}
#leftVLink
{ min-width: 14em;
background: #fff url(leftVLink1.gif) no-repeat left top;
margin: 1.5em 0 0 1em;
padding: 0.6em 0.5em 0 0;
}
#leftSLink
{ background: #fff url(leftSLink1.gif) no-repeat left top;
padding: 0.6em 0.5em 0 0;
}
#leftGLink
{ background: #fff url(leftGLink1.gif) no-repeat left top;
padding: 1.4em 0.5em 0 0;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left" class="column">
<ul>
<li><a class="first_in_list" href="#">
Shopping Directory</a></li>
<li><a href="#">► <span>Latest</span></a></li>
<li><a href="#">► <span>Phone Finder</span></a></li>
<li><a href="#">► <span>iPhone finder</span></a></li>
<li><a href="#">► <span>Deal Finder</span></a></li>
<li><a href="#">► <span>Phones + FREE gifts</span></a></li>
<li><a href="#">► <span>Shop by brand</span></a></li>
<li><a href="#">► <span>Sim free phones</span></a></li>
<li><a href="#">► <span>Coming soon</span></a></li>
<li><a href="#">► <span>New and exclusive</span></a></li>
<li><a href="#">► <span>Trade in</span></a></li>
<li><a href="#">► <span>Compare phones</span></a></li>
<li><a href="#">► <span>Mobile services</span></a></li>
</ul>
<div id="leftVLink"><a href="#" title="voucher codes and offers">Voucher codes<br />and offers</a></div>
<div id="leftGLink"><a href="#" title="gift ideas: be inspired by our gift ideas">Be inspired by<br />our gift ideas</a></div>
<div id="leftSLink"><a href="#" title="safe shopping: advice for safe shopping">Advice for<br />safe shopping</a></div>
</div>
</div>
</body>
</html>
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 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%');
}
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 Hi 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'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 |
|||||||