Homepage ander uiterlijk in IE dan in firefox

[vanschagen]

Hallo,

IE geeft mijn homepage neer zoals hij moet zijn. Firefox daarentegen verandert mijn lay-out. In IE heb ik bijv. in onderdeel tuin en in onderdeel planten drie foto's naast elkaar staan. In firefox zet hij er maar 2 naast elkaar....

Zie http://home.quicknet.nl/qn/prive/mija

Kan ik iets veranderen waardoor hij in zowel IE als in firefox goed te bezichtigen is?

Alvast bedankt voor jullie reacties,

groeten van Jacqueline (de dochter van bertus)

 

[dnties]

Ik ben geen HTML expert, maar ik mis een </p> in je broncode van http://home.quicknet.nl/qn/prive/mija/tuin.html

Namelijk hier:

<p> In 2003 hebben we onze eerste exoten aangeschaft, voor bij de nieuw aangelegde vijver. Namelijk de Musa basjoo, Chamaerops Humilis,
een bamboe, Canna, Strelitizia, Oleanders en onze eerste siergember. In 2004 hebben we twee grote yucca's op stam gekregen. Door
deze twee grote planten begon het al wat te lijken (dachten we toen...). De aanleg van dit stukje van de tuin betekende voor ons beide meteen
een nieuwe hobby : Exotisch tuinieren!

Hier ontbreekt de </p> tag.

Het zou kunnen zijn dat je op die andere pagina('s) je ook enkele afsluitende tags vergeten bent.

Misschien helpt het wat,

Tijs.

 

[That Guy]

als je toevallig php script gebruikt, kan je via php bekijken welke browser de user gebruikt, en via dat gegeven de opmaak veranderen. Voor de rest sluit ik me bij Tijs aan.

@tijs, was </p> niet 'uit de mode' (overbodig) voor html 4.01?

Ohja, je kan hier ook kijken:
http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0
dat is jou site door de w3 validator heen gegooid. Als je toevoegd wat ze zeggen/vragen, helpt dat mischien

Voor de rest moet ik toevoegen dat het een vervelende klus blijft om websites voor meerdere browsers hetzelfde eruit te laten zien is.

Succes, V/:thumb:


[edit]

In de pagina tuinen zie ik dit als code:

<p> <strong> April-Juni-Augustus 2005 </strong> </p>
<p> <img alt="voorjaar'05" src="voorjaar'05.jpg" height="250" width="250" align="left" border="1" >
</p>
<p><img alt="vijverhoek" src="vijverhoek.jpg" height="250" width="250" align="left" border="1" >
</p>
<p> <img alt="zomer'05" src="zomer'05.jpg" height="250" width="250" align="left" border="1" >

Opzich niet gek, maar FireFox ziet <p> en </p> als verschillende 'regels' om het zo maar te zeggen. Ook de 'align=left' helpt niet mee. Je moet proberen wat te veranderen met je code - of er tabellen van maken.
[/edit]

 

[Poppoll]

U moet in de css de breedte van de hoofdtabel breder maken.
nu staat er width 725
Maar cel1 + cel2 + cel3 zijn samen 860
Firefox past de breedte van 725 strikt toe IE springt hier wat losjes mee om.
Vandaar... de verschillen.
Hou bij het bepalen van de tabel breedte ook rekening met boorden
Suc6
Poppoll

 

[vanschagen]

Breedte van de hoofdtabel nu aangepast....maar nog steeds maar 2 foto's naast elkaar.(in firefox) Op de plekken waar ik </p> mistte dit ook aangepast....maar nog geen verandering.....

In ieder geval alvast bedankt voor jullie reacties !

groeten van Jacqueline

 

[Poppoll]

De breedte van #hoofdtabel moet deze waarde krijgen width: 1022;
PP

 

[vanschagen]

Ik heb nu de width van de hoofdtabel veranderd naar 1022, op twee plaatsen, dus ook diegene waarvan u gister zei dat ie naar 860 moest en nu staat ie (vlgs mijn vader, ikzelf heb geen firefox) goed oftewel met drie foto's naast elkaar in firefox.
Ikzelf heb alleen IE, ik krijg nu op al mijn pagina's een scrolbalk onderaan, waarmee ik dus iets naar rechts moetgaan scrollen om mijn pagina te zien.....wat ik dus zelf weer minder vindt uiteraard....
Als ik de width iets kleiner maak, dan springt ie in firefox alweer naar 2 foto's ....
hhhmmm

Dank u voor de reacties,

groeten van Jacqueline

 

[That Guy]

je zou de scrollbars kunnen wegwerken, met css, zoiets:

<style>
body{
  overflow-x: hidden;
}
</style>

zoiets wat het geloof ik

 

[Poppoll]

Jacqueline,
Ik ben een paar uurtjes bezig geweest met gedeeltelijk herwerken van uw html en css
In bijlage het resultaat.
Pak de zip lokaal uit in uw site directory en open tuin_herbewerkt.html
Het .css bestand heb ik ook een andere naam gegeven. Dit omdat uw bestaand bestand niet zou overschreven worden.

#knop1 #knop2 enz heb ik vervangen door .knop
1. Omdat je een #knop maar éénmaal mag gebruiken (je gebruikt knop6 6x) niet goed dus.
vb CSS: #knop html: <div id="knop"> mag je maar éénmaal gebruiken.
CSS: .knop html: <div class="knop"> mag je meerdere keren gebruiken.
2. Omdat alle eigenschappen in de uw css dezelfde zijn voor knop1 knop2 knop3 enz.


PS Er zijn geen verschillen meer in IE en FF en ook geen horizontale scrollbar bij 1024x768

PP

 

[vanschagen]

Hoi Poppoll,

Dankjewel voor je antwoord en dat je er zoveel tijd in hebt gestoken!! :thumb: Ik ben er al mee bezig geweest, en dit helpt inderdaad!! Het is echter nog een heel werkje om alle pagina's aan te passen, dus voordat ik het upload zal het nog even duren.
Ik heb op dit moment nog een vraag: in de basis.css heb je dit neergezet : ".achtertuin {margin: 0 225px 0 225px;} "
In de tuin-pagina zie ik dit ook weer terug komen. Hoe moet ik dit in de andere pagina's terug laten komen?? En waar zorgt dit voor??

Alvast weer bedankt voor je antwoord,

Als ik verder ben met het bijwerken, dan zal ik hier weer even berichten.

groeten van Jacqueline

 

[Poppoll]

.achtertuin {margin: 0 225px 0 225px;} dient voor het plaatsen van de tekst bovenaan de pagina tussen de 2 foto's.
Je kan hier mee spelen om meer spatie te hebben tussen de foto's en de tekst.
verander bvb eens naar: .achtertuin {margin: 0 250px 0 250px;} en zie wat er met de tekst gebeurt.
Ik had evengoed ook deze css kunnen gebruiken:
.achtertuin{
margin-top: 0px;
margin-right: 225px;
margin-bottom: 0px;
margin-left: 225px;
als je zoals ik de verkorte aanduiding gebruikt is dit .achtertuin margin:{ te beginnen bij top vervolgens met het uurwerk mee, dus rechts onder en links.}

Als je op andere pagina's ook 2 foto's hebt met daartussen ook tekst geef je de <p> van die tekst een class="achtertuin" en de foto's een class="img-left" voor de linkerfoto en class="img-right" voor de rechterfoto.
PP