CSS vraag over Internet Explorer..

Door Onbekende gebruiker op 25-12-2008 18:57

301 views

Mijn BETA website www.devual.nl/BETA/Pages/Home/Index.php werkt goed in de Browsers: Google Chrome & Firefox.. maar als ik in Internet Explorer kijk is het een hele teringzooi.. mijn vraag is wie kan mij helpen of uitleggen wat ik waar moet toevoegen in mijn CSS.. want volgens mij ben ik voor goede resultaat in Internet Explorer wat vergeten in me CSS.

Hieronder mijn CSS:

.content-up-down
{ background-color: #000;
  float: left;
  height: 7px;
  width: 886px; }

.content-left-up
{ background-image: url(../Images/Black_content/Left_up.gif);
  float: left;
  height: 7px;
  width: 7px; }

.content-right-up
{ background-image: url(../Images/Black_content/Right_up.gif);
  float: left;
  height: 7px;
  width: 7px; }

.content-left-down
{ background-image: url(../Images/Black_content/Left_down.gif);
  float: left;
  height: 7px;
  width: 7px; }

.content-right-down
{ background-image: url(../Images/Black_content/Right_down.gif);
  float: left;
  height: 7px;
  width: 7px; }

.content-login
{ background-color: #000;
  height: 33px;
  padding-left: 15px;
  width: 885px; }

.content-left
{ background-color: #000;
  float: left;
  width: 300px; }

.content-center
{ background-color: #000;
  float: left;
  width: 300px; }

.content-right
{ background-color: #000;
  float: left;
  width: 300px; }

.content
{ background-color: #000;
  width: 900px; }

Arjan Kapteijn

25-12-2008 19:20

Ook in mijn firefox klopt er volgens mij een hoop niet. Je probleem ligt overigens niet in CSS, begin eens bij HTML want vier afsluitende HTML tags kan natuurlijk -nooit-. Verder heb je meerdere body tags, forms-sluit tags en her en der wat divjes op plekken waar je 'officieel' buiten de <html>-tags zit.

Begin bij het begin, gooi alles weg en blijf rustig. Dat design wat je nu hebt moet je in 15 minuten echt wel kunnen opbouwen, maar als je basis al fout is kan je hier -dagen- naar kijken maar zal het zichzelf echt niet oplossen.

Onbekende gebruiker

25-12-2008 19:26

Klein fix, nu is er maar 1 -HTML- tag + 1 afsluiting, 1 -body- + 1 afsluitig, 1 -form- + afsluiting, en alle divs zijn binnen de HTML tags.

En nog staat in Google Chrome me website perfect en in Internet Explorer alles schots en scheef.. leg mij dat maar uit! :)

-Edit-
In mijn Firefox (3.1 - Beta 2) staat mijn website ook goed.

Arjan Kapteijn

25-12-2008 19:33

Het feit dat Chrome van van die kansloze HTML nog een website weet te fabriceren betekend niet dat je CSS 'perfect' is. Testen met een Beta van Firefox is natuurlijk ook niet handig, pak eens de laatste versie en aanschouw de chaos...

Onbekende gebruiker

25-12-2008 19:39

Heb de chaos al voor me met Internet Explorer, daarom vraag ik ook hier wat er mis is aan me CSS.. maar blijkbaar weet je dat niet.. ;) Dus snap ik ook niet waarom je dan reageert!

Arjan Kapteijn

25-12-2008 19:49

Volwassen reactie, ik wou je net een demo laten zien van hoe ik het zou oplossen maar die heb ik uiteraard nu in de prullenbak getieft. Succes mafkees.

Onbekende gebruiker

25-12-2008 19:51

Ow jou hulp heb ik niet nodig, zijn zat andere mensen die wel normaal mij kunnen helpen! :)

Jelmer -

25-12-2008 19:56

Kunnen is één ding. Willen is ook nog nodig ;)

edit: ik denk trouwens dat je door het ontbreken van een doctype in quirksmode terecht komt in Internet Explorer. Het zou mij niet verbazen dat in deze modus lege elementen (je hebt een aantal lege div-elementen) anders gerenderd worden dan wanneer je in de goeie modus zit

edit 2: ha, goed gegokt!

Onbekende gebruiker

25-12-2008 19:59

Ja maar zoals ik zei, ik heb al antwoord gehad..
Moest het volgende bovenaan de pagina plaatsen! ;)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">;

- - -

Volgende vraag:


body
{ background-image: url(../Images/Background/Header.gif);
  background-repeat: repeat-x;
  background-color: #2F3336;
  margin-top: 0px; }

.main
{ margin: 0 auto 0 auto;
  width: 900px; }

.header-empty
{ float: left;
  height: 77px;
  width: 25px; }

.header
{ background-image: url(../Images/Logo/Logo_header.gif);
  float: left;
  height: 77px;
  width: 161px; }

.navigation
{ float: left;
  height: 77px;
  width: 689px; }

In Google Chrome staat mijn header-empty, header & navigation een deel van de bovenkant en in Internet Explorer precies tot de bovenkant.. wat doe ik fout?

Voorbeeld waar je dit probleem kan zien: http://www.devual.nl/BETA/Pages/Home/Index.php

ReZon

25-12-2008 21:50

Je zal echt aan de slag moeten gaan met

position: absolute of relative;

dit zet de div's op de juiste plaats, als nog zal je dan wat moeten gaan schuiven.

Robert Deiman

25-12-2008 22:36

geef de body (en maak daar eens body, html{ van) ook een padding-top van 0px mee, misschien dat dat al helpt. Vaak is het om iets crossbrowser te krijgen handig om een reset.css te gebruiken. (deze stelt alle elementen zo in dat ze in elke browser precies dezelfde instellingen hebben. Dat scheelt vaak al heel veel gepuzzel)

Reageren

Inloggen om te reageren