1. Liebe Forumsgemeinde,

    aufgrund der Bestimmungen, die sich aus der DSGVO ergeben, müssten umfangreiche Anpassungen am Forum vorgenommen werden, die sich für uns nicht wirtschaftlich abbilden lassen. Daher haben wir uns entschlossen, das Forum in seiner aktuellen Form zu archivieren und online bereit zu stellen, jedoch keine Neuanmeldungen oder neuen Kommentare mehr zuzulassen. So ist sichergestellt, dass das gesammelte Wissen nicht verloren geht, und wir die Seite dennoch DSGVO-konform zur Verfügung stellen können.
    Dies wird in den nächsten Tagen umgesetzt.

    Ich danke allen, die sich in den letzten Jahren für Hilfesuchende und auch für das Forum selbst engagiert haben. Ich bin weiterhin für euch erreichbar unter tti(bei)pcwelt.de.
    Dismiss Notice

CSS Navigation wird in Firefox falsch dargestellt

Discussion in 'Web-Know-how für die Homepage' started by berger710, Mar 7, 2008.

Thread Status:
Not open for further replies.
  1. berger710

    berger710 Byte

    Hallo an alle,

    ich habe Problem mit meiner selbst erstellten seite, und zwar habe ich eine css Navigation in die seite ordnungsgemäß eingefügt.
    Diese Seite wird im Internetexplorer perfekt ausgeführt aber im Firefox nicht, da ist die Tabelle für das Navi verschoben und somit auch die ganze seite.
    Meiner Meinung nach ist html code einwandfrei... jetzt wollte ich wissen ob es evtl am der CSS datei liegt.

    Hier der code:
    Code:
    .preload1 {background: url(six_0a.gif);}
.preload2 {background: url(six_1a.gif);}

#nav {padding:0; margin:0; list-style:none; height:35px; background:#fff url(six_0.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:32px; line-height:31px; color:#FFFFFF; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(six_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0a.gif) no-repeat right top;}

#nav li:hover a.top_link,
#nav a.top_link:hover
{color:#fff; background: url(six_1.gif) no-repeat;}
#nav li:hover a.top_link span, 
#nav a.top_link:hover span
{background:url(six_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down,
#nav a.top_link:hover span.down
{background:url(six_1a.gif) no-repeat right top; padding-bottom:3px;}

#nav table {border-collapse:collapse; padding:0; margin:0; position:absolute; left:0; top:0;}

#nav li:hover {position:relative; z-index:200;}
#nav a:hover {position:relative; white-space:normal; z-index:200;}

#nav :hover ul.sub
{left:1px; top:35px; background: #C0C0C0; padding:3px; border:1px solid ; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav :hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav :hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #C0C0C0;}
#nav li ul.sub li a.fly
{background:#C0C0C0 url(arrow.gif) 80px 6px no-repeat;}
#nav :hover ul.sub li a:hover 
{background: #C0C0C0; color:#fff; border-color:#fff;}
#nav :hover ul.sub li a.fly:hover
{background: #C0C0C0 url(arrow_over.gif) 80px 6px no-repeat; color:#fff;}

#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}

#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul
{left:89px; top:-4px; background: #C0C0C0; padding:3px; border:1px solid #FF3333; white-space:nowrap; width:90px; z-index:400; height:auto;}

#nav ul, 
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover > ul
{left:90px; top:-4px; background: #C0C0C0; padding:3px; border:1px solid #FF3333; white-space:nowrap; width:90px; z-index:400; height:auto;}
#nav li:hover > ul ul 
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover > a.fly
{background:#FF3333 url(arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;} 
#nav li:hover li:hover > li a.fly
{background:#FF3333 url(arrow.gif) 80px 6px no-repeat; color:#000; border-color:#C0C0C0;}
     
    berger710, Mar 7, 2008
    #1
  2. hiholu

    hiholu Byte

    ich glaube nur mit dem css code kann man wenig anfangen könntest du vlt. auch noch den html-code posten oder den link zu der seite??? so aus dem css code erkenne ich direkt keine fehler
     
    hiholu, Mar 9, 2008
    #2
  3. berger710

    berger710 Byte

    hier der HTML code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>homepage blank2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="pro_dropdown_6/pro_dropdown_6.css" />
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (homepage blank2.psd) -->
<table id="Tabelle_01" width="1000" height="1301" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="4">
			<img src="Bilder/b-crime_01.jpg" width="1000" height="231" alt=""></td>
	</tr>
	<tr>
		<td colspan="3"><span class="preload1"></span>
<span class="preload2"></span>

<ul id="nav">
	<li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li>
	<li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Products</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">

			<li><a href="#nogo3" class="fly">Cameras<!--[if gte IE 7]><!--></a><!--<![endif]-->
					<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
						<li><a href="#nogo4">Nikon</a></li>
						<li><a href="#nogo5">Minolta</a></li>
						<li><a href="#nogo6">Pentax</a></li>
					</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#nogo7" class="fly">Lenses<!--[if gte IE 7]><!--></a><!--<![endif]-->
					<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
						<li><a href="#nogo8">Wide Angle</a></li>
						<li><a href="#nogo9">Standard</a></li>
						<li><a href="#nogo15">Mirror</a></li>
						<li><a href="#nogo10">Telephoto</a></li>

						<li><a href="#nogo12">35mm to 125mm</a></li>
						<li><a href="#nogo13">50mm to 250mm</a></li>
						<li><a href="#nogo14">125mm to 500mm</a></li>

						<li><a href="#nogo17">Bayonet mount</a></li>
						<li><a href="#nogo18">Screw mount</a></li>
					</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>

			<li><a href="#nogo19">Flash Guns</a></li>
			<li><a href="#nogo20">Tripods</a></li>
			<li><a href="#nogo21">Filters</a></li>
		</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Services</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
			<li><a href="#nogo23">Printing</a></li>
			<li><a href="#nogo24">Photo Framing</a></li>
			<li><a href="#nogo25">Retouching</a></li>
			<li><a href="#nogo26">Archiving</a></li>
		</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="top"><a href="#nogo27" id="contacts" class="top_link"><span class="down">Contacts</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
			<li><a href="#nogo28">Support</a></li>
			<li><a href="#nogo29" class="fly">Sales<!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]--><ul>

					<li><a href="#nogo34" class="fly">British<!--[if gte IE 7]><!--></a><!--<![endif]-->
						<!--[if lte IE 6]><table><tr><td><![endif]--><ul>

							<li><a href="#nogo35">London</a></li>
							<li><a href="#nogo36">Liverpool</a></li>
							<li><a href="#nogo37">Glasgow</a></li>
							<li><a href="#nogo38" class="fly">Bristol<!--[if gte IE 7]><!--></a><!--<![endif]-->
								<!--[if lte IE 6]><table><tr><td><![endif]--><ul>

									<li><a href="#nogo39">Redland</a></li>
									<li><a href="#nogo40">Hanham</a></li>
									<li><a href="#nogo41">Eastville</a></li>
								</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
							</li>
							<li><a href="#nogo42">Cardiff</a></li>
							<li><a href="#nogo43">Belfast</a></li>
						</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
					</li>
					<li><a href="#nogo44">French</a></li>
					<li><a href="#nogo45">German</a></li>
					<li><a href="#nogo46">Spanish</a></li>

					<li><a href="#nogo30">USA</a></li>
					<li><a href="#nogo31">Canadian</a></li>
					<li><a href="#nogo32">South American</a></li>
					<li><a href="#nogo47">Australian</a></li>
					<li><a href="#nogo48">*****</a></li>
				</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#nogo49">Buying</a></li>
			<li><a href="#nogo50">Photographers</a></li>
			<li><a href="#nogo51">Stockist</a></li>
			<li><a href="#nogo52">General</a></li>
		</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Shop</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
			<li><a href="#nogo54">Online</a></li>
			<li><a href="#nogo55">Catalogue</a></li>
			<li><a href="#nogo56">Mail Order</a></li>
		</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="top"><a href="#nogo57" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
</ul></td>
		<td>
			<img src="Bilder/b-crime_03.jpg" width="238" height="35" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Bilder/b-crime_04.jpg" width="310" height="966" alt=""></td>
		<td rowspan="2">
			<img src="Bilder/b-crime_05.jpg" width="52" height="1000" alt=""></td>
		<td colspan="2">
			<img src="Bilder/b-crime_06.jpg" width="638" height="966" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Bilder/b-crime_07.jpg" width="310" height="34" alt=""></td>
		<td colspan="2">
			<img src="Bilder/b-crime_08.jpg" width="638" height="34" alt=""></td>
	</tr>
	<tr>
		<td colspan="4">
			<img src="Bilder/b-crime_09.jpg" width="1000" height="34" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="310" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="52" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="400" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="238" height="1" alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

    danke im Voraus :)
     
    berger710, Mar 9, 2008
    #3
  4. berger710

    berger710 Byte

    Ich glaub es liegt an diesem teil der HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">

    denn wenn ich das rauslösche dann geht die navi zwar nciht komplett aber alles in allem wird richtig dargestellt:..?????
     
    berger710, Mar 9, 2008
    #4
  5. Jogy05

    Jogy05 Kbyte

    Das Problem ist eigentlich falsch herum aufgebaut.
    Du musst das so sehen.
    Nicht der IE zeigt deine Seite richtig an und der FF falsch. Sondern der FF zeigt deine Seite so an, wie du sie geschrieben hast.
    Hintergrund. Die verschiedenen Browser interpretieren css unterschiedlich.
    Ganz schlimm macht es der IE. Der FF macht es eigentlich korrekt. Deshalb werden von Profis zum Teil unterschiedliche css -Teile geschrieben und dann den verschiedenen Browsern zugeordnet (Browserweichen und Browserhacks)

    Wichtig ist nun, dass du deine Seite Standardkonform baust (sie wird im FF korrekt dargestellt) und ggf. Weichen und Hacks für den IE nutzt. (Da ist es im übrigen auch nicht egal ob du den IE6 oder den IE7 nimmst - die zeigen unterschiedlich an)
    Diese Vorgehensweise ist auch dahingehend sinnvoll, da MS erstmalig mit dem IE8 einen Browser anbieten will, der nun genauso konform arbeitet.
    Schau mal auf die Seiten von de.selfhtml.org
    oder bei der Mailingliste von Yahoo
    http://de.groups.yahoo.com/group/css-design/
    da werden sie geholfen in Bezug auf CSS Problematik

    Um dir nun genauer zu helfen wäre es günstig deine komplette Seite zu sehen um genauer zu schaun und auch mal probieren zu können.

    Gruß
    Jürgen
     
    Jogy05, Mar 11, 2008
    #5
  6. Jogy05

    Jogy05 Kbyte

    Ich habe mir deine Schnipsel mal angeshen und gleich wieder aufgehört.
    z.B. Was ist das?
    "<!--[if gte IE 7]><!--></a><!--<![endif]-->"
    Was soll das? Du kommentierst das EndTag </a> für alle IE kleiner 7 aus. Warum? Auch der IE6 braucht die Endtags.
    Zusätzlich steht das </a> hinter einem beginnenden Kommentar. aber hinter dem </a> steht wieder ein beginnender Kommentar.
    So geht das denn munter weiter.
    Laß mal deine Seite validieren um die Fehler zu checken.
    http://validator.de.selfhtml.org/validate

    Gruß
     
    Jogy05, Mar 11, 2008
    #6
  7. berger710

    berger710 Byte

    Hello again,

    ich habe nun das Problem behoben jedoch habe ich jetzt ein weiteres un vermute immernoch dass es an der css der navi liegt.

    Und zwar ist die Seite jetzt online, jedoch ist es so, dass wenn ich angemeldet bin und mal alles durchklicke alles einwandfrei ist, doch wenn ich ausgeloggt bin un das mache seh ich jedes mal, dass zwischen den bildern des kopfen ein wenig platz ist.

    www.b-crime.de

    Ich bitte um Eure Hilfe

    Gruß
    berger710

    was ich jetzt auch noch feststellen hab müssen, ist dass die seite dieses Mal wirklich im IE falsch dargestellt wird und um firefox (mit ausnahme von der Navi) richtig.

    Kann mir niemand helfen? :confused:

    Bitte um Ratschlag
     
    berger710, Mar 14, 2008
    #7
Thread Status:
Not open for further replies.

Share This Page