✔ display:block bei Links & IE

Status
Nicht offen für weitere Antworten.
R

rethus

Erfahrenes Mitglied
Ich habe eine Navigation erstellt, die aus normalen Listen-Elementen generiert wird.

In allen Browsern werden die Links richtig dargestellt, ausser im IE 6.0.2900.2180
Der macht unter jedem Button einen Abstand der nochmal die Höhe des Buttons selbst hat.

Hier ist das Stylesheed zur Navigation;
Code: 
/* Haupt-NAVI */
	div#navi
	{
                position:relative;
                top:0px;
                left:0px;
                background-image: url(../upload/Layout/redPanel.png);
		background-repeat:repeat-y;
		float:left;
		width:159px;
                height:10px;
		text-align:left;
	}
	ul#Navigation
	{
		position:relative;
                left:0px;
                padding:0px;
                margin:0px;
		background-color:white;
	}
	#Navigation li 
	{
		padding:0px; 
		margin:0px;
		list-style-type: none;
		font-size: 1em;
		white-space: nowrap;

		text-align:left;
		text-transform:uppercase;
		text-decoration:none;
	}
	ul#Navigation a 
	{
                display:block;
                background-color:#fff;
                magrin:0px;
                padding:5.5px;
		padding-left:35px;
		background-image: url(../upload/Layout/button.gif);
		background-repeat:no-repeat;
		background-position:left;
		
		font-family:verdana, sans serif;
		font-size: 0.825em;
		font-weight: bold;
		color: white; 
	}
	ul#Navigation a:link 
	{
		text-decoration:none;
	}
	ul#Navigation a:visited 
	{
		color:#fff;
                text-decoration:none;
	}
	ul#Navigation a:hover 
	{
		text-decoration:underline;
		font-style:normal;
		font-weight: bold;
	}
	ul#Navigation a:active 
	{
		color:gold;      
	}

/* META-Navi
==============*/
div#metaNavi
{
        position:relative;
        top:57px; 
        left:205px;
        width:800px;
}
#MetaNavigation
{
	display:inline;

}
#MetaNavigation li
{
	display:inline;
	font-weight: bold;
	font-family: arial;
	font-size: 0.95em;
	padding:0px 4px;
	white-space: nowrap;
        text-decoration:none;
}

ul#MetaNavigation a 
{
    color: #616161; 
}

ul#MetaNavigation a:link 
{
    text-decoration:none;
  /*text-transform:uppercase;*/
}

ul#MetaNavigation a:visited 
{
    color: #616161; 
    text-decoration:none;
}

ul#MetaNavigation a:hover 
{
    text-decoration:none;
    font-style:normal;
}

ul#MetaNavigation a:active 
{
    text-decoration:none;
    color: darkred;
}


/* Bottom-Navi
==============*/
div#bottomNavi
{
        position:relative;
        top:8px;
        left:230px;
        width:800px;
}
#BottomNavigation
{
	display:inline;

}
#BottomNavigation li
{
	display:inline;
	font-weight: bold;
	font-family: arial;
	font-size: 0.95em;
	padding:0px 4px;
	white-space: nowrap;
        text-decoration:none;
}

ul#BottomNavigation a 
{
    color: #616161; 
}

ul#BottomNavigation a:link 
{
    text-decoration:none;
  /*text-transform:uppercase;*/
}

ul#BottomNavigation a:visited 
{
    color: #616161; 
    text-decoration:none;
}

ul#BottomNavigation a:hover 
{
    text-decoration:none;
    font-style:normal;
}

ul#BottomNavigation a:active 
{
    text-decoration:none;
    color: darkred;
}

Betrachten und prüfen könnt Ihr die Sache hier: http://www.bost-pc-service.de/cms/

Wenn ich display:block; entferne, werden die Buttons direkt untereinander dargestellt (also nicht optisch schön, aber zumindest ist der Absatz weg).

Kann mir jemand einen Tip geben, wo da der Fehler liegt, oder ist das ein Bug vom IE
 
Lösungsvorschlag:

Code: 
ul#Navigation a
        {
                display:block;
                height: 1%;
                background-color:#fff;
                margin:0px;
                padding:5.5px;
                padding-left:35px;
                background-image: url(../upload/Layout/button.gif);
                background-repeat:no-repeat;
                background-position:left top;

                font-family:verdana, sans serif;
                font-size: 0.825em;
                font-weight: bold;
                color: white;
        }
Zudem hast Du in diesem Selektor einen Buchstabendreher bei der margin-Eigenschaft:

Code: 
ul#Navigation a 
	{
                [...]
                magrin:0px;
                [...]
	}
 
Wow... Klasse
Das hat geklappt, obwohl ich jetzt in der Unternavigation einen feinen weißen Strich habe...

Kannst du mir vielleicht auch einen Tip geben, wie ich unterhalb der Navigation im Rot-Gepunkteten Bereich den Abschluss an den Fuß des Layers bekomme?

Derzeit ist das Konstrukt so aufgebaut:
Code: 
<div id="container">
	<div id="wrapper">
	        <div id="navi">
		    <ul id="Navigation"><li><a href="beispiellink" title="Beispiellink">Beispiellink</a></li></ul>
		
                    <div id="redPanel">
			<div id="oben"></div>
			<div id="mitte"></div>
			<div id="unten"></div> 
		    </div>
	        </div>
 	        <div id="content"> bla bla inhalte...</div>
	</div>
               
</div>

Und die Stylesheeds:
HTML: 
html
{    
        min-height: 100%;
	height:auto !important; /* moderne Browser */
	height:100%; /* IE */
        width:100%;
}

body
{
        width:100%;
        margin:0%;
        padding:0%;
        font: 76% arial,sans-serif;
}
	p
	{	
		margin:0 10px 10px;
	}
	a
	{	
		color: #006;
	}

	div#container
	{
//		min-height: 100% !important;
//		height: auto;
//		height:100%;
                background-color:#fff;
	}
/* HEADER 
===========*/
	div#header
	{
		position:relative;
		width:100%;
	}
	div#right
	{
		background-color:inherit;
		position:relative;
		width: 100%;
		background-image: url(../upload/Layout/header_rechts.png);
		background-repeat:repeat-x;
		float: right;
	}
	div#left
	{
		position:relative;
		width: 256px;
		height:245px;
		display: block;
		background-image:url(../upload/Layout/header_links.gif);
		background-repeat:no-repeat;
	}
	
	div#light
	{
		background-color:inherit;
		position:absolute;
		left:0px;
		top:0px;
		z-index:10;
		width: 656px;
		height:22px;
		background-image: url(../upload/Layout/header_light.png);
		background-repeat:no-repeat;
	}
	div#logo
	{
		background-color:#fff;
		position:absolute;
		left:65px;
		top:80px;
		width: 154px;
		height:160px;
		border:gray solid 2px;
		background-image: url(../upload/Layout/logo.png);
		background-repeat:no-repeat;
		background-position:center center;
	}	
	

/* CONTENT 
===========*/
	div#wrapper
	{
		position:relative;
                left:65px;
                float:left;
                
                height:auto;
                height:100%;		
                
                width:100%;
		margin:0px;
                background-image: url(../upload/Layout/redPanel.png);
		background-repeat:repeat-y;
	        background-color:#fff;
		}
	div#content
	{
		width:70%;
                background-color:#fff;
		min-height:100% !important;
                height:auto;
                height:100%;
		//overflow:auto;
		padding:20px;
		
	}
	div#content p
	{
		line-height:1.4;
                width:95%;
	}
	

/* RED_PANEL 
==============*/
	div#redPanel
	{
		//background-color:transparent;
                //min-height:auto;
                //height:100%;
                margin:1px 0px 0px 0px;
	}
	div#oben
	{
		margin-top:0px;
		margin-bottom:0px;
		background-image: url(../upload/Layout/redPanel_oben.png);
		background-repeat:no-repeat;
		height:40px;
	}
	div#mitte
	{
		margin-top:0px;
		margin-bottom:0px;
		//height:200px;
	}
	div#unten
	{
		position:relative;
                bottom:0px;
                margin:0px;
		background-image: url(../upload/Layout/redPanel_unten.png);
		background-repeat:no-repeat;
		height:40px;
	}

Ich hatte auch schn versucht, den Layer <div id="unten"> mit in den Layer "Content" hinein zu ziehen und Ihn bei bottom:0px; auszurichten. Allerdings hat er da das Problem, beim IE, das er - sobald der Content Kleiner ist als die Navi - das er dann den roten Footer unter den Content zieht.
 
Korrigiere mal die fettmarkierten Eigenschaften in den folgenden Selektoren:

aus
Code: 
div#container
	{
//		min-height: 100% !important;
//		height: auto;
//		height:100%;
                background-color:#fff;
        }
div#content
	{
		width:70%;
                background-color:#fff;
		min-height:100% !important;
                height:auto;
                height:100%;
		//overflow:auto;
		padding:20px;	
	}

wird
Code: 
div#container
	{
		min-height: 100%;
		height: auto !important;
		height:100%;
                background-color:#fff;
}
div#content
        {
                width:70%;
                background-color:#fff;
                min-height:100%;
                height:auto !important;
                height:100%;
                overflow:auto;
                padding:20px;
        }

Zudem hatte ich height:1% und nicht 0.1% empfohlen, sowie Dich auf einen Buchstabendreher hingewiesen.
 
Du hast recht, ich habe da etwas durcheinander geworfen.

Nun habe ich es nochmal so gemacht, das der Layer "unten" in dem Layer "Wrapper" mit drin ist.. so scheint es zu gehen

Das einzige was noch fehlt ist meine 100%-Geschichte... kriegs einfach nicht hin, das er mir die Seite auf 100% skaliert.

PS: Vielen Dank schon mal für die guten Tips.:p
 
So, ich habe jetzt mal das Layout in diversen Browsern gestestet.

In allen GUTEN Browsern funktioniert das Layout, Probleme machen lediglich

IE 5.01 (http://browsershots.org/png/full/f8/f80adcdf511b9c9b0caa9bfad4780fdf.png)
IE 7.0 (http://browsershots.org/png/full/22/2252fa39ea0c3880fe883d52a689c087.png)

Kann mir jemand einen Tip geben, woran das liegt?
Was wurde im IE geändert, das es beim 5.5 & 6.0 noch funktionierte, aber beim 7.0 nicht mehr?

Und warum zerhaut der IE 5.01 das Layout dermaßen?

Bin für jeden Tipp dankbar.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück