PDA

View Full Version : background image overlap



phusio
Jan 14th, 2009, 07:08 PM
Hello all, first post on this helpfu forum. I have a small problem with a background-image in a ul li navigation bar on the top of my site. I want it to stick out over the border of the div thats surrounding it. In firefox it works nice, but in IE it will hide itself behind the div itself. the background image is the tooth on the top bar. In firefox it looks perfect, but IE will hide the part that needs to stick out.

This is how it looks in Firefox as it should (http://i42.tinypic.com/2ik8rjd.png)

And this is what IE is showing Click (http://i40.tinypic.com/20jrbza.png)

I need some help for this, i dont know what i can do to fix it. Or if i have to use some different coding.


Here's my index.html



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE> Tand </TITLE>
<META NAME="Author" CONTENT="phusio">
<META NAME="Keywords" CONTENT="Tand ">
<META NAME="Description" CONTENT="Tand">
<link rel="stylesheet" type="text/css" href="1style.css">



<!--[if lte IE 6]>

<style type="text/css">
/* ie png hack */
/* special thanks to Christopher Walker (http://tibetanportal.com/)
for his contribution */


#container { background-image: none ; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/bg2.png', sizingMethod=scale); }
#block_1 { background-image: none ; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/bg2.png', sizingMethod=scale); }
#block_2_1 { background-image: none ; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/bg2.png', sizingMethod=scale); }
#k_head { background-image: none ; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/bg3.png', sizingMethod=scale); }
</style>

<![endif]-->

<style type="text/css">
<!--
.style10 { font-size: x-small;
font-style: italic;
}
.style2 {color: #FFFFFF; font-size: medium; font-weight: bold; }
.style3 {color: #000000; font-size: large; font-weight: bold; }
.style6 {
font-size: small;
color: #000000;
}
.style7 {color: #000000; font-size: small; font-weight: bold; }
.style12 {color: #000000; font-size: medium; font-weight: bold; }
.style14 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; onmouseover="underline";}
.style15 {
color: #666666;
font-style: italic;
}
.style16 {
color: #999999;
font-style: italic;
}
.style17 {color: #666666}
-->
</style>
</HEAD>

<BODY>


<div id="head"></div>

<div class="bovenkop"><div id="pipe">


<ul>


<li class="first"><a href="index.html"><span>Home</span></a></li>
<li><a href="Ons team.html"><span>Ons Team</span></a></li>
<li><a href="Praktijk.html"><span>Praktijk</span></a></li>
<li><a href="Behandelingen.html"><span>Behandelingen</span></a></li>
<li><a href="Nieuws.html"><span>Nieuws</span></a></li>
<li><a href="Vacature.html"><span>Vacature</span></a></li>
<li><a href="Contact.html"><span>Contact</span></a></li>
<li><a href="Over Haps.html"><span>Over Haps</span></a></li>
<li><a href="Links.html"><span>Links</span></a></li>

</ul>
</div></div>

<div id="container">

<div id="wrapper">



<div id="block_1">




<div id="k_head"><em>Tijden</em></div>

<div id="klein_text_l">


</div>

<div class="style15" id="k_head">Language</div>

<div id="klein_text_l">
<center>
<img src="images/engeland.png" alt="english" width="30" height="20"><br>
<p class="style17"> Click here for English</P

></center>


</div>

<div class="style16" id="k_head">Info</div>

<div id="klein_text_l"><center>
<p class="style17">Per direct gezocht:</p>
<p class="style17">*M<strong>ondhygi&euml;nist</strong>e</p>
<p class="style17">*Tandarts assistente</p>
<p class="style17">*Stoel assistente<br />
(geen opleiding vereist)</p>
<p><span class="style17"><a href="vacature.html" target="_parent"><img src="images/personeel-gezocht.png" alt="personeel gezocht" width="165" height="150" border="0" align="bottom" /></a></span><a href="vacature.html" target="_parent"></a></p></center>
</div>
</div>
<div id="block_2">

<div id="block_2_1">
<p align="left" class="style3">Welkom bij:<br />
</p>
</div>
</div>
</div>
</BODY>
</HTML>

Heres my CSS:



body
{
height:100%;
background-image: url(images/bg.jpg);
background-repeat: repeat;
}
html
{ height: 100%; }

A:Link{text-decoration: none;color: #000000;}
A:visited {text-decoration: none;color: #000000;}

#head
{
background: url('logo.png');
padding:0px;
height:150px;
width:1000px;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
}

#h-contain {
padding: 5px;
border: 1px solid #000;
margin-bottom: 25px;
}


#container
{
background: url('images/bgc3.png');
width:1000px;
margin-left:auto;
margin-right:auto;
border: 1px solid black;
}


#pipe ul {
margin-left: 0;
padding-left: 0;
display: inline;
}

#pipe ul li {
margin-left: 0;
padding-left:46px;
padding-bottom: 10px;
list-style: none;
display: inline;
background-image:url('images/bgbg21.png'); background-repeat: no-repeat;
}


div.bovenkop ul li a:hover{ color: #000000; text-decoration:underline; }


#pipe ul li.first {
margin-left: 0;
border-left: none;
list-style: none;
display: inline;
}


.bovenkop
{
background-color: #ffffff;

width:1000px;
margin-left:auto;
margin-right:auto;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}


#block_1
{
float: left;
width: 175px;
}
* html #block_1
{
display: inline;
}
#block_2
{
margin: 5px 5px 5px 5px;
float: right;
width: 600px;
height: 100%;
font-family: verdana;
font-size:12px;
}
/* Start Mac IE5 filter \*/
#block_1, #block_2
{
#padding-bottom: 32767px !important;
#margin-bottom: -32767px !important;
}
/* End Mac IE5 filter */
#wrapper
{
width: 800px;
overflow: hidden; /* This hides the excess padding in non-IE browsers */
}
/* we need this for IE 5.01 - otherwise the wrapper does not expand to the
necessary height (unless fixed, this problem becomes even more acute
weirdness as the method is enhanced */
#wrapper
{
/* Normally a Holly-style hack height: 1% would suffice but that causes
IE 5.01 to completely collapse the wrapper - instead we float it */
float: left;
/* NB. possibly only IE 5.01 needs to get this float value - otherwise 5.5 sometimes
(I saw it happen many moons ago) makes the width of wrapper too small
the float: none with the comment is ignored by 5.01,
5.5 and above see it and carry on about their business
It's probably fine to just remove it, but it's left here
just in case that many moons ago problem rears its head again */
float/**/: none;
}
/* easy clearing */
#wrapper:after
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrapper
{
display: inline-block;
}
/*\*/
#wrapper
{
display: block;
}
/* end easy clearing */
#footer
{
clear: both;
}
#header, #footer
{
width: 800px;
}
/* Safari needs this - otherwise the ghost overflow, though painted
correctly obscures links and form elements that by rights should be above it.
An unintended side-effect is that it cause such elements to vanish in IE 5.01
and 5.5, hence the child selector hack */
* > #footer, * > form, * > #notes, * > .output
{
position: relative;
z-index: 1000;
}


#klein_text_l
{
width:169px;
padding:3px;
padding-top:15px;
padding-bottom:15px;
color: #efefef;
font-weight:bold;
font-size:10px;
font-family: verdana;

}

#klein_text
{
width:169px;
padding:3px;
padding-top:15px;
padding-bottom:15px;
}


#k_head
{
background: url('images/bg32.png');
height:25px;
width:100%;
color: #2D2D2D;
font-weight:bold;
font-size:10px;
font-family: verdana;
text-align:center;
line-height:14pt;

}

/* Fix's #container not clearing inner floats in firefox */
.floatfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* Hides from IE-mac \*/
* html .floatfix {
height: 1%;
}
/* End hide from IE-mac */

jerry62704
Jan 14th, 2009, 08:57 PM
You can edit your post to add those code tags to the css so it won't be 95" long. I would also add the universal reset (* {margin:0;padding:0;border:0;}) to the top of it. Will look at the rest later.

phusio
Jan 14th, 2009, 11:16 PM
ok something did go wrong when adding code tags for the first time, ive edited it now. And about the reset , do i put that on the top of the css or index.html, ive never heard of it. thanks in advance.

Excavator
Jan 15th, 2009, 12:19 AM
ok something did go wrong when adding code tags for the first time, ive edited it now. And about the reset , do i put that on the top of the css or index.html, ive never heard of it. thanks in advance.

It's a line that goes in your CSS but it's not going to fix your problem.
Since this is an image related question, it would be nice to have the images... a link to the live site would even be better.

phusio
Jan 15th, 2009, 03:44 PM
Ok i understand, here is the live website: Click Here (http://drift-it.nl/test/)

Excavator
Jan 15th, 2009, 05:41 PM
Good Morning phusio,
I had to rebuild your site locally to reproduce the problem and to show you how to fix it I put it on my own test server at

http://nopeople.com/phusio
If you like, you can download the markup and CSS in a zip at http://nopeople.com/phusio/files.zip

It's all valid except for some conditional CSS statements you have for mac browsers.
It works in IE6, IE7, IE8 and FF3. IE6 has some wierd thing going on with the background image for #content but that's probably a .png issue? Not sure.

Some things I changed:

Changed DocType
A new website has no need of a transitional doc.
Got rid of multiple uses of id's k_head and klein_text_l
Only allowed to use an id once per page.
do two classes at once like this: <div class="style15 k_head">language</div>
Had to add a </div> at the end to close #container
I always like to comment at each </div> so I know what it's closing. Really helps when you get a lot of content in later. Like this:
<p><span class="style17"><a href="vacature.html"><img src="images/personeel-gezocht.png" alt="personeel gezocht" width="165" height="150" /></a></span><a href="vacature.html"></a></p>
</div>
<!--end block_1--></div>
<div id="block_2">

<div id="block_2_1">

<p class="style3">welkom bij:<br />
</p>
</div>
<!--end block_2--></div>
<!--end wrapper--></div>
<!--end container--></div>
</body>
</html>


The part that fixed the teeth was adding some z-index. To do that you have to make the li positioned also, this is the bit that did it:

#container {
width:1000px;
margin: 0 auto;
border: 1px solid black;
background: url(images/bgc3.gif) repeat-y;
position: relative;
z-index: 0;
}
#pipe ul li {
padding: 0 0 10px 46px;
list-style: none;
display: inline;
position: relative;
background:url(images/bgbg21.png) no-repeat;
z-index: 1;
}

phusio
Jan 15th, 2009, 07:25 PM
Sweet ! Thanks for explaining and showing the result. Now i can go on with the rest of the site. Thanks a million :thumbsup: