tutorials.de Buch-Aktion 02/2012
ERLEDIGT
JA
ANTWORTEN
4
ZUGRIFFE
6311
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 17.03.07 14:36 #1
    outsidaa outsidaa ist offline Mitglied Bronze
    Registriert seit
    Mar 2005
    Beiträge
    30
    Es ist unglaublich, wie haben schönes Wetter, leider bin ich noch CSS-Problem-Behaftet. Wir müssen das jetzt ganz schnell Lösen, obwohl es sehr trivial ist, komm ich einfach nicht hinter und zweifel schon an mir selber.

    bei dem code:

    HTML-Code:
    <?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>New Document</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    
    <style type="text/css">

      * { border: 0; margin:0; padding: 0; }
      html,body {height:100%;}
      
      #header       {width:850px; background-color:blue; height:70px;}
      
      #page         {width:1003px;height:100%;}
      #page_right   {width:850px;}
      #page_left    {height:100%;width:150px; background-color:orange;float:left;}
      
      #content      {width: 850px;}
      #left_column  {width: 200px; float: left;}
      #center_column {width: 450px; float: left;}
      #right_column {width: 200px; float: left;}
    </style>

  </head>
  <body>
    <div id="page">
      <div id="page_left">
        <p>menu</p>
    <p>Hallo</p>
      </div>
      <div id="page_right">
        <div id="header">
          <h1>Header</h1>
        </div>
        <div id="content">
          <div id="left_column"><h1>Top Offers</h1></div>
          <div id="center_column"><h1>Quicksearch</h1></div>
          <div id="right_column"><h1>Advertising</h1></div>
        </div>  
      </div>
    </div>    
      
  </body>
</html>
    das ganze sieht bei Firefox so aus, dass er den Header hinter die LeftMenu Box schiebt und insgesamt ne breite von 850 hat statt 1000.

    beim ie6 habe ich einen abstand zwischen den boxen von 3 px obwohl alles auf null gesetzt ist.

    und der IE7 zeigt es so an wie ich es gerne hätte.

    Bilder im Anhang, würde mich freuen über schnelle Antwort, danke...

    1. FirefoxScreenshot 2. IE6Screenshot 3. IE7 Screenshot

    Lieben Gruß

    Adam
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken IE6 vs. IE7 vs. Firefox float Probleme-fire.jpg   IE6 vs. IE7 vs. Firefox float Probleme-ie6.jpg  

    IE6 vs. IE7 vs. Firefox float Probleme-ie7.jpg  
     
  2. 17.03.07 14:49 #2
    outsidaa outsidaa ist offline Mitglied Bronze
    Registriert seit
    Mar 2005
    Beiträge
    30
    Das Problem mit dem Firefox hat sich erledigt.
    Die Lösung war einfach ein margin-left mit der Eigenschaft !important die der IE7 und der IE6 nicht kennt.
    Fragt sich also nur noch, wie der IE6 auf die 3px kommt? Das kann ich einfach nicht nachvollziehen ...
     
  3. 17.03.07 14:50 #3
    Maik Tutorials.de Gastzugang
    Hi,

    versuch es mal mit diesem Stylesheet:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    #page_left {
height:100%;
width:150px;
background-color:orange;
float:left;
[b]margin-right: 0 !important;[/b]
[b]margin-right: -3px;[/b] /* Für IE */
}
 
#center_column {
[b]margin: 0 200px;[/b]
 
#right_column {
width: 200px; 
[b]float: right;[/b]
}
    und setze im HTML-Markup das DIV #center_column an die letzte Stelle:

    Code :
    1
2
3
4
5

    <div id="content">
          <div id="left_column"><h1>Top Offers</h1></div>
          <div id="right_column"><h1>Advertising</h1></div>
          <div id="center_column"><h1>Quicksearch</h1></div>
        </div>
     
  4. 17.03.07 15:23 #4
    outsidaa outsidaa ist offline Mitglied Bronze
    Registriert seit
    Mar 2005
    Beiträge
    30
    Danke für deine Antwort.
    Dein Quellcode hat aber leider nicht den gewünschten Erfolg erzielt.
    Erst als ich die negative margin-left-Eigenschaft für #page_right auf -3px gesetzt habe, hat der IE6 das Layout richtig dargestellt.
    Code :
    1
2

    #page_right   {width:850px; margin-left: 150px !important; [b]margin-left: -3px;[/b]}
#page_left    {height:100%;width:150px; background-color:orange;float:left; [b]margin-right: 0!important; margin-right:-3px;[/b]}
    Meine Frage: Warum MUSS die Angabe auf beiden Seiten gemacht werden? Hat das was mit margin-collapse zu tun?
     
  5. 17.03.07 15:30 #5
    Maik Tutorials.de Gastzugang
    Bei mir funktioniert der Vorschlag einwandfrei:
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken IE6 vs. IE7 vs. Firefox float Probleme-ie6.jpg  
     
« Erneutes Positionierungsproblem mit IE | Bild im gefloateten div vertikal ausrichten? »

Ähnliche Themen

  1. Float-Fehler (nur) im Firefox 2
    Von der-olli im Forum CSS
    Antworten: 12
    Letzter Beitrag: 06.09.09, 18:33
  2. float:right und float:left Probleme
    Von xGutaxJungex im Forum CSS
    Antworten: 7
    Letzter Beitrag: 22.08.09, 15:16
  3. 3 (!) Float-Probleme im IE6/7 (Float über die Grenzen eines Elements hinaus)
    Von marco12 im Forum CSS
    Antworten: 14
    Letzter Beitrag: 28.09.08, 11:00
  4. problem mit div float und Firefox und IE
    Von maozetung im Forum HTML & XHTML
    Antworten: 7
    Letzter Beitrag: 06.09.07, 18:45
  5. Firefox macht Probleme bei float
    Von Robert Steichele im Forum CSS
    Antworten: 3
    Letzter Beitrag: 11.07.05, 02:12