[layout issue] Background verschil Mozilla - IE - Softwareontwikkeling

zaterdag 26 februari 2005 16:10

Acties:

Verwijderd

Topicstarter

Hi!

Zie hier een probleem welke ik nog niet eerder ben tegengekomen. Zelf bou ik al eeuwen sites en levert het, naast wat kleine issues, geen problemen op: in IE en Mozilla krijg ik het werkend. Echter, nu heb ik een probleem waarvan ik niet weet waar de oorzaak precies ligt...

Wat is het uitgangspunt?
Ik heb een site welke basically opgebouwd is uit een header, contentdiv en een footer. Het probleem zit 'm in die contentdiv. Die contentdiv heeft een background waarop ik een aantal divjes wil plaatsen, te weten een navigatiediv, een maincontentdiv en nog een eventuele rechternavigatie.

Wat is het probleem?
Wanneer ik een achtergrond in die contentdiv zet en daarop een aantal divjes plaats, laat mozilla die achtergrond niet zien. IE geeft het perfect weer.

IE:
Afbeeldingslocatie: http://masterd.mine.nu/ie_vs_mozilla/vb_ie.gif

Mozilla:

Zoals je ziet is de achtergrond totaal verdwenen.....

De pagina staat hier: http://masterd.mine.nu/ie_vs_mozilla/mozilla.php
Je kan 'm even checken in IE en Mozilla om de verschillen met eigen ogen te aanschouwen.

Wat heb ik al geprobeerd?
Ik heb een aantal zaken al geprobeerd. Zo heb ik geprobeerd de background-postion op 0px 0px te zetten (background-postion:0px 0px;) en geprobeerd de background-attachment op scroll te zetten. Beiden hadden geen effect.

Het rare is, dat wanneer ik die divjes weghaal uit het contentstuk, die achtergrond wél gewoon laadt in Mozilla: http://masterd.mine.nu/ie_vs_mozilla/mozilla_nodiv.php

En hier nog even de code die ik gebruik. Ik heb even alle css inline gezet, zodat het makkelijker is om te bekijken waar het aan zou kunnen liggen:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jankie</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body style="margin:0px; text-align:center; background-color:#E9DAA0;">

<div name="container" style="width:760px; margin:0px auto; overflow:hidden; text-align:left;">
    <div name="contentjankie" style="width:760px; background-image:url(i/content_back.jpg); background-repeat:repeat-y; text-align:left;background-position:top left;">
        <div name="menuutje" style="width:130px; margin-left:18px; float:left;">
        Bla <br/>
        Mekker <br/>
        Jankie <br/>
        Stront
        </div>
    </div>
</div>

</body>
</html>

[ Voor 8% gewijzigd door Verwijderd op 26-02-2005 16:11 ]

zaterdag 26 februari 2005 16:14

Acties:

crisp

Devver

Pixelated

Zet een element met clear:both na je float

Intentionally left blank

zaterdag 26 februari 2005 16:19

Acties:

A_L

Weet niet of het er mee te maken heeft, maar moet het niet <div id="bla" of <div class="bla" zijn ipv <div name="bla"

zaterdag 26 februari 2005 16:23

Acties:

Glashelder

Anti Android

Dat is alleen als er daadwerkelijk een style sheet wordt meegegeven en dat is hier niet het geval. De style-defenities staan gewoon in de tags. Tenzij dat bij de echte anders is...

maar ik zie nu een achtergrond opeens

[ Voor 23% gewijzigd door Glashelder op 26-02-2005 16:24 ]

PV 4915wp op oost, 2680 wp op west, 1900 wp op zuid. pvoutput - AUX 8 kW bi bloc

zaterdag 26 februari 2005 16:23

Acties:

Verwijderd

Topicstarter

crisp schreef op zaterdag 26 februari 2005 @ 16:14:
Zet een element met clear:both na je float

Dope, thx. Voor de toekomstige zoekers onder ons:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jankie</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body style="margin:0px; text-align:center; background-color:#E9DAA0;">

<div name="container" style="width:760px; margin:0px auto; overflow:hidden; text-align:left;">
    <div name="contentjankie" style="width:760px; background-image:url(i/content_back.jpg); background-repeat:repeat-y; text-align:left;background-position:top left;">
        <div name="menuutje" style="width:130px; margin-left:18px; float:left;">
        Bla <br/>
        Mekker <br/>
        Jankie <br/>
        Stront
        </div>
        <!-- oplossing --><div name="breaker" style="overflow:hidden; height:1px; clear:both"></div><!-- /oplossing -->
    </div>
</div>

</body>
</html>

Nog even een ander bijkomend vraagje, nu ik 'm zie:
Waarom is die margin-left:18px anders weergeven in mozilla dan in IE?

[ Voor 16% gewijzigd door Verwijderd op 26-02-2005 16:26 ]

zaterdag 26 februari 2005 16:26

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op zaterdag 26 februari 2005 @ 16:23:
[...]
Nog even een ander bijkomend vraagje, nu ik 'm zie:
Waarom is die margin-left:18px anders weergeven in mozilla dan in IE?

Dat is de bekende "double-margin" bug in IE; IE zal in dit geval een margin van 2x18 = 36px hanteren. Dat kan je oplossen door de floating div een "display:inline" te geven.

Vwb het gebruik van de name-attributes: een div heeft geen name attribuut. Als het voor het linken van styledefinities is gebruik dan ID (uniek) of class

Intentionally left blank

zaterdag 26 februari 2005 16:30

Acties:

Verwijderd

Topicstarter

crisp schreef op zaterdag 26 februari 2005 @ 16:26:
[...]

Vwb het gebruik van de name-attributes: een div heeft geen name attribuut. Als het voor het linken van styledefinities is gebruik dan ID (uniek) of class

Deze kwestie wist ik

Ik had voor het voorbeeld even name gebruikt, zodat lezers hier een beetje een idee hadden welke div welke functie heeft.

Thx voor de tips