✔ Anzeigefehler im IE bei Positionierung

A

ahoernchen81

Grünschnabel
Hallo zusammen.
Bin neu in der Runde und habe mich schon eine ganze Weile hier durchgesucht, aber komme einfach nicht weiter.
Und zwar habe ich angefangen mich mit css zu beschäftigen und habe das Problem, dass der IE einfach nicht so will wie ich. Der FF hingegen stellt sich nicht quer.

Und zwar wird bei folgender Seite das Menü im IE einfach nach rechts in die Seite reingeschoben...und ich kann mir nicht erklären warum.

css:
Code: 
/* General*/
body {
    margin:0; 
    padding:0; 
    font-family: georgia, times new roman, times, serif;
    background:#404040 url(images/background.gif) repeat-y top center; 
    color:#804000;}

/*Banner*/
#container1 {
        width:800px; 
    margin:auto; 
    padding:0; 
    background:#fff url(images/top.gif) no-repeat;}

/*Huelle*/
#main {
    margin-top:120px;
    width:750px;
    height:auto;
    margin: auto;}

/*menü*/
ul#menu {
    width: 110px;
    float:left;
    text-align:left;
    font-size: 14px;
    margin-top: 40px;
    font-family:Verdana;
    background:#444 url(images/menu_bg.gif) repeat-y top center;}
ul#menu, ul#menu ul, ul#menu li {
    padding: 0;
    list-style: none;}
ul#menu a:active {
  color: #fff;}
ul#menu ul {
    margin-left: 13px;
    margin-top: 10px;
    margin-bottom: 10px;}
ul#menu li {
    margin: 2px 0;}
ul#menu ul ul{
    margin: 0;
    margin-left: 13px;
    font-size: 11px;}
ul#menu a:hover{
    background: #ffd177;}
ul#menu a {
    display: underline;
    color: #804000;}
    
/*inhalt*/
#inhalt {width:585px; margin-left:20px;}

/*Footer*/
#footer { 
position:absolute; 
bottom: 0px; 
}

HTML:
Code: 
<div id="container1" style="width:800px; height:85px;"></div>
	<div id="main">
		
		<ul id="menu">
			<?php if(SHOW_MENU)  page_menu(); ?>
		</ul>
	
		<div id="inhalt">
			<?php page_content(); ?>
		</div>
	<div id="footer"> Bottom
	</div>
	</div>
 
Hi,

du hast es im Stylesheet versäumt, den voreingestellten linken Außenabstand des ul-Listenelements auf null zurücksetzen.

Und was hat es denn mit der Angabe display:underline (im Selektor ul#menu a) auf sich?

Ich kenne nur display:inline oder text-decoration:underline.

mfg Maik
 
Hallo Maik.
Danke für deine Antwort! - Das mit dem underline war blödsinn von mir. Stimmt.

Aber wo muss ich denn das Listenelement wieder auf null zurücksetzen ?
Was interpretiert der IE denn da anders als der ff ?

Gruß, ahoernchen
 
Schau mal hier:
Code: 
ul#menu {
    width: 110px;
    float:left;
    text-align:left;
    font-size: 14px;
    margin-top: 40px;
    margin-left: 0;
    font-family:Verdana;
    background:#444 url(images/menu_bg.gif) repeat-y top center;}


Merke: FF & Co. interpretieren hier den Innenabstand (padding), IE hingegen den Außenabstand (margin).

mfg Maik
 
Ein "kleines" Problem hätte ich da noch.
Würde gerne einen Footer zentriert mit einem Hintergrundbild unten auf die Seite setzen.
Ich weiß, dass der IE und FF das unterschiedlich handhaben und habe da auch was zu gefunden.
Jedoch wird das gute Stück immer nach ganz links auf der Seite verschoben ... ratlos...

Code: 
/* General*/
body {
    margin:0; 
    padding:0;
    font-family: georgia, times new roman, times, serif;
    background:#404040 url(images/background.gif) repeat-y top center; 
    color:#804000;}

#content_container {
    padding-bottom:3em;
}
#footer {
    clear:both;
    position:fixed;
    bottom:0;
    background:url(images/down.gif);
    text-align:center;
    padding:10px;
    width:800px;
}
/* Angaben nur für den IE */

* html, * html body {
    margin:0;
    padding:0;
    height:100%;
    overflow:hidden;
    font-family: georgia, times new roman, times, serif;
    background:#404040 url(images/background.gif) repeat-y top center; 
    color:#804000;
}
* html #footer {
    background:url(images/down.gif);
    height:5%;
    text-align:center;
    padding-top:1%;
}


/*Banner*/
#container1 {
    width:800px; 
    margin:auto; 
    padding:0; 
    background:#fff url(images/top.gif) no-repeat;}

/*Huelle*/
#main {
    padding-top: 20px;
    width:750px;
    height:auto;
    margin: auto;}

/*menü*/
ul#menu {
    width: 110px;
    float:left;
    text-align:left;
    font-size: 14px;
    margin-top: 40px;
    margin-left: 0;
    font-family:Verdana;
    background:#444 url(images/menu_bg.gif) repeat-y top center;}
ul#menu, ul#menu ul, ul#menu li {
    padding: 0;
    list-style: none;}
ul#menu a:active {
  color: #fff;}
ul#menu ul {
    margin-left: 13px;
    margin-top: 10px;
    margin-bottom: 10px;}
ul#menu li {
    margin: 2px 0;}
ul#menu ul ul{
    margin: 0;
    margin-left: 13px;
    font-size: 11px;}
ul#menu a:hover{
    background: #ffd177;}
ul#menu a {
   color: #804000;}
    
/*inhalt*/
#inhalt {text-align:left; float:right; width:585px; padding-right: 50px}

Code: 
<div id="content_container">
<div style="text-align:center">
	<div id="container1" class="clearfix" style="width:800px; height:85px;"></div>
	<div id="main">
		
		<ul id="menu">
			<?php if(SHOW_MENU)  page_menu(); ?>
		</ul>
	
		<div id="inhalt">
			<?php page_content(); ?>
		</div>
	</div>
</div>
</div>
<div id="footer">TEST</div>

Vielleicht kann ja da von Euch nochmal jemand drüber schauen.

Danke :-)
 
Zuletzt bearbeitet:
Hi,

der Footerbereich inklusive seinem Inhalt wird bei mir im IE wie gewünscht horizontal zentriert.

mfg Maik
 
Hmm...

bei mir zeigt er den Footer im FF ganz unten links an (800px breites bild mit darin zentriertem Text)
im IE auch linksbündig mit ca 50px Abstand zum Browserende...

Woran könnte das liegen?
Also es sollte ein ganz normales HTML Dokument sein...
 
Maik hat gesagt.:
der Footerbereich inklusive seinem Inhalt wird bei mir im IE wie gewünscht horizontal zentriert.
Zum Vergrößern anklicken....
Okay, hatte hier noch den alten HTML-Code in der Testseite stehen ;-)
Code: 
#footer {
    clear:both;
    position:fixed;
    bottom:0;
    background:url(images/down.gif);
    text-align:center;
    padding:10px;
    width:800px;
    left:50%;
    margin-left:-410px;
}


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück