Layout niet goed in IE6 en IE7
Link: h t t p : / / 1 7 8 . 2 1 . 1 9 . 2 0 / ~ t r a s s u r a n t /
(spatie i.v.m. zoekmachines)
Bvd, Roy
Gewijzigd op 09/11/2010 20:05:28 door Roy -
Komt er gelijk een vraag bij, waarom moet elke img ook een alt hebben?
CSS2 layoutverschillen komt niet door de browser zelf maar door de verschillende standaard stylesheets die browsers gebruiken!
Quote:
"One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling."
(Bron: http://www.fortysomething.ca/mt/etc/archives/006555.php
(Bron: http://www.fortysomething.ca/mt/etc/archives/006555.php
Dus google een goede master stylesheet en include die boven je eigen css op je pagina. Je pagina ziet er nu exact hetzelfde uit in de verschillende browsers. Je zult wel je huidige CSS hier op moeten aanpassen uiteraard!
Ik zal morgen eens kijken naar een master stylesheet. Ik hoop dat dit de oplossing is.
Dit doe ik altijd ;)
Helaas helpt dit niet.
De oplossing van Joey Schipper gaat zeker gebruikt worden, jammer genoeg kom ik niet achter de fouten/problemen waardoor de site raar doet in IE6 en 7. Wat kan ervoor zorgen dat het daar niet werkt?
Voeg dit toe aan #menu2
_margin-top: -3px;
overflow: hidden;
Dingen die je laat floaten zoals #menu moet je even display: inline; bijzetten.
Je zult ook even op zoek moeten naar een png fix, want dat gaat zo niet werken in IE6.
Advies opgevolgd om bij een float ook display: inline; neer te zetten, hier komt geen zichtbare verandering van.
Wat gaat er fout waardoor de pagina's rechts onder het menu komen en niet rechts naast het menu?
Voeg dit toe aan #menu2
_margin-top: -3px;
overflow: hidden;
Vergeet de underscore niet!!!
Toevoeging op 10/11/2010 20:03:05:
Zeg en waarom dat iframe????
Ik zou geen iframes gebruiken hoor.
Toevoeging op 10/11/2010 20:33:05:
Quote:
Wat gaat er fout waardoor de pagina's rechts onder het menu komen en niet rechts naast het menu?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#menu ul li a {
padding-left: 5px;
padding-bottom: 5px;
padding-top: 5px;
_height: 15px;
display:block;
padding-right: 165px;
}
#content {
width: 691px;
_width: 680px;
height: 700px;
background: url(../img/content.png) no-repeat;
margin-left: 250px;
padding-left: 66px;
padding-top: 23px;
}
padding-left: 5px;
padding-bottom: 5px;
padding-top: 5px;
_height: 15px;
display:block;
padding-right: 165px;
}
#content {
width: 691px;
_width: 680px;
height: 700px;
background: url(../img/content.png) no-repeat;
margin-left: 250px;
padding-left: 66px;
padding-top: 23px;
}
Waarom een iframe? Er komt straks een CMS achter, wanneer er wat grote tekst pagina's in komen komt er dan netjes een scrollbar rechts op de "pagina". Wat is hier anders voor te gebruiken?
Waarom die underscore ervoor? Overal waar je dit toepast werkt het juist niet met underscore en wel zonder.
Met de volgende toevoegen werkt het naar behoren:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
#menu2:
margin-top: -3px;
#container:
background-position: top center;
#content:
width: 680px;
margin-top: -3px;
#container:
background-position: top center;
#content:
width: 680px;
Waar zijn de rest van de toevoegingen goed voor, ik zie hier geen verschil bij..
Code (php)
1
2
3
4
5
2
3
4
5
#menu2:
overflow: hidden;
#menu ul li a:
_height: 15px;
overflow: hidden;
#menu ul li a:
_height: 15px;
TOEVOEGING: Ik heb IE6 inmiddels uitgesloten, men krijgt bovenaan de pagina een mededeling dat ze maar eens moeten updaten..
Gewijzigd op 10/11/2010 21:19:26 door Roy -
De width van de content heb je nu voor alle browsers gewijzigd. Dat is niet nodig.
Ik kan geen IE7 testen, als dat dezelfde problemen geeft moet je ipv een underscore een punt gebruiken.
Als ik test in IE 6 zie ik in het menu de knoppen veel verder uit elkaar staan. Vandaar de height die je meegeeft voor IE6 (met underscore)
Website werkt goed in, verder niet getest:
Google Chrome
Mozilla Firefox
Internet Explorer 8
Internet Explorer 7 (Internet Explorer 8 met compatibiliteitsweergave aan)
In Internet Explorer 6 werkt het niet helemaal top, gelukkig wordt dit heel weinig gebruikt en krijgt men netjes een melding dat ze eens moeten updaten.
Ik wil een ieder hartelijk bedanken voor de hulp! Voornamelijk omdat ik weer een stukje wijzer ben geworden. Nogmaals, bedankt!
Gewijzigd op 10/11/2010 21:42:32 door Roy -
Roy D op 10/11/2010 21:41:46:
Nooit geweten van de punten en komma's, maar dit is niet css valid. Hier maak ik me verder ook niet druk om, Google is niet eens valid.
Als je maar zorgt dat je (X)HTML valid is. Die hacks zijn nu eenmaal nodig om het werkend te krijgen.
Als je CSS valid wil hebben moet je werken met additional comments, zoals al eerder hier vermeld in dit topic. Ik vind het echter onzin om voor een paar van die kleine wijzigingen een hele nieuwe css te schrijven.