|
CSS - Issue With Stacking Order In Ie.
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? Similar TutorialsOk 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;
}
The 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>
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. Were in the middle of re-writing our tools and alowing our users (who put our tools in their website) much more controll over the css of the page. One of the things were touting is that the user can change the order of the fields in the forms to suit what ever is more important to them. While this may work well positionally , the tab orders are all f'd up. Is there any way to set these in CSS?.. All of the inputs and labels are each in their own divs with a unique ID. I'm thinking this isn't possible but I thought id ask I'm having trouble with the CSS on this page: http://www.mediamogulsweb.com/... You'll notice that in IE the CSS drop down menu is partially hidden by the center graphic on the page...In FF, this is not a problem.... I'm almost entirely sure that this is a z-index issue, but I've checked the z-index, and everything seems fine....the drop down menu elements have a higher z-index than the center graphic elements, yet it still doesn;t work in IE... Any ideas why? Thanks. Hi So I am setting up a portfolio website and I have been focusing mainly on the highslide portion which I got working great (with this forums help, thank you!). Now I have gotten rid of all the tables and garbage like that and am trying to make the images the backgrounds so they will be locked but now the image links spill out of the column and don't line up anymore. this is what it SHOULD look like: http://kdpatton.com/index01.htm but this is what does look like: http://kdpatton.com/portfolio02.htm I can't figure out why. Any help would be great. Love this forum! is there a specific order in which to put the css selectors in a style sheet, eg a:link a:hover a:active a:visited my problem is that the hover state isn't activated for links i have already visited. thank you Thanks for taking the time to read my question. Just wondering. Does the order of appearance of items in a CSS file impact how a page is displayed? I'm trying to make a page, and it works in IE, but not in Firefox. Thanks, Brad I am trying to get the footer DIV to appear directly below the content div on the page. Cant get it to work. CSS and DIV code is below if anyone can offer some advice? Thanks. Code:
#page_footer {
background-color: #ff0000;
width: 729px;
height: 30px;
position:relative;
bottom: 0px;
left: 35px;
font-family: arial, tahoma, times new roman;
font-size: 11px;
font-weight: normal;
color: #5A5A5A;
}
<!-- // MANDATORY PAGE CONTENT HOLDER // -->
<div id="page_content_holder_sizing">
<div id="page_content_section_name"><?=str_replace("::", "-", $page_title)?></div>
<div id="page_content_top_stroke"><img src="/site_images/pre_load/spacer.gif" width="729" height="4"></div>
<div id="page_content_bottom_stroke"><img src="/site_images/pre_load/spacer.gif" width="729" height="4"></div>
<!-- // CONTENT TEMPLATE // -->
<!-- // END CONTENT TEMPLATE // -->
</div>
<!-- // MANDATORY PAGE FOOTER // -->
<div id="page_footer">
footer goes here
</div>
<!-- // END MANDATORY PAGE FOOTER // -->
<!-- // END MANDATORY PAGE CONTENT HOLDER // -->
WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE? w w w. jaywayproductions . c o m/portfolio/work_history.html It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated! Hello there I cannot get the following css to give me a reverse order on navigation items floatet right. Can anyone help please? .nav-container { background:#40391d;} #nav {width:950px; margin:0; padding:0px; background:#7f7a60; } #nav li { position:relative; float: right; border-left: 1px solid #fff;} #nav a {padding:5px 12px 6px 12px; color:#fff; font-weight:bold; background: #7f7a60; border: 1px solid #7f7a60; } #nav a:hover {color: #000; background: #fff4c0;} Hello everyone, I am currently trying to find a solution in css that would allow me to alter the design of the following html structu Code: <body> <div id="header"> Website Title Here </div> <!-- header --> <div id="content"> <div id="article"> Article goes in here </div> <!-- article --> <div id="menu"> Menu goes in here </div> <!-- menu --> </div> <!-- content --> </body> What I want to do is keep that structure intact so that when someone visits the page from a text browser or something else that does not support css, the article appears before the menu. But I want the menu to appear before the article when someone has css enabled (not to the left or right of the article, but above it altogether). I tried using the "position: absolute; top: 0; left: 0;" tag on #menu, and while it does move the menu right under the header, it doesn't bump the article under the menu, it leaves them both overlaying each other. The first solution that comes to mind would be to add the same css tags to #article and move it down by the height of the menu, but the problem is that the menu will always vary in height. Is there a way to make the article align itself with the bottom of the menu div without using fixed values? Thanks! Jerome In what order are CSS/html files loaded? Concurrently? What about browser rendering? Must all CSS be loaded before any html is rendered? Also aside from serverside compression / css whitespace (file) compression, removing redundant classes, and using relative paths, is there any other ways to speed loading of CSS? Would it be of benefit splitting my css file into smaller chunk files - would they all load concurrently and therefore faster? Does anyone have a good solution for forcing the cache of css files, but not the html calling the css? Thanks in advance! Ross Hi again! I'm concerned with a warning I keep receiving in the validator. I have a short page which is translated to 20+ western european languages. I need them all to display right so I used UTF-8 right? Using NOTEPAD - I took the english version and replaced the text with (for example Finnish). Then when i wanted to save it Notepad warned me to save it as unicode or I lose all the specific letters. I did save as UTF-8, but then I get this message when validating. (though I pass validation) "Byte-Order Mark found in UTF-8 File. The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported." What can I do ? Thanks I'm working on a Shopping Cart, and when I go to view_cart.php to view the shopping cart within the browser, everything is great Quote: Item Name Qty Price However, when I click the Order button, the order gets emailed, and it's not correct. For example, there's an item named Money Paddle. In the email, it shows like: Quote: Money Pa! ddle The item that gets messed up, is the item after an item that takes up 2 lines. (The item that shows up on 2 lines, is: The Vanishing Box- Make small objects disappear...) So, the items will show up as: Quote: Silk Shoes 1 x $19.99 The Vanishing Box- Make small objects 2 x $9.99 disappear... Mega Bal! l & Vase 1 x $4.99 Amazing Magic Set 1 x $4.44 I checked the database to verify there are no special characters or anything, and it all seems fine. So not sure what I'm missing to have it display correctly, but here's the code to email the message: PHP Code: $recipient = "orders@domain.com"; $subject = "Order"; $mailheaders = 'From: <mailing@domain.com>'."\r\n"; $mailheaders .= 'Reply-To: mailing@domain.com'."\r\n"; $mailheaders .= 'Return-Path: <mailing@domain.com>'."\r\n"; $mailheaders .= 'Content-type: text/html; charset="ISO-8859-1"'."\r\n"; $sent = mail($recipient, $subject, $display, $mailheaders); I have tried several times, and it always shows up the same way in the email only. The browser is fine when displaying the cart. I'm assuming, it may have to do with the php code itself, as this only happens with the item after the 2 liner (regardless of the next item) PHP Code: $sql_view = "SELECT `id`, `user_string`, `item_code`, `quantity` FROM `cart` WHERE user_string = '$user_string'"; $result_view = mysql_query($sql_view, $conn) or die(mysql_error()); if (mysql_num_rows($result_view) > 0) { $subtotal == 0; $display .= "<div style=\"width:250px; float:left;\">Item Name</div><div style=\"width:50px; float:left;\">Qty</div><div style=\"width:100px; float:left;\">Price</div><br />"; $display .= "<div style=\"clear:both;\"> </div>"; while($row = mysql_fetch_array($result_view)) { $id = $row['id']; $item_code = $row['item_code']; $quantity = $row['quantity']; $sql_item = "SELECT `item_name`, `msrp`, `image` FROM `products` WHERE item_code = '$item_code'"; $result_item = mysql_query($sql_item, $conn) or die(mysql_error()); while($row = mysql_fetch_array($result_item)) { $item_name = $row['item_name']; $msrp = $row['msrp']; $image = $row['image']; $subtotal = ($quantity * $msrp) + $subtotal; $display .= "<div style=\"width:250px; float:left;\">" .$item_name . "</div><div style=\"width:50px; float:left;\">" . $quantity . " x </div><div style=\"width:100px; float:left;\">$" . $msrp . "</div>"; $display .= "<div style=\"clear:both;\"></div>"; } } $display .= "<div style=\"width:340px; text-align:right; padding-right:10px; padding-top:10px; border-top:1px solid black;\">$".$subtotal."</div>"; } $recipient = "orders@domain.com"; $subject = "Order"; $mailheaders = 'From: <mailing@domain.com>'."\r\n"; $mailheaders .= 'Reply-To: mailing@domain.com'."\r\n"; $mailheaders .= 'Return-Path: <mailing@domain.com>'."\r\n"; $mailheaders .= 'Content-type: text/html; charset="ISO-8859-1"'."\r\n"; $sent = mail($recipient, $subject, $display, $mailheaders); if ($sent) { // $sql_delete = "DELETE FROM `cart` WHERE `user_string` = '$user_string'"; // $result_delete = mysql_query($sql_delete, $conn) or die(mysql_error()); header("Location:view_cart.php?error=no"); exit; } else { header("Location:view_cart.php?error=yes"); exit; } (I know I have inline CSS right now... will correctly place them in CSS file or whatnot after I get things working properly.) Thanks for any help. If you need further info, let me know. (If this belongs in PHP, move it accordingly.) Hi, I'm curious as to whether anybody knows of any in which to preload a specific - or all of them - background image that's set in CSS. For example, I might have several background images in place as borders or graphics: Code: background: #333333 url(display_bg1.jpg) no-repeat center 30px;
}
{
background: #000000 url(display_bg2.jpg) no-repeat center 30px;
}
{
background: #999999 url(display_bg3.jpg) no-repeat center 30px;
How, perhaps using javascript or php, would I force "display_bg3.jpg" to load before any other image? Thanks, DB |
|||||||