Avatar billede dj_ricko Nybegynder
21. august 2007 - 01:26 Der er 6 kommentarer og
1 løsning

Internet Explorer tabel fejl

Nogen der kan finde ud af hvad der gør at menu'en og login bar'en ser helt forkert ud på http://yourbits.net med Internet Explorer, men rigtigt ud i firefox?

Menuen bliver alt alt for bred, og der kommer en extra linje eller noget under login baren på internet explorer.

Uddrag af koden, loginbaren:
<td>
<div class="normaltext">
<form action="index.php?login=1" method="post">
Username: <input type="text" name="username" style="border-style: solid; border-color: #000000; border-width: 1px; width: 80px; font-family: Tahoma; font-size: 12px; color: #000000;">
Password: <input type="password" name="password" style="border-style: solid; border-color: #000000; border-width: 1px; width: 80px; font-family: Tahoma; font-size: 12px; color: #000000;">
Remember me: <input type="checkbox" name="remember" value="1">
<input type="submit" value="LOGIN!" style="border-style: solid; border-color: #000000; border-width: 1px; font-family: Tahoma; font-size: 12px; color: #000000;">
<input type="button" value="SIGNUP NOW!" style="border-style: solid; border-color: #000000; border-width: 1px; font-family: Tahoma; font-size: 12px; color: #000000;" onClick="window.location='http://yourbits.net/index.php?mode=signup';">
</form>
</div>
</td>
<td align="right">
<div class="normaltext">Online now: <b>4</b> | Members: <b>5</b> | Unique visitors: <b>1797</b></div>
</td>
</tr>
</table>
</td>

Uddrag af koden, menu:
<td style="background-color: #FFFFFF; width: 150px;" valign="top"><table border="0" cellspacing="0" cellpadding="5" style="width: 150px">
<tr>
<td>
<div class="normaltext">
<b>Features:</b><br>
<a href="./index.php">Home</a><br>
<a href="./index.php?mode=faq">F.A.Q.</a><br>
<a href="./index.php?mode=blog">Site Blog</a><br>
<a href="./index.php?mode=contact">Contact Us</a><br>
<br>
<b>Members:</b><br>
<a href="java script:alert('Login to use this feature!')">Earn Credits</a><br>
<a href="java script:alert('Login to use this feature!')">Referral Recruiter</a><br>
<br>
</div>
<hr class="blackline">
<div class="normaltext"><br>
<b>Ways to earn:</b><br>
<a href="./index.php?mode=sites&amp;category=6">Casinos</a> (0)<br><a href="./index.php?mode=sites&amp;category=1">Clicking</a> (70)<br><a href="./index.php?mode=sites&amp;category=12">Emails</a> (2)<br><a href="./index.php?mode=sites&amp;category=11">Offers</a> (3)<br><a href="./index.php?mode=sites&amp;category=10">Surveys</a> (1)<br><br>
<b>Webmasters mostly:</b><br>
<a href="./index.php?mode=sites&amp;category=8">Affiliate Networks</a> (0)<br><a href="./index.php?mode=sites&amp;category=7">Banner Exchanges</a> (0)<br></div>
</td>
</tr>
</table>
</td>
Avatar billede fennec Nybegynder
21. august 2007 - 09:07 #1
IE har det ikke godt med collspan. Jeg har oplevet at det driller.
Noget andet er, hvorfor bruger du images/spacer.gif?? Det er meget bedre bare at sætte en border på tabellerne/cellerne.

Løsningen er at smide menuen og datablokken i en tabel i tabellen:

<table>
...
Top menu kode
...
<tr>
  <td>
    <table>
    <tr>
      <td style="width:150px;">Menu</td>
      <td>Datablok</td>
    </tr>
    </table>
  </td>
</tr>
Avatar billede dj_ricko Nybegynder
23. august 2007 - 14:02 #2
Takker fennec, du havde ret, internet explorer kan ikke lide colspan,
søgte lidt på det, og kunne ikke finde andre løsninger end at bruge,
"nested tables" som du siger, med at sætte en tabel inde i en anden tabel,
i en anden tabel. Det noget rod, men i det mindste virker siden i både IE,
firefox, opera og safari nu.

Men kan stadig ikke finde problemmet med den anden lille fejl,
det tomme rum under login baren.
Avatar billede fennec Nybegynder
23. august 2007 - 14:10 #3
Det ekstra mellemrum er sikket relateret til IE's renderings fejl af <td>. Der må ikke være linjeskift efter </td>

Disse renderes rigtigt:
<td>hej med dig</td>
<td>
  hej med dig</td>

Disse renderes med mellemrum:
<td>hej med dig
</td>
<td>
  hej med dig
</td>

Så sørg for at dine </td> står rigtigt.
Avatar billede dj_ricko Nybegynder
23. august 2007 - 14:25 #4
Forstår ikke helt hvad du mener, når man ikke er logget ind og input felterne er der:

<table border="0" cellpadding="5" cellspacing="0" style="width:100%;">
<tr>
<td>
<div class="normaltext">

<form action="index.php?login=1" method="post">
Username: <input type="text" name="username" style="border-style: solid; border-color: #000000; border-width: 1px; width: 80px; font-family: Tahoma; font-size: 12px;">
Password: <input type="password" name="password" style="border-style: solid; border-color: #000000; border-width: 1px; width: 80px; font-family: Tahoma; font-size: 12px;">
Remember me: <input type="checkbox" name="remember" value="1">
<input type="submit" value="LOGIN!" style="border-style: solid; border-color: #000000; border-width: 1px; font-family: Tahoma; font-size: 12px; color: #000000;">
<input type="button" value="SIGNUP NOW!" style="border-style: solid; border-color: #000000; border-width: 1px; font-family: Tahoma; font-size: 12px; color: #000000;" onClick="window.location='http://yourbits.net/index.php?mode=signup';">
</form>
</div>
</td>
<td align="right">
<div class="normaltext">Online now: <b>4</b> | Members: <b>5</b> | Unique visitors: <b>1959</b></div>

</td>
</tr>
</table>

Så laver den fejl, men når man logger ind og der er text istedet for login felterne:

<table border="0" cellpadding="5" cellspacing="0" style="width:100%;">
<tr>
<td>
<div class="normaltext">Welcome <a href="./index.php?mode=profile&id=1"><b>DjRicko</b></a>, you have <b>18</b> credits | <a href="./index.php?mode=profile&id=1">My Profile</a> - <a href="./index.php?logout=1">Logout</a></div>

</td>
<td align="right">
<div class="normaltext">Online now: <b>4</b> | Members: <b>5</b> | Unique visitors: <b>1959</b></div>
</td>
</tr>
</table>

Linux versionen af Opera laver faktisk også samme fejl kan jeg se,
den er bare ikke lige så markant der, mellemrummet er ikke så stort.

Screenshots i de forskellige browsers:
http://yourbits.net/junk/firefox.png (Firefox Linux)
http://yourbits.net/junk/opera.png (Opera Linux)
http://yourbits.net/junk/ie7.png (Internet Explorer 7 Windows XP)
Avatar billede fennec Nybegynder
23. august 2007 - 14:43 #5
Ahh. Så er jeg med. Det er dit form element der også driller, fordi det renderes som block. Det skal du bare ændre til inline. Jeg har også rette </td> og fjernet <div> og smidt class'en direkte på <td>:

<table border="0" cellpadding="5" cellspacing="0" style="width:100%;">
<tr>
<td class="normaltext">
<form action="index.php?login=1" method="post" style="display:inline;">
Username: <input type="text" name="username" style="border-style: solid; border-color: #000000; border-width: 1px; width: 80px; font-family: Tahoma; font-size: 12px;">
Password: <input type="password" name="password" style="border-style: solid; border-color: #000000; border-width: 1px; width: 80px; font-family: Tahoma; font-size: 12px;">
Remember me: <input type="checkbox" name="remember" value="1">
<input type="submit" value="LOGIN!" style="border-style: solid; border-color: #000000; border-width: 1px; font-family: Tahoma; font-size: 12px; color: #000000;">
<input type="button" value="SIGNUP NOW!" style="border-style: solid; border-color: #000000; border-width: 1px; font-family: Tahoma; font-size: 12px; color: #000000;" onClick="window.location='http://yourbits.net/index.php?mode=signup';">
</form></td>
<td align="right" class="normaltext">Online now: <b>4</b> | Members: <b>5</b> | Unique visitors: <b>1959</b></td>
</tr>
</table>
Avatar billede dj_ricko Nybegynder
23. august 2007 - 14:54 #6
display:inline, yeah, mange tak.

Så form bliver som standard rendereret som et block element på ie :)
Avatar billede fennec Nybegynder
23. august 2007 - 15:05 #7
Den bliver standard renderet som block i ALLE browsers. Der er bare forskeld på hvor meget mellemrum de enkelte browsers smider efter deres block elementer.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester