Verschil plek plaatje IE en Firefox wie kan me helpen?

Status
Niet open voor verdere reacties.

mlies01

Nieuwe gebruiker
Lid geworden
17 sep 2009
Berichten
2
*opgelost!* Verschil plek plaatje IE en Firefox wie kan me helpen?

Hoi
Ik heb een vraagje over mijn site
www.marlieswinnips.nl/index01.asp

Mijn foto staat goed in firefox maar voor IE moet ik een heel stuk naar beneden scrollen...
Ook verplaatst mijn menu.
En om een of andere onduidelijke reden schuiven de tekstblokken van de submenus 40px naar rechts in IE

de index01.asp ziet er als volgt uit:

... eerst stuk headerinfo zal ik jullie besparen ...
<body>
<center>

<!--#include file="hmenu.asp"-->
<!--#include file="vmenu.asp"-->

<img src="images/marlieswinnips.jpg" alt="ixelf" />

<!--#include file="copyright.asp"-->
<!--#include file="footer.asp"-->

<!-- dit hieronder doe ik om de site langer te maken zodat dropdown uit footer niet de pagina verschuift -->
<br>
<br>
<span style="display:none; " >dit stukje tekst zie je niet op je scherm </span>
<br>
<br>
</center>

</body>
</html>


Moet ik soms een vaste plek neerzetten voor die foto?? En voor de header?

Wie kan me helpen?

De CSS van de header heb ik hieronder gezet:

body /* Internet Explorer */
{
text-align: center;
}

body /* Mozilla Firefox alignment */
{
text-align: -moz-center;
}


.topmenu{
font: bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
background: transpa;
width: 800px;
/* display:inline; zodat ie in ie ook goed getoond wordt... geprobeerd maar helpt nix */
}

.topmenu ul{
margin: 0;
list-style-type: none;
}

/*Top level list items*/
.topmenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.topmenu ul li a{
/* om een of andere onduidelijke reden schuiven de tekstblokken 40 naar rechts dit herstellen */
/* left: -40px; /* bij firefox nodig niet bij IE zonder dit staat ie goed in IE*/
display: block;
width: 124px; /*width of sub menus*/
background: transpa;
color: black;
text-decoration: none;
text-align:-moz-left;
text-align:left;
}

* html .topmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.topmenu ul li a:link, .topmenu ul li a:visited{
color: black;
float: left;
}

.topmenu ul li a:hover{
background: transpa; /*tab link background during hover state*/
color: #cc3399;
}


.topmenu ul li ul{
position: absolute; /*1st sub level menu position is vast, bij relative schuift hele scherm mee*/
/* left: 0; */
margin: 0;
display: block;
visibility: hidden; /* zodat ie over mijn foto heengaat ook in ie */
}

/*Sub level menu list items (undo style from Top level List Items)*/
.topmenu ul li ul li{
display: list-item;
/* left: -40px; /* bij firefox nodig niet bij IE */
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.topmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.topmenu ul li ul li a{
}

.topmenu ul li ul li a:hover{ /*sub menus hover style*/
background: transpa;
color: #cc3399;
}
 
Laatst bewerkt:
Begin al eens met dit in de head te zetten inplaats van in de body
Code:
<link rel="stylesheet" type="text/css" href="fotomenustyle.css" />
	<link rel="stylesheet" type="text/css" href="hmenustyle.css" />
<style type="text/css">
<!--[if lte IE 7]>
<style type="text/css">
html .topmenu{height: 1%;} /*Holly Hack for IE7 and below*/
<![endif]-->
</style>
<!--  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>  -->

<script type="text/javascript" src="jquery.min.js"></script>  
<script type="text/javascript" src="hmenu.js"></script>    <!-- hierin wordt myslidemenu aangemaakt -->
En waarom gebruik je 4 stylsheeds ? Je kan dat toch gewoon in 1 stylsheet onderbrengen
suc6
Mvg
Defietser
 
Laatst bewerkt:
Hoi Marlies,
Een mooie strakke site in aanbouw!
Nu nog mooie strakke html en css... ;)

Met je huidige pagina (hij is al weer iets veranderd, zag ik) zijn verschillende dingen aan de hand. Ik denk dat je een heleboel dingen tegelijk wilt doen, en dat daardoor een kopieer- en plak-mix is ontstaan die niet helemaal jofel is. Behalve x-dubbele aanroep van stylesheets (wat op zich geen kwaad kan, als ze maar allemaal in de <head> zitten) zijn er meer stevige merkwaardigheden.

Ik zie twee keer het woord <head> met daarachter de <title> en een riedeltje <meta>'s en <link>'s. Eén <head> begint op regel 5, en die eindigt met </head> op regel 52. Dan komt op regel 54 de <body>.
Maar pal daarachteraan begint op regel 57 de hele pagina opnieuw met <!DOCTYPE..><html><head> en weer de <title> en een riedeltje <meta>'s en <link>'s en nu twee javascripts. En nog een keer een <body> op regel 123.

Hé! Wat zien ik?! Op regel 223 eindigt deze body met </html> (het einde van de pagina, dus). Maar dat wordt op de voet gevolgd, ook nog in regel 223, met ... opnieuw de <!DOCtype...> regel, weer een nieuwe <head> en <body> met alles er op en er aan.

En dan, niet schrikken, op regel 361 ... / en op regel 440 ... je raadt het al! Je hebt een vijfkoppig en vijflijvig wonder gecreëerd! ;) Een wonder: want er komt iets op het scherm! :D
- Als je er een paar schrapt wordt de pagina al een stuk overzichtelijker.

Je gebruikt het DOC-type "XHTML 1.0 Transitional", maar zeker bij een verse site wordt sterk aanbevolen om "XHTML 1.0 Strict" te gebruiken. Dat is zuiverder, en geeft de minste kans op verschillen tussen browsers.

Er staan op verschillende punten Mozilla-specifieke css-regels, bv. {text-align: -moz-center;}. Dat hoef helemaal niet, want Firefox houdt zich prima aan de standaard-css: {text-align: center;}. Als er ergens iets mis gaat, is dat in 99,9% van de gevallen de schuld van Internet Explorer, en dan moeten dáár eventueel listen, trucs en hacks voor verzonnen worden. Niet voor Firefox en andere browsers die het goed doen!

Ik zie regelmatig <center> voorbijkomen. Maar <center> is afgekeurd ("deprecated") als html-tag. Dat was het al bij html-versie 4.0, en we zitten nu al jaren op html-4.1. Browsers hoeven geen rekening te houden met afgekeurde codes! En er komt bij: afgekeurde codes zijn foute codes, en er zijn geen waterdichte voorschriften voor hoe browsers moeten omgaan met foute codes. Elke browser houdt er zijn eigen "foutafhandeling" op na, en die verschilt dan ook regelmatig. Dat geeft dus ook verschillen op het scherm!
Oplossing: om iets te centreren kan altijd CSS gebruikt worden.

Er staat ook een paar keer <table>. Maar dan zonder de volgende <tr>'s (voor Table Rows, de rijen van de tabel), en <td>'s (de tabelcellen). Dan werkt het niet.
Oplossing: geen tabellen gebruiken, maar css. Dat is veel flexibeler: je kan er beter mee uit de voeten dan met een tabelstructuur.

In de css zag ik ook wat foutjes langskomen.
Een {background-color: transpa;} bestaat niet, dat moet {background-color: transparent;} zijn. De {color: darkgrey;} bestaat niet, wel {color: darkgray;} , d.w.z. {color: #A9A9A9;}. - De Engelsen en de Amerikanen hebben hun taalstrijd doorgevoerd tot in de html! Grey > gray; ook: colour > color, enz.

De * html hack voor Internet Explorer is achterhaald wegens nieuwere versies van IE. Beter kunnen z.g. "conditional comments" gebruikt worden, als iets speciaal voor IE (of een bepaalde IE-versie) anders moet dan voor de rest.
Er staat een html-tag </style> midden in het styles.css stylesheet.
  • ... Toen heb ik de pagina maar eens door de css-validator gehaald. De resultaten ... nu moet ik zachtjes fluisteren: kijk zelf maar.
    smiley-st.gif
Waarschijnlijk heeft je html-editor alle css-regels gegenereerd voor .style10, .style11, .style12, enz. Maar dan heeft die je meteen een kool gestoofd. Alle lettergrootes zijn in pixels gedefinieerd. Dat gaat goed in Internet Explorer (d.w.z. die heeft de afwijking dat surfers niets aan een zo ingestelde lettergrootte kunnen veranderen).
Maar het gaat vaak fout in Firefox e.a. browsers die zich aan de spelregels houden: de gebruikers moeten zelf de letters kunnen aanpassen tot de door hen gewenste lettergrootte. Anders kunnen sommige mensen een site helemaal niet lezen!
Het gevolg van een vaste pixelmaat is regelmatig, dat bij vergroting van de letters (in FF enz.) de hele layout van de pagina in elkaar stort... :shocked:
Oplossing: een relatieve maat voor de lettergrootte hanteren: % of em (1 em = 100%), en een flexible layout toepassen.

Dan de navigatie: ik snap dat je graag je bezoekers op verschillende manieren door je site heen wilt laten reizen, maar in de versie van dit moment is het vrij verwarrend. Veel te veel menu's! En sommige hebben submenus, die hetzelfde zijn als een ander hoofdmenu.
  • Kruisverwijzingen kunnen erg nuttig zijn, maar die horen niet in de menus: die kunnen beter als links op een pagina zelf staan.
En wist je dat er nu zevenenzeventig (77!) interne links naar andere pagina's op je huidige pagina staan? Dat vinden met name zoekrobots (Google) niet leuk, want die denken dat hier iemand aan het link-spammen is! En daar weten ze wel raad mee: onderaan de zoekresultaten! :mad:

Als ik de menustructuur tot me laat doordringen, zijn er op de keper beschouwd eigenlijk alleen de items van het horizontale foto-menu (die elk een submenu hebben), plus de menu-items NIEUWS en INFO (elk met een submenu) en de items Algemene Voorwaarden en Disclaimer (solo-items).
Als mensen met die items goed uit de voeten kunnen, kunnen ze overal komen. Hoe?
Als de AV en de Disclaimer netjes onderaan elke pagina blijven staan, moet er op de homepage alleen nog een plekje gevonden worden voor NIEUWS en INFO.
Dat plekje zou bv. heel goed rechts bovenin kunnen zijn, dan hou je mooi veel centrum-ruimte over voor de tekst van de homepage (en op vervolgpagina's voor wat ik vermoedt dat er aan een foto-wisselaar gaat komen).
- Een kale homepage met alleen een menu kan heel mooi en artistiek verantwoord zijn (ik weet niet of dat je bedoeling was), maar als je goed gevonden wilt worden door zoekmachines, moet je juist inhoudelijke tekst met goede trefwoorden op je homepage opnemen.

Afijn, wat een verhaal. ;)
Nu eens kijken wat je wèl zou willen. Ik denk: al het bovenstaande vermijden, en er een mooie pagina van bakken. Dan is er nog wel wat werk te doen. :)

Maar ik dacht ook even hardop verder: bijvoorbeeld bij het foto-menu zouden de onderschriften er gecentreerd onder moeten staan. En als de letters vergroot worden, moeten de onderschriften in twee regels nog steeds onder de foto staan waar ze bij horen. En als de foto's en de onderschriften telkens samen in één link zitten, dan verandert de tekstkleur óók als je over een foto muist.
Het is gebruikelijk dat je door op een logo te klikken naar de homepage gaat, en het is altijd aardig als de bezoeker wat feedback krijft als deze er over hovert.

Op die manier ben ik maar vast eens begonnen met hercoderen, volgens het procedé van de "Golden Rules Of CSS".
  • Daarmee heb ik deze basisopzet gemaakt, nog zonder de uitklap-menu's: eerst alle andere dingen in orde hebben!
    Alle css zit voor het gemak in de head, dat kan later losgekoppeld worden tot een zelfstandig stylesheet. In de broncode staat wat verklaring en gebruiksaanwijzing voor de gebruikte css.
De pagina is valid html en valid css, en doet het in elk geval in IE6, IE7, IE8, FF3, FF3.5 en Opera9, Safari en Chrome. :)

Veel suc6 bij de verbouwing!
CSShunter

PS-1
The MOTB heb ik naar rechts gespiegeld: dan kijkt hij met de lezer mee, in plaats van naar links buiten het scherm (dáár moeten de bezoekers niet zijn! ;) ).

PS-2
Je huidige pagina heeft in het fotomenu geschaalde originele fotobestanden ter waarde van samen bijna 1MB. Ik heb ze verkleind in een fotoprogramma: (1) daarmee worden ze een stuk beter van kwaliteit dan als de browser ze verkleint, en (2) dan zijn alle gebruikte images samen maar 170kB, dat scheelt enorm in de snelheid van de pagina.

PS-3
In je voorlopige pagina index.html zou ik er even van maken:
<p><img alt="Me" src="images/f-eye.jpg" width="100%"></p>
Dan is de hele foto op volle breedte zichtbaar bij elke resolutie (en valt het tel.nr. er ook niet van af bij kleinere beeldschermen dan hele grote).

[edit]De Quickscan van het Kwaliteitsmodel Webrichtlijnen vindt 'm ook wel aardig (vooral als een extern stylesheet gebruikt wordt).[/edit]
 
Laatst bewerkt:
Wauw

Je hebt me super geholpen met al je tips! :thumb::thumb::thumb::thumb::thumb:
Ik kan weer helemaal verder en ben van t verschuiven af!

groetjes
Marlies
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan