Png and margin errors in IE6

HTML & CSS
1

Here is the page in question:


<!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>NORTH SHORE DRAMA</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
  <div id="head">
    <div align="center"><img src="images/logo2.png" width="188" height="131" alt="North Shore Drama" /></div>
  </div>
  <div id="nav">
    <ul class="menu">
      <li class="current"><a class="abou" href="#">ABOUT US</a></li>
      <li><a class="cour" href="#">COURSES</a></li>
      <li><a class="prod" href="#">PRODUCTIONS</a></li>
      <li><a class="priv" href="#">PRIVATE TUITION</a></li>
      <li><a class="loca" href="#">LOCATION</a></li>
      <li><a class="cont" href="#">CONTACT US</a></li>
    </ul>
  </div>
  <div id="content">
    <p>&nbsp;</p>
  </div>
  <div id="foot">
    <p align="center"><a href="#">ABOUT US</a>&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;<a href="#">COURSES</a>&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;<a href="#">PRODUCTIONS</a>&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;<a href="#">PRIVATE TUITION</a>&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;<a href="#">LOCATION</a>&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;<a href="#">CONTACT US</a></p>
  </div>
</div>
</body>
</html>

Everything works perfect in current versions of IE, Firefox, and Safari. BUT… How can I fix the .png files transparency when they load in IE6. And the top navigation menu’s margin is also messed up in IE6. Can someone please help me please???

Here is the css:


/* -------------------- MAIN LAYOUT STYLES -------------------- */

* {
	margin: 0px;
	padding: 0px;
}
body {
	background: #000 url(images/back.jpg) no-repeat fixed center top;
}
#wrapper {
	margin: 135px auto 15px;
	width: 900px;
}

/* -------------------- HEADER STYLES -------------------- */

#head {
	height: 145px;
	background: url(images/swirls.png) no-repeat 0px bottom;
}
#head img {
	padding-top: 10px;
}

/* -------------------- NAVIGATION STYLES -------------------- */

#nav {
	background: url(images/nav_bar.png) no-repeat;
	height: 46px;
}
.menu {
	float: left;
	list-style: none;
	margin-top: 15px;
	margin-left: 20px
}
.menu li {
	float: left;
}
.menu a {
	float: left;
	margin-right: 34px;
	display: block;
	text-indent: -4000px;
}
.menu a.abou {
	background: url(images/abou.png) no-repeat 0px -36px;
	height: 27px;
	width: 96px;
}
.menu a.abou:hover {
	background: url(images/abou.png) no-repeat 0px 0px;
}
.menu li.current a.abou {
	background: url(images/abou.png) no-repeat 0px 0px;
	cursor: default;
}
.menu a.cour {
	background: url(images/cour.png) no-repeat 0px -36px;
	height: 27px;
	width: 87px;
}
.menu a.cour:hover {
	background: url(images/cour.png) no-repeat 0px 0px;
}
.menu li.current a.cour {
	background: url(images/cour.png) no-repeat 0px 0px;
	cursor: default;
}
.menu a.prod {
	background: url(images/prod.png) no-repeat 0px -36px;
	height: 27px;
	width: 134px;
}
.menu a.prod:hover {
	background: url(images/prod.png) no-repeat 0px 0px;
}
.menu li.current a.prod {
	background: url(images/prod.png) no-repeat 0px 0px;
	cursor: default;
}
.menu a.priv {
	background: url(images/priv.png) no-repeat 0px -36px;
	height: 27px;
	width: 153px;
}
.menu a.priv:hover {
	background: url(images/priv.png) no-repeat 0px 0px;
}
.menu li.current a.priv {
	background: url(images/priv.png) no-repeat 0px 0px;
	cursor: default;
}
.menu a.loca {
	background: url(images/loca.png) no-repeat 0px -36px;
	height: 27px;
	width: 103px;
}
.menu a.loca:hover {
	background: url(images/loca.png) no-repeat 0px 0px;
}
.menu li.current a.loca {
	background: url(images/loca.png) no-repeat 0px 0px;
	cursor: default;
}
.menu a.cont {
	margin-right: 0px;
	background: url(images/cont.png) no-repeat 0px -36px;
	height: 27px;
	width: 119px;
}
.menu a.cont:hover {
	background: url(images/cont.png) no-repeat 0px 0px;
}
.menu li.current a.cont {
	background: url(images/cont.png) no-repeat 0px 0px;
	cursor: default;
}

/* -------------------- CONTENT STYLES -------------------- */

#content {
	background: #d6d6d6;
}

/* -------------------- FOOTER STYLES -------------------- */

#foot {
	background: url(images/footer.png) no-repeat;
}
#foot p  {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	padding-top: 3px;
	padding-bottom: 3px;
}
#foot p a  {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000;
	text-decoration: none;
	font-weight: bold;
}
#foot p a:hover {
	text-decoration: underline;
}

THANKS

2

Hi,

There’s a few caveats that you need to know about with PNG’s and IE6. The first is … background-images don’t work. By that I mean that the way background images normally behave can’t be replicated in IE6 - positioning of background images, repeat
etc. just don’t work. The reason being that it’s not really a background in ie6 anymore but behaves more like a normal img tag where the background would appear when using the filter.

There have been efforts to make this work - but I haven’t found a foolproof solution. It’s probably best to rethink how this works so you don’t need to position on the y -36px:


background: url(images/cour.png) no-repeat 0px -36px;

I can’t actually see the images because the site isn’t live. If you wanted to zip up the site and send the files to me I could give you some pointers on the best way to setup the images.

Not really related to your question there’s also a lot of duplication in your css you can lose if you combine the selectors. e.g.


.menu a.abou:hover, .menu li.current a.abou {
    background-position:  0px 0px;
    cursor: default;
}

I might need the images to see what’s happening in IE6 with the margin also.

All the best,

3

The reason the PNGs are screwed up in IE6 is because IE6 doesn’t have support for alpha transparency in PNGs. You can get around this by feeding IE6 gifs’ (they have 1bit transparency apposed to PNGs 256) or you can use a pngfix such as twinhelix
http://www.twinhelix.com/css/iepngfix/

4

here is a simple code about CSS margin

<html>
<body>
In this forum you will
see there is some space (though a very little amount)
all around. But there is no space whenever you
will disply this html code inside your browser.
<blockquote>

But there will be some spaces all around this
blockquote. Both left, right, top, bottom side.

</blockquote>
You are recommended to join and discuss your problems there
</body>
</html>

If you run above html code, you will see all around of blockquote text there is space. But don’t have control how much space will be all around. In CSS, this space is called “margins” and margins are controlled by four properties, margin-left, margin-right, margin-top and margin-bottom. We can minimize space around blockquote by following css code,

blockquote {
margin-top: 1em;
margin-right: 0em;
margin-bottom: 1em;
margin-left: 0em;
}

For more information you can visit here CSS Margin

5

I think he understand margins considering he uses them variously in his code above :).

I don’t have the page to look at, but this coujld be the OPs trouble margin area

.menu {
    float: left;
    list-style: none;
    margin-top: 15px;
    margin-left: 20px
}

Adding display:inline; there could solve whatever problem he has (though from his description this is probably it :slight_smile:

Then again he hasn’t logged in since he posted the thread so…