|
CSS - Need Help With Div Stacking
Ok so I having been fooling around with this since last night and it all looks pretty good in all the browsers except for a couple nicks here and there, even with IE6...
Here are the links to my site so that you guys can get and idea of what I am taking about: [URL=http://www.devine-decor.com/2] De'Vine Decor /URL] Alright so I only have 2 bugs, one shows up in Safari and the Other in IE6. First off in Safari for some weird reason my logo is placed under the navigation links instead of above it and I cant for the sake of me figure out why. I have tested it on a Mac in Firefox, Camino, Opera and it shows up fine. It even shows up fine in IE6 and 7... Weird... Alright so bug number 2 shows up in IE. When the page loads in IE it shows up fine but for some reason the links are not active. I can figure out why this happens. It is really really weir... Anyways if you guys could help it would be great. Here is the html for the page: Code: <div id="container"> <div id="shadow"> <div id="shadow_2"> <div id="wrapper"> <div id="wrapper_navbar" style="margin-bottom: 0px;"> <div id="logo"><img src="imgs/logo_left_part.png" height="138" alt="" border="0" /></div> <div id="navbar_content"> <div id="nav_btns_bg"><img src="imgs/nav_btns/nav_btns.png" width="225" height="360" alt="De'Vine Decor Navigation" border="0" /></div> <div id="nav_btns"> <div style="margin-top: 0px; z-index: 1;"><a href="#"><img src='imgs/nav_btns/nav_bar_off.png' width='225' height='81' alt='De'Vine Decor - Home' border='0' onmouseover="this.src=this.src.replace(/off\.png/, 'on.').replace(/\.$/, '.png')" onmouseout="this.src=this.src.replace(/on\.png/, 'off.').replace(/\.$/, '.png')" /></a></div> <div style="margin-top: -25px; z-index: 1;"><a href="#"><img src='imgs/nav_btns/nav_bar_off.png' width='225' height='81' alt='De'Vine Decor - Home' border='0' onmouseover="this.src='imgs/nav_btns/nav_bar_on.png'" onmouseout="this.src='imgs/nav_btns/nav_bar_off.png'" /></a></div> <div style="margin-top: -25px; z-index: 2;"><a href="#"><img src='imgs/nav_btns/nav_bar_off.png' width='225' height='81' alt='De'Vine Decor - Home' border='0' onmouseover="this.src='imgs/nav_btns/nav_bar_on.png'" onmouseout="this.src='imgs/nav_btns/nav_bar_off.png'" /></a></div> <div style="margin-top: -24px; z-index: 3;"><a href="#"><img src='imgs/nav_btns/nav_bar_off.png' width='225' height='81' alt='De'Vine Decor - Home' border='0' onmouseover="this.src='imgs/nav_btns/nav_bar_on.png'" onmouseout="this.src='imgs/nav_btns/nav_bar_off.png'" /></a></div> <div style="margin-top: -25px; z-index: 4;"><a href="#"><img src='imgs/nav_btns/nav_bar_off.png' width='225' height='81' alt='De'Vine Decor - Home' border='0' onmouseover="this.src='imgs/nav_btns/nav_bar_on.png'" onmouseout="this.src='imgs/nav_btns/nav_bar_off.png'" /></a></div> <div style="margin-top: -25px; z-index: 5;"><a href="#"><img src='imgs/nav_btns/nav_bar_off.png' width='225' height='81' alt='De'Vine Decor - Home' border='0' onmouseover="this.src='imgs/nav_btns/nav_bar_on.png'" onmouseout="this.src='imgs/nav_btns/nav_bar_off.png'" /></a></div> </div> </div> </div> <div id="wrapper_body"> <div id="content_top"><img src="imgs/test_image.png" height="350" width="650" alt="" border="0" /></div> <div id="quote_bar"><img src="imgs/quote_bar.png" height="350" width="650" alt="" border="0" /></div> <div id="overlay"><img src="imgs/image_overlay.png" height="350" width="650" alt="" border="0" /></div> <div id="content_bottom"><a class="txt"><?php echo nl2br($content); ?></a></div> </div> </div> </div> </div> <div id="shadow_b"><img src="imgs/shadow_bottom.png" width="1000" height="48" alt="De'Vine Decor" border="0" /></div> </div> And the css: Code:
html, body{
margin: 0px;
padding: 0px;
background: #93744d url(imgs/foreground.png) top repeat-x;
color: #131123;
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
font-size: 12px;
text-align: center;
}
.txt {font-family: verdana, sans-serif; color: #663300; font-size: 11px; font-style:normall; font-variant: normal; font-weight: normal; text-decoration: none; line-height:22px; letter-spacing:1px;}
/* ------------------------------------------ MAIN DIVs ------------------------------------------ */
div#container {
position: relative;
width: 100%;
text-align: center;
vertical-align: top;
}
div#shadow {
position: static;
width: 1000px;
height: inherit;
margin: 0 auto;
text-align: center;
background: url(imgs/shadow_bg.png) top repeat-y;
}
div#shadow_2 {
position: static;
width: 1000px;
height: inherit;
margin: 0 auto;
text-align: center;
background: url(imgs/shadow_bg2.png) bottom no-repeat;
}
div#wrapper {
position: static;
width: 875px;
height: inherit;
margin: 0 auto;
text-align: center;
background: url(imgs/fleur_de_lys_pattern.png) top repeat;
}
/* ------------------------------------------ LEFT DIVs ------------------------------------------ */
div#wrapper_navbar {
display: table-cell;
width: 225px;
height: inherit;
vertical-align: top;
margin-left: -650px;
}
div#logo {
width: 225px;
height: 138px;
}
div#navbar_content {
display: table-cell;
width: 225px;
height: 360px;
text-align: center;
vertical-align: bottom;
}
div#nav_btns {
margin-top: -360px;
width: 225px;
height: 360px;
}
/* ------------------------------------------ BODY DIVs ------------------------------------------ */
div#wrapper_body {
display: table-cell;
width: 650px;
height: inherit;
background: #eeeeee;
vertical-align: top;
margin: 0 0 0 225px;
}
div#content_top {
width: 650px;
height: 350px;
}
div#overlay {
z-index: 50;
width: 650px;
height: 350px;
margin-top: -350px;
}
div#quote_bar {
z-index: 40;
width: 650px;
height: 350px;
margin-top: -350px;
}
div#content_bottom {
width: 610px;
padding: 20px;
height: auto;
background: #eeeeee url(imgs/text_bg.png) top repeat-x;
text-align: left;
}
/* ------------------------------------------ BOTTOM DIVs ------------------------------------------ */
div#shadow_b {
position: static;
width: 1000px;
height: 48px;
margin: 0 auto;
text-align: center;
}
Similar TutorialsThe code below works perfect in FF2/FF3 and IE6 ... In IE7 the first UL is perfect, but the 2nd UL is vertical (not horizontal) If you have any suggestions on how to improve my CSS that would be appreciated to. Its kind of a mess because I have been pulling my hair out for the last 3 hours trying to get the 2nd UL to render horizontally rather than vertically. Code: <title>Untitled Document</title>
<style type="text/css">
body
{
margin: 0 auto;
padding: 0 auto;
}
#lottoNumbersWrapper
{
float: left;
width: 700px;
height: 118px;
background-image: url(images/structural/lottoNumbersBG2.jpg);
background-repeat: no-repeat;
border: 0px solid black;
}
.lottoNumbers
{
margin: 0;
margin-right: 20px;
margin-top: 10px;
padding: 0;
border: 0px solid black;
}
.lottoNumbers li {
list-style: none;
list-style-type: none;
float: left;
font-size: 13px;
height: 40px;
width: 45px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-position: center;
background-repeat: no-repeat;
border: 0px solid black;
cursor: pointer;
}
.lottoNumbers li.white
{
background-image:url(images/whiteDot.gif);
}
.lottoNumbers li.blue
{
background-image:url(images/BlueDot.gif);
}
.lottoNumbers li span {
display: block;
margin-top: 12px;
text-align: center;
font-size: 16px;
font-weight: bold;
color: #000;
}
</style>
</head>
<body>
<div id="lottoNumbersWrapper">
<div style="float: right; border: 0px solid black">
<ul class="lottoNumbers">
<li class="white"><span>14</span></li>
<li class="blue"><span>4</span></li>
<li class="white"><span>9</span></li>
<li class="white"><span>12</span></li>
<li class="white"><span>14</span></li>
<li class="blue"><span>18</span></li>
<li class="white"><span>20</span></li>
<li class="white"><span>21</span></li>
<li class="blue"><span>26</span></li>
<li class="white"><span>33</span></li>
</ul>
</div>
<br />
<div style="float: right; border: 0px solid black">
<ul class="lottoNumbers">
<li class="white"><span>14</span></li>
<li class="blue"><span>4</span></li>
<li class="white"><span>9</span></li>
<li class="white"><span>12</span></li>
<li class="white"><span>14</span></li>
<li class="blue"><span>18</span></li>
<li class="white"><span>20</span></li>
<li class="white"><span>21</span></li>
<li class="blue"><span>26</span></li>
<li class="white"><span>33</span></li>
</ul>
</div>
</div> <!-- END LOTTO NUMBERS WRAPPER -->
</body>
</html>
I have an absolutely positioned <div> that is intended to over some content directly below it. This content is contained within a relatively-positioned <div> which seems to be causing it to display in front of the absolutely-positioned <div> regardless of what the z-index is set to. Here is a simplified example of my problem: 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">
<title>Stacking Order Test</title>
</head>
<body>
<div style="position:relative;">
<div style="position:absolute;background:green;height:55px;top:5px;left:5px;z-index:100;">I should be at the top of the stacking order.</div>
</div>
<div>
<div style="position:relative;background:red;height:300px;">
If you can read this, I am higher in the stacking order than the green <div>
</div>
</div>
</body>
</html>
The only way that I can get the absolutely-positioned <div> to display at the top of the stacking order as it should is to remove the relative positioning from the other <div>. Unfortunately, for several reasons, this is not an option. This is only happening in IE6 and 7. Anyone have any any ideas? Hey, I found a script that enlarges a picture when you hover over it. I edited the script a bit to fit my needs. However, the whole script works fine except that in IE there's a stacking problem. The enlarged image is shown below the thumbnail image (when you hover over the thumbnail image). This is how it looks in IE: http://img122.imageshack.us/img122/6428/errorbm9.jpg And this is how it should look (chrome): http://img122.imageshack.us/img122/4663/correctax8.jpg I tried to set the z-index of the enlarged image to 2 and that of the thumbnail to 1, but that doesn't seem to work. the css: Code: .hoverbox{ /* For the list (ul tag) */
float: left;
cursor: default;
list-style: none;
width: 80%;
}
.hoverbox a{
cursor: default;
}
.hoverbox a .preview{ /* hide the enlarged picture by default*/
display: none;
}
.hoverbox a:hover .preview{ /* the enlarged image settings */
display: block;
position: absolute;
top: 50px;
left: 50px;
}
.hoverbox img{ /* the default settings for all images */
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
}
.defaultImg{ /* width of the thumbnail image */
width: 100px;
height: 75px;
}
.hoverbox li{
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}
.hoverbox .preview{
border-color: #000;
}
The html for the images Code: <ul class="hoverbox"> <li> <a href="#"><img src="images/pictures/thumbnails/foto1.jpg" alt="description" class="defaultImg"/><img src="images/pictures/foto1.jpg" alt="description" class="preview" /></a> </li> <li> <a href="#"><img src="images/pictures/thumbnails/foto2.jpg" alt="description" class="defaultImg" /><img src="images/pictures/foto2.jpg" alt="description" class="preview" /></a> </li> </ul> Does anyone have a solution to my problem? Thanks in advance Im having a few issues with the layout of a clients website. I have a three column grid and what I want to do is switch between different column combos, stacked down the page. The problem I have is that the far right column always creeps up to the bottom of the div above it. I've tried heaps of round-about methods but nothings working. I must be missing something painfully obvious. I cant figure out how to post images because I'm a newer user, so try follow these links to get a better understanding: Heres the Current layout: w w w. timdonaldson . com/random/as_is.jpg And Here is the grid I want: w w w. timdonaldson . com/random/if_only.jpg I hope there is a simple solution to this. Thanks in advance for any help. I'm completely stumped on this problem. I need part of this html page to have transparency, but then have completely opaque text on top of that. Since anything within a div with transparency automatically inherits that transparency, I decided to fix that by layering an opaque div over the div with transparency. This works wonderfully in FF3 and Safari. However, IE7 is giving me fits (no surprise here). The divs simply will not layer. I believe that the problem is because z-index is overloaded by IE7, but I can't find a workaround that works for it. Can anyone else? I really appreciate the help! The complete html is: <head> <title>Example</title> <style type="text/css"> body { margin:0px 0px 0px 0px; background-color:white; } .wrapper { height:425px; width:520px; background-color:cyan; margin-left:auto; margin-right:auto; top:0px; } .midbox { height:280px; width:520px; } .shaded { position:relative; z-index:0; height:95px; width:520px; background-color:yellow; filter:alpha(opacity=50); /* for IE */ -moz-opacity:0.5; /* for older browsers */ -khtml-opacity:0.5; /* for older browsers */ opacity:0.5; } .unshaded { float:left; position:relative; z-index:1; filter:alpha(opacity=100); /* for IE */ -moz-opacity:1.0; /* for older browsers */ -khtml-opacity:1.0; /* for older browsers */ opacity:1.0; height:95px; width:520px; } .bigName { position:relative; border-style:none; font-family:Arial Unicode MS; font-size:50px; width:250px; height:55px; } .bigUsername { position:relative; border-style:none; font-family:Arial Unicode MS; font-size:15px; width:250px; } </style> </head> <body> <form id="form1"> <div class="wrapper" > <div id="divTop" class="unshaded"> <table width="320px"><tr><td align="center"> <input type="text" name="theirName" value="Foo" size="15" class="bigName" readonly="readonly" /> <br /> <input type="text" name="theirUsername" value="bar" size="15" class="bigUsername" readonly="readonly" /> </td></tr></table> </div> <div id="divTopS" class="shaded"></div> <div id="divMid" class="midbox"> <!--some stuff here--> </div> <div id="divBot"class="unshaded"> <input type="submit" value="a button" /> </div> <div id="divBotS" class="shaded"> </div> </div> </form> </body> </html> 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 Good day! I have exhausted all of the people I could ask regarding this so I'm hoping I may get help here. This is the first website I've made and it's causing a lot of problems. http:// www . sycwin . com / index2 . html My issue is that my website is browser compatible with everything BUT IE. My problem is getting it to look the same on IE as it currently looks now on Firefox. I understand that there are java script solutions for div stacking problems, but for some reason those are causing no effects problems: 1. subinfo not positioning over mainwrapper and is instead STACKING on top of mainwrapper on IE 2. introduction not in position to the right of carousel/slideshow on IE 3. paints and wires divs are messed up in width, padding and margin on IE here's the css: Code: body {
color:#333333;
background-color: #f5f5ef;
background-image:url(images/bg.jpg);
background-repeat:repeat;
font-family:Arial, Helvetica, sans-serif;
line-height: 18px;
font-size:11px;
padding:0px;
margin:0px;
}
emphasis {
background-color:#e7d018;
}
strong {
color:#2b6934;
}
a:active, a:link, a:hover, a:visited {
border:none;
text-decoration:none;
}
img {
border:none;
}
/*MAIN SEGMENTS*/
#mainwrapper{
width:1000px;
margin:0 auto;
margin-top:-20px;
margin-bottom:-50px;
z-index:900;
overflow:hidden;
}
#contentwrapper {
width:1000px;
margin-bottom:-10px;
}
#header {
background-image:url(images/header.png);
background-repeat:no-repeat;
height:492px;
margin-top:-15px;
width:1000px;
float:none;
}
#footer {
width:1000px;
height:222px;
background-image:url(images/footer.png);
background-repeat:no-repeat;
background-position:bottom;
margin-top:-300px;
padding-top:-300px;
margin:0 auto;
}
/*SUBINFO*/
#subinfo {
width:220px;
position:relative;
top:0px;
right:35px;
float:right;
z-index:1000;
}
#blurb {
width:220px;
height:165px;
color:#FFFFFF;
background-image:url(images/blurb_01.png);
background-repeat:no-repeat;
text-align:center;
padding-top:380px;
padding-bottom:64px;
font-size:11px;
}
.call {
font-size:22px;
padding-top:20px;
font-weight:bold;
line-height:20px;
}
#contact {
width:220px;
background-image:url(images/blurb_02.png);
background-repeat:no-repeat;
font-size:14px;
line-height:20px;
text-align:center;
padding-top:5px;
}
#blurb strong {
color:#FFFFFF;
}
.blurbheader {
font-size:20px;
font-weight:bold;
}
.blurbsubtext {
font-size:14px;
font-weight:bold;
}
#credits {
text-align: center;
font-size:9px;
line-height:14px;
padding-top:80px;
}
/*CONTENT*/
#content {
width:700px;
background-image: url(content-bg.png);
background-repeat:repeat-y;
padding-right:250px;
margin-top:-240px;
padding-left:44px;
}
#slideshow {
width:460px;
padding-left:10px;
height:360px;
float:left;
padding-bottom:20px;
overflow:hidden;
}
#write-up {
width:210px;
height:360px;
padding:8px 0 20px 10px;
margin-left:470px;
}
#products {
width:680px;
padding-right:10px;
margin: 0 auto;
margin-top:20px;
}
#products td {
width:160px;
padding-bottom:5px;
text-align:center;
}
#products-wires {
width:660px;
margin: 0 auto;
margin-top:20px;
}
#products-wires td {
width:220px;
text-align:center;
}
.product-header {
font-family:Gotham, Helvetica, Arial, sans-serif;
text-align:left;
font-size:25px;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-2px;
line-height:14px;
}
#introduction {
width:680px;
font-size:11px;
line-height: 18px;
text-align:left;
overflow:hidden;
}
#paints{
margin-right:18px;
width:290px;
padding:20px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
float:left;
margin-bottom:20px;
}
#wires {
margin-left: 348px;
width:290px;
padding:20px;
margin-right:10px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
margin-bottom:20px;
}
.product-brand {
background-color:#314842;
color:#FFFFFF;
font-family:Gotham, Helvetica, Arial, sans-serif;
font-weight:bold;
text-transform:uppercase;
text-align:left;
letter-spacing:2px;
font-size:12px;
padding-left:5px;
}
/*ROLLOVER*/
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
text-align:center;
z-index:3;
}
#preview img{
width:300px;
height:300px;
}
/*CAROUSEL*/
#carousel ul {
list-style: none;
width:3600px;
margin: 0;
padding: 0;
position:relative;
padding-left:10px;
height:350px;
float:left;
padding-bottom:20px;
}
#carousel li {
display:inline;
float:left;
}
#carousel {
overflow:hidden;
I hope you guys could help me figure this one out. I'm absolutely clueless. Thank you for taking the time to read this. |
|||||||