IE en FF probleem met overlap - Softwareontwikkeling

zaterdag 28 juni 2008 22:25

Acties:

Topicstarter

Hoi,

ik probeer onderaan in een header waarin ook een logo (transparant gif) staat, een navigatiebalk met een andere achtergrondkleur te krijgen. Hierbij moet het plaatje overlappen over de div van de navigatiebalk. In firefox gaat het goed. Maar in IE komt de achtergrondkleur van de balk over het plaatje heen.
Op www.splice.nl/test/test3.html staat de pagina.

Ik heb al gezocht op Google, maar weet niet precies waarop ik zou moeten zoeken. Ik krijg nu steeds resultaten die mij nog niet verder hebben geholpen.

Dit is de pagina in HTML:

<!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>
<style type="text/css">

</style>
</head>

<body>
<div id="container">
<div id="header">
<img src="test.gif"/>
<div id="navBar">
<a href="nogo">TEST</a> </div>
</div>
</div>
</body>
</html>

zaterdag 28 juni 2008 23:49

Acties:

Mad Marty

Je bent slimmer als je denkt!

Ik weet niet zeker waarom in IE die div over je plaatje heen gaat, maar een aparte div voor het plaatje met een z-index zou moeten lukken denk ik. Neemt niet weg dat het een beetje een lelijke oplossing is

Trouwens, voor html-code kun je gewoon de code=html tags gebruiken:

code:

[code=html]
<html>
<head>Bladiebla</head>
<body>Bladiebla</body>
</html>
[/code]

Rail Away!

zaterdag 28 juni 2008 23:58

Acties:

ione

Topicstarter

Mad Marty schreef op zaterdag 28 juni 2008 @ 23:49:
Ik weet niet zeker waarom in IE die div over je plaatje heen gaat, maar een aparte div voor het plaatje met een z-index zou moeten lukken denk ik. Neemt niet weg dat het een beetje een lelijke oplossing is

Trouwens, voor html-code kun je gewoon de code=html tags gebruiken:
code:
1
2
3
4
5
6
[code=html]
<html>
<head>Bladiebla</head>
<body>Bladiebla</body>
</html>
[/code]

Met Z-index heb ik ook al geprobeerd. Ik had dan een extra div-je om het plaatje gezet en hier z-index =2 aangegeven. De navbar had ik op z-index 1 gezet. Maar dat heeft ook niet geholpen.....

zondag 29 juni 2008 00:03

Acties:

crisp

Devver

Pixelated

z-index werkt ook alleen op positioned elements. Dit werkt prima:

Cascading Stylesheet:

#header img {
    display: block;
    width: 293px;
    height: 200px;
    position: relative;
    z-index: 10
}

maar is dit plaatje niet puur stylistisch bedoelt en hoort dat dan geen background-image in CSS te zijn?

Intentionally left blank

zondag 29 juni 2008 00:08

Acties:

Bosmonster

*zucht*

Ik zie niks in je css dat erop wijst dat je expliciet wil dat dat plaatje eroverheen valt. Je margin-top -20px geeft een onbetrouwbaar resultaat. Ik weet niet of FF het nu goed heeft of IE. (door het gebrek aan z-index zou ik zeggen dat IE het goed heeft. Het latere element heeft een hogere z-index.)

Een achtergrond lijkt mij hier ook een stuk gepaster en handiger (en veiliger).

[ Voor 60% gewijzigd door Bosmonster op 29-06-2008 00:11 ]

zondag 29 juni 2008 00:13

Acties:

ione

Topicstarter

crisp schreef op zondag 29 juni 2008 @ 00:03:
z-index werkt ook alleen op positioned elements. Dit werkt prima:
Cascading Stylesheet:
1
2
3
4
5
6
7
#header img {
    display: block;
    width: 293px;
    height: 200px;
    position: relative;
    z-index: 10
}
maar is dit plaatje niet puur stylistisch bedoelt en hoort dat dan geen background-image in CSS te zijn?

Dit werkt wel! Alleen nu ben ik weer op een ander spoor gebracht door het achtergrond-verhaal.....

Ik zou dan het plaatje als achtergrond moeten zetten in de header? Dan heb ik die margin van -20 niet meet nodig? Ik zie even niet 123 waarom het veiliger werkt (noob...).
Maar als het er het zelfde uit zal zien en het veiliger/beter is, dan wil ik daar wel voor gaan.

zondag 29 juni 2008 00:19

Acties:

Bosmonster

*zucht*

Met 'veiliger' bedoelde ik meer dat het op alle browsers een zeker resultaat geeft. Ook op de andere dan FF/IE7, zoals IE6, Safari, Opera etc.

zondag 29 juni 2008 00:26

Acties:

ione

Topicstarter

Bosmonster schreef op zondag 29 juni 2008 @ 00:19:
Met 'veiliger' bedoelde ik meer dat het op alle browsers een zeker resultaat geeft. Ook op de andere dan FF/IE7, zoals IE6, Safari, Opera etc.

Ik zie ongeveer wat je bedoelt. Ben nu wat aan het klooien en in FF is het stabieler dan in IE.
Hmmm, dan maar het plaatje als background gaan proberen. Krijg ik dan wel hetzelfde effect van de overlap??

woensdag 2 juli 2008 18:09

Acties:

ione

Topicstarter

Kom er toch niet helemaal uit. Ik heb het plaatje nu als achtergrond gedaan. ook met de z-index zitten spelen, maar nog niet het gewenste resultaat (het onderste stuk van het achtergrond plaatje moet over de zwarte balk vallen).

kan iemand mij nog even de juiste richting op sturen?