|
CSS - Adjacent Vertical Height
So I'm trying to be "proper" and move from tables to divs. But one thing keeps getting me. Say I have a shadow that is to the left and right of my center content page. Easy enough w/ tables. (I'm really dumbing this all down).
<table> <tr> <td background="images/shadow.gif"><img src="images/spacer.gif"></td> <td>My content here<br /><br /><br />etc.</td> <td background="images/shadow_r.gif"><img src="images/spacer.gif"></td> </tr> </table> In tables, that height of the left and right cells automatically move with the content of the right cell, so that if there's more or less text, the shadow gets longer or shorter. Now, this is how I'm seeing DIVs would work. <div style="float:left; background-image:url(../images/shadow.gif);background-position:top right; background-repeat:repeat-y;"><img src="images/spacer.gif"></div> <div style="float:left">My content here<br /><br /><br />etc.</div> <div style="float:left; background-image:url(../images/shadow_r.gif);background-position:top left; background-repeat:repeat-y;"><img src="images/spacer.gif"></div> But in this case, the divs to the left and right do not automatically adjust to be the height of the div in the center. So I just get one pixel of height for the shadow "cells". Is there a way to use CSS and still do this? Thanks, JBL Similar TutorialsI have a navigation bar I've created that always extends the vertical borders past it's span tag. Could someone please look at let me know if there's something weird with my css? Is there some kind of work around for FF for this? In IE it works just fine. I have attached a screenshot for reference of what I'm talking about. CSS -- headertable, headercell, and nav are the ones directly relating to the bar. I put them in for proper context. Code:
.logo {
border: 0px;
display: inline;
}
#header {
height: 92px;
width:188px;
background: url(/theme/Green/logo.jpg) no-repeat;
}
.banner {
border: 0px;
margin: 0px;
padding 20px 5px 5px 5px;
float: right;
}
.headertable {
width: 770px;
padding: 0px;
margin: 0;
height: 133px;
}
.headercell {
height: 35px;
vertical-align: top;
}
#nav{
padding: 5px 0;
float: right;
}
#nav a,#nav a:visited {
background: url(/theme/Green/bgnavbutton.gif) repeat-x;
padding: 9px 9px;
margin: 0;
color: #fff;
font: bold 14px/22px arial,sans-serif;
text-decoration: none;
}
HTML Code:
<table class="headertable">
<tr><td valign="top"><div class="banner"><?=proam_loc(9)?></div><div id="header"><h3><a href="/"><span>TDS</span></a></h3></div></td></tr>
<tr>
<td class="headercell">
<span id="nav"><a href="/index.php" id="home" title="TDS Home">Home</a><a href="http://www.tdstelecom.com/redir.asp?keyword=HOME" id="shop" title="Shop TDS">Shop TDS</a><a href="https://secure.tds.net/" id="mya" title="Manage Your Account" target="_blank">Manage Account</a><a href="http://tdsmail.tds.net/" id="jobs" title="Jobs @ TDS" target="_blank">TDS Mail</a><a href="http://tdstelecomhelp.tds.net/" id="help" title="Help / FAQ" target="_blank">Help / FAQ</a><a href="http://www.tdstelecom.com/hr/job_opps.asp" id="jobs" title="Jobs @ TDS" target="_blank">Jobs @ TDS</a></span>
</td>
</tr>
</table> <!-- End Header Table -->
Hey, I have been looking EVERYWHERE for a solution and there seems to be none just quite yet. I've searched google and all sorts of help forums... and still zip, nothing. What I want to do is vertically-align the text in this example: http://www.tri-m.com/test.html in the middle of the white space. The problem though is that there is an unknown height of the whitespace because I want it to be that no matter what size you size the window, the content will always be vertically aligned... so I'm pretty stuck on how to do this. I'm needing the solution for this desperatly and I have been searching and trying everything for weeks. If anyone could help that would be VERY VERY apperciated. Thank you sooo much to everyone that tries this out. Once again here is the Example: http://www.tri-m.com/test.html Here is my code: 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" />
<title>Tri-M Systems INC.</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
height:100%;
}
body
{
color:#000;
}
#container-page {
background:#fff;
width:100%;
min-height:100%; /* For Modern Browsers */
height:auto !important; /* For Modern Browsers */
height:100%; /* For IE */
position:relative;
text-align:left;
margin:0 auto;
}
#container-head
{
background:#fff;
}
#header
{
background-color:#0000FF;
min-width:830px;
width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );
height:81px;
position:relative;
}
#container-content
{
min-width:830px;
width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );
text-align:center;
position:relative;
padding: 0 0 162px 0;
}
#container-content:after
{
height:0;
clear:both;
display:block;
content:".";
visibility:hidden;
}
#content-sec ul,#content-sec ul li {
list-style: none none;
}
#container-foot
{
background-color:#ff0000;
width:100%;
min-width:830px;
width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );
height:162px;
position:absolute;
bottom:0 !important;
bottom:-1px; /* For Certain IE widths */
}
#foot
{
height:162px;
}
</style>
</head>
<body>
<div id="container-page">
<div id="container-head">
<div id="header">
</div><!-- END "header" -->
</div><!-- END "container-head" -->
<div id="container-content">
<center>
<div id="box">VERTICAL ALIGN THIS IN WHITE SPACE</div> <!-- END "box" -->
</center>
</div><!-- END "container-content" -->
<div id="container-foot">
<div id="foot">
</div><!-- END "foot" -->
</div><!-- END "container-foot" -->
</div><!-- END "container-page" -->
</body>
</html>
- Jacenta Hi and thanks in advance for any of your help. I need a single colum with several rows, all of which but one have a fixed height. The remaining row/cell should fill the remaining space. I have achieved this in IE6/7/8 with the style "height:100%" attribute but Firefox lets the page scroll of the bottom of the screen. I want the table to be fully visible at all times but with the felxible row/cell collapsing to fit the screen. Code is below with screenshot attached of what I expect to happen (as in IE). Code: <html style="height:100%;"> <body style="height:100%; margin:0;"> <table style="height:100%; width:250px;"> <tr><td style="vertical-align:top; background-color:#eee;">row 1<br />fixed height, some navigation links</td></tr> <tr><td style="height:100%;"><div style="vertical-align:top; height:100%; background-color:#ccc; overflow:auto;">text<br />text<br />text<br />text<br />text<br />text<br />text</div></td></tr> <tr><td style="vertical-align:top; background-color:#eee;">row 3<br />fixed height again, some navigation links</td></tr> <tr><td style="vertical-align:top; background-color:#eee;">row 4<br />fixed height again, some navigation links</td></tr> <tr><td style="vertical-align:top; background-color:#eee;">row 5<br />fixed height again, some navigation links</td></tr> </table> </body> </html> Thanks again for any help or pointers as to where I have gone wrong. I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically?? Code: <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div> <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div> </div> <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div> <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div> </div> I am trying to create something similar to tooltips and having a problem. I know that the browsers support tooltips with the title attribute but I'm looking to do something different. Also, I know that IE has bugs with hovering on non-anchor tags but I'm trying to make this work in a standards-compliant browser (I'm not using IE). I've tried the code given by SantaKlauss and it worked fine. But why doesn't this work (a simple example to illustrate the problem)? Code:
<style type="text/css">
.test:hover + div
{
background-color: red;
}
</style>
<img class='test' src='test.gif' />
<div>here is some text</div>
If I remove the :hover pseudo-class declaration like this: Code:
.test + div
{
background-color: red;
}
It correctly sets the background color on the div following the image. So why doesn't the first example work with the hover pseudo-class?? Thanks in advance, Jeremiah Hey everyone, I have a footer with two images that link to various associations for home building. In firefox when I over over the link which has a nested image. The next element is a paragraph which is hidden unless the link is hovered over. In IE the paragraphs don't show. I don't know why since I'm using a:hover, well actually it's #link-ID.hover. PHP Code: <div id="footer" style=""> <div id="foot-left" style=""> <div id="cedia"> <a id="cedia-link" href="http://www.cedia.net/"> <img src="images/cedia.png"> </a> <p id="cedia-info"> Custom<br> Electronic<br> Design &<br> Installation<br> Association </p> </div> <div id="ochba"> <a id="ochba-link" href="http://www.gohba.ca/"> <img src="images/ochba.png"> </a> <p id="ochba-info"> Ottowa-Carleton<br> Home<br> Builders<br> Association </p> </div> </div> <div id="foot-right" style=""> <p>To contact us:</p> <address> Phone: 613-838-4800<br> Fax: 613-838-3800<br> Email: info@moorhousecabling.ca<br> 9 Mary Hill Crescent, Richmond, Ontario, K0A 2Z0 </address> </div> </div> Code: css
#footer{
float:left;
clear:both;
width:800px;
overflow:hidden;
height:140px;
}
#foot-left{
float:left;
clear:none;
width:216px;
height:100%;
}
#cedia{
font-size:small;
width:50%;
float:left;
clear:none;
}
#cedia-link:hover + #cedia-info{
display:block;
}
#cedia img{
margin-left:40px;
float:left;
clear:none;
border:0;
}
#cedia-info{
margin:0 0 0 40px;
padding:0;
display:none;
float:left;
clear:both;
}
#ochba{
font-size:small;
width:50%;
float:left;
clear:none;
}
#ochba-link:hover + #ochba-info{
display:block;
}
#ochba img{
margin-right:40px;
float:right;
clear:none;
border:0;
}
#ochba-info{
margin:0;
padding:0;
display:none;
float:left;
clear:both;
}
#foot-right{
float:left;
clear:none;
background-color:#e6232b;
font-size:x-small;
padding:20px 0 0 20px;
height:100%;
width:563px;
color:#ffffff;
font-weight:bold;
}
Unfortunately no matter what I do to my routers firewall, including turning it off and also trying to add the webserver host to the DMZ. Either way all the port scanners I've used said that port 80 was not responding to SYN connection requests at all. Basically the port is in stealth mode. I cannot give you a live sample of the site. Any ideas or help would be greatly appreciated. i have two p tags one after the other.. <p>text</p> <p>text</p> and I did: Code:
#head p {
float:left;
margin-top:2%;
font-style:oblique;
font-size:150%;
color:green;
}
#head p+p {
float:right;
font-size:75%;
color:red;
}
the problem is that if i do margin-top:4% to the first p; this also changes that in the adjacent p? is this correct? Internet Explorer 7 has an odd way of dealing with adjacent left and right floats in a container without set width. Instead of leaving the parent div to its natural content width as a float, IE7 forces the right-floating div to float right until it meets an element with a fixed width, or otherwise the document margin. IE8 and other browsers float the items correctly. The example below was meant to do a menu with rounded buttons, the two rounded images floated to the left and right edges of the button containing the text. The button should only be the width of the text link plus the rounding divs. This is easily fixed by adding a fixed width to the floating container div. However this may not always be the desirable action when div content widths may vary -- especially if space is at premium. Is there any decent way to fix this without resorting to ugly hacks? An easy way to make rounded corners for buttons that are floating. Perhaps use ul/li as the menu item container elements -- would that make any difference? ul/li come with their semantic limitations however, as far as their contents are concerned. (No divs for one.) 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>
<title>Test Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
background-color:#ffffff;
font: 12px Verdana;
}
.container {
border: 1px solid #000;
padding: 5px;
background-color: #eee;
width: 500px;
}
.button_holder {
float: left;
margin: 1px;
/* width: 100px; */ /* IE7 wants width! Comment out and it floats right. */
}
.top_button_left {
/* background-image: url(../images/top_button_left.png); */
background-repeat: no-repeat;
background-color: #bbb;
width: 5px;
height: 31px;
float: left;
cursor: pointer;
}
.top_button_right {
/* background-image: url(../images/top_button_right.png); */
background-repeat: no-repeat;
background-color: #bbb;
width: 5px;
height: 31px;
float: right; /* This bugs the hell out of IE7: right float inside left float floats to the right of the first container with specified width */
cursor: pointer;
}
.top_button_mid {
/* background-image: url(../images/top_button_mid.png); */
background-repeat: repeat-x;
background-color: #ccc;
height: 31px;
cursor: pointer;
float: left;
}
.top_button_link {
padding-top: 7px;
padding-left: 13px;
padding-right: 13px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<b>Three buttons, the sides of which float to the right extreme in IE7</b>
<br />
<br />
<div class="button_holder">
<div class="top_button_mid">
<div class="top_button_right"></div>
<div class="top_button_left"></div>
<div class="top_button_link">
<a href="index.html" title="Home">Home</a>
</div>
</div>
</div>
<div class="button_holder">
<div class="top_button_mid">
<div class="top_button_right"></div>
<div class="top_button_left"></div>
<div class="top_button_link">
<a href="other.html" title="Home">Other</a>
</div>
</div>
</div>
<div class="button_holder">
<div class="top_button_mid">
<div class="top_button_right"></div>
<div class="top_button_left"></div>
<div class="top_button_link">
<a href="weather.html" title="Home">Weather</a>
</div>
</div>
</div>
<br style="clear: both;" />
</div>
</body>
</html>
Hi, So, there's the adjacent child selector element + element, but I was wondering if there was something that did the reverse of that selector. For example, let's say I have this: Code:
<div id="menu">
<div class="option">1</div
<div class="option">2</div>
<div class="option">3</div>
<div class="option">4</div>
</div>
I know I can use the element + element selector to quickly style every option div but the first, but is there some selector to quickly style every option element but the last. Thanks. --Surgery Hi All, A seemingly simple problem which has me pulling my (already thinning) hair out: I'm working on a simple page header: a 100px-wide image floated to the left, a 150px wide div filled with text floated to the right. I need the header to stretch to fit the whole page, which is easy enough: float the image to the left, float the div to the right. Now, if a user shrinks the browser to, lets say 200px wide, it's forcing the div to stack below the image. I would like for it get closer and closer to the image as the browser is narrowed, until it's sitting just beside it. I can do this with a min-width on a container div, but of course, that doesn't work on IE--and I'd rather not use the "expression" min-width hack. I could do it with a table, but I'm trying to go table-free if I can. It seems like something that should be easy as pie, but I'm finding that it's more akin to baking a souffle. Thanks, all. rjgfx Does anyone know how I can place two adjacent divs to fit the full width of the browser when one div is a set pixel width and the other i think has to be %? Here's my code: Code: <div style="position: absolute; top: 0px; left: 0px; width: 260px;"> <a href="http://www.thencollection.com/"><img src="images/logo.jpg" width="260px" height="55px" border="0" alt="The N Collection Logo" /></a></div> <div style="margin-left: 260px; width: 100%; height: 55px; background-color: #FFDC00;"> </div> Right now the header extends the browser width. Thanks in advance! I actually am having two problems, the one I alluded to in the subject and one I posted previously but got no response. This time, I'm including a URL and a CSS link in the hopes that someone might be able to help me out. The problem I posted earlier is regarding my navigation column and footer being omitted about 80% of the time in IE5/Win. Obviously, that's a huge problem. Of the browsers I've tested, it only happens in IE5/Win. The second problem is a bizarre issue regarding list items and the copy of the website. For some reason, in both IE5/Win and IE6/Win, the copy in the main column is slightly indented when there are list items (i.e. my navigation links!). This doesn't happen in any other browser I've tested and let me tell you, it's really cramping my style, because it makes the copy look like crap. Anyway, here's the URL of a test page: I've removed the page link. And here's the CSS link: http://dev.homedecorbuyer.com/stylesheets/default.css * Note: about 8 lines of CSS are on a different stylesheet, but only have to do with color and the header graphic. Please help. Whenever I can lend a helping hand on this forum, I post; it's my way of paying it forward. Any assistance would be greatly appreciated. I'm a bit baffled on this issue. Please visit this page - www.atrachapter.com Focus on the main image in the body of the page and mouse over the left hand navigation. The image jumps to the left. I have tried looking at all the css to see what is causing this but am baffled. Any help would be apprecaited. Thanks. Tom Hi all 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
</head>
<body>
<table style="margin-bottom: 10px;" cellspacing="0" cellpadding="0">
<tr>
<td>asdf</td>
</tr>
</table>
<p style="margin-top: 10px;">asdf</p>
</body>
</html>
Why do the margin-bottom of the table and the margin-top of the p not collapse (only tested in Firefox2)? Why is there 20px between them? I don't understand the world of margins anymore... Is this an exception or a bug or what? Thanks for help, Josh 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. 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! 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 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>
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. |
|||||||