DIV's in IE en FF

Status
Niet open voor verdere reacties.
M

MieKatoen

Nieuwe gebruiker
Lid geworden
30 sep 2009
Berichten
3
Hallo iedereen,

Ik ben al een tijdje bezig met het herbouwen van mijn website. In de vorige versie gebruikte ik FRAMESET- en TABLE-elementen voor de globale lay-out, en die wil ik nu gaan vervangen door DIV's. Dat schijnt zo te horen ...;)

Het probleem is echter dat het mij niet lukt om het zowel in IE als in FF juist weer te geven. Ik heb voor de gelegenheid een 'minimale pagina' gemaakt die duidelijk toont waar het fout loopt. Je vindt die pagina hier.
In IE staat alles zoals ik het wil (en verwacht), in FF staat het echter niet zo goed... :confused:

Kan iemand mij zeggen hoe ik dit kan oplossen?

Dit is de HTML en CSS:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>De TITEL</title>
    <link href="./style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="container">
      <div id="header">
        . . . H E A D E R . . .
      </div>
      <div id="content">
          <div id="boxleft">
            <div id="boxtitle">
              Titel1
            </div>
            <div id="boxcontent">
              text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 
              text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 
              text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 
            </div>
          </div>
          <div id="boxright">
            <div id="boxtitle">
              Titel2
            </div>
            <div id="boxcontent">
              text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 
              text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 
            </div>            
          </div>
      </div>
      <div id="footer">
        copyright © 2009 - All rights reserved
      </div>
    </div>
  </body>
</html>

Code: 
*{
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
  margin:0px;
  padding:0px;
}
body{
  background-color:#333333;
}
#container{
  margin:10px auto;
  width:750px;
  background-color:#D6D6D6;
}
#header{
    width:750px;
    height:70px;
    background-color:#999999;
    text-align:center;
    font-size:48px;
}
#content{
    width:730px;
    padding:10px 10px 10px 10px;
}
#footer{
    width:750px;
    height:16px;
    text-align:center;
    background-color:#999999;
}
#boxleft{
    float:left;
    width:357px;
    border:1px solid #008888;
}
#boxright{
    float:right;
    width:357px;
    border:1px solid #008888;
}
#boxtitle{
    background-color:#008888;
    padding:1px 5px 1px 10px;
}
#boxcontent{
    background-color:#8FBC8F;
    padding:1px 5px 1px 10px;
}
 
zet een[JS]overflow: hidden;[/JS]in je #content



:thumb:



ps. welke IE gebruik je? Hier, in IE8, zonder comp. mode, staat het ook 'fout'.
 
het is beter om je website voor firefox te bouwen en dan aanpassingen te doen voor IE..
Als je het andersom doet ben je veel langer bezig..

Ik neem meestal deze stappen door als ik vanuit firefox werk en het staat niet correct in IE..Meestal is het IE6 die vervelend is bij mij..

Code: 
1-	double margin
Als je margin gebruikt op een floated div dan zorgt 9 van de 10x IE ervoor
dat hij het verdubbeld. Dus de margin word 2x zoveel waardoor de floated div op en stomme positie komt.
De oplossing is simpel ! Voeg deze regel toe: display: inline;

2-	height 100% op een position absolute div
IE6 is eigenlijk best wel dom..Je moet vaak veel informatie vertellen zodat hij het begrijpt. Firefox en andere webbrowsers daarin tegen begrijpen de code sneller en hebben dus vaak minder regels nodig aan script.
Als je het wilt fixen moet je zorgen dat je de regel: height: 100% op je html en body elementen toevoegt.

3-	PNG heeft geen transperantie
Voeg deze regels toe als je wilt dat de png vertoond word in IE
back\ground-color: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src=”yourPNG.png”, sizingMethod=”crop”);

wil je het oplossen met javascript volg dan het volgde op.
http://www.greyhats.com/2006/11/10/a-better-ie6-png-fix/

4-	Floated kolommen verschuift zo nu en dan in IE
Als 2 kolommen naast elkaar staan in Firefox zoals het hoort maar
onder elkaar staan in IE dan moet je binnen je DIV kijken! Waarschijnlijk is er een element of wat dan ook..dat groter is dan je kolom zelf. Verklein het dus!

5-	IE6 renderd de laatste list item dubbel buiten mijn <UL></UL>
Ja dit is heel raar en gek maar komt weinig voor..Als je dit wilt oplossen voeg een regel toe zoals bijvoorbeeld: <!- IE6 SUCK ->

6-	Me list bullets zijn niet uitgelijnd met mijn tekst
Dit gebeurd als je een padding-top hebt op een list element.
Vervang padding-top met margin-top en je probleem is opgelost voor IE6 en IE7.

7-	Problemen met alle posities
Schoon ten eerste je CSS file op..Ten tweede: Voeg het volgende toe aan je #body {
  height: 100%;
  overflow-y: auto;
}
Nadeel is dat je geen absolute en relative kunt gebruiken op de bewegende pagina..maar wel float.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan