|
|||
Problem mit Line-Height auf dem IE lte 6
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; } 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; } |
Sponsored Links |
|
|||
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 |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit CSS in Joomla 1.5 | noobilicius | CSS | 6 | 25.09.2008 21:24 |
So langsam bekomme ich die Krise mit den DIVs | Thuroc | CSS | 12 | 12.11.2007 15:25 |
Session / Cookie Problem mit dem IE, sporadisch | Boris | Serveradministration und serverseitige Scripte | 14 | 06.09.2007 13:54 |
Nicht valieder Code von Map24 | sveniboy | (X)HTML | 7 | 06.11.2005 20:19 |
Scrollbares Textfeld mit purem CSS | Dancer | CSS | 6 | 24.01.2005 16:58 |