Tweet
Die folgende Seite an der ich gerade arbeite sieht auf dem IE perfekt aus, auf dem FF jedoch ist die linke Navigationsleiste ca. 20px zu tief.
Leider habe ich keinen Link, da die Seite derzeit nur offline ist. Ich habe schon den ganzen Content gelöscht. Der falsch dargestellte div hat die id leftPane.
Und hier der CSS code:
Leider habe ich keinen Link, da die Seite derzeit nur offline ist. Ich habe schon den ganzen Content gelöscht. Der falsch dargestellte div hat die id leftPane.
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>TITLE</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body><div id="mainPan"> <div id="leftPan"> <div id="leftTopPan"><div style="text-align:center;margin-top:30px;">LOGO</div><div style="text-align:right;margin-top:40px;margin-right:20px;">SPRACHE</div> </div> <ul> <li>LINKS</li> </ul> </div> <div id="rightPan"> <div id="masterPane">CONTENT</div></div> </div> <div id="footermainPan"> <div id="footerPan"> </div> </div> </body> </html>
Code:
/* CSS Document */
body{margin:0px; padding:0px; background:url(../images/mainbg.gif) 0 0 repeat-x #F6F4E4; color:#6B6854; font:14px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;}
div, p, ul, h1, h2, h4, img, form, label{padding:0px; margin:0px;}
ul{list-style-type:none;}
/*----MAIN PANEL----*/
#mainPan{width:691px; position:relative; margin:0 auto; padding:0px;}
/*----Left Panel----*/
#leftPan{width:240px; float:left;}
#leftTopPan{width:240px; height:125px; position:relative; margin:0 auto; padding:0; background:url(../images/left-top.jpg) 0 0 no-repeat;}
/*----/Left Panel----*/
/*----Right Panel----*/
#rightPan{width:451px; float:left;}
#rightmorePan{width:420px; height:28px; display:block; background:url(../images/pattern.gif) 0 0 repeat; border:1px solid #fff; line-height:28px; padding:0 0 0 20px; margin:0 0 0 9px;}
#rightmorenextPan{width:420px; height:28px; display:block; background:url(../images/pattern.gif) 0 0 repeat; border:1px solid #fff; line-height:28px; padding:0 0 0 20px; margin:0 0 0 9px;}
#rightaddPan{width:442px; height:170px; position:relative; margin:0 auto; padding:50px 0 0 9px;}
#rightaddonePan{width:218px; height:110px; float:left; background:url(../images/image1.jpg) 100% 0 no-repeat #CBC8B2; color:#fff; }
/*----/Right Panel----*/
/*----Footer Panel----*/
#footermainPan{background:url(../images/footerbg.gif) 0 0 repeat-x #6B6854; color:#fff; position:relative; margin:0 auto; height:227px; clear:both;}
#footerPan{width:691px; position:relative; margin:0 auto; font:12px/15px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:normal;}
#footerPanhtml{width:64px; height:19px; display:block; position:absolute; top:132px; left:240px;}
#footerPancss{width:64px; height:19px; display:block; position:absolute; top:132px; left:320px;}
/*----Forum Panel----*/
#forumPan{width:440px; float:left;}
/*----/Forum Panel----*/
/*----Main Panel----*/
#masterPane{padding:20px 20px 20px 20px;}
/*----/Main Panel----*/
), und stellst das irgendwann mal nach rechts, hast Du den Salat. Es ist auch "Trennung von Inhalt und Layout", Namen so zu vergeben, dass sie nicht auf das Layout hindeuten, sondern auf den Inhalt.
Comment