zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden große objekte in div boxen (IE)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.04.2007, 17:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2007
Beiträge: 6
mopmop befindet sich auf einem aufstrebenden Ast
Standard große objekte in div boxen (IE)

hallo,

ich habe folgendes layout:

-->3 div's
-->erstes div dient zum zentrieren innerhalb des browsers, die anderen beiden div boxen werden innerhalb von diesem eingebunden.

--> 2tes div am linken rand (float:left), 3tes div rechts von diesem

--> angenommen das 3te rechtsliegende div hat eine breite von 700px
und in dieses binde ich nun ein bild mit breite= 730px ein.

--> mozilla löst das, indem das bild über die box hinausverschoben wird! (super!)

--> im IE bricht das ganze konstrukt zusammen!

--> wie kann ich das verhindern?


hier hab ich mein problem beispielhaft hinterlegt.
Unbenanntes Dokument

Code:
/* CSS Document */

.center{
    width:800px;
    }
    
.left{
    float:left;
    width:100px;
    background-color:#00CC00;
    display:inline;/* double margin fix for ie*/
    }
    
.right{
    margin-left:100px;
    background-color:#FF0000;
    }
    
    
    
* html .left{
    margin-right:-3px;/* reduce the right margin to account for 3pixels*/
    }
    
* html .right {
        height:1%;
        margin-left:97px;/* fix 3 pixel jog and account for 3 pixels extra padding*/
        }
Code:
<div class="center">
	<div class="left">das bild in der roten box ist "30px zu groß". Mozilla löst das problem indem das bild einfach über die box hinausgeschoben wird. Im IE bricht das konstrukt zusammen. Wie kann man das verhindern?  </div>

	<div class="right">
                   <img src="aussen.jpg" width="730"/>
       </div>

</div>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.04.2007, 17:38
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Eine Möglichkeit:
* html img {margin-right:-30px;}
edit: damit der überhängende Teil sichtbar wird muss noch ein position:relative dazu.

Die Breitenangabe deiner linken Randspalte ist zu schmal für den enthaltenen Text und der IE drückt sie auf - deshalb genügen die 30px im Moment nicht.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.04.2007, 18:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2007
Beiträge: 6
mopmop befindet sich auf einem aufstrebenden Ast
Standard

danke für die antwort.

ich hab mich nicht ganz klar ausgedrückt.

was ich erreichen will: unabhängig von der größe des objekts in der rechten box (hier ist es das img) soll im IE das gleiche verhalten wie im firefox erreicht werden.

es soll egal sein, ob das bild mit width="730px" oder width="850px" eingebunden wird.

das css soll also von anfang an so flexibel sein, das im falle des falles nicht das ganze layout (im IE) zusammenbricht.
Mit Zitat antworten
  #4 (permalink)  
Alt 04.04.2007, 18:37
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Eine "universelle" Lösung habe ich in einem anderen Thread mal gepostet.
Das ist auch bei überbreiten Bildern und Layout mit fester Breite anwendbar.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 20:29
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 17:53
Header entfernen tripple CSS 17 15.06.2010 16:41
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 11:59
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 20:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:35 Uhr.