Forum Moderators: not2easy
the 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/main.css" />
<script language="JavaScript" type="text/javascript" src="js/chrome.js"></script><!--[if gt ie 5]>
<style type="text/css">
.dropmenudiv { margin:3px 0px 0px -210px; }
html { height:100% }
body { min-height:101% }
body { overflow: -moz-scrollbars-vertical; }
#footer { margin: 0px;left: 160px;}}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper" ><!-- the header -->
<div id="header"><img id="main_03" src="images/main_03.png" width="765" height="88" alt="" /> </div>
<div id="chromemenu">
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu1')">Products</a></li>
<li><a href="#">Faq</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
<!-- Services drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<ul>
<li><a href="pineapple.html" >Pineapples</a></li>
<li><a href="banana.html" >Bananas</a></li>
<li><a href="mango.html" >Mangoes</a></li>
<li><a href="other.html" >Other Fruits</a></li>
</ul>
</div><!-- the flash banner -->
<div id="flash"> flash movie</div>
<div id="wholebody">
<!-- left of content -->
<div id="leftmenu">
<ul>
<li><img id="main_13" src="images/main_13.png" width="164" height="51" alt="" /> </li>
<li><a href="produce.html"><img src="images/main_18.png" alt="" width="164" height="45" border="0" id="main_18" /></a> </li>
<li><a href="faq.html"><img src="images/main_20.png" alt="" name="main_20" width="164" height="45" border="0" id="main_20" /></a> </li>
<li><a href="about.html"><img src="images/main_22.png" alt="" width="164" height="45" border="0" id="main_22" /></a> </li>
<li><a href="contact.html"><img src="images/main_25.png" alt="" width="164" height="45" border="0" id="main_25" /></a></li>
</ul>
</div><!-- center of content -->
<div id="centercontent"><img src="images/main_08.gif" width="430" height="301" /></div>
<!-- right of content -->
<div id="apDiv1"><div class="trivia"><p>trivia images</p></div></div></div>
<div id="footer"> <p class="footer_txt">footer text</p></div>
</div>
</body>
</html>
-----------------------------------------------
now this is the css
* {color: #666666;;padding-bottom: 0px;text-decoration: none;font-size: 12px;font-family: Arial, Helvetica, sans-serif;margin: 0px;}
body {background: #fff url(../images/bg.jpg) center top repeat-x; height:768px; }
#wrapper {background-image: url(../images/Untitled-1.png);position: relative;width: 855px;height: 768px;margin: auto;}
#header {width: 765px;height: 88px;margin-top:22px;margin-left:49px;}
#wholebody {width: 855px;padding-bottom:20px;height: 350px;}/* ============================= NAVIGATION ============================= */
#menu { width:750px; height:22px; background:url(../images/menu.jpg);
font-size:19px; padding-left:15px; line-height: 23px; margin-left: 49px;
}
#menu ul{margin:0;padding:0;list-style:none;}
#menu ul li{display:inline;margin-left:10px;margin-right:10px;font-size:10px;font-family:Arial, Helvetica, sans-serif;}
#menu ul li a{color:#666666;text-decoration:none;}#menu ul li a:hover{color:#ffffff;text-decoration:none;}/* ######### Style for Drop Down Menu ######### */
.dropmenudiv {position:absolute; margin:-20px 0px 0px -210px; border-bottom-width: 0;
z-index:100; visibility: hidden; color: #1F445F;font-size: 11px;font-family:Arial, Helvetica, sans-serif;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4);
filter:alpha(opacity=70);-moz-opacity: .70;opacity: .70;
}
.dropmenudiv ul { padding:0;margin:0;list-style:none;}
.dropmenudiv ul li{width:160px;height:20px;background: #e9a923;margin-bottom:1px;padding-top:1px;}
.dropmenudiv a{width: 100%;display: block;text-indent: 3px;text-decoration: none;color: #666666;}
.dropmenudiv a:hover{ /*Theme Change here*/
color: #666666; background-color:#F0F0F0; width:160px; height:20px; display: block;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4);
filter:alpha(opacity=70);-moz-opacity:.70;opacity:.70;
}/* ######### Style for flash banner ######### */
#flash{width:765px;height:222px;z-index: 1;position: relative;left: 49px;}/* ######### Style for left Content ######### */
#leftmenu {width:164px; height:auto; float:left; margin-top: 10px; position: relative;left: 36px;}
#leftmenu ul {margin:0;padding:0;list-style:none;}/* ######### Style for center Content ######### */
#centercontent {width:430px;height:auto;float:left;position: relative;z-index: 10;top: -20px;left: 36px;}/* ######### Style for right Content ######### */
#apDiv1 {width:162px;height:275px;float:left;padding-top: 22px;margin-top: 10px;left: 48px;position: relative;}
#apdiv1 .trivia p {font-size: 12px; font-family:Arial, Helvetica, sans-serif;
text-align:left;font-weight: normal;color:#655c5d;margin:10px 0}/* ######### Style for footer ######### */
#footer {clear: both;border: none;text-align: center;float: left;position: relative;left: 160px;padding: 0px;margin-top: 25px;}
[edited by: SuzyUK at 11:21 am (utc) on Mar. 13, 2008]
[edit reason] too much code, see guidelines at top of forum [/edit]
1. If you want your page to be exactly the same regardless of display resolution -- this is a serious, often overlooked issue -- you need to size and position everything in 'em'. This is very time consuming. In some cases -- Flash parameters come to mind -- this may mean that you need to write a routine that creates a test div in 'em' and then measure its .offsetHeight (in pixels but without the units) and then calculate a pxPerEm conversion constant and use that while positioning. I have done this (and more) but it took me months to work out all the details.
2. I have the best, simplest IE6 PNG fix around. I've seen a lot of crap on the net. Here's my crap <grin>:
<public:component>
<script type="text/javascript">
/* * * * * * * * * * * * * * * * * * * *
** A L P H A - I M A G E - L O A D E R
**
** USAGE EXAMPLE WITH IMAGE URL: myImage.png
**
** <img src='myImage.png' ailSrc='myImage.png' style="behavior:url('alphaImageLoader.htc')">
**
** (1) INSTALLS THIS BEHAVIOR VIA AN ON-PROPERTY-CHANGE HANDLER. THE HANDLER OVERLOADS src WITH ailSrc.
** (2) PROVOKES THE HANDLER INSTALLED IN (1). SWAPS IN A BLANK IMAGE NAMED 'pixel.gif' LOCATED IN THE
** SAME DIRECTORY AS myImage.png (WHICH CAN BE ANYWHERE).
*/
this.onpropertychange = function() { // (1)
if (event.propertyName == 'src')
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ this.ailSrc +"', sizingMethod='scale')";
}
this.src = (S = this.src.split('/')).slice(0, S.length - 1).join('/') +'/pixel.gif'; // (2)
</script>
</public:component>
[edited by: SuzyUK at 11:22 am (utc) on Mar. 13, 2008]
[edit reason] tidying [/edit]
Per the comment, the code above should be saved as alphaImageLoader.htc. The name is not religious.
If this code mystifies you, ask me and I'll explain how it works.
The 'em' work I've done did take months, but having paid those dues, I can now make complex, liquid sites in minutes.
.dropmenudiv { margin:3px 0px 0px -210px; }
html { height:100% }
body { min-height:101% }
body { overflow: -moz-scrollbars-vertical; }
#footer { margin: 0px;
left: 160px;
}
#wrapper { behavior: url(alphaImageLoader.htc); }
</style>
<![endif]-->
I also save your code and made a pixel.gif but nothing happens
does your code apply to background images?
here is the code of my css file the png I want to fix
#wrapper {
background-image: url(../images/Untitled-1.png);
position: relative;
width: 855px;
height: 768px;
margin: auto;
}
Comment about your code: You dumped your glob of code into this forum. Unless you make it 1, easily readable, and 2, limited and focused to a simple question that exposes something about which you need help, don't be surprised if no-one responds further. I can tell you that I'm not going to copy your code or CSS and then be faced with beautifying it. I don't have the time.
