Code für IE und Opera schlecht

Status
Nicht offen für weitere Antworten.
4

4udesigns

Erfahrenes Mitglied
Hallo,
Bei folgendem Code werden im IE und im Opera die 2 Links rechts neben der Tabelle angezeigt.
Ich möchte aber, das sie unter der Tabelle angezeigt werden.

HTML: 
Hier entsteht eine neue Internetpräsidenz!
<table border="1" align="left">
    <tbody>
        <tr>
            <td>hier</td>
            <td>ist</td>
        </tr>
        <tr>
            <td>eine</td>
            <td>Tabelle</td>
        </tr>
    </tbody>
</table>
<br><br><br>
<b><a href="http://seite.de">SEITE1</a></b><br>

<a href="http://seite2.info" target="_blank">Seite2</a>

Was kann ich dagegen tun?

lg
discreated
 
Hi,

entferne im <table>-Tag das Attribut align="left", oder nutze die CSS-Eigenschaft clear:left, um den Textfluß unterhalb der Tabelle zu erzwingen:

Code: 
<table border="1" align="left">
...
</table>
<br style="clear:left"><br><br>
Übrigens verhalten sich hier die anderen Browser genauso.

mfg Maik
 
Ist sowas von nebensächlich, da du dem IE auf die Beine helfen willst, und die Unterscheidung in ihm keine Rolle spielt:
Die Unterscheidung zwischen Full und Almost Standards Mode tritt in Mozilla ab Version 1.0 (Netscape 7.0), Opera ab Version 7.5 und Safari ab Version 0.9 auf. Alle anderen Browser mit DOCTYPE-Switch schalten bei Verwendung der unter »Almost Standards Mode« genannten Dokumenttyp-Deklarationen in den Standards Mode.
Zum Vergrößern anklicken....
Aber wenn du dich nun an diesem irrelevanten Detail aufhängen willst, bitte schön, denn Reisende soll man nicht aufhalten.

mfg Maik
 
Nein danke, ich begebe mich auf keine törichten Reisen.
Aber mir wäre mit der Dokumenttyp-Deklaration nicht geholfen.
Im IE wird meine rechte "Sidebar" unterhalb das "Textfeldes" angezeigt.
Woran liegt es?
 
Du solltest neben dem IE auch mal die standardkonformen Browser (Firefox, Mozilla, Netscape, Opera, Safari, usw.) auf deine Seite loslassen, denn in ihnen sieht's derzeit auch nicht besser aus :p

Ich geh hier jetzt nicht jeden einzelnen Fehler im HTML- und CSS-Code mit dir hier durch, da die Liste einfach zu lang ist, sondern poste hier die valide Fassung des Quellcodes, den ich soweit in den o.g. User-Agents erfolgreich getestet habe:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="Ein absoluter Pfad zum Icon auf dem Laufwerk C: ergibt im WWW wenig Sinn">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="Title" CONTENT="Discreated.de ">
<META NAME="Author" CONTENT="name">
<META NAME="Publisher" CONTENT="name">
<META NAME="Copyright" CONTENT="Copyright \'08 discreated.de">
<META NAME="Revisit-after" CONTENT="7 Days">
<META NAME="Keywords" CONTENT="discreated, community für webdesigner und co, homepage hilfe, cinema4d, aftereffects, photoshop, gimp, tutorials, grafiken, kostenlose css-designs, kostenlose templates">
<META NAME="Description" CONTENT="www.discreated.de bietet ihnen ausführliche HomepageHilfe, gute Tutorials für Grafiker und eine Community für jedermann.">
<META NAME="page-topic" CONTENT="grafikdesign, webdesign uvm">
<META NAME="Audience" CONTENT="all">
<META NAME="Language" CONTENT="de">
<META NAME="Robots" CONTENT="INDEX,FOLLOW">
<title>Discreated - Home</title>

<style type="text/css">
* {
margin:0;
padding:0;
}
body {background-color: #dddddd;background-image:url();}

a{color:#000000; font-size: 12px; text-decoration: none; font-family: Verdana, sans-serif;}

a:hover {color: #666666; font-size: 12px; text-decoration: none; font-family: Verdana, sans-serif;}

a:link {color: #333333; font-size: 12px; text-decoration: none; font-family: Verdana, sans-serif;}

a:active {color: #555555; font-size: 12px; text-decoration: none; font-family: Verdana, sans-serif;}

a:visited {color: #444444; font-size: 12px; text-decoration: none; font-family: Verdana, sans-serif;}

#Design {
width:800px;
margin-left:100px;
}

#Header_oben {
margin-top: 40px;
height: 200px;
width: 800px;
background-color: #ffffff;
background-image:url(http://discreated.de/img/Design/header.png);
color: #EBB000;
border: 0px solid #888888;
padding: 0px;
}

#nav_container {
margin-top: -60px;
width: 800px;
height: 52px;
background-color: #xxx;
color: #000000;
border: 0px solid #888888;
padding: 0px 0px 0px 0px;
background-image: url();
}

#Textfeld {
width: 610px;
background-color: #xxx;
color: #222222;
background-image: url(http://discreated.de/img/Design/TF.png);
border: 0px solid #888888;
margin-bottom: 0px;
padding: 10px 10px 0px 10px;
}

#Textfeldup {
width: 620px;
height: 30px;
background-color: #xxx;
color: #222222;
background-image: url(http://discreated.de/img/Design/TFO.png);
border: 0px solid #888888;
margin-bottom: 0px;
margin-top: 0px;
padding: 5px 0px 0px 10px;
}

#Textfelddown {
width: 610px;
height: 30px;
background-color: #xxx;
color: #222222;
background-image: url(http://discreated.de/img/Design/TFU.png);
border: 0px solid #888888;
margin-bottom: 0px;
padding: 0px 10px 0px 10px;
}

#sidebar_container {
width: 140px;
background-color: #ffffff;
color: #222222;
border: 0px solid #888888;
margin-bottom: 0px;
padding: 0px 10px 0px 5px;
background-image: url(http://discreated.de/img/Design/SL.png);
}

#sidebarup {
width: 145px;
height: 8px;
background-color: #ffffff;
color: #222222;
border: 0px solid #888888;
margin-top: 0px;
padding: 0px 5px 0px 5px;
background-image: url(http://discreated.de/img/Design/SLO.png);
overflow:hidden;
}

#sidebardown {
width: 145px;
height: 8px;
background-color: #ffffff;
color: #222222;
border: 0px solid #888888;
margin-bottom: 0px;
padding: 0px 5px 0px 5px;
background-image: url(http://discreated.de/img/Design/SLU.png);
overflow:hidden;
}

#Feld_unten {
width: 780px;
height: 25px;
background-color: #ffffff;
color: #222222;
clear: both;
border: 0px solid #888888;
padding: 5px 10px 0px 10px;
background-image: url(http://discreated.de/img/Design/Bottom.png);
}

#mitte {
width: 795px;
}

#mitte_Links {
width: 630px;
float:left;
padding: 15px 0px 5px 0px;
}

#mitte_rechts {
width: 160px;
float:right;
padding: 15px 0px 5px 0px;
}

#link a:link, #link a:visited {
display:block;
width:100%;
height:200%;
text-decoration:none;}
</style>
<style type="text/css" media="screen">
<!--

/* Allgemeine Einstellungen */
body
{
font-family: Verdana, sans-serif;
font-size: 15px;
overflow: auto;
padding: 10px;
margin: 0px;
}

/* Dieser Teil ist dafür, die Menüpunkte ohne Listenpunkt darzustellen */
ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

/* Hier stellt Ihr ein, wie weit die Schrift vom Menürand entfernt ist. */
li a
{
padding-right: 20px;padding-top: 5px;padding-left: 10px;
}

/* Hier wird das ganze Menü positioniert */
div.menu
{
position: absolute;
z-index: 3;
top: 210px;
left: 540px;
margin-left:-405px;
width:905px;
}

/* Dieser Punkt bestimmt die Menübreite */
.menu li
{
width: 160px;
float: left;
}

/* Hier bestimmt Ihr das Aussehen der Menülinks */
.menu a
{
border: 0px solid #000000;
background-color: #xxx;
background-image: url(http://discreated.de/img/Design/CMB.png);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 23px;
color: #00CCFF;
}

/* Hier bestimmt Ihr das Aussehen der Hintergründe der Menülinks, wenn Ihr mit der Maus drüber fahrt */
.menu a:hover
{
background-color: #XXX;
background-image: url(http://discreated.de/img/Design/CMBH2.png);
}

/* Hier bestimmt Ihr die Größe der Menülinks (Für weitere Menüs, müssen die Punkte entsprechend erweitert werden) */
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{
font-size: 15px;
display: none;
width: 160px;
float: left;
}

/* Hier bestimmt Ihr die Farbe der Menülinks (Für weitere Menüs, müssen die Punkte entsprechend erweitert werden) */
#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #FFFFFF;
}
//-->

</style>

<!-- Anfang des Scriptes -->

<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>

<!-- Ende des Scriptes -->
</head>
<body>
<div id="Design">
     <div id="Header_oben"></div>
     <div class="menu">
          <ul>
              <li><a href="http://community.discreated.de" onMouseOver="montre('smenu4');" onMouseOut="cache('smenu4');"><span style="font-size: 15px;">Community</span></a>
                     <ul id="smenu4" onMouseOver="montre('smenu4');" onMouseOut="cache('smenu4');">
                         <li><a href="http://www.tutorials.de/forum.php"><span style="font-size: 15px;">Forum</span></a></li>
                         <li><a href="http://www.tutorials.de/login.php"><span style="font-size: 15px;">Einloggen</span></a></li>
                         <li><a href="http://www.tutorials.de/register.php"><span style="font-size: 15px;">Registrieren</span></a></li>
                     </ul>
              </li>
              <li><a href="http://webmaster.discreated.de" onMouseOver="montre('smenu1');" onMouseOut="cache('smenu1');"><span style="font-size: 15px;">HomepageHilfe</span></a>
                     <ul id="smenu1" onMouseOver="montre('smenu1');" onMouseOut="cache('smenu1');">
                         <li><a href="http://www.tutorials.de/gfx.php"><span style="font-size: 15px;">Grafix</span></a></li>
                         <li><a href="http://www.tutorials.de/designs.php"><span style="font-size: 15px;">Layouts/Designs</span></a></li>
                         <li><a href="http://www.tutorials.de/hp-tools.php"><span style="font-size: 15px;">Tools</span></a></li>
                     </ul>
              </li>
              <li><a href="http://tutorials.discreated.de" onMouseOver="montre('smenu2');" onMouseOut="cache('smenu2');"><span style="font-size: 15px;">Tutorials</span></a>
                     <ul id="smenu2" onMouseOver="montre('smenu2');" onMouseOut="cache('smenu2');">
                         <li><a href="http://www.tutorials.de/tutorials/photoshop.php"><span style="font-size: 15px;">Photoshop</span></a></li>
                         <li><a href="http://www.tutorials.de/tutorials/aftereffects.php"><span style="font-size: 15px;">After Effects</span></a></li>
                         <li><a href="http://www.tutorials.de/tutorials/cinema4d.php"><span style="font-size: 15px;">Cinema4d</span></a></li>
                         <li><a href="http://www.tutorials.de/tutorials/gimp.php"><span style="font-size: 15px;">Gimp</span></a></li>
                     </ul>
              </li>
              <li><a href="http://showroom.discreated.de" onMouseOver="montre('smenu3');" onMouseOut="cache('smenu3');"><span style="font-size: 15px;">Showroom</span></a>
                     <ul id="smenu3" onMouseOver="montre('smenu3');" onMouseOut="cache('smenu3');">
                         <li><a href="http://www.tutorials.de/showroom/toode.php"><span style="font-size: 15px;">2d</span></a></li>
                         <li><a href="http://www.tutorials.de/showroom/threede.php"><span style="font-size: 15px;">3d</span></a></li>
                         <li><a href="http://www.tutorials.de/showroom/vdo.php"><span style="font-size: 15px;">Video</span></a></li>
                     </ul>
              </li>
          </ul>
     </div>
     <div id="nav_container"></div>
     <div id="mitte">
          <div id="mitte_Links">
               <div id="Textfeldup">
                    <table border="0" style="width:610px;height:25px;background:url(http://discreated.de/img/Design/TFOI.png);">
                           <tbody>
                                  <tr>
                                  <td align="right"><b><font face="arial" color="#ffffff">Home</font></b></td>
                                  </tr>
                           </tbody>
                    </table></div>
               <div id="Textfeld">
                    Hier entsteht eine neue Internetpräsidenz! &lt;- Alex meinte, ich soll das dahin tun..
                    <table border="1">
                           <tbody>
                                  <tr>
                                      <td>&nbsp;</td>
                                      <td>
                                          <p><font size="2" face="Arial">Kostenlose Grafiken</font></p>
                                          <p><font size="2" face="Arial">Hier findet ihr kostenlose Grafiken, für eure Homepage, Foren, communitys...</font></p>
                                      </td>
                                  </tr>
                                  <tr>
                                  <td><img width="50" height="50" src="http://img59.imageshack.us/img59/5332/communityvf1.png" alt="Community"></td>
                                  <td>
                                      <p><font size="2" face="Arial">Community und Forum</font></p>
                                      <p><font size="2" face="Arial">Wir bieten ein Hilfreiches Forum, eine Community mit Chat und vielen weiteren dingen.</font></p>
                                  </td>
                                  </tr>
                                  <tr>
                                  <td>&nbsp;</td>
                                  <td>
                                      <p><font size="2" face="Arial">Tutorials für jedermann</font></p>
                                      <p><font size="2" face="Arial">Wenn ihr noch keine Tutorials gemacht habt, oder noch keins angeschaut habt seit ihr hier genau richtig.</font><font size="2"><br></font>
                                      <font size="2" face="Arial">Es geht um Adobe Photoshop, Aftereffects, Maxon Cinema4d, Gimp und mehr.</font></p>
                                </td>
                                </tr>
                                <tr>
                                <td>&nbsp;</td>
                                <td>
                                    <p><font size="2" face="Arial">HomepageHilfe</font></p>
                                    <p><font size="2" face="Arial">Brauchbare Homepage Hilfen von Designs bis Tools gibt es kostenlos für euch.</font></p>
                                </td>
                                </tr>
                                <tr>
                                <td>&nbsp;</td>
                                <td>
                                    <p><font size="2" face="Arial">Showroom</font></p>
                                    <p><font size="2" face="Arial">Ihr habt ein fertiges Video oder eine 3d-rendering?</font><font size="2"><br>
                                    </font>             <font size="2" face="Arial">Dann postet es doch hier und lasst es bewerten.</font></p>
                                </td>
                                </tr>
                                </tbody>
                           </table>
                           <br><br><br>
                           <b><a title="Leben in Deutschland" href="http://www.g-orgus.de/">Leben in Deutschland</a></b><br>
                           <a href="http://www.deutscher-index.info" target="_blank">Webkatalog</a>
                           <p>&nbsp;</p>
                    </div>
                    <div id="Textfelddown"></div>
          </div>
          <div id="mitte_rechts">
               <div id="sidebarup"></div>
               <div id="sidebar_container">
                    <table width="145" border="0" cellspacing="0">
                           <tbody>
                                  <tr>
                                  <td style="background-image: url(http://discreated.de/img/Design/sidebar.jpg);"><strong><span style="color: rgb(255, 255, 255);">Login</span></strong></td>
                                  </tr>
                                  <tr>
                                  <td>
                                      <table width="140" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
                                             <tr>

                                             <td>
                                                 <form name="form2" method="post" action="../checklogin.php">
                                                       <table width="100%" cellspacing="1" cellpadding="3" border="0" bgcolor="#ffffff">
                                                              <tbody>
                                                                     <tr>
                                                                     <td colspan="3"><strong>Member Login </strong></td>
                                                                     </tr>
                                                                     <tr>
                                                                     <td>Username:</td>
                                                                     </tr>
                                                                     <tr>
                                                                     <td><input type="text" size="15" name="myusername" id="myusername"></td>
                                                                     </tr>
                                                                     <tr>
                                                                     <td>Password:</td>
                                                                     </tr>
                                                                     <tr>
                                                                     <td><input type="password" size="15" name="mypassword" id="mypassword"></td>
                                                                     </tr>
                                                                     <tr>
                                                                     <td><input type="submit" name="Submit" value="Login"></td>
                                                                     </tr>
                                                              </tbody>
                                                       </table>
                                                 </form>
                                             </td>

                                             </tr>
                                      </table>
                                  </td>
                                  </tr>
                                  <tr>
                                  <td style="background-image: url(http://discreated.de/img/Design/sidebar.jpg);">&nbsp;<span style="color: rgb(255, 255, 255);"><strong>News</strong></span></td>
                                  </tr>
                                  <tr>
                                  <td>Hie stehen viele News?!</td>
                                  </tr>
                                  <tr>
                                  <td style="background-image: url(http://discreated.de/img/Design/sidebar.jpg);">&nbsp;<span style="color: rgb(255, 255, 255);"><strong>Navi</strong></span></td>
                                  </tr>
                                  <tr>
                                  <td>Und hier noch ein paar links.</td>
                                  </tr>
                           </tbody>
                    </table>
               </div>
               <div id="sidebardown"></div>
          </div>
     </div>
     <div id="Feld_unten">
          <table border="0" align="center">
                 <tbody>
                        <tr>
                        <td>&nbsp;</td>
                        <td align="center"><span style="font-size: 15px;"><a href="http://discreated.de/aboutme.php" target="_self">Über Mich</a> | <a href="http://discreated.de/impress.php" target="_self">Impressum</a> | <a href="http://discreated.de/contact.php" target="_self">Kontakt</a> | <a href="http://discreated.de/partners.php">Partner</a></span></td>
                        <td>&nbsp;</td>
                        </tr>
                 </tbody>
          </table>
     </div>
</div><!-- // ENDE #Design -->

</body>
</html>
Ansonsten kann ich dir nur dringendst empfehlen, dich insbesondere mit der Auszeichnungssprache HTML und dem Erzeugen eines validen Markups intensiver zu beschäftigen.

mfg Maik
 
Zuletzt bearbeitet von einem Moderator:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück