Opmaak verschillen tussen FF 2.0.0.1 en IE 7.0 oplossen - Softwareontwikkeling

zaterdag 6 januari 2007 14:45

Acties:

YARR!

Topicstarter

Hoi, ik heb voor mijn ouders een website gemaakt voor hun bedrijf. Ik gebruik de nieuwste versie van de 4.7 branch van Drupal (www.drupal.org). Dit is versie 4.7.5.

Dit is de link naar de site:

Tandheelkunde Zonnestraal

Met Firefox 2.0.0.1 ziet de site eruit zoals ik wil, echter met Internet Explorer 7.0 is het eerste woord van elke pagina één tab opgeschoven lijkt het.

zie dit plaatje:

klik

Ik zat al te denken aan de witregel die bij FF tussen de titel en de tekst zit. Deze ontbreekt bij IE.

Heeft iemand enig idee hoe ik dit oplos?

Of is dit simpelweg een verschil in het renderen van beide browsers dat niet zo even op te lossen is.

Zo heb ik bijvoorbeeld voor het logo (een transparante PNG) een fix gebruikt zodat deze ook goed gerenderd wordt in IE6, is er ook zo iets voor dit probleem?

zaterdag 6 januari 2007 14:55

Acties:

crisp

Devver

Pixelated

Vage bug; de padding van <span class="taxonomy"></span> lijkt door te werken in de <div class="content">
Het is op te lossen door voor die laatste layout te forceren dmv een width of height

Intentionally left blank

zaterdag 6 januari 2007 15:12

Acties:

weebl

YARR!

Topicstarter

crisp schreef op zaterdag 06 januari 2007 @ 14:55:
Vage bug; de padding van <span class="taxonomy"></span> lijkt door te werken in de <div class="content">
Het is op te lossen door voor die laatste layout te forceren dmv een width of height

Ok, maar dan wordt de width, of height statisch, terwijl deze eigenschappen op dit moment flexibel zijn. Oftewel, de site past zich aan aan het browservenster. Blijft dit dan wel nog zo? Of snap ik het nu niet?

In ieder geval bedankt voor de moeite van het opzoeken

zaterdag 6 januari 2007 15:17

Acties:

crisp

Devver

Pixelated

weebl schreef op zaterdag 06 januari 2007 @ 15:12:
[...]

Ok, maar dan wordt de width, of height statisch, terwijl deze eigenschappen op dit moment flexibel zijn. Oftewel, de site past zich aan aan het browservenster. Blijft dit dan wel nog zo? Of snap ik het nu niet?

In ieder geval bedankt voor de moeite van het opzoeken

Procenten gebruiken

Meestal gebruik ik een width:100% (wat meestal al impliciet zo is) of een height:1% wat in IE meestal ook geen negatieve bijwerkingen heeft. Je zou ook nog zoom:1 kunnen gebruiken om 'layout' te forceren (dat is een IE-eigen concept mbt rendering overigens).
Over het algemeen zet ik dergelijke quirk-arounds in een aparte stylesheet voor IE die ik mbv conditional comments inlaadt.

Intentionally left blank

zaterdag 6 januari 2007 15:29

Acties:

weebl

YARR!

Topicstarter

in de style.css van het thema (dat een aangepaste kopie is van het standaard thema) staat dit:

code:

1
2
3

#header, #content {
  width: 100%;
}

de class van de div die de problemen veroorzaakt is: 'content':

code:

1	<div class="content">

Ik heb in de stylesheet dit toegevoegd:

code:

1 2	height: 1%; zoom: 1;

aan de content class.
Dit maakt niks uit, de opmaak blijft hetzelfde.

Edit:

ik heb dit onderaan mijn style.css toegevoegd:

code:

<!--[if IE]>
#content {
  zoom: 1;
}
<![endif]-->

Is dit de juiste manier om css-code alleen voor IE te gebruiken? Of moet het (zoals jij aangeeft) in een aparte stylesheet?

[ Voor 26% gewijzigd door weebl op 06-01-2007 15:34 ]

zaterdag 6 januari 2007 15:38

Acties:

crisp

Devver

Pixelated

weebl schreef op zaterdag 06 januari 2007 @ 15:29:
in de style.css van het thema (dat een aangepaste kopie is van het standaard thema) staat dit:
code:
1
2
3
#header, #content {
  width: 100%;
}
de class van de div die de problemen veroorzaakt is: 'content':
code:
1
<div class="content">
Ik heb in de stylesheet dit toegevoegd:
code:
1
2
height: 1%;
zoom: 1;
aan de content class.
Dit maakt niks uit, de opmaak blijft hetzelfde.

een # is een ID selector en geen class selector, je moet een dot gebruiken:

Cascading Stylesheet:

1	.content { width: 100%; }

Edit:

ik heb dit onderaan mijn style.css toegevoegd:
code:
1
2
3
4
5

Is dit de juiste manier om css-code alleen voor IE te gebruiken? Of moet het (zoals jij aangeeft) in een aparte stylesheet?

CC's (conditional comments) kan je alleen in HTML gebruiken, niet in een externe stylesheet. Ik doe meestal dit in de <head>-sectie na de 'gewone' stylesheets:

HTML:

1
2
3

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie_fixes.css">
<![endif]-->

Intentionally left blank

zaterdag 6 januari 2007 15:40

Acties:

Verwijderd

In het menu zijn de blauwe woorden op de bruine achtergrond heel slecht leesbaar (ik heb een tft). En je begint al met een kanjer van een taalfout. Sinds kort wordt niet aan elkaar geschreven. Ik vindt het maar amateuristisch gepruts.

zaterdag 6 januari 2007 15:43

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op zaterdag 06 januari 2007 @ 15:40:
In het menu zijn de blauwe woorden op de bruine achtergrond heel slecht leesbaar (ik heb een tft). En je begint al met een kanjer van een taalfout. Sinds kort wordt niet aan elkaar geschreven. Ik vindt het maar amateuristisch gepruts.

Er wordt hier advies gevraagd over een technisch probleem, de topicstarter heeft voor zover ik weet niets gevraagd over de styling of over taalgebruik. Als je daar al een opmerking over wilt maken dan graag op een wat meer genuanceerde manier want op een opmerking als 'amateuristisch gepruts' zit niemand te wachten...

Intentionally left blank

zaterdag 6 januari 2007 15:44

Acties:

weebl

YARR!

Topicstarter

Verwijderd schreef op zaterdag 06 januari 2007 @ 15:40:
In het menu zijn de blauwe woorden op de bruine achtergrond heel slecht leesbaar (ik heb een tft). En je begint al met een kanjer van een taalfout. Sinds kort wordt niet aan elkaar geschreven. Ik vindt het maar amateuristisch gepruts.

Ten eerste; ik ga niet over de inhoud. Tis niet voor niets een CMS systeem, mijn ouders zijn hier verantwoordelijk voor. Ten tweede; dat is oranje, geen bruin, misschien moet je iets aan je monitor veranderen. Ten derde; ik vroeg hier niet om meningen over de kleurencombinaties en de inhoud van de website...

Toch bedankt voor je opbouwende kritiek

edit:

ok, ik heb het opgelost door dit te doen:

onderaan de style.css heb ik dit gezet:

code:

1
2
3

.content {
  zoom: 1;
}

Hierdoor is de opmaak in IE nagenoeg gelijk aan die van FF. Op wat witregel-groottes na. Dit is echter verwaarloosbaar.

Kan het op deze manier kwaad, of is het aan te raden toch een aparte stylesheet voor de IE-fixes te maken?

In ieder geval bedankt voor de hulp crisp

$_/-\o_$

[ Voor 23% gewijzigd door weebl op 06-01-2007 15:57 ]