Tabel anders in IE9 dan Chrome

Status
Niet open voor verdere reacties.
R

Ricky14

Gebruiker
Lid geworden
13 apr 2009
Berichten
461
Hallo allemaal,

Ik hen mijn website zo goed als af en alles werkt in IE9 zowel als in Chrome.
Het enige verschil dat er was, was dat er een veld in een tabel groter werd weergegeven.
Even ter verduidelijking een voorbeeld, -> KLIK HIER
De groene kopjes heb ik in het grijze veld onder elkaar staan. In chrome is het ongeveer 2x zo groot als dat grijze vlak dat je daar ziet alleen in IE9 is het wel 3x zo groot. Het gekke is dat de rest van de velden in de tabel wel gewoon overeenkomen en geen verschil is in die grootte..?
Mijn code van de tabel:

HTML: 
<table align="center" border="2" bordercolor="black" width="960px" cellpadding="0" cellspacing="10" bgcolor="#FEF8E0">
<tr>
	<td height="50px" colspan="2">
    <img src="Banner.png" alt="Titel"  width="960" />
    </td>
</tr>
<tr>
  <td colspan="2" height="220px" >
  <img src="bannner.jpg" height="220px" width="960px" />
  </td>
</tr>
<tr>
 <td valign="top" bgcolor="#F5F7FE" width="180px" height="500px"><br />

<div id="vertmenu"> 
<h1>Hoofdmenu</h1>
<ul>
<li><a href="Home.html" tabindex="1"><img src="single.png" width="13" height="13" border="0" />  Home</a></li>
<li><a href="fgddfgdgfn.html" tabindex="2"><img src="single.png" border="0" width="13" height="13" />  fddgfgdfgdfn</a></li>
<li><a href="" tabindex="3" id="knop3" onMouseover="dropdownmenu(this, event, menu1, '165px')" onMouseout="delayhidemenu()"><img src="single.png" width="13" height="13" border="0" />  jklnkl</a></li>
<li><a href="" tabindex="4" onMouseover="dropdownmenu(this, event, menu2, '165px')" onMouseout="delayhidemenu()"><img src="single.png" border="0" width="13" height="13" />  cvbcbv</a></li>
<li><a href="asdfasdf.html" tabindex="5"><img src="single.png" border="0" width="13" height="13" /> asdfasdf</a></li>
<li><a href="asdfasdf.html" tabindex="6"><img src="single.png" border="0" width="13" height="13" /> asdfasdf</a></li>
<li><a href="asdfasdfasdf.html" tabindex="7"><img src="single.png" border="0" width="13" height="13" /> asdfasdfasdf</a></li>
<li><a href="Agenda.html" tabindex="8"><img src="single.png" border="0" width="13" height="13" /> Agenda </a></li>
<li><a href="Over Ons.html" tabindex="9"><img src="single.png" border="0" width="13" height="13" /> Over Ons</a></li>
<li><a href="asdfadsfadf.html" tabindex="10"><img src="single.png" border="0" width="13" height="13" />  asdfasdfasdf</a></li>
<li><a href="ghhgfhgfhn.html" tabindex="11"><img src="single.png" border="0" width="13" height="13" /> hgffghfg</a></li>
<li><a href="Contact.html" tabindex="12"><img src="single.png" border="0" width="13" height="13" />  Contact</a></li>
</ul>
</div>
  </td>
   <td width="723px" valign="top" height="500px"  background="watermark.png"><br />
   <div id="text"><div id="texttitle">titel</div><br />


teskt tekst tekst
    </div>
  
  </td>
</tr>
<tr>
  <td colspan="2" height="30px" bgcolor="#ECECEC" >
  <div id="disclaimer">disclaimer</div>
  </td>
</tr>
</table>

En de css van het menu:
HTML: 
#vertmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 160px;
padding: 5px;
margin: 5px;

}

#vertmenu h1 {
display: block; 
font-size: 90%; 
padding: 3px 0 5px 3px;
color: #333333;
margin: 0px;
width:159px;
}

#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}

#vertmenu ul li {
margin: 0px;
padding: 0px;
}

#vertmenu ul li a {
font-size: 80%;
display: block;
border-radius: 35px;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:160px;
}

#vertmenu ul li a:hover, #vertmenu ul li a:focus, #vertmenu ul li a:active{
color: #161E74;
background-color: #BCCDF3;
outline: 0px;
}

Ik hoop dat iemand mij kan helpen!

Alvast bedankt,
Rick
 
Hoi Rick,
Ja hoor: dat is weer één van de nukken en grillen van Internet Explorer!
Die rekt en trekt aan tabelcellen op een manier die altijd onvoorspelbaar is, maar vaak niet in orde. :confused:

Maar eerst even wat anders: in je html staat regelmatig width="..px" en height="..px". Dat moet width=".." en height=".." zijn (zonder de px), want in html-code is de eenheid voor breedte en hoogte altijd pixels, en mag dat er niet bij gezet worden. De enige andere mogelijkheid is %, dat mag er wel bij gezet worden.
  • In css moet er bij alles juist wel een eenheid opgegeven worden: het kan px zijn of % of een andere maateenheid of nog iets anders (bv. "auto").
Maar dat is niet de reden waarom het hier mis gaat. Terug naar IE!

Internet Explorer blijkt er niet tegen te kunnen dat er in een tabelcel met opgegeven breedte een <div> staat zonder opgegeven breedte.
  • De <div id="text"> binnen de <td> heeft geen opgegeven breedte, en zou de breedte van de <td> moeten aannemen.
  • Zo niet bij IE, die gaat ermee aan de haal.
  • Dat geldt voor alle IE's: IE7, IE8, IE9, en zelfs IE10-ConsumerPreview doet het fout. :shocked:

Het probleem wordt opgelost met toevoegen van de css:
Code: 
#text {
    width: 700px;
}
Door deze straf zijn alle IE's nu erg gehoorzaam geworden (de andere browsers hebben er geen last van).



=======
Maar het beste is: de hele tabel-opmaak laten varen.
Het kan veel beter met alleen <div>'s die met css hun styles krijgen.
Tabellen werden vroeger erg vaak gebruikt voor de opmaak, toen er nog nauwelijks css was en/of de browsers dat niet konden ondersteunen. Dat ligt nu al jaren lang heel anders: tabellen horen niet voor opmaak gebruikt te worden, daar is css voor. Dat levert ook mooie schone en overzichtelijke html op, zonder al die (al dan niet lege) <tr>'s en <td>'s.



Met vriendelijke groet,
CSShunter
 
Heeeel hartelijk bedankt!!
Ben er nu pas aan toegekomen wegens drukte op school maar na je haarfijne uitleg had ik het binnen 2 minuten voor elkaar!
Alsnog bedankt voor je snelle en duidelijke reactie en sorry voor het late reageren!

MvG,
Rick
 
Hoi Rick,
Tegen voorrang voor schoolwerk hoor je mij niet mopperen! :)
Fijn dat het gelukt is.

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan