✔ flexibel wär nicht schlecht!

[thefaxx]

Hallo!

Hab ein Problem und zwar ist auf meiner Webseite das Menü auf der rechten Seiten manchmal länger als der eigentliche Inhalt, weil einfach mehr drin steht. So wenn das jetzt der Fall ist bleibt der Text aber leider nicht innerhalb des id=container sonder steht einfach drüber, wieso das? Sollte der nicht einfach automatisch größer werden?

	#container
	{
		margin: 1em auto;
		margin-top: 30px;
		width: 814px;
		text-align: left;
		background-image: url(main_bg.gif);
	}
	
	#bg_top
	{
		height: 7px;
		background-color: #5B4E38;
		background-image: url(glow_top.gif);
		background-repeat: no-repeat;
		background-position: bottom;
	}
	
	#header
	{
		margin-left: 7px;
		margin-right: 7px;
		height: 112px;
		background-color: #7D250D;
		background-image: url(header_bg.gif);
		background-repeat: no-repeat;
		background-position: center;
	}
	
	#spacer
	{
    height: 5px;
    background-color: #5B4E38;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }
	
	#bg_bottom
	{
		height: 7px;
		background-color: #5B4E38;
		background-image: url(glow_bottom.gif);
		background-repeat: no-repeat;
		background-position: top;
	}
	
	#menu
	{
		margin-right: 17px;
		margin-top: 10px;
		padding-bottom: 20px;
		margin-bottom: 20px;
		width: 180px;
		float: right;
	}
	
	#contents	
	{
		margin-top: 20px;
		margin-bottom: 20px;
		margin-right: 227px;
		margin-left: 27px;
		padding-bottom: 20px;
		height: relative;
	}



<div id="container">
<div id="bg_top"></div>
<div id="header"></div>
<div id="spacer"></div>

	<div id="menu"></div>
	<div id="contents"></div>

<div id="bg_bottom"></div>
</div>

 

[Maik]

Hi,

die Floatumgebung muß anschliessend wieder "gecleart" werden. Hierfür notierst du im Selektor #bg_bottom die clear:both-Eigenschaft.

Zudem gibt es nicht den Wert relative für die height-Eigenschaft.

 

[thefaxx]

Vielen Dank, jetzt gehts.

Mir ist noch was aufgefallen. Im Firefox stimmt das margin-left: 17px beim IE allerdings nicht da sind es mal eben 10px mehr. Wie lässt sich das beheben?

 

[Maik]

Hier tritt im IE der "Double-Margin-Bug" auf, der sich folgendermaßen fixen lässt:

#menu
        {
                margin-right: 17px !important; /* Für moderne Browser */
                margin-right: 8.5px; /* Für IE */
                margin-top: 10px;
                padding-bottom: 20px;
                margin-bottom: 20px;
                width: 180px;
                float: right;
        }

 

[thefaxx]

Vielen Dank, geht jetzt alles

Eine Sache hab ich noch ein <ul></ul> wird im IE eingerückt im Firefox nicht! list-type ist aber aus.

#menu ul
	{
	  padding-top: 0;
	  margin-top: 0;
	  padding-left: 0;
	  list-style-type: none;
	}

 

[Maik]

Erweiter mal die Regel für das Listenelement mit margin-left:0.

 

[thefaxx]

Perfekt jetzt funktioniert alles super... Vielen Dank