Problem mit Line-Height auf dem IE lte 6

actionjackson · #1 (**permalink**) 19.11.2007, 17:41

Hallo,

ich habe folgendes Problem: Im IE 5.5 und 6 haben die Buttons, die ein Submenu haben, einen Pixel mehr Höhe. Das hängt irgendwie mit der line-height zusammen. Sorry für die Code-Menge. Wer hat Ideen, was da los ist...

PS Es geht mir nicht darum, daß die Navigation umbricht. Das liegt ja an der unterschiedlichen Interpretation der Borders...

Gruß
Jacko

Hier das HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
  <head>
   <link rel="stylesheet" media="all" href="css/styles.css" type="text/css"/>
   <!--[if lte IE 6]>
   <link rel="stylesheet" media="all" href="css/styles_ie.css" type="text/css"/>
   <![endif]-->
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta http-equiv="imagetoolbar" content="no">
   <title>Tolle Website</title>
  </head>
  <body>
   <div id="nonFooter">
    <div id="page">
     <div id="leftcolumn"></div>
     <div id="middlecolumn">
      <div id="navigation">
       <ul>
        <li><a href="#">Home</a></li>
        <li>
         <a href="#" class="hide">Unternehmen</a>
         <!--[if lte IE 6]>
         <a href="#">Unternehmen
         <table><tr><td>
         <![endif]-->
         <ul>
          <li><a href="#">Unterpunkt 1</a></li>
          <li><a href="#">Unterpunkt 2</a></li>
          <li><a href="#">Unterpunkt 3</a></li>
          <li><a href="#">Unterpunkt 4</a></li>
         </ul>
         <!--[if lte IE 6]>
         </td></tr></table>
         </a>
         <![endif]-->
        </li>
        <li>
         <a href="#" class="hide">Produkte</a>
         <!--[if lte IE 6]>
         <a href="#">Produkte
         <table><tr><td>
         <![endif]-->
         <ul>
          <li><a href="#">Unterpunkt 1</a></li>
          <li><a href="#">Unterpunkt 2</a></li>
         </ul>
         <!--[if lte IE 6]>
         </td></tr></table>
         </a>
         <![endif]-->
        </li>
        <li><a href="#">Presse</a></li>
        <li><a href="#" class="last">Kontakt</a></li>
       </ul>
      </div>
      <div id="content"></div>
     </div>
     <div id="rightcolumn"></div>
    </div>
    </div>
   </div>
   <div id="footer">
    Footer
   </div>
  </body>
 </html>

Hier das CSS

Code:

* {
	margin:0;
	padding:0;
}

html, body {
	height:100%;
	margin:0;
	padding:0;
}

body {
	background:#fff;
	color:#000;
	font-family:arial;
    font-size:12px;
}



/*----------- CONTENT-BEREICH ------------*/
#nonFooter{
    width:722px;
    position:relative;
    min-height:100%;
    margin:0;
    text-align:left;
}
* html #nonFooter{
    height:100%;
}
#page #leftcolumn{
    background:#0163ac;
    width:10px;
    height:373px;
    float:left;
}
#page #middlecolumn{
    width:409px;
    height:253px;
    float:left;
}
#page #middlecolumn #navigation{
    width:409px;
    height:253px;
    background:red;
    float:left;
}
#page #rightcolumn{
    width:303px;
    height:253px;
    background:green;
    float:left;
}




/*----------- NAVIGATION ------------*/
#navigation {
    width:409px; 
    margin:0; 
    position:relative;
    z-index:100;
}
#navigation ul {
    padding:0; 
    margin:185px 0;
    list-style-type: none;
}
#navigation ul li {
    float:left; 
    position:relative;
}
#navigation ul li a {
    display:block; 
    width:81px; 
    height:21px;     
    text-align:center; 
    text-decoration:none; 
    font-size:11px;
    font-weight:bold;
    line-height:21px;     
    color:#fff; 
    background:#c7cdcb;    
    border:1px solid #fff;
    border-left:0px;
}
#navigation ul li a.last{
    border-right:0px;
}
#navigation ul li ul {
    visibility:hidden;
    position:absolute;
}
#navigation ul li:hover ul {
    margin:0px;
    visibility:visible; 
    top:22px; 
    left:-1px; 
    width:150px;
}
#navigation ul li:hover a {
    background:#0163ac;
}
#navigation ul li:hover ul li a {
    display:block; 
    color:#fff;
    background:#c7cdcb;
    width:150px;
    text-align:left;
    padding-left:5px;
    border:1px solid #fff;
    border-bottom:0px;
}
#navigation ul li:hover ul li a:hover {
    background:#0163ac;
}




/*----------- PAGE ------------*/
#page{
    padding-bottom:50px;
}




/*----------- FOOTER ------------*/
#footer{
    width:722px;
    background:#ddd;
    position:relative;
    margin:-22px 0;
    height:22px;
    color:#777;
    font-size:11px;
    text-align:left;
    line-height:22px;
}

Und hier noch die styles_ie.css

Code:

#navigation table {
    border-collapse:collapse;
    margin:0; 
    padding:0;
}
#navigation ul li {
    float:left; 
    position:relative;
    display:inline;
}
#navigation ul li a.hide,
#navigation ul li a:visited.hide {
    display:none;
}
#navigation ul li a, #navigation ul li a:visited {
    display:block; 
    width:82px; 
    height:21px;     
    text-align:center; 
    text-decoration:none; 
    font-size:11px;
    font-weight:bold;
    line-height:21px;     
    color:#fff; 
    background:#c7cdcb;    
    border:1px solid #fff;
    border-left:0px;
}
#navigation ul li a.last,#navigation ul li a.last:visited{
    border-right:0px;
}
#navigation ul li a:hover {
    background:#0163ac;
}
#navigation ul li a.hide,
#navigation ul li a:visited.hide {
    display:none;
}


#navigation ul li a:hover ul {
    visibility:visible; 
    top:22px; 
    left:0; 
    width:150px;
    margin:0px;
}
#navigation ul li a:hover ul li a {
    border:0;
    color:#fff;
    position:relative;
    width:150px;
    display:block;
    border:1px solid #fff;
    border-bottom:0px;
    text-align:left;
    padding-left:5px;
}
#navigation ul li a:hover ul li a:hover {
    background:#0163ac; 
    position:relative;
}

actionjackson · #2 (**permalink**) 20.11.2007, 09:47

Ich habe eben erst den Leitfaden "Für Fragende, für Antwortende" gelesen.
Hier zum Thema das HTML + CSS zum direkten anschauen:

Tolle Website

Ich hoffe, es gibt jemanden, der dasselbe Problem auch schon hatte

fricca · #3 (**permalink**) 20.11.2007, 10:17

Bei Stu Nicholls (wo ist eigentlich der Copyright-Hinweis?) haben die Menülinks overflow:hidden.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit CSS in Joomla 1.5	noobilicius	CSS	6	25.09.2008 20:24
So langsam bekomme ich die Krise mit den DIVs	Thuroc	CSS	12	12.11.2007 14:25
Session / Cookie Problem mit dem IE, sporadisch	Boris	Serveradministration und serverseitige Scripte	14	06.09.2007 12:54
Nicht valieder Code von Map24	sveniboy	(X)HTML	7	06.11.2005 19:19
Scrollbares Textfeld mit purem CSS	Dancer	CSS	6	24.01.2005 15:58