|
 |
  |
| Autor |
Nachricht |
rOckstaR
User [User]
Anmeldung: 24.01.08
Beiträge: 12
|
 Verfasst am: 24.01.2008, 12:14 Titel: Problem bei anpassen IE vs. FF |
 |
|
Hallo zusammen,
hab nen riesen Problem. Sitze seit ca 2 Tagen schon dran.
Unzwar möchte ich eine Seite mit folgendem Aufbau erstellen:
Nur leider funzt dieses nur bedingt da es IE anders als im FF aussieht 
Mein Quellcode:
| Code: | <body>
<div id="content" class="clearfix">
<div id="contentleft">
<p>Sinnlostext di</p>
</div>
<div id="contentright">
<p>Sinnlostext die erste! Ist nur zum Testen
wie lang die Teile denn nun wirklich gehen ;) Warum tuts das denn nun nicht?</p>
</div>
</div>
</body> |
Meine CSS:
| Code: | body
{ background: #060606 url(bg1.jpg);
padding: 0px;
margin-top: 150px;
text-align: center; }
#content
{ text-align: left;
margin: 0 auto;
width: 750px;
background-color: #FFFFFF;
font-size: 11px;
font-family: Verdana;
color: #474747;
text-decoration: none;
line-height: 16px ;
padding: 0px; }
#contentleft
{ float: left;
width: 500px;
margin: 0px;
background-color: #ff8800;
margin: 15px 15px 15px 15px;
padding: 0px; }
#contentright
{ width: 205px;
float: right;
margin: 15px 15px 15px 0px;
background-color: #88ff00;
padding: 0px; }
.clearfix:after
{ content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden; }
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */ |
Und hier gehts zur Seite:
 http://bfit5a.bf.funpic.de/webseite/
Die Contents sind Farbig zum erkennen.
Soll nachher alles weiß sein.
Mit padding habe ich schon versucht aber da verschiebt FF das ganze um den Wert nach innen und IE macht das ganze um den Wert breiter. Bin ratlos
Über ne Antwort würde ich mich sehr freuen.
mfg
|
|
| Nach oben |
|
 |
chris1988
Bekannter [User]
Anmeldung: 12.12.05
Beiträge: 1644
|
| Verfasst am: 24.01.2008, 13:31 Titel: |
|
|
Hab's mal geändert und gekürzt (Getestet mit FF2 und IE6):
| Code: |
<div id="content">
<div id="contentleft">
<p>Sinnlostext diSinnlostext die erste! Ist nur zum Testen
wie lang die Teile denn nun wirklich gehen ;) Warum tuts das denn nun nicht?Sinnlostext die erste! Ist nur zum Testen
wie lang die Teile denn nun wirklich gehen ;) Warum tuts das denn nun nicht?Sinnlostext die erste! Ist nur zum Testen
wie lang die Teile denn nun wirklich gehen ;) Warum tuts das denn nun nicht?Sinnlostext die erste! Ist nur zum Testen
wie lang die Teile denn nun wirklich gehen ;) Warum tuts das denn nun nicht?</p>
</div>
<div id="contentright">
<p>Sinnlostext die erste! Ist nur zum Testen
wie lang die Teile denn nun wirklich gehen ;) Warum tuts das denn nun nicht?</p>
</div>
<div class="fixfloat"></div>
</div>
|
| Code: | body
{ background: #060606 url(bg1.jpg);
padding: 0;
margin: 150px 0 0 0;
text-align: center; }
#content p {
margin: 0;
}
#content
{ text-align: left;
margin: 0 auto;
width: 720px;
background-color: #FFFFFF;
font-size: 11px;
font-family: Verdana;
color: #474747;
text-decoration: none;
line-height: 16px ;
padding: 15px;
}
* html #content {
width: 750px;
}
#contentleft
{ float: left;
width: 500px;
background-color: #ff8800;
padding: 0; }
#contentright
{ margin-left: 515px;
background-color: #88ff00;
padding: 0; }
.fixfloat {
clear: left;
} |
Ich hab' einfach dem #content-div ein padding von 15px gegeben. Da dieses nach dem Box-Modell auf die Breite aufaddiert wird, hab ich davon nochmal 30px abgezogen (15px links, 15px rechts), daher die Breite von 720px.
Der IE versteht das Box-Modell nur leider falsch. Also für den die Breite nochmal extra auf 750px definiert.
Innerhalb von #content dann einfach ein div nach links gefloatet, ohne abstände. Das div daneben nicht gefloatet sondern einen Abstand links mit Breite vom linken div + 15px Abstand gegeben.
Am Ende nur noch ein div mit clear:left eingebaut, da sonst der linke container aus dem #content-div rausragt, wenn's zu groß wird. Bei rechts nicht nötig, da dort ja kein float.
Die margin-Werte für <p> auf null gesetzt, da sonst die Boxen so wie sie im Moment sind verschoben wurden. Abstand kann da einfach mit padding gesetzt werden. (Beachten, falls später Überschriften dort platziert werden: Die margin-Werte könnten die Boxen deplatzieren!).
Das war eigentlich alles 
Noch ein paar Hinweise für's weitere Vorgehen:
- Als Schriftart nicht nur Verdana, sondern zusätzlich sans-serif angeben. Mein System hat beispielsweise Verdana nicht dabei, und so wird der Text mit einer Standard-Serif-Schriftart angezeigt (was nicht so schön ist).
- Als Schriftgröße nicht px wählen, sondern lieber flexiblere Werte (z.B. em). IE-Nutzer können sonst den Text deiner Seite nicht vergrößern (bis einschl. IE 6).
Hoffe, dir geholfen zu haben
Viel Spass mit deiner Seite noch!
Chris
_________________
Mancher ertrinkt lieber,
als daß er um Hilfe ruft.
(Wilhelm Busch)
|
|
| Nach oben |
|
|
sejuma
Beliebter [User]
Anmeldung: 08.05.06
Beiträge: 493
|
|
| Nach oben |
|
|
chris1988
Bekannter [User]
Anmeldung: 12.12.05
Beiträge: 1644
|
| Verfasst am: 24.01.2008, 17:18 Titel: |
|
|
Auch nicht schlecht 
Über inline-Elemente reg' ich mich nur dauernd auf, da ich da immer mit den Innenabständen oben und unten Probleme kriege
_________________
Mancher ertrinkt lieber,
als daß er um Hilfe ruft.
(Wilhelm Busch)
|
|
| Nach oben |
|
|
sejuma
Beliebter [User]
Anmeldung: 08.05.06
Beiträge: 493
|
| Verfasst am: 24.01.2008, 18:51 Titel: |
|
|
Kommt sicher auf die Konstellation im Einzelfall an.
Hier sollte es unschädlich sein.
_________________
sejumas CSS-Einsteigerkurs
|
|
| Nach oben |
|
|
|
|
  |
|
Alle Zeiten sind GMT + 1 Stunde
|
| Seite 1 von 1 |
|  |
