Tributer: Bilder werden im IE verschoben

Hallo zusammen.

Bastel grade an einer Homepage. Im firefox sieht alles einwandfrei aus, der ie jedoch verschiebt die Bilder der horizontalen Navigation ein wenig.
Dadurch sieht das ganze etwas doof aus im ie.

Es wäre nett wenn mal jemand über den Quellcode schauen könnte.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
       "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<style type="text/css">  
body {  
scrollbar-arrow-color: #808080;  
scrollbarBaseColor: #000000;  
scrollbar-track-color: #696969;  
scrollbar-face-color: #696969;  
scrollbar-highlight-color: #696969;  
scrollbar-3dlight-color: #808080;  
scrollbar-darkshadow-color: #000000;  
scrollbar-shadow-color: #000000;  
}  
</style>  
<title>Test</title>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
  
<script type="text/javascript">  
<!--  
function info()  
 {  
  werbung=window.open('kontakt.php','popup','width=760,height=600,top=135,left=135');  
  werbung.focus;  
 }  
//-->  
</script>  
</head>  
  
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">  
<!-- ImageReady Slices (PSD.psd) -->  
<table id="Tabelle_01" width="1025" height="768" border="0" cellpadding="0" cellspacing="0">  
 <tr>  
  <td colspan="7">  
   <img src="Bilder/index_01.jpg" width="1024" height="169" alt=""></td>  
  <td>  
   <img src="Bilder/Abstandhalter.gif" width="1" height="169" alt=""></td>  
 </tr>  
 <tr>  
  <td rowspan="5">  
   <img src="Bilder/index_02.jpg" width="42" height="599" alt=""></td>  
  <td rowspan="2">  
   <a href="home.html" target="main"><img src="Bilder/index_03.jpg" width="141" height="55" alt=""  
  
  border="0"></a></td>  
  <td>  
   <a href="bio.html" target="main"><img src="Bilder/index_04.jpg" width="211" height="53" alt=""  
  
  border="0"></a></td>  
  <td>  
   <img src="Bilder/index_05.jpg" width="140" height="53" alt=""></td>  
  <td>  
   <a href="kontakt.php target="_blank" onclick="info(); return false;"<img src="Bilder/index_06.jpg"  
  
   width="188" height="53" alt=""border="0"></a></td>  
  <td>  
   <img src="Bilder/index_07.jpg" width="258" height="53" alt=""></td>  
  <td rowspan="5">  
   <img src="Bilder/index_08.jpg" width="44" height="599" alt=""></td>  
  <td>  
   <img src="Bilder/Abstandhalter.gif" width="1" height="53" alt=""></td>  
 </tr>  
 <tr>  
  <td colspan="4" rowspan="2">  
   <img src="Bilder/index_09.jpg" width="797" height="15" alt=""></td>  
  <td>  
   <img src="Bilder/Abstandhalter.gif" width="1" height="2" alt=""></td>  
 </tr>  
 <tr>  
  <td>  
   <img src="Bilder/index_10.jpg" width="141" height="13" alt=""></td>  
  <td>  
   <img src="Bilder/Abstandhalter.gif" width="1" height="13" alt=""></td>  
 </tr>  
 <tr>  
  <td colspan="5">  
   <iframe src="home.html" style="border:0px #FFFFFF none;" name="main" scrolling="yes" frameborder="0"  
  
  align=aus marginheight="0px" marginwidth="0px" height="504"width="937""></iframe></td>  
  <td>  
   <img src="Bilder/Abstandhalter.gif" width="1" height="506" alt=""></td>  
 </tr>  
 <tr>  
  <td colspan="5">  
   <img src="Bilder/index_12.jpg" width="938" height="25" alt=""></td>  
  <td>  
   <img src="Bilder/Abstandhalter.gif" width="1" height="25" alt=""></td>  
 </tr>  
</table>  
<!-- End ImageReady Slices -->  
</body>  
</html>

Vielen Dank.

  1. Es wäre nett wenn mal jemand über den Quellcode schauen könnte.

    ich hab ihn ansehen und festgestellt, dass ich ihn mir nicht weiter ansehen möchte

    wenn du die zeit hast und etwas dazulernen möchtest, erkläre ich dir (oder jemand anders hier) sicher gerne, wie du deinen code auf ein minimum reduzierst und gleichzeitig deine probleme loswirst

    mit deinem aktuellen code wirst du inzukunft noch auf weitere kleinigkeiten stoßen, die dich stören werden

    1. Es wäre nett wenn mal jemand über den Quellcode schauen könnte.
      ich hab ihn ansehen und festgestellt, dass ich ihn mir nicht weiter ansehen möchte

      wenn du die zeit hast und etwas dazulernen möchtest, erkläre ich dir (oder jemand anders hier) sicher gerne, wie du deinen code auf ein minimum reduzierst und gleichzeitig deine probleme loswirst

      ja die zeit habe ich und würde gerne lernen. Das onlinebeispiel befindet sich auf www.berrycline.com/test.

      Habe aufgrund meiner geringen kenntnisse diese webseite mit Photoshop erstellt und slices benutzt. Das war wahrscheinlich der falsche weg.
      Wie mache ich das denn besser?

      mit deinem aktuellen code wirst du inzukunft noch auf weitere kleinigkeiten stoßen, die dich stören werden

      Wäre nett wenn man mir diese kleinigkeiten nennen könnte und evtl. die lösungen dazu zeigen könnte.

      1. ja die zeit habe ich und würde gerne lernen. Das onlinebeispiel befindet sich auf www.berrycline.com/test.
        Habe aufgrund meiner geringen kenntnisse diese webseite mit Photoshop erstellt und slices benutzt. Das war wahrscheinlich der falsche weg.

        photoshop war noch nie eine gute idee :D

        Wie mache ich das denn besser?

        denke über den inhalt nach, zeichne diesen mit html aus und formatiere ihn anschließend

        beginne mit dem <http://de.selfhtml.org/html/allgemein/grundgeruest.htm@title=html grundgerüst>

        darin fügst du eine überschrift erster ordnung ein (h1), ein div-element mit der id "inhalt" und eine unsortierte liste für die navigation

        als lesestoff tippe ich auf diese beiden dinge:
        http://de.selfhtml.org/css/layouts/navigationsleisten.htm
        http://www.wellstyled.com/css-nopreload-rollovers.html

        1. ja die zeit habe ich und würde gerne lernen. Das onlinebeispiel befindet sich auf www.berrycline.com/test.
          Habe aufgrund meiner geringen kenntnisse diese webseite mit Photoshop erstellt und slices benutzt. Das war wahrscheinlich der falsche weg.
          photoshop war noch nie eine gute idee :D

          Wie mache ich das denn besser?
          denke über den inhalt nach, zeichne diesen mit html aus und formatiere ihn anschließend

          beginne mit dem <http://de.selfhtml.org/html/allgemein/grundgeruest.htm@title=html grundgerüst>

          darin fügst du eine überschrift erster ordnung ein (h1), ein div-element mit der id "inhalt" und eine unsortierte liste für die navigation

          als lesestoff tippe ich auf diese beiden dinge:
          http://de.selfhtml.org/css/layouts/navigationsleisten.htm
          http://www.wellstyled.com/css-nopreload-rollovers.html

          Ok dann mache ich das mal heute nachmittag.
          Ich fang klein mit dem Grundgerüst und einer liste mit dem Inhalt an.

          Würdest du mir nacher helfen das per stylesheet fürs auge zu formatieren?

          1. Würdest du mir nacher helfen das per stylesheet fürs auge zu formatieren?

            wenns ein problem gibt, welches du nicht selbst mit der hilfe von selfhtml lösen kannst, wird dir hier sicher genre geholfen

            folgender artikel könnte dich ggf auch interessieren:
            http://de.selfhtml.org/css/layouts/mehrspaltige.htm

            nachdem ich aber nicht weiß, wie deine seite mal aussehen soll, ist das nur eine mutmaßung :D

            1. Würdest du mir nacher helfen das per stylesheet fürs auge zu formatieren?
              wenns ein problem gibt, welches du nicht selbst mit der hilfe von selfhtml lösen kannst, wird dir hier sicher genre geholfen

              folgender artikel könnte dich ggf auch interessieren:
              http://de.selfhtml.org/css/layouts/mehrspaltige.htm

              nachdem ich aber nicht weiß, wie deine seite mal aussehen soll, ist das nur eine mutmaßung :D

              naja ich versuche einen Internetauftritt für einen Hobby Sänger zu gestalten.
              Muss mir da auch nochmal ein Layout überlegen. Grade einfallslos ein bisschen.

              Wollte halt News einbauen die über ein PHP formular eingestellt werden können. Dafür ist das schon ziemlich ok wenn ich das mit css anstatt mit Bildern in ner Tabelle löse.

              Vielen Dank schonmal ich werde mich sicher nochmal melden.

              1. Würdest du mir nacher helfen das per stylesheet fürs auge zu formatieren?
                wenns ein problem gibt, welches du nicht selbst mit der hilfe von selfhtml lösen kannst, wird dir hier sicher genre geholfen

                folgender artikel könnte dich ggf auch interessieren:
                http://de.selfhtml.org/css/layouts/mehrspaltige.htm

                nachdem ich aber nicht weiß, wie deine seite mal aussehen soll, ist das nur eine mutmaßung :D

                naja ich versuche einen Internetauftritt für einen Hobby Sänger zu gestalten.
                Muss mir da auch nochmal ein Layout überlegen. Grade einfallslos ein bisschen.

                Wollte halt News einbauen die über ein PHP formular eingestellt werden können. Dafür ist das schon ziemlich ok wenn ich das mit css anstatt mit Bildern in ner Tabelle löse.

                Vielen Dank schonmal ich werde mich sicher nochmal melden.

                So da meld ich mich nochmal.

                habe jetzt versucht ein css menu zu erstellen.
                jedoch ist die Schrift nicht mittig in der Grafik.

                siehe: http://www.berrycline.com/test_01/

                gibt es eine Möglichkeit das zu zentrieren?

                MFg Tributer

                1. So da meld ich mich nochmal.
                  habe jetzt versucht ein css menu zu erstellen.

                  tu dir selbst einene gefallen, und verwende eine <http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=unsortierte liste zur auszeichnung deines menüs>

                  gibt es eine Möglichkeit das zu zentrieren?

                  http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#text_align@title=text-align ist die gebräuchliche methode um text in einem block-element vertikal auszurichten

                  ggf solltest du die grundlagen zumindest überfliegen ;)

                  btw: "rollovermenu" ist eine schlechte bezeichnung

                  was ist, wenns mal kein rollovermenu mehr ist? bezeichne dinge stehts nach ihrem generellen wesen, nicht nach ihrer derzeitigen funktion oder ihrem aussehen

                  eine gute id für ein menü ist imho "menu" oder "navigation", "nav" oder vergleichbares

                  du gibst die natürliche sprache deiner seite mit "cs" an, ist das absicht?

                  wenn ja, dann hast du einen rechtschreibfehler, biographie schreibt man im tschechischen mit f

                  1. So da meld ich mich nochmal.
                    habe jetzt versucht ein css menu zu erstellen.
                    tu dir selbst einene gefallen, und verwende eine <http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=unsortierte liste zur auszeichnung deines menüs>

                    gibt es eine Möglichkeit das zu zentrieren?
                    http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#text_align@title=text-align ist die gebräuchliche methode um text in einem block-element vertikal auszurichten

                    ggf solltest du die grundlagen zumindest überfliegen ;)

                    btw: "rollovermenu" ist eine schlechte bezeichnung

                    was ist, wenns mal kein rollovermenu mehr ist? bezeichne dinge stehts nach ihrem generellen wesen, nicht nach ihrer derzeitigen funktion oder ihrem aussehen

                    eine gute id für ein menü ist imho "menu" oder "navigation", "nav" oder vergleichbares

                    du gibst die natürliche sprache deiner seite mit "cs" an, ist das absicht?

                    wenn ja, dann hast du einen rechtschreibfehler, biographie schreibt man im tschechischen mit f

                    Ohh nicht gesehen das die Lang falsch war.

                    Habe den Code ein wenig angepasst. Aber jetzt richtet er mir das Block element an der Tabelle mittig aus, und nicht wie gewollt, das div Objekt(sprich den Text oder Link) mittig am Block objekt.

                    Außerdem habe ich immer kleine weiße leerräume zwichen den einzelnen items der Tabelle. Kann man das auch umgehen?

                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
                            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
                    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
                    <head>  
                     <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
                     <title>Rollover test</title>  
                      
                      
                    <style type="text/css">  
                      
                        #menu a {height: 30px;  
                           background: url("http://www.berrycline.com/test_01/Button.gif") 0px 0px no-repeat;  
                           display: block;  
                                  font: bold 14px/1 sans-serif;  
                           vertical-align:middle;  
                           color:#FFFFFF;  
                           vertical-align:bottom;  
                      
                            }  
                      
                        #menu a:hover {background-position: 0px -30px;}  
                      
                        #menu a:active {background-position: 0px -60px;}  
                      
                      
                        </style>  
                      
                    <style type="text/css">  
                      td      { height:30px; width:125px;}  
                      .oben    { vertical-align:top;     }  
                      .mittig  { vertical-align:middle;  }  
                      .unten   { vertical-align:bottom;  }  
                      
                      
                      
                    </style>  
                      
                      
                      
                      
                    </head>  
                    <body>  
                      
                    <table id="menu" align="left" border="0">  
                      
                     <td class="mittig"><a href="">Home</a></td>  
                    <tr>      </tr>  
                     <td><a href="">Home</a></td>  
                      
                      
                    </td>  
                      
                    </body>  
                    </html>  
                    
                    
                    1. Nen Bisschen was habe ich schon wieder geschafft.
                      Also aneinander sind die bilder aus dem block jetzt.

                      jetzt nur noch das Ausrichten.

                      <style type="text/css">  
                        
                          #menu a {height: 30px;  
                             background: url("http://www.berrycline.com/test_01/Button.gif") 0px 0px no-repeat;  
                             display: block;  
                                    font: bold 14px/1 sans-serif;  
                             vertical-align:middle;  
                             color:#FFFFFF;  
                             vertical-align:bottom;  
                        
                              }  
                        
                          #menu a:hover {background-position: 0px -30px;}  
                        
                          #menu a:active {background-position: 0px -60px;}  
                        
                        
                          </style>  
                        
                      <style type="text/css">  
                        table      { height:30px; width:125px;}  
                        .oben    { vertical-align:top;     }  
                        .mittig  { vertical-align:middle;  }  
                        .unten   { vertical-align:bottom;  }  
                        
                        
                        
                      </style>  
                        
                        
                        
                        
                      </head>  
                      <body>  
                        
                      <table id="menu" align="left" border="1">  
                        
                       <tr class="mittig"><a href="">Home</a></tr>  
                       <tr><a href="">Home</a></tr>  
                        
                        
                        
                      </body>  
                      </html>  
                      
                      

                      Mfg Tributer

                      1. du sollst doch keine tabelle verwenden ;) machs mit einer liste und all deine probleme sind gelöst (den link zum selfhtml-artikel hab ich dir ja gegeben)

                        1. du sollst doch keine tabelle verwenden ;) machs mit einer liste und all deine probleme sind gelöst (den link zum selfhtml-artikel hab ich dir ja gegeben)

                          hat ja iwie nicht funktioniert :D
                          Ich versuchs mal mit ner liste eben.

                          MFG Tributer

                          1. du sollst doch keine tabelle verwenden ;) machs mit einer liste und all deine probleme sind gelöst (den link zum selfhtml-artikel hab ich dir ja gegeben)

                            hat ja iwie nicht funktioniert :D
                            Ich versuchs mal mit ner liste eben.

                            MFG Tributer

                            Angepasst.
                            Schrift in der Mitte vom Button.
                            Problem Button wird durch das margin größer, sodass der css rollover des bilds nicht mehr funktioniert, da er zu viel von bild anzeigt.

                            Gibts da ne lösung?

                            Aktueller Quellcode

                              
                              
                            <style type="text/css">  
                              
                                #menu a {height: 29px;  
                                   background: url("http://www.berrycline.com/test_01/Button.gif") 0px 0px no-repeat;  
                                   display: block;  
                                          font: bold 12px/1 sans-serif;  
                                   margin: 0em 0; padding: 8px 0px 0px 0px;  
                                   color:#FFFFFF;  
                                   text-decoration: none;  
                                         }  
                              
                              
                                #menu a:hover {background-position: 0px -30px;}  
                              
                                #menu a:active {background-position: 0px -60px;}  
                              
                              
                                </style>  
                              
                            <style type="text/css">  
                              table      { height:30px; width:125px;}  
                              tr { text-align:center; vertical-align:middle; }  
                              
                              
                            </style>  
                              
                            <style type="text/css">  
                              tr { text-align:center; vertical-align:middle; }  
                              
                              
                            </style>  
                              
                            </head>  
                            <body bgcolor="#2F2F2F">  
                              
                            <div id="menu" align="left" border="0">  
                              
                             <a href="">Home</a>  
                             <a href="">Home</a>  
                             <a href="">Home</a>  
                             <a href="">Home</a>  
                            </div>  
                              
                            </body>  
                            </html>  
                            
                            
                            1. Gibts da ne lösung?

                              auf die gefahr hin, dass ich mich widerhole: verwende eine unsortierte liste

                              1. Gibts da ne lösung?
                                auf die gefahr hin, dass ich mich widerhole: verwende eine unsortierte liste

                                hatte ich eben aber da hats noch weniger hingehauen.

                                mit ner ul hatte ich immer abstände zwichen den einzelnen bildern.

                                habs grade nochmals versucht und hab diese lücken wieder...
                                Außerdem schaff ichs bei der UL nicht die sachen zu zentrieren vertikal.

                                Kannst du mal meine Fehler verbessern an dem Code damit ich das mal verstehe was ich falsch mache?

                                Wäre echt nett

                                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
                                        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
                                <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
                                <head>  
                                 <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
                                 <title>Rollover test</title>  
                                  
                                  
                                <style type="text/css">  
                                  
                                    #menu a {height: 29px;  
                                       background: url("http://www.berrycline.com/test_01/Button.gif") 0px 0px no-repeat;  
                                       display: block;  
                                              font: bold 12px/1 sans-serif;  
                                       margin: 0em 0; padding: 0px 0px 0px 0px;  
                                       color:#FFFFFF;  
                                       text-decoration: none;  
                                       vertikal-align:middle;  
                                             }  
                                  
                                  
                                    #menu a:hover {background-position: 0px -30px;}  
                                  
                                    #menu a:active {background-position: 0px -60px;}  
                                  
                                  
                                    </style>  
                                  
                                  
                                  
                                </head>  
                                <body bgcolor="#2F2F2F">  
                                  
                                <ul id="menu" align="left" border="0">  
                                  
                                 <li><a href="">Home</a></li>  
                                 <li><a href="">Home</a></li>  
                                 <li><a href="">Home</a></li>  
                                 <li><a href="">Home</a></li>  
                                </ul>  
                                  
                                </body>  
                                </html>  
                                
                                

                                Vielen Dank
                                Mfg Tributer

                                1. hatte ich eben aber da hats noch weniger hingehauen.

                                  das spielt keine rolle - die struktur deines xhtml-dokuments muss passen, wie das aussieht ist erstmal nebensächlich - mti vernünftigem code stehen dir dann alle formatierungsmöglichkeiten offen

                                  mit ner ul hatte ich immer abstände zwichen den einzelnen bildern.

                                  siehe oben - wähle elemente aufgrund ihrer sinnhaftigkeit, nicht aufgrund des derzeitigen aussehens

                                  Kannst du mal meine Fehler verbessern an dem Code damit ich das mal verstehe was ich falsch mache?

                                  nein kann ich nicht (zumindest will ich das nicht), aber du kannst es selbst verstehen oder versuchen bzw. dir folgendes durchlesen und erstmal selbst versuchen (da ist der lerneffekt imho um einiges größer)

                                  in ersterlinie: organisiere dir firebug und den webdeveloper toolbar

                                  in zweiter linie: verstehe welches element für was (sprich welches aussehen) verantwortlich ist und welche standard-eigenschaften es hat

                                  beispiel: die einrückung und die abstände zwischen den listen-elementen sind in den meisten browsern in form von aussenabständen (margin) gelöst

                                  arbeite dich also von aussen nach innen vor und blende alles innerhalb aus, damit du dich mit den elemente einzeln anfreunden kannst

                                  ul#menu {  
                                    background: green;  
                                  }  
                                    
                                  ul#menu * {  
                                    display: none;  
                                  }  
                                  
                                  

                                  damit schließt du aus, dass irgend eine formatierung der innenliegenden elemente das aussen herum beeinflussen - du kansnt dich also vorrang auf das ul-element konzentrieren

                                  wenn das alls soweit in ordnung ist (auch ein ul-element liefert gewisse standardformatierungen mit, die du erst per css loswerden musst), nimmst du dir die nächste ebene vor (die li-elemente) - wenn das soweit passt, dann knöpfst du dir die a-elemente vor

                                  nochmal, nicht vergessen: jedes element hat verschiedene standard-eigenschaften (vorrangig aussenabstände und innenabstände - diese musst du entfernen oder geeignete werte überschreiben)

                                  listen haben zusätzlich noch andere anzeigeeinschaften (list-item anstatt block oder inline) und natürlich die aufzählungszeichen

                                  align="left" und border="0" kannst du dir übrigens schenken, die darstellung ist einzig und allein aufgabe des css

                                  ---

                                  und nochmal: sollte es ein problem mit der liste geben, mach dir nicht selbst probleme und verwende "irgendwas anderes" sondern frage gezielt nach, wie du dein konkretes problem mit der liste beheben kannst ;)

                                  1. Ja, schön danke für die Hilfe. Bzw das verständlich machen.
                                    Ich habs.
                                    Wenns noch von code her sauber ist wärs ideal.

                                    Kannst du mal drüber schauen?

                                    Und ist das normal das die liste nach rechts hin nicht begrenzt ist?

                                    Man kann sie sicher auch begrenzen nur find dazu hier nichts.

                                    mit width im listen tag gehts nicht zumindest. Wie man im code sieht.

                                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                                            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                                    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
                                    <head>
                                     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
                                     <title>Rollover test</title>

                                    <style type="text/css">
                                        #menu li {
                                       list-style: none;
                                      }

                                    #menu a {height: 22px;
                                           background: url("http://www.berrycline.com/test_01/Button.gif") 0px 0px

                                    no-repeat;
                                           display: block;
                                                  font: bold 12px/1 sans-serif;
                                           margin: -0.3em 0; padding: 8px 0px 0px 0px;
                                           color:#FFFFFF;
                                           text-decoration: none;
                                           vertikal-align:middle;
                                                 }

                                    #menu a:hover {background-position: 0px -30px;}

                                    #menu a:active {background-position: 0px -60px;}

                                    ul#menu {
                                                 background: green;
                                                }

                                    </style>

                                    1. Ich habs.

                                      wunderbar

                                      Wenns noch von code her sauber ist wärs ideal.
                                      Kannst du mal drüber schauen?

                                      die hälfte fehlt zwar, aber:
                                      wenn du deinen code sauber einrückst und nicht unnötige leerzeilen reinklatscht, wird das alles gleich viel lesbarer :)

                                      Und ist das normal das die liste nach rechts hin nicht begrenzt ist?

                                      ein ul-element ist per default ein block element und nimmt die verfügbare breite ein (width: auto;) genau wie ein div-element das zb auch tut

                                      ein li-element ist per default ein list-item-element - es verhält sich prinzipiell wie ein block-element, nur dass es einen listenaufzählungspunkt hat

                                      Man kann sie sicher auch begrenzen nur find dazu hier nichts.

                                      mit einer geeigneten breitenangabe - idealerweis das eltern-element (also das umschließende ul-element)

                                      mit width im listen tag gehts nicht zumindest. Wie man im code sieht.

                                      ich sehe in deinem css kein width

                                      1. Ich habs.
                                        wunderbar

                                        Wenns noch von code her sauber ist wärs ideal.
                                        Kannst du mal drüber schauen?
                                        die hälfte fehlt zwar, aber:
                                        wenn du deinen code sauber einrückst und nicht unnötige leerzeilen reinklatscht, wird das alles gleich viel lesbarer :)

                                        Und ist das normal das die liste nach rechts hin nicht begrenzt ist?

                                        ein ul-element ist per default ein block element und nimmt die verfügbare breite ein (width: auto;) genau wie ein div-element das zb auch tut

                                        ein li-element ist per default ein list-item-element - es verhält sich prinzipiell wie ein block-element, nur dass es einen listenaufzählungspunkt hat

                                        Man kann sie sicher auch begrenzen nur find dazu hier nichts.
                                        mit einer geeigneten breitenangabe - idealerweis das eltern-element (also das umschließende ul-element)

                                        mit width im listen tag gehts nicht zumindest. Wie man im code sieht.
                                        ich sehe in deinem css kein width

                                        Ok das wäre alles erledigt. Habe einen Iframe eingebaut.

                                        Das aktuelle Problem besteht darin, dass der Iframe sich unter das menu schiebt, sobald er nicht mehr danebenn passt. Habe bereits versucht den Iframe rechts auszurichten oder das margin auf 125px(die Breite des menus) zu stellen. Jedoch hat er beim margin den Iframe 125 px vpm menu entfernt. und wenn ich das Fenster dann verkleinert habe hatte ich den Frame trotzdem unter der navigation.

                                        Gibt es eine Möglichkeit das alles so zu fixieren, das es im richtigen Format bleibt?

                                        <style type="text/css">  
                                          
                                          
                                            ul#menu li  {  
                                           list-style: none;  
                                           vertikal-align:middle;  
                                          
                                          }  
                                          
                                            ul#menu a   {  
                                           height: 22px;  
                                            background: url("http://www.berrycline.com/test_01/Button.gif") 0px 0px no-repeat;  
                                           display: block;  
                                                       font: bold 12px/1 sans-serif;  
                                           margin: -0.3em 0; padding: 8px 0px 0px 0px;  
                                           color:#FFFFFF;  
                                           text-decoration: none;  
                                          }  
                                          
                                          
                                            ul#menu a:hover {background-position: 0px -30px;}  
                                          
                                            ul#menu a:active {background-position: 0px -60px;}  
                                          
                                            ul#menu  {  
                                             width:125px;  
                                           float:left;  
                                          }  
                                          
                                          
                                        </style>  
                                        <style type="text/css">  
                                          ul.left {  
                                           margin-top:0px;  
                                           margin-left:0px;  
                                          }  
                                          
                                         img.left {  
                                           margin-left:-10px;  
                                           border: 0px;  
                                          }  
                                          
                                         iframe.left  
                                          {  
                                           margin-left: 0px;  
                                           width: 885px;  
                                           height:600px;  
                                           padding: 0 0em;  
                                           align:right;09:23 16.12.2008  
                                          }  
                                        </style>
                                        
                                        </head>  
                                        <body bgcolor="#2F2F2F">  
                                        <img src="http://www.berrycline.com/test/Bilder/index_01.jpg" class="left"></img>  
                                          
                                        <ul id="menu" class="left">  
                                         <li><a href="http://www.google.de" target="main">Home</a></li>  
                                         <li><a href="">Biographie</a></li>  
                                         <li><a href="http://www.berrycline.com/test/imp.html" target="main">Impressum</a></li>  
                                         <li><a href="">Kontakt</a></li>  
                                        </ul>  
                                          
                                        <iframe src="http://www.berrycline.com/test/home.html" name="main" class="left" border="0"></iframe>
                                        
                                        1. Ok das wäre alles erledigt. Habe einen Iframe eingebaut.

                                          wtf, warum ein ein iframe?

                                          Gibt es eine Möglichkeit das alles so zu fixieren, das es im richtigen Format bleibt?

                                          gib dem umliegenden element eine breite, sodass immer alle beiden elemente nebeneinander platz haben

                                          btw: warum zur hölle ein iframe?

                                          1. Ok das wäre alles erledigt. Habe einen Iframe eingebaut.
                                            wtf, warum ein ein iframe?

                                            Gibt es eine Möglichkeit das alles so zu fixieren, das es im richtigen Format bleibt?
                                            gib dem umliegenden element eine breite, sodass immer alle beiden elemente nebeneinander platz haben

                                            btw: warum zur hölle ein iframe?

                                            was is denn besser als ein iframe um inhalt zu tauschen, wenn ich auf den link im menu klicke?

                                            1. was is denn besser als ein iframe um inhalt zu tauschen, wenn ich auf den link im menu klicke?

                                              den quelltext auszulagern

                                              frames waren für diesen zweck noch nie eine gute idee

  2. Mahlzeit Tributer,

    Bastel grade an einer Homepage.

    Falsch. Du bastelst an einer suchmaschinenunfreundlichen und komplett inhaltslosen Tabelle.

    Im firefox sieht alles einwandfrei aus, der ie jedoch verschiebt die Bilder der horizontalen Navigation ein wenig.

    Und wie sollten Deine Leser das - Deiner Meinung nach - nachvollziehen können, wenn die Bilddateien fehlen? Bitte gib die Adresse eines Online-Beispiels an.

    Dadurch sieht das ganze etwas doof aus im ie.

    "Etwas doof" ist genauso wie "funzt nicht" keine hilfreiche Problembeschreibung.

    Es wäre nett wenn mal jemand über den Quellcode schauen könnte.

    Hab ich getan. Außer einer nicht besonders aussagekräftigen Bilder-Collage habe ich jedoch nichts gefunden.

    MfG,
    EKKi

    --
    sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
  3. Das Problem ist wie bereits angesprochen nicht der Browser, sondern die Tabelle. Weder die Quersummen noch die Längssummen deiner Zellen stimmen  überein mit der im Table-Tag geforderten Breiten- und Längeangabe und die rowspans und colspans sind dir völlig aus dem Ruder gelaufen.
    Gruß grrr...

  4. Ja, schön danke für die Hilfe. Bzw das verständlich machen.
    Ich habs.
    Wenns noch von code her sauber ist wärs ideal.

    Kannst du mal drüber schauen?

    Und ist das normal das die liste nach rechts hin nicht begrenzt ist?

    Man kann sie sicher auch begrenzen nur find dazu hier nichts.

    mit width im listen tag gehts nicht zumindest. Wie man im code sieht.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
    <head>  
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
     <title>Rollover test</title>  
      
      
    <style type="text/css">  
        #menu li {  
       list-style: none;  
      }  
      
        #menu a {height: 22px;  
           background: url("http://www.berrycline.com/test_01/Button.gif") 0px 0px  
      
    no-repeat;  
           display: block;  
                  font: bold 12px/1 sans-serif;  
           margin: -0.3em 0; padding: 8px 0px 0px 0px;  
           color:#FFFFFF;  
           text-decoration: none;  
           vertikal-align:middle;  
                 }  
      
      
        #menu a:hover {background-position: 0px -30px;}  
      
        #menu a:active {background-position: 0px -60px;}  
      
        ul#menu {  
                 background: green;  
                }  
      
        </style>  
      
      
      
    </head>  
    <body bgcolor="#2F2F2F">  
      
    <ul compact id="menu" align="left" border="0" width="125">  
      
     <li><a href="">Home</a></li>  
     <li><a href="">Home</a></li>  
     <li><a href="">Home</a></li>  
     <li><a href="">Home</a></li>  
    </ul>  
      
    </body>  
    </html>