[HTML] uitlijning IE FF verschilt drastisch - Softwareontwikkeling

zondag 23 april 2006 22:07

Acties:

Topicstarter

*zucht* was er maar 1 browser in de wereld. Heb een website gemaakt voor mijn moeder, gebruik daarvoor een oude site die ik al had gemaakt. Maar nu werkt hij perfect in Firefox alleen in IE staat de pagina zo ver naar rechts uitgelijnd dat hij er bijna volledig buiten valt. het stomme is dat die andere site dat niet doet, en ik dus niet snap waarom het is.

HTML:

<META NAME="author" CONTENT="Dave Hagenaars">

<META NAME="keywords" CONTENT="Punta-bella, punta, bella, schoonheidssalon, schoonheidsspecialiste, visagiste, hagenaars, helga">

<title>Punta-Prima</title>

<link rel="stylesheet" type="text/css" href="style.css" title="default">

</head>

<body>

<div class="header"><h1>Punta-Prima</h1></div>hallo

<div style="position: relative; top: 50px;"><div class="menu"><ul id="navlist">

<li><a href="index.php">Home</a></li>
<li><a href="fotos.php">Foto's</a></li>
<li><a href="locatie.php">Locatie</a></li>
<li><a href="waar.php">Voorzieningen</a></li>
<li><a href="prijslijst.php">Prijzen</a></li>

<li><a href="contact.php">Contact</a></li><br />
<li><a href="http://punta-bella.com">Punta-Bella.com</a></li></ul></div><div style="position: absolute; left: 20px; top: 150px; left: 190px; width: 600px; margin: 0px auto;">
<div><h3>Klik op de kamer die u wilt bezichtigen om er fotos van te bekijken.</h3><p><map name="FPMap0">
<area href="kamer1" shape="rect" coords="78, 240, 290, 432" title="Klik voor de woonkamer">
<area href="kamer2" shape="rect" coords="301, 374, 391, 433" title="Klik voor de bijkeuken">
<area href="kamer3" shape="rect" coords="294, 262, 390, 363" title="Klik voor de keuken">
<area href="kamer4" shape="polygon" coords="121, 2, 6, 1, 3, 438, 65, 436, 65, 229, 97, 229, 94, 119, 122, 118" title="Klik voor het balkon">
<area href="kamer5" shape="rect" coords="136, 10, 289, 122" title="Klik voor de grote slaapkamer">
<area href="kamer6" shape="rect" coords="107, 128, 244, 234" title="Klik voor de kleine slaapkamer">
<area href="kamer7" shape="polygon" coords="316, 14, 389, 13, 387, 121, 294, 120, 294, 90, 315, 89" title="Klik voor de grote badkamer">
<area href="kamer8" shape="rect" coords="291, 128, 389, 185" title="Klik voor de kleine badkamer">
</map>
[img]"images/plattegrond.png"[/img]</p>
</div></div>

</body>

de site is live te zien op http://maverick.dynasoft.nl/ma/final/fotos.php
Het is niet enkel deze pagina, alle werkede links in het menu zijn pagina's waarbij het is. Ik neem aan dat ik ergens iets verkloot met m'n divjes, maar als ik echt iets fout doedan zou dat in FF toch ook zichtbaar moeten worden?

PSN: DutchTrickle PVoutput

zondag 23 april 2006 22:17

Acties:

Sappie

De Parasitaire Capaciteit!

Je sluit sowieso niet al je div's (waarvan er bovendien enkele niet noodzakelijk zijn) netjes af, dus dat zou ik eerst maar eens oplossen. Naar alle waarschijnlijk los je daarmee ook het probleem op.

http://validator.w3.org/c...%2Fma%2Ffinal%2Ffotos.php

[ Voor 18% gewijzigd door Sappie op 23-04-2006 22:18 ]

Specs | Audioscrobbler

zondag 23 april 2006 22:19

Acties:

crisp

Devver

Pixelated

HTML:

1	<div style="position: absolute; left: 20px; top: 150px; left: 190px; width: 600px; margin: 0px auto;">

tsja, wat wil je nou? absolute positioning (af te raden als het niet noodzakelijk is), centreren, 20px vanaf de linkerkant of misschien toch 190px vanaf de linkerkant?
kortom: doe eens wat opruiming in je css. Probeer in eerste instantie alles zoveel mogelijk in de flow te houden, eventueel mbv wat floats en margins.

Intentionally left blank

zondag 23 april 2006 22:24

Acties:

Maverick

Topicstarter

ja, hebbes, ok, ik had idd nog een overbodig divje rondzwerven. het komt omdat ik m'n header en menu include bij m'n index, hierdoor had ik dat over het hoofd gezien. exuus voor de domme fout.
Waar ik wel nog last van heb, is dat bij de header in IE de achtergrond image niet helemaal tot het einde doorloopt maar wat eerder ophoudt terwijl de breedte van die div op 100% staat. Ik kan dat wel voorkomen door het X pixels te maken, breder dan het scherm, maar dan zit je weer met een schuifbalk onderaan.
is dat een bekend IE probleem? of zal ik het er mee moeten doen?

PSN: DutchTrickle PVoutput

zondag 23 april 2006 22:37

Acties:

Sappie

De Parasitaire Capaciteit!

Elke browser heeft bepaalde standaard marges voor de verschillende elementen. Deze marges kunnen tussen browsers onderling echter verschillen. Zo hanteert IE standaard een andere marge voor de body dan Firefox. Om dit te voorkomen zul je deze dus ff expliciet moeten setten (in jouw geval op 0).

[ Voor 3% gewijzigd door Sappie op 23-04-2006 22:39 ]

Specs | Audioscrobbler

zondag 23 april 2006 22:51

Acties:

Maverick

Topicstarter

Sappie schreef op zondag 23 april 2006 @ 22:37:
Elke browser heeft bepaalde standaard marges voor de verschillende elementen. Deze marges kunnen tussen browsers onderling echter verschillen. Zo hanteert IE standaard een andere marge voor de body dan Firefox. Om dit te voorkomen zul je deze dus ff expliciet moeten setten (in jouw geval op 0).

Ok, ik snap de strekking van je verhaal wel, maar waar exact moet ik die marge nu op nul zetten? (moet eerlijk bekennen dat ik lang geen html gedaan heb, en dus echt wat hulpbehoevend ben

)

PSN: DutchTrickle PVoutput

zondag 23 april 2006 23:01

Acties:

Sappie

De Parasitaire Capaciteit!

De margin van de body dus ff op nul zetten, zo dus:

Cascading Stylesheet:

1	body { margin: 0; }

edit:
verder wil ik nog ff benadrukken wat crisp ook al aangaf (mocht je dat gemist hebben

), namelijk dat het absoluut positioneren in jouw geval nergens voor nodig is.

[ Voor 49% gewijzigd door Sappie op 23-04-2006 23:03 ]

Specs | Audioscrobbler

zondag 23 april 2006 23:03

Acties:

Wolfboy

ubi dubium ibi libertas

Om dit soort problemen te voorkomen doe ik altijd *{ margin: 0px; } om zeker te weten dat alles waar ik niet specifiek om vraag gewoon geen margin heeft

Blog [Stackoverflow] [LinkedIn]

zondag 23 april 2006 23:20

Acties:

Maverick

Topicstarter

Sappie schreef op zondag 23 april 2006 @ 23:01:
De margin van de body dus ff op nul zetten, zo dus:
Cascading Stylesheet:
1
body { margin: 0; }
edit:
verder wil ik nog ff benadrukken wat crisp ook al aangaf (mocht je dat gemist hebben ), namelijk dat het absoluut positioneren in jouw geval nergens voor nodig is.

Ok bedankt.
Oh en over dat positioneren geef ik je gelijk, ik ben het nu wat meer relatief aan het doen, dat werkt idd wat fijner.

PSN: DutchTrickle PVoutput