css button moz. ja ie nein

Status
Nicht offen für weitere Antworten.
Grafixboy

Grafixboy

Erfahrenes Mitglied
Hallo

...kann mal einer von euch CSS -Profs. bzw. Semi.-Profs.

mir erklären wieso der CSS-Code beim Moz. funktioniert aber nicht bei IE.
hier

Das wäre echt nett.

Hab vergessen zu sagen was nicht funktioniert :
der hover-effekt der Links nat.
 
Zuletzt bearbeitet:
Hi,

vielleicht, weil du zum einen den Kommentar im Stylesheet am Ende nicht wieder schliesst, und zum anderen die ID #bigb im Dokument mehrmals aufrufst, was nicht regelkonform ist, da diese innerhalb des Dokumentenbaums eindeutig sein muß.

Für den Fall einer mehrfachen und gleichlautenden Bezeichner-Vergabe ist die CSS-Klasse vorgesehen.

mfg Maik
 
Der HTML-Kommentar wird zum Schluß des Stylesheets nicht wieder geschlossen:

Code: 
<style type="text/css">
<!-- 
body {
margin: 0;
padding: 0;
color:#333333;
background: #333333;
font: 100% verdana, arial, sans-serif;
font-weight: bold;
font-color:#FFF;
}
img{border:none;}
#bigb{
width:152px;
height:154px;
line-height: 44px;
text-align: center;
font-weight: bold;

background-image:url(../pics/Blank.png);
background-repeat:no-repeat;
background-position: 0px 0px;
}
div#bigb a{
color:#FFFFFF;
text-decoration: none;
display: block;
background-image:url(../pics/Blank.png);
background-repeat:no-repeat;
background-position: 0px -0px;
}
div#bigb a:hover {
background-image:url(../pics/Blank.png);
background-repeat:no-repeat;
background-position: 0px -154px;
}
#bigbtab{
padding:10px;
}
</style>

Mit diesem "bereinigten" Markup funktioniert's bei mir im IE7 einwandfrei:

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Portofolio</title>
<link href="css/cloudg.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
color:#333333;
background: #333333;
font: 100% verdana, arial, sans-serif;
font-weight: bold;
font-color:#FFF;
}
img{border:none;}
.bigb{
width:152px;
height:154px;
line-height: 44px;
text-align: center;
font-weight: bold;

background-image:url(http://www.cloud-green.de/pics/Blank.png);
background-repeat:no-repeat;
background-position: 0px 0px;
}
div.bigb a{
color:#FFFFFF;
text-decoration: none;
display: block;
background-image:url(http://www.cloud-green.de/pics/Blank.png);
background-repeat:no-repeat;
background-position: 0px 0px;
}
div.bigb a:hover {
display: block;
background-image:url(http://www.cloud-green.de/pics/Blank.png);
background-repeat:no-repeat;
background-position: 0px -154px;
}
#bigbtab{
padding:10px;
}
-->
</style>
</head>
<body background="http://www.cloud-green.de/pics/portof.jpg" bgcolor="" id="binhalt" >
<img src="http://www.cloud-green.de/pics/portof.jpg" width="555" height="343" />
<div id="txt">
<table id="bigbtab" border="0" cellspacing="8">
  <tr>
    <td><div class="bigb"><a href="Logos.html" target="_self">Logos<br /><img src="http://www.cloud-green.de/pics/logopic.png" alt="" /></a></div></td>
    <td><div class="bigb"><a href="Flyer.html" target="_self">Flyer<br /><img src="http://www.cloud-green.de/pics/flyerpic.png" alt="" /></a></div></td>
  </tr>
  <tr>
    <td><div class="bigb"><a href="Plakate.html" target="_self">Plakate<br /><img src="http://www.cloud-green.de/pics/plakatpic.png" alt="" /></a></div></td>
    <td><div class="bigb"><a href="T-Shirts.html" target="_self">T-Shirts<br /><img src="http://www.cloud-green.de/pics/tshirtpic.png" alt="" /></a></div></td>
  </tr>
</table>
</div>
</body>
</html>
mfg Maik
 
Danke dir hat geklappt hab da wohl ganz schön den Syntax durcheinander gebracht.
. mit # verwechselt naja war spät gestern .

Schnell geholfen danke Maik
 
Immer wieder gerne :)

Mein Tipp: Zukünftig einfach erstmal das Markup vom w3c-Validator überprüfen lassen, und schauen, was er dazu zu sagen hat ;)

mfg Maik
 
Ja weiß auch nicht wieso ich das diesmal nicht genutzt habe.
Habe ja die Web Developer Toolbar installiert. Aber danke das du es mir erneut in Erinnerung gerufen hast.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück