zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit Line-Height auf dem IE lte 6

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.11.2007, 18:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.02.2007
Beiträge: 11
actionjackson befindet sich auf einem aufstrebenden Ast
Standard 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;
}
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;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.11.2007, 10:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.02.2007
Beiträge: 11
actionjackson befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.11.2007, 11:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:49 Uhr.