|
CSS - Firefox Ignores Background Color In Absolute Child Of Relative Body
Firefox ignores the white background in the "main" <div> in the following, but IE, Opera and Safari/Win all display the white background. Is this a firefox bug, or am I missing something here?
Note: The z-indexes are for when the "main" div is scrolled... Also note: I am making the <body> tag relatively positioned because otherwise, Firefox (apparently) treats the viewport as the parent to the absolute-positioned element. In that case, it renders the white background until the bottom of the window, but reverts back to black "below the fold" because bottom: 0 is interpreted as the bottom of the window. Code:
<html>
<head>
<style type="text/css">
body {background: black; color: silver; position: relative}
div#header {position: fixed; top: 0; left: 20%; height: 80px; z-index: 2; right: 0; background: gray; margin-bottom: 2px; color: yellow}
div#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%; background: silver; margin-right: 2px; color: maroon}
div#main {position: absolute; top: 80px; left: 20%; right: 0; bottom: 0; background: white; color: red; z-index: 1}
</style>
</head>
<body>
<div id="header">
<h1>header</h1>
</div>
<div id="sidebar">
sidebar
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque rhoncus metus eget purus pellentesque auctor. Aenean dui mauris, eleifend sed, ultricies eget, commodo in, neque. Integer quis orci. Vivamus a diam sit amet nisl adipiscing aliquet. Nullam nisl justo, accumsan eu, blandit at, vehicula ut, leo. Sed porttitor tellus auctor lectus. Curabitur congue libero. Proin suscipit quam id felis. Aliquam hendrerit ligula in mauris. Quisque non eros a velit dictum ornare. Donec viverra dolor eu felis. In hac habitasse platea dictumst. Suspendisse tristique accumsan justo. Sed faucibus elit quis lacus.
</p><p>
Nullam commodo. Vivamus lobortis nibh nec dui gravida pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis posuere, metus et porta dictum, felis quam ullamcorper quam, ac ultrices mauris nisi et odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc interdum bibendum velit. Integer viverra laoreet justo. Vestibulum bibendum ante nec dui. Nunc congue iaculis enim. Proin suscipit, lacus dignissim tempus sagittis, lacus libero bibendum velit, lacinia porttitor turpis ante sit amet neque. Nulla facilisi. Quisque rhoncus leo eu sem. Aenean sed tellus. Pellentesque pellentesque mollis diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc feugiat est at nunc.
</p><p>
Donec hendrerit sapien. Donec sodales, mauris eu gravida eleifend, nisi nunc elementum augue, vel ullamcorper augue dolor vel lorem. Donec hendrerit ante non nisi. Proin feugiat, eros sit amet scelerisque cursus, tortor eros viverra nunc, vel tincidunt sem erat nec nisi. Sed adipiscing nisl vitae enim. Nulla odio mauris, eleifend ut, dictum ac, tristique et, felis. Donec nec eros. Suspendisse potenti. Integer ac orci. Nunc sapien nisl, fringilla at, elementum at, mattis vel, magna. Vestibulum congue. Sed at mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec metus vel lorem vulputate sagittis. Aliquam leo ipsum, semper vitae, malesuada id, suscipit quis, odio.
</p><p>
Maecenas semper hendrerit arcu. Suspendisse vulputate magna eu velit. Aenean venenatis nulla eget urna. Fusce diam orci, tincidunt ac, auctor et, condimentum sit amet, elit. Vivamus mollis. Nam sagittis odio vel lectus. Nam faucibus arcu in magna. Maecenas eget mauris vel justo feugiat iaculis. Suspendisse ut massa. Integer nulla magna, interdum ut, fringilla quis, ultrices malesuada, purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam iaculis sagittis eros. Nam nec tellus. Donec aliquam tortor ut metus. Aenean ligula ligula, auctor nec, luctus sed, sodales id, ante. Ut nec tellus vitae elit tristique vulputate. Cras suscipit tortor et diam. Phasellus vestibulum. Phasellus vestibulum eros sit amet ante.
</p><p>
Donec sodales pharetra ligula. Ut porta. Nulla facilisi. Donec nunc libero, nonummy sit amet, dapibus ut, eleifend sit amet, tellus. Donec blandit, lorem vitae malesuada pulvinar, massa nunc pharetra lacus, non lobortis tellus sem a odio. Ut sed leo. Etiam gravida mi nec nunc. Vivamus scelerisque lorem id magna. Aliquam ipsum est, aliquam eu, tristique a, fermentum nec, eros. Curabitur sed orci. Mauris orci nisl, molestie eu, rhoncus quis, condimentum a, nibh. In hac habitasse platea dictumst.
</p><p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque rhoncus metus eget purus pellentesque auctor. Aenean dui mauris, eleifend sed, ultricies eget, commodo in, neque. Integer quis orci. Vivamus a diam sit amet nisl adipiscing aliquet. Nullam nisl justo, accumsan eu, blandit at, vehicula ut, leo. Sed porttitor tellus auctor lectus. Curabitur congue libero. Proin suscipit quam id felis. Aliquam hendrerit ligula in mauris. Quisque non eros a velit dictum ornare. Donec viverra dolor eu felis. In hac habitasse platea dictumst. Suspendisse tristique accumsan justo. Sed faucibus elit quis lacus.
</p><p>
Nullam commodo. Vivamus lobortis nibh nec dui gravida pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis posuere, metus et porta dictum, felis quam ullamcorper quam, ac ultrices mauris nisi et odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc interdum bibendum velit. Integer viverra laoreet justo. Vestibulum bibendum ante nec dui. Nunc congue iaculis enim. Proin suscipit, lacus dignissim tempus sagittis, lacus libero bibendum velit, lacinia porttitor turpis ante sit amet neque. Nulla facilisi. Quisque rhoncus leo eu sem. Aenean sed tellus. Pellentesque pellentesque mollis diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc feugiat est at nunc.
</p><p>
Donec hendrerit sapien. Donec sodales, mauris eu gravida eleifend, nisi nunc elementum augue, vel ullamcorper augue dolor vel lorem. Donec hendrerit ante non nisi. Proin feugiat, eros sit amet scelerisque cursus, tortor eros viverra nunc, vel tincidunt sem erat nec nisi. Sed adipiscing nisl vitae enim. Nulla odio mauris, eleifend ut, dictum ac, tristique et, felis. Donec nec eros. Suspendisse potenti. Integer ac orci. Nunc sapien nisl, fringilla at, elementum at, mattis vel, magna. Vestibulum congue. Sed at mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec metus vel lorem vulputate sagittis. Aliquam leo ipsum, semper vitae, malesuada id, suscipit quis, odio.
</p><p>
Maecenas semper hendrerit arcu. Suspendisse vulputate magna eu velit. Aenean venenatis nulla eget urna. Fusce diam orci, tincidunt ac, auctor et, condimentum sit amet, elit. Vivamus mollis. Nam sagittis odio vel lectus. Nam faucibus arcu in magna. Maecenas eget mauris vel justo feugiat iaculis. Suspendisse ut massa. Integer nulla magna, interdum ut, fringilla quis, ultrices malesuada, purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam iaculis sagittis eros. Nam nec tellus. Donec aliquam tortor ut metus. Aenean ligula ligula, auctor nec, luctus sed, sodales id, ante. Ut nec tellus vitae elit tristique vulputate. Cras suscipit tortor et diam. Phasellus vestibulum. Phasellus vestibulum eros sit amet ante.
</p><p>
Donec sodales pharetra ligula. Ut porta. Nulla facilisi. Donec nunc libero, nonummy sit amet, dapibus ut, eleifend sit amet, tellus. Donec blandit, lorem vitae malesuada pulvinar, massa nunc pharetra lacus, non lobortis tellus sem a odio. Ut sed leo. Etiam gravida mi nec nunc. Vivamus scelerisque lorem id magna. Aliquam ipsum est, aliquam eu, tristique a, fermentum nec, eros. Curabitur sed orci. Mauris orci nisl, molestie eu, rhoncus quis, condimentum a, nibh. In hac habitasse platea dictumst.
</p>
</div>
</body>
</html>
Similar TutorialsI am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it. The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox? You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html). css Code: Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; } #main-nav html4strict Code: Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div> <div id="main-nav"> The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers. Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem. I'm working on a pet project on the off chance that I could be hired by a small business referral organization in the city where I live, so this isn't super urgent. I'm also not a web developer by trade, more IT, so if I make any obvious mistakes, feel free to point them out. I've got a simple absolute-positioned two-column layout and a two-color background that I want to tile vertically behind it. The problem seems to be that the browsers ( IE and FF, haven't tried chrome/safari/opera) seem to think that the body ends at the bottom of the logo I set on top, and won't tile it beyond the bottom of the image. HTML: 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> <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hub City Business Network | Word-Of-Mouth Business Referrals in Hattiesburg, Mississippi | Home</title> </head> <body> <div id="content"> <div id="logo"><a href="index.htm"><img src="images/hcbnlogo1transparency.png" alt="Hub City Business Network" /></a></div> <div class="left"> <div id="navigation"> <ul> <li><a href="index.htm">Home</a></li> <li><a href="members/index.htm">Members</a></li> <li><a href="contact.htm">Contact Us</a></li> </ul> </div> <div id="leftinfo"> <p>We meet for breakfast every Tuesday,<br /> 7 - 8:30 AM. <br /> at the Neal House at<br /> 1311 East Hardy St.</p> </div> </div> <div class="right"> <p>Hub City Business Network (HCBN), is a Hattiesburg-based business networking group that meets every Tuesday for breakfast at 7:00 till 8:30 A.M. Our membership is composed of some of the finest and best-respected business men and women in Hattiesburg. Our networking model is predicated on the idea that people do business with people they know, trust, and like. Our members know that they can confidently refer business to a member and the referral will be handled in a timely, professional manner. In addition, we encourage members to meet outside of the weekly meetings for one-on-one Strategic Marketing Sessions (SMS). An SMS usually takes the form of a lunch or coffee, and gives members time to discover in a more relaxed environment things about other members that don't surface at the regular weekly meetings. </p> </div> <div id="footer"> <p>Site built by Robert Greenstreet</p> </div> </div> </body> </html> CSS: Code: html
{
width:100%;
}
#logo img
{
margin:10px 0px 0px 20px;
width:400px;
height:100px;
}
img
{
border:0px;
}
a:link
{
color:#29497f;
}
a:visited{
color:#5dd0c0;
}
body
{
width:650px;
margin-left:auto;
margin-right:auto;
background-color:#29497f;
}
#content
{
/*height:500px;*/
width:650px;
background-image:url('../images/bg1.png');
background-repeat:repeat-y;
background-attachment:fixed;
background-position:center;
margin-top:-10px;
}
.left
{
position:absolute;
left:auto;
top:120px;
width:15em;
margin-left:12px;
padding-left:0px;
}
.left ul
{
list-style-type:none;
margin-left:-33px;
font-family:sans-serif;
}
#leftinfo
{
margin-left:10px;
width:9em;
}
.right
{
position:absolute;
left:auto;
top:120px;
width:27em;
margin-left:12em;
font-family:sans-serif;
}
.right p
{
color:#000000;
}
#memberlist ul
{
margin-left:-40px;
}
#memberlist a:visited{
color:#6a92d4;
text-decoration:none;
}
#footer
{
position:absolute;
top:400px;
width:650px;
margin:0 auto;
}
Also, I'm working on getting that footer centered about 30px from the bottom of the page, without running up into whatever content may be above it. I think I might be able to figure that one out on my own, though. Like I said, no rush. This isn't a paid gig i have a problem dynamically setting the html background color when i initially set it with css. if i have a javascript function: function changeColor() { document.bgColor = '#FFFF00'; } and call it when i click a button the background color changes like you'd expect. but if i initialize the background color like this: body{background-color: #FF0000;} and then later call my javascript function to change the background color like before, it doesn't do anything. what's going on here? and how can i initialize the background color and still be able to dynamically change it? thanks I haven't succeed in getting the Javascript's DOM to tell me what the body's background color is... Here's the code I got Code:
mybody = document.getElementsByTagName("body");
alert(mybody.getAttribute("background-color"));
//alert(mybody.style.backgroundColor);
Nice references I looked up from are http://www.mozilla.org/docs/dom/technote/tn-dom-table/ http://www.sitepoint.com/print/rough-guide-dom http://www.mozilla.org/docs/dom/domref/dom_style_ref.html http://developer.apple.com/internet/webcontent/dom2ii.html My problem is that I need to get the Body Background color that is in a css file using php to then introduce this color to an applet. My CSS file has: BODY { FONT-SIZE: 12px; COLOR: #6699ff; BACKGROUND-COLOR: #ffffff; SCROLLBAR-FACE-COLOR: #FFFFFF; SCROLLBAR-HIGHLIGHT-COLOR: #CC6699; SCROLLBAR-SHADOW-COLOR: #CC6699; SCROLLBAR-3DLIGHT-COLOR: #CC6699; SCROLLBAR-ARROW-COLOR: #CC6699; SCROLLBAR-TRACK-COLOR: #FFFFFFF; SCROLLBAR-DARKSHADOW-COLOR: #CC6699; FONT-FAMILY: "Times", serif; } But I use different CSS so very time I change the file I need to know in the php page what BACKGROUND-COLOR it has. ahh thanks figures it out never mind. Hello all, When viewing in IE my background is dark red like it's suppose to be. When viewing the same site in Firefox the background is white. Firefox is not seeing that portion of code within my CSS file. Can someone shine some light for me? Thanks in advance!! Please help I need Please send me a message for URL. For some odd reason Dev won't allow me to post a link to my site for you. I have the following code, in the sidebar DIV in Firefox the background does not show up, it does in IE7. What have I done wrong? CSS code: Code:
#content {
margin-left: 25px;
background: #fff;
width: 990px;
padding: 15px 20px 20px 20px;
}
#blog {
padding: 0;
margin-right: 40px;
background: #fff;
width: 660px;
color: #545454;
float: left;
padding-top: 5px !important;
}
#sidebar {
width: 250px;
padding: 8px;
background: #ccc;
}
XHTML/HTML code: Code:
<div id="content">
<div id="blog">
blah blah blah
</div>
<div id="sidebar">
<h2>blah</h2>
blah blah blah
</div>
</div>
I've been looking it at for a while, and while it's probably something minor I'm just simple over looking, I can't figure it out. Everything works, is in the correct place, except the grey background (#ccc) isn't showing up on the sidebar. Hello there. I tried to display the background color in my navigation, but it wan't work. Works fine in safari. Doesn't work in firefox or IE Can anyone help? .navbar { width: 960px; line-height: 30px; background-color: silver; z-index:100; display: block; clear: both; } .navbar ul { font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none; z-index:100; } .navbar ul li { display: block; position: relative; float: left; width: 120px; font-weight: bolder; z-index:100; } .navbar li ul { display: none; line-height: 20px; z-index:100; } .navbar ul li a { display: block; text-decoration: none; color: #48fc30; padding: 4px 15px 4px 15px; background: #silver; margin-left: 1px; } .navbar ul li a signup { background: #black; } .navbar ul li a:hover { background: #grey; } .navbar li:hover ul { display: block; position: absolute; } .navbar li:hover li { float: none; font-size: 11px; } .navbar li:hover a { background: #red; } .navbar li:hover li a:hover { background: #blue; } After years of developing, I finally decided to ditch the tables and use CSS properly for formatting. Things are going well, but I've run into a few odd problems. One is this one - I've chomped the page right down to illustrate the problem. In IE, the page renders as I'd hope, a bg color showing right across the page, with the left & right cols within that. In Firefox, the bg color renders, but STOPS where the left & right cols display. Code:
<!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>Hmmm...</title>
<style type="text/css">
<!--
body {
background-color: #403E3E;
margin: 0px;
padding: 0px;
}
#pagebodywrapping {
background-color: #A3AAAF;
margin: 0px;
padding: 0px;
width: 100%;
}
#pagebody {
margin: 0px auto;
padding: 0px;
width: 750px;
}
#pagebody .leftcol {
margin: 0px 0px 0px 0px;
padding: 0px;
width: 499px;
border-right: 1px solid #fff;
background-color: #FFF;
float:left
}
#pagebody .rightcol {
margin: 0px 0px 0px 0px;
width: 250px;
background-color: #5D757E;
float:left;
}
-->
</style>
</head>
<body>
<div id="pagebodywrapping"><br>
<div id="pagebody"><br>
<div class="leftcol"><br></div>
<div class="rightcol"><br></div>
</div>
</div>
</body>
</html>
I'm sure it's something very simple, but for the life of me, I can't figure it out. I've searched around to no avail either. ANY help would be very much appreciated. Thanks in advance. Im setting the background color of a division to #FFFFFF which in IE is perfectly white as you would expect. However in firefox it is coming out as a really faint green colour. Is this because of the way ive coded it or is this a problem with firefox? I made this administration system in php.. its a site php site with a table with a menu, under it is a iframe.. the code for the iframe = Code: <iframe frameborder="0" marginheight="0" marginwidth="0" scrolling="auto" width="524" height="100%" src="news.php"></iframe> then the news.php seems to fail when i scroll in firefox, since the bg in the iframe changes from #F4F4F4 to #FFFFFF in the new space thats uncovered when i scroll.. the bgcolor and bgimage is defined by css, heres the code: Code:
.bodyiframe {
background-color: #F4F4F4;
background-image: url(../images/bgiframe.gif);
background-repeat: repeat-x;
background-position: top;
background-attachment: fixed;
}
It works fine in explorer 7, but firefox 0.8 cant handle it!.. plz help I have a problem that I have never seen before. I am using css to set the background properties of the body tag. Works just fine in IE but no background at all shows up in Firefox. css code for the body tag is: body { background-color: #0d005e; background-image: url('images/bgmain.jpg'); background-repeat: repeat-x; } Any thoughts? Hi; i don't known why background color does not cover over all the boxs in Firefox but IE does, could anyone help, please. my code as following 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=utf-8">
<style type="text/css">
html,body{
padding: 0;
margin:0;
}
#container {
position: relative;
width: 796px; /* width + border for IE 5.x */
w\idth: 790px; /* real width */
height: auto;
border: 0px;
padding: 0;
margin-top: 10px;
margin-bottom:auto;
margin-left: auto;
margin-right: auto;
background-color:#f0f0ec;
}
#wrapper{
margin: auto;
border:0;
padding:0;
width: 640px;
height:auto;
}
.box{
border:0;
padding:0;
width:190px;
height:220px;
float: left;
margin-left:15px;
margin-top:20px;
background-color:#FFFF99;
color:#333333;
text-align:center;
overflow:scroll;
}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
//in here i am goning to use while loop to select all the data from database, so i may have 30 boxs, or 50boxs.
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
</div>
</div>
</body>
</html>
I have just started writing a page and the first thing I did was establish a body background color and image. It works in IE but not FF. Can someone please give me a clue what is wrong. I have searched all the CSS books and the internet but I cannot find an answer. Thanks in advance. The URL is http://www.childrens-stories.me.uk/ I'm having a problem getting a child element to be the full height of its parent without going over. So if I have: Code: html, body {
height: 100%;
background-color: #E2E9EA;
}
#mainContainer {
width: 770px;
height: 100%;
background-color: #fff;
margin-left: auto;
margin-right: auto;
border: 1px solid #000;
position: relative;
}
and then I implement: Code: <body> <div id="mainContainer"></div> </body> This should show a centered area in a layout. However, using a hieght of 100% for the child (mainContainer) makes it too long on the page and it extends beyond the border of the "parent" body tag. Even when I try using: Code: body #mainContainer { ... }
it does not work. How can I make the child (mainContainer) element be 100% of the parent (body) element without going over? Hello Can anybody explain me the difference between the absolute and the relative positioning methods? If i use nested <span> elements in a table row which one is suitable? And also what the "Z-index" property tells us? I am so confused with these terms nowadays.And waiting your help. Thank You Very Much... Hi, i think i use too many DIV tags. How can I get around this problem? Is there any direction you think you can push me to? The homepage is here http://www.chocolateriewanders.com/...lder/index.html an image explaining the layout of the graphics is he and another question: would you ever consider to combine CSS and tables? i ask because of this design, that i have .... the main box is kinda easy to arrange in tables, i don't really know yet if i can manage to make it entirely in css .... any ideas are appreciated EDIT: okay - starting from scratch Hi, I have a problem that seems like it's on the edge of solveability but I haven't hit on it yet. I have a page that's layed out like this: http://i55.photobucket.com/albums/g129/alexmarsz/CSSProblem1a.jpg And most of the time it's fine. There's an image in BackgroundDiv with a javascript function that resizes the image to fit the screen, and then three divs are absolute within it, with BottomDiv then relative below. The problem is that ColumnLeft has a variable length. Sometimes it gets long and busts out of BackgroundDiv. Which would be fine if BottomDiv would politely push down like it does when BackgroundDiv expands. But it doesn't. Instead, ColumnLeft overlaps, as seen he http://i55.photobucket.com/albums/g129/alexmarsz/CSSProblem1b.jpg If you want to see it in action, here is a mock-up: http://www.simunomics.com/Mockup-NewLayout.php If your screen is wide it may not bust out, but narrow your browser down to ~1000px or imagine the LeftColumn being longer and you'll see what I mean. The Divs are structured in the HTML like this: Code:
<div id="BackgroundDiv" onload="resizeImage('BkgImage');" style="min-height:840px">
<div id="TwoColumnInfoBox" align="center">
</div>
<div id="ColumnLeft" class="FactoryBox">
</div>
<div id="ColumnRight" class="FactoryBox">
</div>
<img onload="resizeImage('BkgImage');" id="BkgImage1" src="Images/FactoryForm.JPG" width="100%" />
</div>
<div id="BottomDiv">
</div>
And the css looks like this: Code:
#BackgroundDiv {
color: #FFFFFF;
margin-left: 210px;
margin-top: 10px;
padding: 10px;
}
#TwoColumnInfoBox{
position:absolute;
margin-top:20px;
right:70px;
margin-left:auto;
z-index:50;
background-image:url(Images/InfoBackground.GIF);
color:#000000;
height:150px;
width:250px;
}
#ColumnLeft{
position:absolute;
margin-left:5%;
margin-top:50px;
z-index:30;
}
#ColumnRight{
position:absolute;
right:5%;
margin-top:200px;
z-index:28;
}
.FactoryBox{
color:#FFFFFF;
width:300px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
#BottomDiv {
color: #FFFFFF;
margin-left: 210px;
margin-top: 10px;
padding: 10px;
}
Just to address some considered but unfeasible options (so far as I know), if I float ColumnLeft I can't position it over the image, so it has to be absolute. And if I use the image as a background attribute, I can't dynamically resize it. (Not until CSS 3 anyway.) Again, I feel like this is close but not-quite-there, like there should be some sort of wrapper I can make to get BottomDiv to respect the proper distance. Thanks in advance for any suggestions. |
|||||||