|
|||
![]()
Hallo Community,
da ich nach unzähligen Stunden nicht mehr weitergekommen bin, wende ich mich jetzt doch mal an ein Forum und hoffe, es kann mir jemand weiterhelfen. Problem: Ich schreibe eine Studienarbeit über einen Webshop, das Design (im Besonderen das Menü) verschiebt sich je nach Browserversion (Firefox 3.6 aufwärts, IE 7.0 aufwärts) und Art (Firefox / IE). Und da ich nicht weiß, welchen Browser mein Prof bei der Korrektur benutzt, wäre es fatal wenn dort irgendetwas verschoben wäre. Internetadresse: Studienarbeit CSS: Code:
@charset "utf-8"; body { font: 100% Verdana, Arial, Helvetica, sans-serif; width: 100%; height: 100%; background: #e6e6e6; margin: 0; padding: 0; text-align: center; color: #000000; } /* ################################# ###### HEAD-Bereich ############# ################################# */ #navigation_left { width: 265px; height: 147px; text-align: left; margin: 0 0 0 8px; padding: 0; color: #ffffff; font-size: 13px; font-weight:bold; display: block; float: left; background-color: #ffffff; background-image: url(../Design/Images/runway.gif); background-repeat: no-repeat; } #navigation_right { width: 679px; height: 147px; background: #ffffff; text-align: left; background-image: url(../Design/Images/top_gradient.gif); background-repeat: repeat-x; margin: 0; padding: 0; color: #ffffff; font-size: 13px; font-weight:bold; display: block; float: left; } #Text_Home{ margin: 121px 0 0 0; padding: 0 0 0 32px; color: #ffffff; font-size: 13px; font-weight:bold; display: block; width: 233px; } #Text_Home a, a:visited { display : block; text-decoration : none; color: #ffffff; width: 40px; height: 25px; line-height: 25px; } #Text_Home a:hover, a:active { text-decoration : none; color: #77d02b; } #Text_Sportplatz{ margin:0; padding: 0 10px 0 0; font-size: 32px; font-weight: bold; color: #1c7f40; display: block; width: 669px; text-align: right; } ul.Text_Optionen li { float:left; border-right:2px solid #1c7f40; list-style-type: none; display: block; padding-right:5px; margin-left:5px; width: 65px; } .Text_Optionen li#last_option { border-right:none; } .Text_Optionen li a, a:visited { text-decoration : none; color: #1c7f40; } .Text_Optionen li a:hover, a:active { text-decoration : none; color: #77d02b; } ul.Text_Optionen{ margin: 0px 0px 0px 0px; list-style: none; color: #1c7f40; font-weight:bold; font-size: 11px; padding: 0; width: 265px; } .navigation_items li#li_nav1 a:link, .navigation_items li#li_nav1 a:visited { background-image: url(../Design/Images/nav_1.gif); background-repeat: no-repeat; background-position: center top; width: 100px; height: 20px; display:block; padding: 58px 0 0 0; margin: 0 0 0 60px; text-decoration:none; text-align: center; } .navigation_items li#li_nav1 a:hover, .navigation_items li#li_nav1 a:active, .navigation_items li#li_nav1 a:focus { background-image: url(../Design/Images/nav_1_hover.gif); background-repeat: no-repeat; background-position: center top; width: 100px; height: 20px; text-decoration:none; color: #77d02b; } .navigation_items li#li_nav2 a:link, .navigation_items li#li_nav2 a:visited { background-image: url(../Design/Images/nav_2.gif); background-repeat: no-repeat; background-position: center top; width: 100px; height: 20px; display:block; padding: 58px 0 0 0; margin: 0 0 0 60px; text-decoration:none; } .navigation_items li#li_nav2 a:hover, .navigation_items li#li_nav2 a:active, .navigation_items li#li_nav2 a:focus { background-image: url(../Design/Images/nav_2_hover.gif); background-repeat: no-repeat; background-position: center top; width: 100px; height: 20px; display:block; text-decoration:none; color: #77d02b; } .navigation_items li#li_nav3 a:link, .navigation_items li#li_nav3 a:visited { background-image: url(../Design/Images/nav_3.gif); background-repeat: no-repeat; background-position: center top; width: 100px; height: 20px; display:block; padding: 58px 0 0 0; margin: 0 0 0 60px; text-decoration:none; } .navigation_items li#li_nav3 a:hover, .navigation_items li#li_nav3 a:active, .navigation_items li#li_nav3 a:focus { background-image: url(../Design/Images/nav_3_hover.gif); background-repeat: no-repeat; background-position: center top; width: 100px; height: 20px; display:block; text-decoration:none; color: #77d02b; } .navigation_items li#li_nav4 a:link, .navigation_items li#li_nav4 a:visited { background-image: url(../Design/Images/nav_4.gif); background-repeat: no-repeat; background-position: center top; width: 100px; height: 20px; display:block; padding: 58px 0 0 0; margin: 0 0 0 60px; text-decoration:none; } .navigation_items li#li_nav4 a:hover, .navigation_items li#li_nav4 a:active, .navigation_items li#li_nav4 a:focus { background-image: url(../Design/Images/nav_4_hover.gif); background-repeat: no-repeat; background-position: center top; width: 100px; height: 20px; display:block; text-decoration:none; color: #77d02b; } ul.navigation_items{ padding: 0px 0 0 0; display: block; margin: 31px 0 0 0 ; list-style: none; width: 679px; height: 78px; } ul.navigation_items li { list-style-type: none; display: block;} ul.navigation_items li a, ul.navigation_items li a:link, ul.navigation_items li a:visited { color:#ffffff; float: left; text-align: center; } /* ###################################### ###### ENDE HEAD-Bereich ############# ###################################### */ /* ################################# ###### CONTENT-Bereich ########## ################################# */ .basket{ margin: 1px 0px 0px 680px; padding: 0; color: #1c7f40; font-size: 12px; float:right; } p.basket a, a:visited { display : block; text-decoration : none; color: #000000; } p.basket a:hover, a:active { text-decoration : none; color: #77d02b; } h1.caption { color:#000000; text-align:center; font-size: 20px; padding: 0 0 10px 0; margin: 0; vertical-align:middle; } ul.navigation { margin: 0px 0px 0px 62px; list-style: none; color:#1d413d; font-size: 18px; padding: 0; } ul.navigation li { list-style-type: none; display: inline;} ul.navigation li a, ul.navigation li a:link, ul.navigation li a:visited { display: block; color:#000000; width: 400px; float: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;} .navigation li#Leichtathletik a:link, .navigation li#Leichtathletik a:visited { background:url(../Design/Images/obenlinks.jpg) right center no-repeat; width: 380px; height: 173px; line-height: 173px; display:block; padding: 0px 0px 0px 20px; margin: 0px 1px 1px 0px; text-decoration:none; } .navigation li#Leichtathletik a:hover, .navigation li#Leichtathletik a:active, .navigation li#Leichtathletik a:focus { background: url(../Design/Images/obenlinks_aktiv.jpg) right no-repeat; width: 380px; padding-left: 20px; color:#65c122; } .navigation li#Schwimmen a:link, .navigation li#Schwimmen a:visited { background:url(../Design/Images/untenlinks.jpg) right center no-repeat; width: 370px; height: 173px; line-height: 173px; display:block; padding: 0px 0px 0px 30px; margin: 0px 1px 1px 0px; text-decoration:none; } .navigation li#Schwimmen a:hover, .navigation li#Schwimmen a:active, .navigation li#Schwimmen a:focus { background: url(../Design/Images/untenlinks_aktiv.jpg) right no-repeat; width: 370px; padding-left: 30px; color:#65c122; } .navigation li#Wintersport a:link, .navigation li#Wintersport a:visited { background:url(../Design/Images/obenrechts.jpg) left center no-repeat; width: 370px; height: 173px; line-height: 173px; display:block; padding: 0px 30px 0px 0px; margin: 0px 1px 1px 0px; text-align:right; text-decoration:none; } .navigation li#Wintersport a:hover, .navigation li#Wintersport a:active, .navigation li#Wintersport a:focus { background: url(../Design/Images/obenrechts_aktiv.jpg) left no-repeat; width: 370px; padding-right: 30px; color:#65c122; } .navigation li#Fussball a:link, .navigation li#Fussball a:visited { background:url(../Design/Images/untenrechts.jpg) left center no-repeat; width: 330px; height: 173px; line-height: 173px; text-align:right; display:block; padding: 0px 70px 0px 0px; margin: 0px 1px 1px 0px; text-decoration:none; } .navigation li#Fussball a:hover, .navigation li#Fussball a:active, .navigation li#Fussball a:focus { background: url(../Design/Images/untenrechts_aktiv.jpg) left no-repeat; width: 330px; padding-right: 70px; color:#65c122; } #Main_Container { width: 960px; background: #FFFFFF; text-align: left; background-image: url(../Design/Images/bg_shadow.gif); background-repeat: repeat-y; margin: 0 auto; padding: 0; } #Content_Container { width: 924px; padding: 10px 10px 30px 10px; margin: 0 0 0 8px; background: #ffffff; float: left; } #Content_Topline { display: block; width: 939px; padding: 0 0 0 5px; margin: 0 0 0 8px; background: #ffffff; font-size: 12px; } /* ######################################### ###### ENDE CONTENT-Bereich ############# ######################################### */ /* ############################################## ###### CONTENT-Bereich Unterkategorien######## ############################################## */ .unterkat{ display:inline; margin: 40px 0px 0 0; list-style: none; float:left; font-size: 14px; text-align: center; } .unterkat li{ margin: 0 15px 35px 15px; padding: 0; height: 145px; float: left; display:inline; background-repeat: no-repeat; background-position: center top; width: 170px; text-align: center; } #li_unk1_schwimmen{ background-image: url(../Design/Images/schwimmen_unk1.gif); } #li_unk2_schwimmen{ background-image: url(../Design/Images/schwimmen_unk2.gif); } #li_unk3_schwimmen{ background-image: url(../Design/Images/schwimmen_unk3.gif); } #li_unk4_schwimmen{ background-image: url(../Design/Images/schwimmen_unk4.gif); } #li_unk5_schwimmen{ background-image: url(../Design/Images/schwimmen_unk5.gif); } #li_unk6_schwimmen{ background-image: url(../Design/Images/schwimmen_unk6.gif); } #li_unk1_fussball{ background-image: url(../Design/Images/fussball_unk1.gif); } #li_unk2_fussball{ background-image: url(../Design/Images/fussball_unk2.gif); } #li_unk3_fussball{ background-image: url(../Design/Images/fussball_unk3.gif); } #li_unk4_fussball{ background-image: url(../Design/Images/fussball_unk4.gif); } #li_unk5_fussball{ background-image: url(../Design/Images/fussball_unk5.gif); } #li_unk6_fussball{ background-image: url(../Design/Images/fussball_unk6.gif); } #li_unk1_leichtathletik{ background-image: url(../Design/Images/leichtathletik_unk1.gif); } #li_unk2_leichtathletik{ background-image: url(../Design/Images/leichtathletik_unk2.gif); } #li_unk3_leichtathletik{ background-image: url(../Design/Images/leichtathletik_unk3.gif); } #li_unk4_leichtathletik{ background-image: url(../Design/Images/leichtathletik_unk4.gif); } #li_unk5_leichtathletik{ background-image: url(../Design/Images/leichtathletik_unk5.gif); } #li_unk6_leichtathletik{ background-image: url(../Design/Images/leichtathletik_unk6.gif); } #li_unk1_wintersport{ background-image: url(../Design/Images/wintersport_unk1.gif); } #li_unk2_wintersport{ background-image: url(../Design/Images/wintersport_unk2.gif); } #li_unk3_wintersport{ background-image: url(../Design/Images/wintersport_unk3.gif); } #li_unk4_wintersport{ background-image: url(../Design/Images/wintersport_unk4.gif); } #li_unk5_wintersport{ background-image: url(../Design/Images/wintersport_unk5.gif); } #li_unk6_wintersport{ background-image: url(../Design/Images/wintersport_unk6.gif); } .unterkat li a, a:visited { display : block; margin-bottom : 0; padding : 125px 30px 0 30px; text-decoration : none; color: #000000; } .unterkat li a:hover { color: #77d02b; } .artikel{ display:inline; margin: 40px 0px 0 0; list-style: none; float:left; font-size: 14px; text-align: center; } .art_left{ margin: 0 15px 35px 0px; padding: 0; height: 150px; float: left; display:inline; background-repeat: no-repeat; background-position: center top; width: 150px; text-align: center; border: #000000 1px solid; } .art_right_up{ margin: 0; padding: 0; height: 120px; float: left; display:inline; background-repeat: no-repeat; background-position: center top; width: 650px; text-align: center; border: #000000 1px solid; } .art_right_down_left{ margin: 4px 0 35px 0 ; padding: 0; height: 25px; float: left; display:inline; background-repeat: no-repeat; background-position: center top; width: 350px; text-align: center; border: #000000 1px solid; } .art_right_down_right{ margin: 4px 0 35px 3px ; padding: 0; height: 25px; float: left; display:inline; background-repeat: no-repeat; background-position: center top; width: 295px; text-align: center; border: #000000 1px solid; } /* ################################################# ###### ENDE CONTENT-Bereich Unterkategorien###### ################################################# */ /* ################################### ###### FOOTER-Bereich ############# ################################### */ #Copyright{ margin: 0; padding: 25px 0 0 0; font-size: 10px; font-weight: bold; color: #ffffff; text-align: center; clear: both; } ul.Text_Abschlussmenu li { float:left; list-style-type: none; display: block; padding:0px; margin:0 0 0 35px; } .Text_Abschlussmenu li a, a:visited { text-decoration : none; color: #000000; } .Text_Abschlussmenu li a:hover, a:active { text-decoration : none; color: #77d02b; } ul.Text_Abschlussmenu{ margin: 0; padding: 20px 0 0 0; list-style: none; color: #1c7f40; font-size: 12px; } #bottom_navigation { width: 960px; clear: left; height: 120px; background: #FFFFFF; text-align: left; background-image: url(../Design/Images/bottom_gradient.gif); background-repeat: repeat-y; margin: 0; padding: 0; } #bottom_navigation_end { width: 960px; height: 9px; background: #FFFFFF; text-align: left; background-image: url(../Design/Images/bottom_line.gif); background-repeat: repeat-y; margin: 0; padding: 0; } .preload { width:0px; height:0px; display:none; } /* ######################################## ###### ENDE FOOTER-Bereich ############# ######################################## */ HTML: HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">--> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Sportplatz.de - Der Shop für Sportler, die wissen was sie wollen.</title> <link href="Design/Layout.css" rel="stylesheet" type="text/css" /> <link rel="shortcut icon" href="Design/Images/sp_icon.ico" /> <link rel="icon" href="Design/Images/sp_icon.ico" /> </head> <body> <div id="Main_Container"> <div id="navigation_left"> <ul class="Text_Optionen"> <li><a href="#">Einloggen</a></li> <li id="last_option"><a href="#">Registrieren</a></li> </ul> <p id="Text_Home"><a href="index.php">Home</a></p> </div> <div id="navigation_right"> <p id="Text_Sportplatz">Sportplatz<font color="#65c122">.de</font></p> <ul class="navigation_items"> <li id="li_nav1"><a href="Schwimmen.php" title="Schwimmen">Schwimmen</a></li> <li id="li_nav2"><a href="Fussball.php" title="Fussball">Fußball</a></li> <li id="li_nav3"><a href="Leichtathletik.php" title="Leichtathletik">Leichathletik</a></li> <li id="li_nav4"><a href="Wintersport.php" title="Wintersport">Wintersport</a></li> </ul> </div> <!--<div style="clear: both;"></div> <div id="Content_Topline"> <p class="basket"> <a href="#"> Warenkorb: 0,00 €<br /> 0 Artikel</a> </p> </div>--> <div id="Content_Container"> <h1 class="caption">Treffen Sie Ihre Auswahl:</h1> <ul class="navigation"> <li id="Leichtathletik"><a href="Leichtathletik.php" title="Leichtathletik" tabindex="1">Leichtathletik</a></li> <li id="Wintersport"><a href="Wintersport.php" title="Wintersport" tabindex="1">Wintersport</a></li> <li id="Schwimmen"><a href="Schwimmen.php" title="Schwimmen" tabindex="1">Schwimmen</a></li> <li id="Fussball"><a href="Fussball.php" title="Fussball" tabindex="1">Fussball</a></li> </ul> </div> <div id="bottom_navigation"> <ul class="Text_Abschlussmenu"> <li><a href="#">AGB</a></li> <li><a href="#">Impressum</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Hilfe</a></li> </ul> <!--<p id="Copyright">Copyright © Johannes Folger 2011</p>--> </div> <div id="bottom_navigation_end"> </div> <!-- Preload Navigation Elements --> <img class="preload" src="Design/Images/obenlinks_aktiv.jpg" alt="preloading"/> <img class="preload" src="Design/Images/obenrechts_aktiv.jpg" alt="preloading"/> <img class="preload" src="Design/Images/untenlinks_aktiv.jpg" alt="preloading"/> <img class="preload" src="Design/Images/untenrechts_aktiv.jpg" alt="preloading"/> <img class="preload" src="Design/Images/nav_1_hover.gif" alt="preloading"/> <img class="preload" src="Design/Images/nav_2_hover.gif" alt="preloading"/> <img class="preload" src="Design/Images/nav_3_hover.gif" alt="preloading"/> <img class="preload" src="Design/Images/nav_4_hover.gif" alt="preloading"/> <!-- end Preload Navigation Elements--> </div> </body> </html> Kann mir jemand weiterhelfen? Leider bin ich ein CSS-Neuling und hab in diesem Bereich noch nicht so viele Erfahrungen gesammelt, weshalb manche Sachen bestimmt umständlich und bescheuert gelöst wurden ![]() |
Sponsored Links |
Sponsored Links |
|
|||
![]()
An meinem Laptop FF 6.0 wird die Seite richtig dargestellt, auf meinem Desktop PC auch FF 6.0 ist sie nach oben (1 - 2 px) verschoben. Dieser Fehler ist dann aber leider nicht browserbedingt?!
Screenshot.png |
|
||||
![]()
Einen solchen Fehler habe ich gar nicht gesehen. Bitte validiere erst einmal deinen Code: [Invalid] Markup Validation of http://www.jf-webdesign.de/Studienarbeit/ - W3C Markup Validator
Das macht die Fehlersuche einfacher.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade! |
|
||||
![]()
Nun gut. Für mich ist und bleibt es schwer den Fehler nachzuvollziehen, da ich ihn selber nicht sehe.
Da du aber schon GIFs verwendest, würde ich an deiner Stelle einfach den grünen Hintergrund weg lassen. Der ist da ja sowieso, da er durch geht, und dann nur die Icons drüber legen. Das sollte den Fehler in der Navigation ebenfalls beheben bzw. umgehen ![]() Ist auf deinen beiden Rechnern das gleiche Betriebssystem installiert?
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade! |
|
|||
![]()
Hätte gedacht, es wär irgendein kleiner Fehler der sich eingeschlichten hat oder irgendwas worauf ich nicht geachtet habe - aber okay!
Habe deinen Tipp gleich in die Tat umgesetzt und siehe da: in allen Browsern und Versionen passts ![]() Nurnoch eine kleine Sache ist mir aufgefallen: bei älteren Firefox-versionen verschiebt sich die Schrift (also z.B. Schwimmen) etwas nach unten nachdem ich draufgeklickt habe? Woran könnte das liegen? |
|
||||
![]()
Auf diese Frage habe ich leider absolut keine Antwort parat. Ich muss aber auch gestehen, dass ich immer nur die neueste Firefox Version (keine Beta) da habe und diese teste.
Das einzige was ich mir erklären könnte, wäre ein Unterschied in irgendwelchen vordefinierten Abständen, da du kein CSS Reset dieser machst. An deiner Stelle würde ich das hier an den Anfang der CSS-Datei schreiben: Code:
* {margin:0; padding:0;}
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade! |
![]() |
Stichwörter |
barrierefreiheit, browser, browserkompatibilität, css, internet explorer |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
unterschiedliche Darstellung zwischen ie und firefox | danyboy | CSS | 13 | 17.12.2008 22:38 |
Unterschiedliche Darstellung in Firefox und IE | leamaus | CSS | 6 | 06.12.2007 19:04 |
Unterschiedliche darstellung IE6 und Firefox | kruegge | CSS | 1 | 20.10.2005 17:23 |
unterschiedliche css darstellung IE und firefox | eyetag | Site- und Layoutcheck | 3 | 12.04.2005 17:09 |
Unterschiedliche Darstellung in Firefox und IE | Icetiger | CSS | 3 | 17.03.2005 18:59 |