|
CSS - Odd Vertical Space Above Div Inside Div
This 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! Similar TutorialsI 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;}
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. 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'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. 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 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 [link removed] In IE6, the category "At-A-Glance Telephone/Address Book" has a large vertical gap inserted at the first space. It only happens on this page (that I've found). It doesn't happen on other pages with the same number of nested lists. Shortening the name of the category so it doesn't wrap just moves the gap to the next category down. Any idea what's causing this? Thanks much in advance. ------- Someone on another forum figured it out. It was just IE6 choking on the left padding used to indent each sublevel. Reduced the padding for IE6 only to fix it. There are floods of threads pertaining to vertical aligning so I hope i'm not assaulted for asking this How would I go about vertically align content inside of a floating div with a fixed width and height. This is what I have so far. http://section31.us/temp/gallery/images.htm I obviously would like to have those images vertically aligned, can anyone help? I have a td with a div inside it and I'm trying to vertically align the text in the div. The Div has a background image so the height of the div is important. For whatever reason vertical-align:middle just wont work. I've tried in both IE and FF and nothing I do seems to work. Here is my code Code: .globalNav, .globalNav td {
margin: 0px;
padding: 0px;
width: 100%;
height:28px;
border-bottom: 1px solid #94AEC1;
border-collapse: collapse;
}
.globalDiv{
color:#fff;
width:100%;
height:28px;
background:#94AEC1 url(../images/grad_bar.gif);
background-color:#94AEC1;
margin:0px;
padding: 0px 0px 0px 10px;
overflow:hidden;
}
.globalDiv a{
font-size:10pt;
color:#fff;
}
.globalDiv a:link,.globalDiv a:visited{
text-decoration:underline;
}
.globalDiv a:hover{
text-decoration:none;
}
Thanks What is the best way to evenly space these links inside the div? PHP Code: <div id="contain_header"> <div id="header"> <a href="index.php" class="nav">Homepage</a> <a href="manufacturers.php" class="nav">Manufacturers</a> <a href="contact.php" class="nav">Contact Us</a> <a href="carfinder.php" class="nav">Advanced Car Search</a> <a href="specialoffers.php" class="nav">Special Offers</a> <a href="faq.php" class="nav">FAQ's</a></div> </div> Hi guys, I've been struggling with this for some hours now and can't get this to work... I'm no css expert but this is driving me mad... The problem happens in firefox3, in IE7 it displays fine. My code is (copied from firebug): <div id="mydiv" style="margin: 0px; padding: 0px; position: absolute; z-index: 1; opacity: 0.9; left: 763px; top: 143px;"> <div style="border: 1px solid rgb(68, 68, 68); padding: 2px; font-size: 7pt; color: rgb(68, 68, 68); white-space: nowrap; background-color: rgb(255, 255, 255);" id="otherdiv"> Text goes here </div> <div style="position: relative; top: -1px;" id="yetanotherdiv"> <img src="images/bico_w.png" style="margin: 0px; padding: 0px; width: 14px; height: 7px;"/> </div> </div> This is a balloon like tooltip, with a div on top with the text, and a div on the bottom containing the handle image, all wrapped by another nice div. In Firefox, there's space on top and below the image that I can't figure out where it comes from (no space in IE7). If I put a "vertical-align:top" on the image, it sticks to the top div correctly (both IE and firefox), but then I can't get rid of space BELOW the image. Can you help me figure this out? Hi, I have centered a table horizontally and vertically. To do this I put a table inside a table. so i don't want to use absolute positioning, as the position would change if the window size changes... My problem, with relative positioning, is that I can't figure out how to put my "some text" over an image -which is inside the table cell- in the exact position i want, without "collateral damage"... The collateral damage is that if I put the <div> tag inside the table (see example 1), it will occupy the space and as result the image wll be moved down and layout won't be centered vertically anymore... If I put the <div> tag outside the table (see example 2), as result there will be more occupied space at the top, and the layout isn't centered anymore... Here you can see the code i used for both example 1 and example 2: example 1: <html> <head> <title>relative problem - example 1</title> </head> <body> <table width="100%" height=100% border="1"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <table border=1> <tr> <td width="640" height="480"> <div id="Layer1" style="position:relative; left:50px; top:50px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;"> some text some text some text some text some text some text some text some text some text some text some text some text </div> <img src="http://www.pbworks.net/images/help.jpg" width="640" height="480"> </td> </tr> </table> </td> </tr> </table> </body> </html> example 2: <html> <head> <title>relative problem - example 2</title> </head> <body> <table width="100%" height=100% border="1"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <div id="Layer1" style="position:relative; left:0px; top:200px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;"> some text some text some text some text some text some text some text some text some text some text some text some text </div> <table border=1> <tr> <td width="640" height="480"> <img src="http://www.pbworks.net/images/help.jpg" width="640" height="480"> </td> </tr> </table> </td> </tr> </table> </body> </html> thx for letting me know... Hi, Does anyone know how to veritcally align text using CSS? like <tr valign='middle'> when using tables. My page is on: http://www.3003online.com/demos/ecoceylon/v2/ You can see a difference in the "Home - About Us - Products - Contact Us" links when viewing from IE and Mozilla Firefox. Basically, I would like the text to be centered vertically in the bar... but CSS by default puts it on top. I tried adding padding,which helped in IE... but Firefox still shows the links a bit higher than they should be.,... any ideas how to fix this? Also, a different problem in case anyone knows how to fix it... you can see a small brown bar on the top bar. It is 50px in height. But I have no idea how to make its width as wide as the remainder of the page (this would change with different resolutions). The main content of the page is 760px wide. I would like a brown box next to that, which is 50px in height and the remainder width. Any ideas? "width: auto;" doesn't work unfortunately [ this is a follow up to my previous thread http://forums.devshed.com/showthread.php?t=270438 Any help would be greatly appreciated. Thanks very much. /*Left Links*/ #leftcol{ float: left; display: block; width: 200px; /*Width of left column*/ } ul#leftcol{ list-style-type: none; padding: 0.5em 0 1em 0; margin: 0; } li#leftcol{ margin: 0; padding: 0; } #leftcol a, #leftcol a:link, #nav a:visited { float: left; display: block; position:relative; width: 165px; height: 1%; padding: 8px 5px 8px 30px; margin: 0; font: normal 11px Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; text-decoration:none; background-image:url(images/sidelinks_back.jpg); border-bottom: 1px solid #FFFFFF; } #leftcol a:hover { background-position: 0 -45px; color: #0C0F1B; } #leftcol img { border-bottom: 1px solid #FFFFFF; } <!--LEFT COLUMN --> <ul id="leftcol" ><li><img src="images/sidelinks_top.jpg" alt="Our Services" width="200" height="40" border="0" /></li> <li><a href="**">Collision Repair</a></li> <li><a href="**" >Heavy Frame Repairs</a></li> <li><a href="**">Truck Body Repairs</a></li> <li><a href="**" >Sprinter Repair Specialists</a></li> <li><a href="**">Commercial Van Repairs</a></li> <li><a href="**">Painting & Decaling</a></li> <li><a href="**">Custom Truck Body Services</a></li> <li><a href="**">Morgan Body Parts & Service</a></li> <li><img src="images/sidelinks_btm.gif" alt=" " width="200" height="10" border="0" /></li ></ul> 2 problems: 1) In IE and Firefox: gap between <img> and <li> 2) In IE6, a gap appears between all my <li>tags What to do? Do I have to put my <ul> in a <div> and keep my <img> out of the <ul>? I have a vertical menu with a sub menu. To clarify the sub menu, there is a red vertical bar. It has a problem with IE 7 - when hovering over the links, the bar goes away and comes back. This is pretty hard to explain, so here is one of the webpages with this problem: http://030c1db.netsolvps.com/business-solutions.php (we are using a temp hosting server until it is finished - thus the odd domain name). If you look on the left, under the "In this section" you will see the vertical red bar. (the problem is only in IE7). Here is my css and code: CSS: Code:
.redbar {
background-image: url(/images/NavSubBar.jpg);
background-repeat: repeat-y;
background-position: 26px;
}
#wrapper #container #content #content_inner #leftnav_i ul #leftnav_i_sub a {
background:none;
display: block;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 11px;
margin-left:25px;
margin-top:-6px;
}
Code: <ul> <div class="redbar"> <!--........Main Links...... --> <li div id="leftnav_i_sub"><a href="#">Main Menu 1</a></li> <li div id="leftnav_i_sub"><a href="#">Main Menu 2</a></li> </div> </ul> <div class="clear"></div> <!--........Sub links...... --> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <!--........Main Links Continued...... --> <li div id="leftnav_i_sub"><a href="#">Main Menu 3</a></li> <li div id="leftnav_i_sub"><a href="#">Main Menu 4</a></li> </ul> Hi, I have navigation links at the top of a blog in a header file, and cannot get them to align vertically for both firefox and IE. I've tried everything I can think of (using extra <br>, <p>, vertical-align: middle, changing margins, changing padding, etc) but cannot find a solution that aligns them vertically in both browsers. Any help is appreciated. Here is the code, which works in firefox: Code: <body> <!-- page header --> <div id="header" "border: 0px solid; margin:0 auto; "> <a href="http://www.website.com/blog/"><IMG SRC="http://www.website.com/images/logo.png" BORDER=0 width="435" height="92" ALT="logo" align="left"></a> </div> <div style="clear: both; margin:0 auto; "></div> <div style="background-image: url(http://www.website.com/images/sidebar_center2.jpg); border: #333333 2px solid; width: 900px; height: 60px; padding: 6px; margin: 0px auto; font-size: 17px; text-align: center; "> <p><font face="calibri,verdana" color="#ffffff"> <a href="http://www.website.com/"><font color="#ffffff">Home</font></a> | <a href="http://www.website.com/tips-1.html"><font color="#ffffff">ilnk 1</font></a> | <a href="http://www.website.com/tips-2.html"><font color="#ffffff">link 2</font></a> | <a href="http://www.website.com/tips-3.html"><font color="#ffffff">link 3</font></a> | <a href="http://www.website.com/tips-4.html"><font color="#ffffff">link 4</font></a> | </font></p> </div> <!-- begin wrapper divs --> <div id="content"> |
|||||||