CSS Layout, Unterschied Firefox IE -> Breite

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS Layout, Unterschied Firefox IE -> Breite

    Hallo,

    ich hab hier mal einen groben (Code)Ausschnitt meiner Seite:

    http://matze.net/tmp/layout.html

    Meine Frage: Wieso geht im Internet Explorer das content Element (edit: das mit dem roten border ) nicht über die volle Breite? Prinzipiell wird ein div (also block) Element doch immer über die volle verfügbare Breite dargestellt?

    Im Firefox funktioniert es (allerdings auch erst durch die Anpassung "right:10px").
    Zuletzt geändert von matz0r; 08.11.2007, 12:21.

  • #2
    Schonmal mit einer Breite in Pixeln probiert?
    Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

    [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
    Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

    Kommentar


    • #3
      Bei mir sieht es bis auf einen Positionierungsunterschied gleich aus. Meinst du vll. IE 6? Beide sind bei mir gleich breit.
      Sunshine CMS
      BannerAdManagement
      Borlabs - because we make IT easier
      Formulargenerator [color=red]Neu![/color]
      Herkunftsstatistik [color=red]Neu![/color]

      Kommentar


      • #4
        Original geschrieben von jahlives
        Schonmal mit einer Breite in Pixeln probiert?
        Klar, funktioniert! Aber ich will die Breite ja nicht fest vergeben...

        Original geschrieben von Benny-one
        Bei mir sieht es bis auf einen Positionierungsunterschied gleich aus. Meinst du vll. IE 6? Beide sind bei mir gleich breit.
        Ja, IE6! Da ist das rot-umrahmte Feld "minimal breit".

        Kommentar


        • #5
          Schonmal bei selfhtml gelesen? Scheint ein Prob mit IE 6 zu sein...
          Der Internet Explorer 6 berücksichtigt ferner nur einen Eckpunkt, sodass es diesem Browser nicht möglich ist, einem Element bei Angabe mehrerer Eckpunkte unter Verzicht auf width/height eine zu berechnende Breite und/oder Höhe zuzuweisen, wie dies im Beispiel auf das Element a7 zutrifft
          Und width:auto interpretiert der IE6 vermutlich so, dass er es so breit macht wie es der Inhalt verlangt

          Gruss

          tobi
          Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

          [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
          Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

          Kommentar


          • #6
            Danke, genau das "Beispiel" aus selfhtml habe ich auch gerade gefunden und wollte darauf hinweisen...

            Muss ich mir wohl was anderes überlegen ....

            Edit:
            Code:
            #content{
            position:static;
            margin-left: 185px;
            }
            Damit scheint es zu funktionieren.. Ich teste mal weiter!
            Zuletzt geändert von matz0r; 08.11.2007, 13:27.

            Kommentar


            • #7
              bau n wrapper drum rum - auf was (außer dem inhalt selbst) soll sich sonst width: auto beziehen? und gib dem content nicht postion: absolute; damit kommst du deinem ziel schon näher...
              **********
              arkos
              **********

              Kommentar


              • #8
                Original geschrieben von arkos
                auf was soll sich sonst width: auto beziehen?
                Auf das Elternelement? body? html? Aber wie schon gesagt: Ein <div> Element ist in meinen Augen ein Block-Element. Also immer so breit wie der Bildschirm (wenn nicht anders angegeben).

                Original geschrieben von arkos
                und gib dem content nicht postion: absolute; damit kommst du deinem ziel schon näher...
                Naja, "absolut" war für mich die beste Lösung gewesen (würde der IE6 das nicht anders interpretieren.

                Aber die position wurde doch schon (siehe Post über dir) geändert -> Problem gelöst.

                Kommentar


                • #9
                  hatte vorhin dein ergebnis so hinbekommen...
                  kannst es dir ja zumindest anschauen, ob du dir da noch was rausziehen willst...

                  Code:
                  <!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">
                  <head>
                  <title>matze &raquo; Home</title>
                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                  <style type="text/css">
                  <!--
                  /* BASIC */
                  html, body, div, p, h1, h2, h3, ul, ol, 
                  span, a, table, td, form, img, li {
                  margin:0;
                  padding:0;
                  color:black;
                  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
                  }
                  
                  html {
                  height:100%;
                  }
                  
                  body {
                  height:100%;
                  }
                  
                  #wrapper
                  {
                  width: 100%;
                  display: block;
                  border: 1px dotted black;
                  }
                  
                  
                  /* banner container */
                  #head{
                  color:black;
                  border-bottom:5px solid #b1e101;
                  padding-top:20px;
                  padding-bottom:10px;
                  margin:0 0 20px 0;
                  background:url(/xxxx.gif) repeat-x;
                  
                  }
                  
                  /* Hauptmenu */
                  
                  #menu{
                  font-size:13px;
                  float:left;
                  width:165px;
                  display: block;
                  border: 1px solid black;
                  }
                  
                  
                  
                  
                  /* Main Container */
                  #content{
                  font-size:12px;
                  display: block;
                  margin:15px 10px 10px 180px;
                  width:auto;
                  }
                  
                  
                  
                  
                  
                  -->
                  </style>
                  </head>
                  <body>
                  <div id="wrapper">
                  	<div id="head">
                  	y
                  	</div>
                  
                  	<div id="menu">
                  	Menu
                  	</div>
                  
                  	<div id="content" style="border:1px solid red">
                  		<h1>Base</h1>
                  		<br />
                  		<br />
                  		Home
                  		<br />
                  		<br />
                  		<br />
                  		<br />
                  	</div>
                  </div>
                  </body>
                  </html>
                  **********
                  arkos
                  **********

                  Kommentar

                  Lädt...
                  X