CSS Forum

**jim.thornton** · 03:35 AM

Hey There,

I've been working on a template for a new site. I have it the way I want it in FF and IE is giving me some trouble. It's probably something quite simple for you folks, so I'm hoping that maybe you could shed some light on it. I've been working on it for hours now!

I've attached two screen shots, firefox and IE6. I'm not worried about the background on the images and they are transparent PNG's and I know how to fix them, I just haven't yet. My main problem is the two big servers and how the z-index doesn't seem to be working for IE. Also... The <p> tags seem to be off in IE too. I have a placeholder to wrap correctly around the servers.

Any help is greatly appreciated!!!

Here is the CSS:

Code:

<style type="text/css">
/* black background: #191919 --> body background */
/* grey background:  #414141 --> content area    */
/* dark grey:		 #222222 --> menu item tab   */
/* grey font:		 #7b7b7b --> content font    */
/* headings:         #ffffff --> h1-h6 tags      */
/* orange:           #fb8300 --> orange font     */
/* green:            #aac312 --> green font      */
/* blue:             #2f8ab3 --> blue font       */


body {
	 background-color: #191919;
	 font-size: 76%;
	 color: #7b7b7b;
	 font-family: helvetica, verdana, arial;
}

h1, h2, h3, h4, h5, h6, .contentheading {
     font-family: helvetica, verdana, arial;
	 color: white;
}

h1, .contentheading { font-size: 1.6em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.3em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1.1em; }
     
#container {
     width: 780px;
	 margin: 0 auto;
}  

#menus {
     width: 100%;
	 padding: 0;
	 margin: 0;
}

#menus ul.mainmenu {
     float: left;
     width: 75%;
	 height: 3.2em;
	 margin: 0;
	 padding: 0;
	 list-style: none;
	 font: normal 1.7em "itc officina sans std book";
	 color: white;
	 text-align: center;
}

#menus ul.mainmenu li {
	 position: relative;
	 float: left;
     margin: 0 0 0 1%;
	 padding: 0;
	 width: 19%;
	 background: #191919 url(images/menuitem-top.gif) repeat-x top;
}

#menus ul.mainmenu li a {
     color: white;
	 text-decoration: none;
	 display: block;
	 padding: 1em 0 1em 0;
}

#menus ul.mainmenu li a:visited {
     color: white;
}

#menus ul.mainmenu li a:hover {
	 padding: .6em 0 1.4em 0;
	 background-image: url(images/bg-orange2.png);
	 background-repeat: repeat-x;
	 background-position: top;
}

#menus ul.usermenu {
     float: right;
     width: 25%;
	 height: 3.2em;
	 margin: 0;
	 padding: 0;
	 list-style: none;
	 font: normal 1em Verdana;
	 color: orange;
	 text-align: center;
}

#menus ul.usermenu li {
	 position: relative;
	 float: right;
     margin: 0;
	 width: 33.3%;
	 background: #191919 url(images/link-home.gif) no-repeat top center;
}

#menus ul.usermenu li a {
	 text-decoration: none;
	 display: block;
	 padding: 2.4em 0 1.8em 0;
}

#menus ul.usermenu li a.orange { color: #fb8300; }
#menus ul.usermenu li a.green { color: #aac312; }
#menus ul.usermenu li a.blue { color: #2f8ab3; }
#menus ul.usermenu li a.orange:visited { color: #fb8300; }
#menus ul.usermenu li a.green:visited { color: #aac312; }
#menus ul.usermenu li a.blue:visited { color: #2f8ab3; }

#logo {
     width: 395px;
	 height: 130px;
	 margin: 10px;
	 float: left;
}

#bigservers {
	 clear: both;
	 position: relative;
     width: 100%;
     min-height: 323px;
	 background: transparent url(images/img-servers.png) no-repeat top right;
	 z-index: 5;
}

#placeholder-servers {
     float: right;
	 position: relative;
	 width: 315px;
	 height: 330px;
}

#contentarea {
     position: relative;
	 top: 8px;
	 width: 100%;
	 background: #414141 url(images/bg-content.gif) repeat-x top left; 
     min-height: 323px;
	 z-index: -5;
}

#contentarea div.margin {
     width: 96%;
	 margin-left: auto;
	 margin-right: auto;
}

#contentarea p {
	 text-align: justify;
	 width: 100%;
}

#customarea {
     width: 100%;
	 height: 300px;
	 background-color: #191919;
	 clear: both;
	 padding-top: .8%;
}

.moduletable-orange {
     width: 32.8%;
	 float: left;
	 height: 300px;
	 background: #fb8300 url(images/bg-orange.gif) repeat-x top left;
}

.moduletable-green {
     width: 32.8%;
	 float: left;
	 height: 300px;
	 margin-left: .8%;
	 margin-right: auto;
	 background: #aac312 url(images/bg-green.gif) repeat-x top left;
}

.moduletable-blue {
     width: 32.8%;
	 float: left;
	 height: 300px;
	 margin-left: .8%;
	 margin-right: auto;
	 background: #2f8ab3 url(images/bg-blue.gif) repeat-x top left;
}

.burst {
     background: transparent url(images/burst.gif) no-repeat bottom left;
	 height: 300px;
	 width: 100%;
}

#footer {
     
}
</style>

Here is the HTML:

Code:

<body>
	  <div id="container">
	  	   <div id="menus">
		       <ul class="mainmenu">
			   	   <li><a href="#">Hosting</a></li>
				   <li><a href="#">Plans</a></li>
				   <li><a href="#">Support</a></li>
				   <li><a href="#">Contacts</a></li>
			   </ul>
			   <ul class="usermenu">
				   <li><a href="#" class="blue">Site Map</a></li>
				   <li><a href="#" class="green">Login</a></li>
			       <li><a href="#" class="orange">Home</a></li>
			   </ul>
		   </div>
		   <div id="bigservers">
		      <div id="contentarea">
		        <div class="margin">
					 <img src="http://www.webmaster-talk.com/images/logo.png" width="395" height="130" border="0" id="logo" alt="" />
					 <div id="placeholder-servers"></div>
		        	 <div id="maincontent">
				  	 	  <h1>Welcome to Example.com</h1>
				  		  <p>Here is some content. Here is some content. Here is some content. Here is some content. Here is some content. Here is some content. Here is some content. Here is some content. Here is some content. Here is some content. Here is some content. Here is some content. Here is some content. Here is some content. Here is some content. </p>
					 </div>
					 
				</div>
				
				<div id="customarea">
				     <div class="moduletable-orange">
					 <div class="burst"></div>
					 </div>
				     <div class="moduletable-green">
					 </div>
				     <div class="moduletable-blue">
					 </div>
				</div>
			  </div>
			</div>
	  </div>
</body>

**LadynRed** · 02-10-2008, 12:08 PM

You have to give IE a defined height, it does NOT understand min/max height or width. Use conditional comments to target IE6 and a separate css file with the 'fix' rules in it.

**jim.thornton** · 02-10-2008, 04:53 PM

I've never tried using any of the hacks as I thought that it was kind of bad form.. Isn't it? If not, would you mind sharing an example of how to do what you suggest?

**LadynRed** · 02-10-2008, 10:54 PM

I'm not talking about hacks, feeding IE a fixed width via conditional comments is the only way to make it behave. Using 'hacks' in a single CSS file is asking for trouble, and what I"m talking about aren't really hacks, they are valid rules that fix certain problems with IE.

The fact is, we're stuck with that hag of a browser for a while yet, so you have to beat it into submission by feeding it the necessary rules. Defining a height is not a hack.

This is how conditional comments work:
http://www.thinkvitamin.com/features...op-css-hacking

**jim.thornton** · 02-11-2008, 12:26 AM

Thanks... I got the servers on top, and I just changed the CSS to a specified height instead of min-height.

But... My pngfix didn't work. Well... It did, but only on the logo. Can anyone please tell me how to pngfix the background images as well, the fix I have is a .js file that is applied to IMG tags only??

**LadynRed** · 02-12-2008, 03:52 PM

PNGFIX won't work on background images, unfortunately.

**jim.thornton** · 11:12 PM

Is there some fix that I can apply for the background images?? Otherwise, what format would you suggest to have background images that have an opacity.

In the screenshot that I have attached, you will see the three colored boxes. The background gradient is stretched. The star burst in another DIV and the server is in another DIV. I think it seems sloppy. How would you recommend doing it?

HTML:

Code:

			<div id="customarea">
				     <div class="moduletable-orange">
					 	  <div class="price">
						  <div class="serverbox">
						  <div class="boxcontent">
					      <p>Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. </p>
					      <p>Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. </p>
						  </div></div></div>
					 </div>
				     <div class="moduletable-green">
					 	  <div class="price">
						  <div class="serverbox">
						  <div class="boxcontent">
					      <p>Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. </p>
					      <p>Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. </p>
						  </div></div></div>
					 </div>
				     <div class="moduletable-blue">
					 	  <div class="price">
						  <div class="serverbox">
						  <div class="boxcontent">
					      <p>Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. </p>
					      <p>Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. Here it is. </p>
						  </div></div></div>
					 </div>
				</div>

CSS:

Code:

.moduletable-orange {
     width: 32.7%;
	 float: left;
	 background: #fc8a00 url(images/bg-orange.gif) repeat-x top left;
}

.moduletable-green {
     width: 32.7%;
	 float: left;
	 margin-left: .8%;
	 background: #acc512 url(images/bg-green.gif) repeat-x top left;
}

.moduletable-blue {
     width: 32.7%;
	 float: left;
	 margin-left: .8%;
	 background: #308cb5 url(images/bg-blue.gif) repeat-x top left;
}

.price {
     background: transparent url(images/burst.png) no-repeat bottom left;
	 width: 100%;
}

.serverbox {
     background: transparent url(images/img-serverbox.png) no-repeat bottom right;
	 width: 100%;
}

.boxcontent {
     width: 94%;
	 margin: 3% 3%;
	 z-index: 5;
}