David: CSS problem....

ich habe ein problem mit css, dass unter mac os x richtig angezeigt wird (safari, IE, Netscape), jedoch unter winMe bzw. win 2000 total scheisse aussieht.

so sieht das aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
  <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
  <title>x</title>
  <link href="style.css" rel="stylesheet" media="all">
 </head>

<body>
  <div class="airlock">
   <a id="top"></a>
   <ul class="menu">
   <li><a title="1" href="1.php">Link 1</a>
   <li><a title="2" href="2.php">Link 2</a>
   </ul>
   <div class="face">
   bla
</div>
 </body>

</html>

das style css sieht so aus:

.airlock {
text-align: left;
margin: auto;
width: 750px;
}

.menu {
float: left;
width: 125px;
list-style: none outside;
padding: 0;
margin: 0 10px 0 0;
background: #ffffff;
color: #000;
border: solid 1px #000;
font: 10px/15px verdana, geneva, helvetica, arial, sans-serif;
}

.menu li {
padding: 0;
margin: 0;
border: none;
}

.menu li a {
display: block;
padding: 4px 6px;
margin: 0;
background: #ffffff;
color: #000;
border-top: solid 1px #73a5d3;
border-bottom: solid 1px #39526b;
}

.face {
float: left;
width: 565px;
margin: 0 0 20px 0;
background: #ddd;
color: #000;
border: solid 1px #000;
}

ich habe mal ein bild angehängt, wies sein soll, und wies aussieht! weiß jemand BITTE!(!) wie das zu lösen ist? das treibt mich noch in die verzweiflung!

  1. Hallo,

    in html werden Zeilenumbrüche und Leerzeichen als Leerzeichen interpretiert. IE6 zeigt also die Seite völlig korrekt an. Mach einfach den Zeilenumbruch vor <li> weg! Dann könnte es schon klappen.

    Warum benutzt Du eigentlich html4.01 statt xhtml?

    Jürgen H.

    1. Hallo,

      in html werden Zeilenumbrüche und Leerzeichen als Leerzeichen interpretiert. IE6 zeigt also die Seite völlig korrekt an. Mach einfach den Zeilenumbruch vor <li> weg! Dann könnte es schon klappen.

      Warum benutzt Du eigentlich html4.01 statt xhtml?

      Jürgen H.

      ähm.. erstmal danke ihr beiden! daran lags doch echt...
      zweitens xhtml kapier ich nicht so ganz. gibts irgendwo vielleicht anleitungen zum umstieg?

      1. gibts irgendwo vielleicht anleitungen zum umstieg?

        Du kannst in Selfhtml blättern. Ist aber alles nicht so schwierig wie man denken mag. Nehme einfach einen anderen DOCTYPE (xhtml 1.0 würde ich empfehlen) Die DOCTYPE-Angabe dazu kannst Du Dir aus Selfhtml kopieren. Ich würde Transitional nehmen.

        Hier ein paar Tipps, die fast schon alle wichtigen Unterschiede abdecken:

        1. Elemente immer klein schreibe (<h3> statt <H3>)
        2. Attribute ebenso (<a onclick=""> statt <a onClick="">)
        3. Immer ein End-Element verwenden (zu <li> gehört immer </li>). Wenn es dass nicht gibt, dann am Ende des Elements einen Schrägstrich benutzen: <img src="bild.png" alt="Alternativtext" />    <- hier steht der Schrägstrich vor der letzten Klammer!
        4. Attributangaben immer in Anführungszeichen: statt <img src=bild.png alt=Text> also <img src="bild.png" alt="Text" />

        Um zu testen ob alles klappt, kannst Du den Validator benutzen: http://validator.w3.org/.

        Jürgen H.

        1. hi.. danke schaus mir mal an..

          ich hab das problem gefunden!! es liegt nämlich nicht unbedingt an den zeilenumbrücken, sondern doch am css, nämlich fügt ma bei
          .menu li {
          ein
          display: inline;
          ein. dann klappts! :-P
          danke für alles

      2. Hi David,

        Warum benutzt Du eigentlich html4.01 statt xhtml?
        xhtml kapier ich nicht so ganz. gibts irgendwo vielleicht anleitungen zum umstieg?

        Anleitungen gibt es bestimmt zu Hauf im Netz. Es gab da mal eine sehr ausführliche Diskussion im Forum zu dem Thema: </archiv/2003/6/50016/#m273590>, die du dir vielleicht mal zu Gemüte führen solltest, bevor du Hals über Kopf auf XHTML umsteigst.

        Viele Grüße
        Torsten

  2. Hallo David,

    <ul class="menu">
       <li><a title="1" href="1.php">Link 1</a>
       <li><a title="2" href="2.php">Link 2</a>
       </ul>

    sollte zu <ul class="menu"><li><a title="1" href="1.php">Link 1</a><li><a title="2" href="2.php">Link 2</a></ul>

    werden, dann klappt es bei mir (Win IE 5.5). Ich tipp mal auf systembedingt unterschiedlich interpretierte Umbrüche im Editor.

    Schöne Grüße aus Köln-Ehrenfeld,

    Elya

    --
    We are still confused, but on a higher level.
    1. Es würde mich noch interessieren, welchen Editor du unter Mac OSX benutzt!

      Schöne Grüße aus Köln-Ehrenfeld,

      Elya

      --
      We are still confused, but on a higher level.
      1. Es würde mich noch interessieren, welchen Editor du unter Mac OSX benutzt!

        Schöne Grüße aus Köln-Ehrenfeld,

        Elya

        ja shit... daran kanns auch liegen.
        ich benutzt bbedit (www.barebones.com)
        ein super geiles programm!
        da hab ich wohl die falschen line breaks genommen (obwohl sind UNIX line breaks falsch? ich könnte noch MAC und DOS/WINDOWS nehmen...)

        1. Hallo Davi,

          ja shit... daran kanns auch liegen.

          das meinte ich gar nicht so, ich bin nur gerade von CDs html-Editor auf Hydra (Freeware) umgestiegen und experimentiere noch ein wenig damit, sieht aber schon ganz gut aus. bbedit hat mir (bisher) in der Light-Version nicht gefallen und die Vollversion kostet ja gaz ordentlich. Wollte nur mal etwas Erfahrungen austauschen...

          »(obwohl sind UNIX line breaks falsch? ich könnte noch MAC und DOS/WINDOWS nehmen...)

          hab ich aber auch so eingestellt bei Hydra, glaub ich.

          Schöne Grüße aus Köln-Ehrenfeld,

          Elya

          --
          We are still confused, but on a higher level.
        2. Moin!

          da hab ich wohl die falschen line breaks genommen (obwohl sind UNIX line breaks falsch? ich könnte noch MAC und DOS/WINDOWS nehmen...)

          Die Zeilenumbrüche sind egal. Du mußt nur dafür sorgen, dass diese Umbrüche nicht Bestandteil deines <li> werden - indem du </li> schreibst, bevor der Umbruch kommt.

          Es ist eine gute Angewohnheit, auch bei HTML _alle_ Tags abzuschließen! Dann treten solche seltsamen Effekte nämlich nicht auf. Und es liest sich auch einfacher, weil man zu jedem Anfang auch ein Ende findet, und nicht raten muß, wo ein Tag denn nun zu Ende ist - auch der Browser muß dann nicht raten.

          - Sven Rautenberg

          --
          SELFTREFFEN 2003 - http://selftreffen.kuemmi.ch/
          ss:) zu:) ls:[ fo:} de:] va:) ch:] sh:) n4:# rl:| br:< js:| ie:( fl:( mo:|