Div überschneitungen im Firefox

Status
Nicht offen für weitere Antworten.
U

uhau007

Grünschnabel
Hallo,
wie kann ich das folgende Verhalten unterdrücken:

Im IE7 sieht das ganze aus wie es aussehen soll:
Anhang anzeigen ie7.bmp

Im Firefox schmuggelt sich eine kleine aber unfeine Überlagerung der Div Elemente ein:
Anhang anzeigen fire.bmp

Der CSS Code dazu:
Code: 
#logframe { 
           position:absolute;
           top:100px;
           left:94px;
           width:90%;
           height:81%;
           background-color:#FFFFFF;
           text-align: left;
           overflow:scroll;}
#datarow {
           position:relative;
           top:0px;
           left:0px;
           width:90%;
           height:20px;
           background-color:#FFFF99;
           text-align: left;}

#cell1 {
           position:absolute;
           top:0px;
           left:0px;
           width:150px;
           height:20px;
           text-align: left;
           border-style:solid;
           border-width:1px;
           border-color:appworkspace;
           padding-left: 5px;}
#cell2 {
           position:absolute;
           top:0px;
           left:150px;
           width:200px;
           height:20px;
           text-align: left;
           border-style:solid;
           border-width:1px;
           border-color:appworkspace;
           padding-left: 5px;}

Es hat sicherlich etwas mit dem unterschiedlich interpretierten Padding Geschichten zu tun oder mit den position:absolute und relative. Mir fehlt aber momentan jeglicher Ansatzpunkt.
Falls noch mehr Code nötig ist poste ich ihn gerne, leider ist es noch nicht veröffentlicht um es anzuschauen.

Gruß
Uwe
 
Hi,

wie es scheint, übergibst du das HTML-Dokument derzeit im "Quirksmode", weshalb sich der IE nicht an das Boxmodell hält, und die padding-left-Eigenschaft nicht zur Breitenangabe, sowie die border-Eigenschaft nicht zur Breiten- u. Höhenangabe hinzuaddiert.

Tatsächlich sind die Boxen #cell1 157*22px und #cell2 207*22px groß, weshalb #cell2 im FF #cell1 um 7px überschneidet. Demnach müsste für #cell2 die linke Positionsangabe "157px" betragen.

Im Umkehrschluß bedeutet das, wenn die Box #cell1 incl. Rahmenstärke und linkem Innenabstand 150px breit sein soll, beträgt der Wert für width nur "143px" (2*1px + 5px + 143px = 150px).
 
Vielen Dank.....

Uralt Vorlage genommen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Geändert in:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

schon machts der IE7 auch falsch.
Da wäre ich nie drauf gekommen................

Wobei das jetzt eine Rechenorgie wird, ich glaube ich baue doch auf position:relative; um. Dann sollte das alles ja automatisch funktionieren. Oder spricht da was dagegen?

Gruß
Uwe
 
uhau007 hat gesagt.:
Uralt Vorlage genommen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Geändert in:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

schon machts der IE7 auch falsch.
Zum Vergrößern anklicken....
Nö, jetzt macht er alles richtig :suspekt:

uhau007 hat gesagt.:
[...] ich glaube ich baue doch auf position:relative; um. Dann sollte das alles ja automatisch funktionieren.
Zum Vergrößern anklicken....
Bei der relativen Positionierung musst du ebenso die Gesetzmäßigkeiten des Boxmodells beachten.
 
Ganz abgesehen was Mike bisher zu geschrieben hat würde ich dir Raten ein solch Tabellen ähnliches Konstrukt lieber wie folgt zu gestalten:

PHP: 
<ul>
  <li>ID</li>
  <li>Name</li>
  <li>Vorname</li>
  <li>Adresse</li>
</ul>
<ul>
  <li>1</li>
  <li>Mustermann</li>
  <li>Markus</li>
  <li>Mustermannstr. 1</li>
</ul>

... was dann ungefähr so aussehen würde:

*--*----------*-------*----------------*
|ID|Name      |Vorname|Adresse         |
*--*----------*-------*----------------*
|1 |Mustermann|Markus |Mustermannstr. 1|
*--*----------*-------*----------------*

Natürlich nur Realisierbar durch ein bisschen CSS Code :D


mfg
mr-d
 
Zuletzt bearbeitet:
@mr_arrogant: Solange es um die tabellarische Anzeige von Daten geht, hat das table-Element semantisch seine Daseinsberechtigung.
 
Natürlich hast du mit allem Recht :-(

Jetzt hab ich alles geändert, wobei ich jetzt natürlich Rahmen habe die 2px dick sind, von jeder Cell 1px. Wenn ich das umgehen will, sollte ich dann mit bewußten überlagerungen von 1 px arbeiten oder besser die Rahmen nur unten und rechts definieren?

Gruß
Uwe
 
Dies wäre eine Möglichkeit, um den doppelten Rahmen zwischen den Boxen zu vermeiden:

Code: 
#cell1 {
           position:absolute;
           top:0px;
           left:0px;
           width:150px;
           height:20px;
           text-align: left;
           border-style:solid;
           border-width:1px;
           border-color:appworkspace;
           border-right:none;
           padding-left: 5px;}
#cell2 {
           position:absolute;
           top:0px;
           left:156px;
           width:200px;
           height:20px;
           text-align: left;
           border-style:solid;
           border-width:1px;
           border-color:appworkspace;
           padding-left: 5px;}
@mr_arrogant: Es führen bekanntermaßen viele Wege nach Rom. ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück