1. #1

    Registered
    31/03/03
    Location
    Gent
    Posts
    1,258
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0

    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
    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>
    Hier de css:
    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  

  2. #2
    grooverider's Avatar
    Registered
    08/07/03
    Location
    Leuven
    Posts
    328
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    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 ie
    no votes  

  3. #3

    Registered
    31/03/03
    Location
    Gent
    Posts
    1,258
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    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...

    Thx
    no votes  

  4. #4
    grooverider's Avatar
    Registered
    08/07/03
    Location
    Leuven
    Posts
    328
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    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  

  5. #5

    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  

  6. #6

    Registered
    31/03/03
    Location
    Gent
    Posts
    1,258
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    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) bestand
    Last edited by HTrance; 05-09-2007 at 16:04.
    no votes  

  7. #7
    no_way2go's Avatar
    Registered
    11/01/04
    Location
    Leuven
    Posts
    1,508
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/8
    What is needed on this planet is a massive shift in consciousness.
    Religon - the root of all evil ?!
    no votes  

  8. #8

    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  

  9. #9

    Registered
    13/04/04
    Location
    WWW
    Posts
    6,389
    iTrader
    12 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/39
    Quote Originally Posted by no_way2go View Post
    This quote is hidden because you are ignoring this member. Show
    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  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in