-
05-09-2007, 01:27 #1
HTML/CSS: firefox verschilt van IE (en weet niet waarom)
Ok ik heb nu iets gemaakt en kben nog maar 10seconden bezig en 'k merk dat firefox 't helemaal kapot maakt
. Hier 't verschil: http://users.telenet.be/HTrance/Down...dver-FF-IE.jpg .
Hier de html
Hier de css:HTML Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>HTrance</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" href="css-site/index.css" type="text/css"/> </head> <body> <div class="main_head"> </div> <div class="main"> <div class="b_menu"> <div class="b_menu_head"></div> <div class="b_menu_t"></div> </div> <div class="s_menu"> <div class="s_menu_head"></div> <div class="s_menu_t"></div> </div> <div class="page"> <div class="page_head"></div> <div class="page_t"></div> </div> </div> </body> </html>
HTML Code:/* CSS Document */ body{ background-color: #666666; margin: 0px; padding: 0px; } .main_head{ position: relative; margin: 0px; padding: 0px; background-image: url(../images-site/main_head.png); width: 990px; height: 25px; margin-left: auto; margin-right: auto; } .main{ position: relative; margin: 0px; padding: 0px 0px 12px 0px; background-color: #170057; border-left-width: 2px; border-left-style: solid; border-right-width: 2px; border-right-style: solid; border-bottom-width: 2px; border-bottom-style: solid; border-color: #8D9FD5; width: 986px; margin-left: auto; margin-right: auto; } .b_menu{ position: relative; margin: 12px 12px 0px 12px; padding: 0px; width: 962px; height: 160px; } .b_menu_head{ position: relative; margin: 0px; padding: 0px; background-image: url(../images-site/menu_head.png); width: 962px; height: 25px; } .b_menu_t{ position: relative; margin: 0px; padding: 0px; background-color: #D7E0F1; border-left-width: 2px; border-left-style: solid; border-right-width: 2px; border-right-style: solid; border-bottom-width: 2px; border-bottom-style: solid; border-color: #D7E0F1; width: 958px; height: 135px; } .page{ position: absolute; margin: 12px 0px 0px 0px; padding: 0px; width: 784px; height: 25px; right: 12px; } .page_head{ position: relative; margin: 0px 0px 0px 0px; padding: 0px; background-image: url(../images-site/page_head.png); width: 784px; height: 25px; } .page_t{ position: relative; margin: 0px; padding: 0px; background-color: #D7E0F1; border-left-width: 2px; border-left-style: solid; border-right-width: 2px; border-right-style: solid; border-bottom-width: 2px; border-bottom-style: solid; border-color: #D7E0F1; width: 780px; height: 502px; } .s_menu{ position: relative; float: left; margin: 12px 0px 0px 0px; padding: 0px; width: 166px; height: 527px; margin-left: 12px; } .s_menu_head{ position: relative; margin: 0px 0px 0px 0px; padding: 0px; background-image: url(../images-site/little_head.png); width: 166px; height: 25px; } .s_menu_t{ position: relative; margin: 0px; padding: 0px; background-color: #D7E0F1; border-left-width: 2px; border-left-style: solid; border-right-width: 2px; border-right-style: solid; border-bottom-width: 2px; border-bottom-style: solid; border-color: #D7E0F1; width: 162px; height: 502px; }no votes
-
-
05-09-2007, 02:49 #2
voor de zoveelste keer: firefox toont uw ontwerp zoals jij het hebt gecode, IE doet er zijn eigen ding mee. Firefox volgt namelijk de voorschriften van het w3c, microsoft vindt dat ze het zelf allemaal beter weten.
Begin dus met je site voor ff te coden, en voeg achteraf een apart stijlblad toe voor ieno votes
-
05-09-2007, 11:32 #3
1) Ja ok, maar dat verklaart niet waarom FF het 'b-menu' wél IN 'main' weergeeft en 'page' en 's-menu' niet (terwijl deze laatsten toch IN main zitte?!).
2) Nergens heb ik gespecifieerd om een leegte te laten tussen main_head en main. En toch doet FF dat.
Tis geen probleem om helemaal code hernieuw te beginnen maar ik zou graag begrijpen wat er verkeerd is aan m'n css...
Thxno votes
-
05-09-2007, 13:56 #4
begin eerst en vooral al met
* {padding: 0; margin: 0;}
ben niet zeker of dat in de body zetten hetzelfde resultaat heeft (ivm overerving)
ook is het altijd handig om je pagina online te zetten, dat zegt veel meer als die paar regeltjes code, en je zal ook veel meer reacties krijgen.no votes
-
05-09-2007, 14:20 #5Member
- Registered
- 29/11/04
- Location
- My attic
- Posts
- 5,936
- iTrader
- 0
- Mentioned
- 0 Post(s)
- Reputation
- 12/15
Toch even de precieze informatie meegeven: Opera toont je site zoals je hem hebt gecode, indien je hem goed hebt gecode
. Firefox (Gecko) bevat nog een aantal weergavefouten (die vanaf versie 3 verholpen zullen zijn). Ook Safari (Webkit) bevat nog een aantal weergavefouten.
no votes
-
05-09-2007, 15:57 #6
Hmm vreemd. Ik denk dat 'k 't al heb opgelost. Alleen is de oplossing niet bevredigend genoeg :/.
1) Alle menu's zitten dan wel in main als ik de hoogte van main instel. Als ik geen hoogte toewijs dan is de hoogte gelijk aan dat van b_menu. Terwijl ik de hoogte van main 't liefst onbepaald wil laten zodat menu's langer en korter kunnen worden en de pagina mee langer en korter wordt...
2) Als ik de margin-top van b_menu verander naar 0 dan krijg ik geen 12px tussen main_head en main( en dus geen lelijke grijze balk). Toch vreemd dat hij de 12px tussen main_head en main zet, terwijl b_menu IN main zit en dus de afstand tussen main en main_head in prinicipe ni kan veranderen :???: .
Heb trouwens de bestanden online gezet. 't oude en verkeerd weergegeven bestand, nu 't aangepaste en goed weergegeven (maar imo niet ideaal gecode) bestandLast edited by HTrance; 05-09-2007 at 16:04.
no votes
-
05-09-2007, 16:26 #7What is needed on this planet is a massive shift in consciousness.
Religon - the root of all evil ?!
no votes
-
05-09-2007, 17:15 #8Member
- Registered
- 29/11/04
- Location
- My attic
- Posts
- 5,936
- iTrader
- 0
- Mentioned
- 0 Post(s)
- Reputation
- 12/15
Dat heeft er nu eens nul komma nul mee te maken...
no votes
-
06-09-2007, 12:38 #9Member
- Registered
- 13/04/04
- Location
- WWW
- Posts
- 6,389
- iTrader
- 12 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/39
Wouw da wisten we niet zeg! Dit zegt enkel of het w3c valid is. Het geeft niet aan wat er fout is bij de verschillende browsers.
@HTrance oefen gewoon nog wat meer met css en html en je komt er wel zelf uit. Voor het kleinste foutje hier al een topic gaan openen vind ik belachelijk.no votes

