Darstellung ist in Chrome anders als in IE oder Firefox

[Dirk Kramer]

Hallo zusammen,

ich versuche mir für eBay ein Verkaufstemplate zu basteln. Dabei bin ich auf folgendes Problem gestoßen. Die Darstellung in Chrome ist nicht richtig. Im IE oder in Firefox wohl. Wo habe ich dort den Fehler gemacht. Ich habe zur Verdeutlichung eine Screenshoot vom IE und einmal von Chrome gemacht.




Der dazugehörige Quellcode aus der HTML-Datei

<div class="obenlinks">
<div class="shopkat" onclick="location.href='http://stores.ebay.de/effekthaus';">
<a href="http://stores.ebay.de/effekthaus"><b>Effekthaus-Shop</b></a>
</div>
<div class="shopkat" onclick="location.href='http://stores.ebay.de/effekthaus';">
<a href="http://stores.ebay.de/effekthaus">Gitarren</a>
</div>
<div class="shopkat" onclick="location.href='http://stores.ebay.de/effekthaus';">
<a class"shopkat" href="http://stores.ebay.de/effekthaus">Gitarren-Verstärker</a>
</div>
<div class="shopkat" onclick="location.href='http://stores.ebay.de/effekthaus';">
<a href="http://stores.ebay.de/effekthaus">Bässe</a>
</div>
<div class="shopkat" onclick="location.href='http://stores.ebay.de/effekthaus';">
<a href="http://stores.ebay.de/effekthaus">Bass-Verstärker</a>
</div>
<div class="shopkat" onclick="location.href='http://stores.ebay.de/effekthaus';">
<a href="http://stores.ebay.de/effekthaus">Drums</a>
</div>
<div class="shopkat" onclick="location.href='http://stores.ebay.de/effekthaus';">
<a href="http://stores.ebay.de/effekthaus">E-Drums</a>
</div>
<div class="shopkat" onclick="location.href='http://stores.ebay.de/effekthaus';">
<a href="http://stores.ebay.de/effekthaus">PA-Anlagen</a>
</div>
<div class="shopkat" onclick="location.href='http://stores.ebay.de/effekthaus';">
<a href="http://stores.ebay.de/effekthaus">Licht-Effekte</a>
</div>
<div>
<br><br>
<img src="http://www.effekthaus.de/ebay/template/images/boxlinks.png" alt="">
</div>
</div>

Der dazugehörige Quellcode aus der CSS-Datei.

.obenlinks {
width: 213px;
height: 2100px;
padding-top: 150px;
padding-left: 30px;
float: left;
}
.shopkat {
border: 1px solid #d4d4d4;
padding:0 0 0 10px;
height: 34px;
line-height: 34px;
width: 203px;
margin: 0 0 10px 5px;
background: #fff;
font-size: 14px;
color: #4d4d4d;
font-family: arial, sans-serif;
cursorointer;
}
.shopkat a {
text-decoration: none;
color: #4d4d4d;
}


.shopkat:hover, .shopkat:hover > a {
color: #ffffff;
background: #4d4d4d;
}

Ich beschäftige mich noch nicht lange mit der HTML/CSS Programmierung und wäre daher über schnelle Hilfe sehr dankbar.

Schönen Ostermontag.

Dirk Kramer

 

[Zejo]

Hmm, ich hab's gerade im Chrome getetest und hatte keine Probleme (Version 26.0.1410.43 m).

Vielleicht solltest du den Cache mal löschen. Oder mit F5 aktualisieren.

Deine Linkaufführung ist außerdem ein wenig ungewöhnlich. So was nennt man in Fachkreisen eine "Div-Suppe". (wenn ganz viele Divs hintereinander kommen, oder verschachtelt sind).

Normalerweise packt man Links in eine ungeordnete Liste (ol) mit Listenelementen (li) und setzt dann das Design mit css.

Bsp:

<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Über mich</a></li>
<li><a href="#">Referenzen</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Links</a></li>
</ul>

 

[Dirk Kramer]

Vielen Dank an Zejo.

Problem gelöst. War eigentlich ja auch kein. Der "Div-Suppe" werde ich mich auch noch annehmen.