✔ [IE7] DIV wird nicht größer trotz nichteingestellter höhe

D

DiDiJo

Erfahrenes Mitglied
hey Leute ...

bitte schaut euch mal folgenden Link an:

klick

im Firefox ist alles super ... ebenso im IE6 ...

nun der IE 7 macht Probleme:

das DIV "main" besitzt eine 2px hohe und 960px breite Grafik als Hintergrundbild (die 2 grauen Balken links und rechts und der weiße Teil in der Mitte). Das problem ist nur, dass das DIV nicht größer wird.

ich habe alle DIVs gecleart (nachdem ich gefloatet habe) und eine feste Höhe hba ich auch nicht vergeben. ich hab mal was von "hasLayout" Element-Eigenschaft gehört. Wenn ich das richtig verstadnen habe brauchen einige Elemente eine Höhe um überhaupt angezeigt zu werden. Deshalb habei ch mal in meine CSS eigenschaft ein height:1%; gemacht. ... hat aber nix gebracht ... vlt. findet ja von euch den fehler

hier mal der code:
Code: 
#main {
	background-image:url(../pics/main_bg.jpg);
	background-repeat:repeat-y;
	height:1%;	
}


mfg DiDi
 
Nimm im Stylesheet folgende Regel auf:
CSS: 
.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

Im HTML dann:
HTML: 
<div id="main" class="clearfix">


//edit:
Siehe auch Webmaster FAQ.
 
Zuletzt bearbeitet:
Code: 
#main {
        background-image:url(../pics/main_bg.jpg);
        background-repeat:repeat-y;
        height:1%;

}
... war schon mal der richtige Ansatz bzgl. des "hasLayouts", aber

Code: 
#left_frame {
        background-image:url(../pics/frame_left_top.jpg);
        background-position:top;
        background-repeat:no-repeat;
        #height:32px;
        min-height:32px;
        padding-top:20px;
        }

#right_frame {
        background-image:url(../pics/frame_right_top.jpg);
        background-position:top;
        background-repeat:no-repeat;
        #height:32px;
        min-height:32px;
        padding-top:20px;
        }
... ist der Grund, weshalb der IE7 den Seitenhintergrund abschneidet.

Entweder

Code: 
#left_frame {
        background-image:url(../pics/frame_left_top.jpg);
        background-position:top;
        background-repeat:no-repeat;
        _height:32px;
        min-height:32px;
        padding-top:20px;
        }

#right_frame {
        background-image:url(../pics/frame_right_top.jpg);
        background-position:top;
        background-repeat:no-repeat;
        _height:32px;
        min-height:32px;
        padding-top:20px;
        }

oder

Code: 
#left_frame {
        background-image:url(../pics/frame_left_top.jpg);
        background-position:top;
        background-repeat:no-repeat;
        min-height:32px;
        height:auto !important;
        height:32px;
        padding-top:20px;
        }

#right_frame {
        background-image:url(../pics/frame_right_top.jpg);
        background-position:top;
        background-repeat:no-repeat;
        min-height:32px;
        height:auto !important;
        height:32px;
        padding-top:20px;
        }


mfg Maik
 
hmmm

ich dachte ihr er-Pros hättest auch alle den Webdeveloper... aber gut.:

also das ganze nochmal (den link spare ich mir mal):

ich habe ein HTML-Grundgerüst mit einiges DIVS:


HTML: 
<body>
<div id="out">
	<div id="header">
    	<div id="navi_left"></div>
        <div id="navigation"></div>
        <div id="navi_right"></div>        
        <div class="clear"></div>
    </div>
     <div id="spacer">
    	<div id="spacer_left"></div>
        <div id="spacer_main"></div>
        <div id="spacer_right"></div>        
        <div class="clear"></div>    	
    </div>   
    <div id="banner"></div>
    <div id="spacer2"></div>   
    <div id="main">
    	<div id="left_frame">
        	<div class="left_headline"></div>
        	<div class="frame_content"></div>
        </div>
        <div id="center_frame">
        sdfsdfsdf
        </div>
        <div id="right_frame">
	        <div class="right_headline"></div>
            <div class="frame_content"></div>        
        </div>
        <div class="clear"></div>
    </div>
</div>


</body>
wichtig für mich ist der inhaltsbereich wichtig ... sprich das div MAIN.

dieses DIV soll immer mitwachsen (da es keine feste höhe hat soltle das auch kein thema sein).

im IE6 und im Firefox ist alles super ... der IE 7 spackt aber rum.

.... so ..... der Beitrag entspricht zwar genau dem ersten aber egal .... mehr infos kann ich euch leider net geben da ich selber gar nicht mehr infos habe


edit 1: ahhh dein beitrag wurde editiert ... das checke ich mal aus


edit 2.:

KABÄÄÄÄÄM .... das wars ... vielen dank für die Hilfe
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück