|
|||
![]()
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 | |
|
|
![]() |
||||
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 |