Fouten in IE (niet in FF)

Door Olivier Peeters op 22-07-2012 20:42 gewijzigd op 23-07-2012 16:42

2.947 views

Hallo allen,

ik ben redelijk wat vragen beginnen posten afgelopen periode, maar ik ben dan ook een website aan het afwerken.

Dan heb ik heel wat CSS fouten eigenlijk. Mijn website wordt getest in FF, en mijn vriend test deze in IE.

IE geeft wat problemen, FF is oke....

Ter informatie, mijn document bevat een Meyer reset .
Alle problemen
Problemen 1 & 2
In internet explorer

In firefox

Wat valt op?
-> De bovenste box is groter in FF dan in IE. Er word bij berekening van de paddings in IE geen rekening gehouden met de image rechts..
CSS:
.header {
border: 1px solid #000000;
border-radius: 10px 10px 10px 10px;
padding: 20px;
margin: 20px;
}

-> In FF zijn de borders afgerond in IE nergens.
CSS:
.header, .start, .login, .gegevens, .gegevens-controle, .toevoegen, .contact, .footer {
border: 1px solid #000000;
border-radius: 10px 10px 10px 10px;
padding: 20px;
margin: 20px;
}

input {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #888888;
border-radius: 7px 7px 7px 7px;
color: #222222;
padding: 3px 4px;
}

Probleem 3
In internet explorer:

In firefox:

Wat valt op?
De datumborders lopen tot tegen de naastlopende kolom, dat zou normaal niet mogen.
CSS:
.select {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #888888;
border-radius: 7px 7px 7px 7px;
color: #222222;
padding: 3px 4px;
}

Ik denk dat dit het een beetje zal zijn voor deze keer, moest ik ineens nog fouten vinden dan meld ik het wel.

Ik dacht dat alle fouten hierboven normaal niet zouden mogen voorkomen, daarom dat ik even op jullie beroep doe. Alvast bedankt!

Vriendelijke groeten,
Olivier Peeters

Wouter J

22-07-2012 20:51

Je afbeelding lijkt niet juist te zijn. Tevens CSS errors in een browser? Dat kan niet, browsers geven (helaas) geen CSS errors.

Je eerste vraag:

[0-9]{2}+

{2} betekend de [0-9] 2x herhalen en de + betekend de [0-9] 1 of meer keer herhalen. Die spreken elkaar tegen, 1 van de 2 moet weg. Dit geldt ook voor al die andere keren dat je dit fout doet.

Olivier Peeters

22-07-2012 21:14 gewijzigd op 23-07-2012 16:43

Neen, maar de browsers interpreteren soms wel anders CSS, allezinds je snapt wel wat ik bedoel.

De codes zijn aangepast, de images zijn wel zichtbaar nu :-)

Groeten

Wouter J

22-07-2012 21:21

JS: Die error is niet van de code die je mij geeft.

CSS:
>> De bovenste box is groter in FF dan in IE. Er word bij berekening van de paddings in IE geen rekening gehouden met de image rechts..
Misschien dat even je floats clearen helpt

>> In FF zijn de borders afgerond in IE nergens.
Border-radius is een CSS3 property en daarmee in beta fase. Het werkt dus nog niet overal. Merk op dat het in IE9 gewoon hoort te werken. Gooi je CSS ook eens door http://prefixr.com/ zodat je alle benodigde prefixes hebt

>> De datumborders lopen tot tegen de naastlopende kolom, dat zou normaal niet mogen.
Je geeft nergens aan dat dat niet zou mogen. Geef een width mee (of een max-width) of zeg dat hij een variabele width heeft door hem float: left; mee te geven.

[offtopic]Het was handiger geweest als je 2 topics had geopend...[/offtopic]

Olivier Peeters

22-07-2012 21:44

Mijn excuses, ik heb al gezien, ik open even een nieuw topic en verwijder de niet CSS gerelateerde zaken...
Bon :-)

Oplossing:
>> Aha, ik wist dat ik iets moest clearen (dacht er juist ook aan). Dus het is zo opgelost:
"<img src="ZWAT1.jpg" style="float:right; height: 75px">
... de tekst ...
<p style="clear: right;"></p>"

>> Ah bon, goed dat ik dit nu weet! Had niet door dat CCS3 in betafase was. Ik zal het zodadelijk eens doen... Wat me recent opviel, de paddings in IE (& het lettertype) zijn anders dan in IE bij de tekstvakken. Hoe komt dit?

>> Opgelost ;-) Waarvoor mijn dank => code:
.select {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #888888;
border-radius: 7px 7px 7px 7px;
color: #222222;
padding: 3px 4px;
float: left;
}

Vriendelijke groeten,
Olivier

Reageren

Inloggen om te reageren