[CSS] Render verschil IE/FF met Borders

[Verwijderd]

Ik ben bezig met het maken van een pagina die ik maandag op school moet inleveren, nu zit ik met het volgende: Ik gebruik FireFox als standaard browser, daar heb ik dan ook steeds een Preview in gedaan. De sie zoals hij er nu uitziet ben ik tevreden mee.

Punt is echter dat hij ook in IE goed moet werken, en dat doet hij dus niet. Ten eerste wordt de pagina niet meer in het midden weergegeven, wat hij in FF wel doet (met de code: margin: 0 auto;)

Hier het verschil tussen FF en IE:





De hoogte is 75px en de breedte 650px, ik heb er 73px en 648px van gemaakt vanwege de 1px breede borders. In FF worden deze er netjes onder gezet war ik ze wil hebben, maar IE zet de bottom-border 2px naar beneden?!? Iemand een idee hoe dit op te lossen is?

[Verwijderd]

Voldoet de pagina wel aan de standaarden van w3c (is er bijvoorbeeld een DTD en een character set aangegeven)? Als dit niet zo is, kan de browser in de quirks modus draaien waardoor CSS niet goed gerenderd wordt.

[ Voor 6% gewijzigd door Verwijderd op 15-10-2005 12:30 ]

[crisp]

Je zal wel een table hebben gebruikt, en whitespace (spaties, enters) hebben zitten tussen je img- en je td-tags.

Voor centreren in IE moet je text-align:center op je body zetten (en weer een text-align:left op je container).

[ Voor 35% gewijzigd door crisp op 15-10-2005 12:32 ]

[Verwijderd]

Ik maak gebruik van <div> containers, tabellen doe ik niet aan vanwege symantiek. Ik zal de CSS code even copy/pasten:

code:

#wrapper {
          margin: 0 auto;
          heigth: 600px;
          width: 800px;
}


#menu {
       float: left;
       height: 598px;
       width: 149px;
       border-top: solid;
       border-left: solid;
       border-bottom: solid;
       border-color: black;
       border-width: 1px;
       background-image: url(./pics/menu.jpg);
}


#top {
      height: 73px;
      width: 648px;
      float: left;
      border-top: solid;
      border-right: solid;
      border-bottom: solid;
      border-color: black;
      border-width: 1px;
}      


#content {
          float: left;
          height: 450px;
          width: 650px;
          overflow: auto;
          color: black;           
}


#footer {
         float: left;
         background-image: url(./pics/footer.jpg);
         height: 73px;
         width: 648px;
         border-top: solid;
         border-right: solid;
         border-bottom: solid;
         border-color: black;
         border-width: 1px;
}

Wat trouwens vreemd is, #menu heeft ook een bottom-border met precies dezelfde attributen als #top, maar bij #menu wordt alles goed weergegeven

[ Voor 7% gewijzigd door Verwijderd op 15-10-2005 14:49 ]

[Verwijderd]

Hmm, echt niemand die het weet? Ik heb de borders inmiddels wat aangepast, hier een nieuwe screenshot in IE 6.



Voor beide borders gelden dezelfde regels, en beide achtergrond plaatjes hebben dezelfde formaat als de corresponderende <div> container.

[Verwijderd]

wellicht is het handiger om je al je code te laten zien.

[Verwijderd]

Bij deze:

code:

body {
      font-family: Arial Narrow;
      text-align: center;
}


P.txt {
       margin-bottom: 30px;
       word-spacing: 1.2;
       line-height: 1.2;
}


H1 {
    font-size: 25px;
    margin-bottom: 10px;
}


H1.txt {
        font-size: 25px;
        margin-bottom: 40px;
    text-align: center;
}


a:link, a:visited { text-decoration: none; }
a:hover           { text-decoration: none; color: red; }


#wrapper {
          margin: auto;
          heigth: 600px;
          width: 800px;
}


#menu {
       font-family: Comic Sans MS;
       text-align: center;
       float: left;
       height: 598px;
       width: 149px;
       border-top: solid;
       border-left: solid;
       border-bottom: solid;
       border-color: black;
       border-width: 1px;
       background-image: url(./pics/menu.jpg);
}


#url {
      margin-top: 200px;
      font-size: 15px;
}


#top {
      height: 74px;
      width: 649px;
      float: left;
      border-top: solid;
      border-right: solid;
      border-color: black;
      border-width: 1px;
}      


#content {
          text-align: left;
          float: left;
          overflow: auto;
          height: 450px;
          width: 650px;
          color: black;
}


#footer {
         float: left;
         background-image: url(./pics/footer.jpg);
         height: 74px;
         width: 649px;
         border-right: solid;
         border-bottom: solid;
         border-color: black;
         border-width: 1px;
}

[Verwijderd]

html code uiteraard, zitten er geen whitespaces in?

[Verwijderd]

Die worden genegeerd, ik heb geen pre en tabellen, hier heb je de code, inhoud eruit geflikkerd, anders wordt het een bende.

code:

<html><head><title>C.V.</title>

<link  rel="StyleSheet"
       href="jkremers.css"
       type="text/css">

</head>

<body>

<div id="wrapper">

<div id="menu">
Navigatie Menu
<div id="url">
<a href="index.html">Rants..</a><br>
<a href="cv.html">C.V.</a><br>
<a href="recensie.html">Recensie IBC</a><br>
</div>
     </div>

<div id="top">
[img]"./pics/cv.jpg">
</div>

<div[/img]

</div>

<div id="footer">
</div>
     </div>

</body></html>

[Verwijderd]

ik zie toch whitespaces. Is natuurlijk onzin dat die genegeerd worden, in deze zin blijven ze toch ook staan

[Verwijderd]

Leg dan eens uit op welke je doelt....

[Verwijderd]

code:

<div id="top">
[img]"./pics/cv.jpg">
</div[/img]

die

[Verwijderd]

Ik snap nog steeds niet waar je op doelt, waar zie je dan een white space? Ben ik nou gek aan het worden.....?

#footer geeft het ook niet goed weer, terwijl #menu het perfect doet, deze plaatjes worden via de css code geladen.

[ Voor 36% gewijzigd door Verwijderd op 16-10-2005 17:23 ]

[Verwijderd]

Cascading Stylesheet:

#top img {
   vertical-align: bottom;
}

Uitleg

[Verwijderd]

Helpt helaas niet, mar als dat het probleem is dan zou het geheel in FF toch ook niet moeten werken? En daar werkt de site perfect in.

Zelfde geldt dan eigenlijk voor dat white space argument, of gaat FF daar anders mee om?

[crisp]

Firefox negeert vziw textnodes die enkel whitespace bevatten (maar zet ze wel in de DOM-tree), en IE niet.