| CSS Browser Problem |
Rieke
Foren-Team
Beiträge: 1503
|
Hallo,
ich gebs ja zu, ich tu mich mit CSS ziemlich schwer, weis aber die Möglichkeiten
durchaus zu schätzen.
Aus diesem Grunde sollen weite Teile der neuen Webseite mit CSS umgesetzt werden, leider stosse ich immer wieder an "gemeine" Hürden.
Bei der Navigation funktioniert im Firefox alles wunderbar, im IE leider überhaupt nicht.
Hier der Code fürs CSS:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23: |
a:link, a:visited, a:active {
color: #333366;
text-decoration: none;
display: block;
font-size: 9pt;
width: 147px;
height: 17px;
letter-spacing: 0px;
border: 1px;
border-style: invisible
}
a:hover {
color: #333366;
text-decoration: none;
display: block;
font-size: 9pt;
background-color: #FFCC99;
width: 147px;
height: 17px;
border: 1px solid #fff;
} |
Hier der html Code für die Navigation:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11: |
<tr>
<td> </td>
<td><img src="bilder/pfeil.gif" width="15" height="15" align="absmiddle" id="gra"><a href="easy.html">
Easy<i> </i><font color="#6699CC">W</font>eb</a> </td>
</tr>
<tr>
<td> </td>
<td height="18"><img src="bilder/shim.gif" width="15" height="15" align="absmiddle" id="gra"><a href="#">·
Advanced<i> </i><font color="#6699CC">W</font>eb</a> </td>
</tr> |
Ich weis das sind noch Tabellen Tags, die kommen später erst weg wenn alles ins neue Template System umgebaut wird.
Wenn ich das ganze im Firefox aufrufe, ist alles wie es soll.
Im IE fängt er nach der Grafik leider den Link in einer neuen Zeile statt direkt daneben an ...
Weis jemand Rat ?
Rieke
---
  Blumenbeet
|
| Profil
E-Mail
Website
Editieren
Zitieren
|
sondermuelli
Quasselstrippe
Beiträge: 369
|
oh graus, das ist ja gar schrecklicher html-code. 
ich denke mal, dass der ie den umbruch aufgrund des display:block im css macht. mich wundert, dass firefox keinen umbruch macht.
es ist übrigens nicht nötig, für a:hover nochmal alle eigenschaften, die bereits für a:link definiert wurden, zu wiederholen. die eigenschaften, die sich bei hover verändern sollen reichen vollkommen aus.
---
wer hilft mir beim geschirr spülen?
|
| Profil
E-Mail
Website
Editieren
Zitieren
|
Rieke
Foren-Team
Beiträge: 1503
|
Wenn ich den Block rausmache, wird im Firefox die Hintergrundfarbe (beim hover) nur noch bis zum Textende nicht in der definierten Breite angezeigt.
---
Blumenbeet
|
| Profil
E-Mail
Website
Editieren
Zitieren
|
sondermuelli
Quasselstrippe
Beiträge: 369
|
achso. deshalb das display:block. 
lösung bietet float.
mach für die links wieder display:block rein und zusätzlich noch float:left. das gleiche dann auch für das bild.
eine id darf man übrigens nur einmal vergeben, verwende also für die bilder am besten klassen.
---
wer hilft mir beim geschirr spülen?
|
| Profil
E-Mail
Website
Editieren
Zitieren
|
Rieke
Foren-Team
Beiträge: 1503
|
in der Grafik definition hab ich das schon:
1:
2:
3:
4:
5: |
#gra {float:left;
clear:left;
}
|
Wenn ich nun in der link definition auch noch float:left; schreibe, habe ich plötzlich im Firefox den gleichen schei** wie vorher schon im IE ...
---
Blumenbeet
Diese Nachricht wurde geändert von: Rieke |
| Profil
E-Mail
Website
Editieren
Zitieren
|
sondermuelli
Quasselstrippe
Beiträge: 369
|
mach das clear:left da weg und statt dessen display:block dahin.
wobei man eigentlich das display:block bei gefloateten elementen auch weglassen kann, da diese sowieso als block-elemente interpretiert werden.
---
wer hilft mir beim geschirr spülen?
|
| Profil
E-Mail
Website
Editieren
Zitieren
|
Rieke
Foren-Team
Beiträge: 1503
|
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25: |
<!--
a:link, a:visited, a:active {
color: #333366;
text-decoration: none;
display: block;
font-size: 9pt;
width: 147px;
height: 17px;
letter-spacing: 0px;
border: 1px;
border-style: invisible
}
a:hover {
color: #333366;
display: block;
background-color: #FFCC99;
border: 1px solid #fff;
}
#gra {float:left;
display: block;
}
|
Keine Änderung, auch wenn ich im #gra das display block weg lasse ...
---
Blumenbeet
|
| Profil
E-Mail
Website
Editieren
Zitieren
|
sondermuelli
Quasselstrippe
Beiträge: 369
|
ist da vielleicht irgendwo eine ungewollte vererbung drin?
bei mir funktioniert das hier einwandfrei:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62: |
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Unbenannte Seite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="imagetoolbar" content="no"/>
<style type="text/css">
/*<![CDATA[*/
a:link, a:visited, a:active
{
color: #333366;
text-decoration: none;
display: block;
font-size: 9pt;
width: 147px;
height: 17px;
letter-spacing: 0px;
border: 1px;
border-style: invisible
}
a:hover
{
color: #333366;
display: block;
background-color: #FFCC99;
border: 1px solid #fff;
}
.gra
{
float:left;
display: block;
background-color:#00FF00;
}
.hervor
{
color:#6699CC;
}
/*]]>*/
</style>
</head>
<body>
<table>
<tr>
<td height="18"><img src="bilder/shim.gif" width="15" height="15" class="gra"><a href="#">·
Advanced <span class="hervor">W</span>eb</a> </td>
<td height="18"><img src="bilder/shim.gif" width="15" height="15" class="gra"><a href="#">·
Advanced <span class="hervor">W</span>eb</a> </td>
</tr>
</table>
</body>
</html>
|
Mit einer Liste und margin und padding würdest du übrigens viel eleganter und shim.gif, sowie ohne · zu einem vergleichbaren ergebnis kommen...
---
wer hilft mir beim geschirr spülen?
Diese Nachricht wurde geändert von: sondermuelli |
| Profil
E-Mail
Website
Editieren
Zitieren
|
sondermuelli
Quasselstrippe
Beiträge: 369
|
ist da vielleicht irgendwo eine ungewollte vererbung drin?
bei mir funktioniert das hier einwandfrei:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63: |
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Unbenannte Seite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="imagetoolbar" content="no"/>
<style type="text/css">
/*<![CDATA[*/
a:link, a:visited, a:active
{
color: #333366;
text-decoration: none;
display: block;
font-size: 9pt;
width: 147px;
height: 17px;
letter-spacing: 0px;
border: 1px;
border-style: invisible
}
a:hover
{
color: #333366;
display: block;
background-color: #FFCC99;
border: 1px solid #fff;
}
.gra
{
float:left;
display: block;
background-color:#00FF00;
}
.hervor
{
color:#6699CC;
}
/*]]>*/
</style>
</head>
<body>
<table>
<tr>
<td height="18"><img src="bilder/shim.gif" width="15" height="15" class="gra"><a href="#">·
Advanced <span class="hervor">W</span>eb</a> </td>
<td height="18"><img src="bilder/shim.gif" width="15" height="15" class="gra"><a href="#">·
Advanced <span class="hervor">W</span>eb</a> </td>
</tr>
</table>
</body>
</html>
|
Mit einer Liste und margin und padding würdest du übrigens viel eleganter und ohne shim.gif, sowie ohne · zu einem vergleichbaren ergebnis kommen...
---
wer hilft mir beim geschirr spülen?
Diese Nachricht wurde geändert von: sondermuelli |
| Profil
E-Mail
Website
Editieren
Zitieren
|
Rieke
Foren-Team
Beiträge: 1503
|
Ich bekomms nicht hin.
Ich dachte grade es liegt am minimalistischen head, habe deinen eingefügt und doch geht es nicht.
Hier mal der aktuelle Stand ohne die Inhaltbox, die ist noch geheim 
Bitte keine Grundsatzdiskussionen über Tabellen oder meine Code-Schnibseleien, ich bin nur "Zulieferer" , zerlegen und umsetzen muss das anschliessend eine andere "arme Socke" , nur will ich natürlich schon das es beim basteln schon so ausschaut wie ichs meine/haben will
Hier mal komplett:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118: |
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Unbenannte Seite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
/*<![CDATA[*/
<!--
a:link, a:visited, a:active {
color: #333366;
text-decoration: none;
display: block;
font-size: 9pt;
width: 147px;
height: 17px;
letter-spacing: 0px;
border: 1px;
border-style: invisible
}
a:hover {
color: #333366;
display: block;
background-color: #FFCC99;
border: 1px solid #fff;
}
#gra {float:left;
display: block;
}
.norm { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt}
.nix { border-style: dashed; border-top-width: 1px; border-right-width: 1px; border-left-width: 1px; clip: rect( )}
/*]]>*/
</style>
</head>
<body bgcolor="#ffffff" background="bilder/bg.gif">
<table width="770" border="0" cellpadding="0" cellspacing="0" vspace="0" hspace="0" align="center" bgcolor="#FFFFFF">
<tr align="left" valign="top">
<td><img name="kopf_1_schrift" src="bilder/kopf_1_schrift.gif" width="165" height="63" border="0"></td>
<td><img name="kopf1_leer" src="bilder/kopf1_leer.gif" width="220" height="63" border="0"></td>
<td><img name="kopf1_impressum" src="bilder/kopf1_impressum.gif" width="167" height="63" border="0"></td>
<td><img name="kopf1_kundenlogin" src="bilder/kopf1_kundenlogin.gif" width="100" height="63" border="0"></td>
<td><img name="kopf1_agb" src="bilder/kopf1_agb.gif" width="118" height="63" border="0"></td>
</tr>
<tr align="left" valign="top">
<td colspan="5"><img name="kopf_mitte" src="bilder/kopf_mitte.gif" width="770" height="112" border="0"></td>
</tr>
<tr align="left" valign="top" >
<td colspan="5" height="21" background="bilder/kopf_navigation.gif"><img src="bilder/shim.gif" width="79" height="19" align="absmiddle"><font size="2"><font face="Verdana, Arial, Helvetica, sans-serif" color="#FFFFFF"><b><font color="#CCCCCC">Startseite<img src="bilder/shim.gif" width="35" height="19" align="absmiddle">Webhosting</font><font size="2"><font face="Verdana, Arial, Helvetica, sans-serif" color="#FFFFFF"><b><font color="#CCCCCC"><img src="bilder/shim.gif" width="35" height="19" align="absmiddle">Domains</font><font size="2"><font face="Verdana, Arial, Helvetica, sans-serif" color="#FFFFFF"><b><font color="#CCCCCC"><img src="bilder/shim.gif" width="35" height="19" align="absmiddle">Technik</font><font size="2"><font face="Verdana, Arial, Helvetica, sans-serif" color="#FFFFFF"><b><font color="#CCCCCC"><img src="bilder/shim.gif" width="35" height="19" align="absmiddle">Support</font></b></font></font></b></font></font></b></font></font></b></font></font></td>
</tr>
<tr align="left" valign="top">
<td background="bilder/navigation_leer.gif">
<table width="165" border="0" cellpadding="0" background="bilder/navigation_leer.gif" cellspacing="0" vspace="0" hspace="0">
<tr>
<td width="10"></td>
<td width="145"> </td>
</tr>
<tr>
<td colspan="2" background="bilder/navigation_unterlegt.gif"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#CCCCCC"> </font><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#CCCCCC"></font><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#CCCCCC"> <b>Webhosting
</b></font><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#CCCCCC"></font></td>
</tr>
<tr>
<td></td>
<td height="18"></td>
</tr>
<tr>
<td> </td>
<td><img src="bilder/pfeil.gif" width="15" height="15" align="absmiddle" id="gra"><a href="easy.html">
Easy<i> </i><font color="#6699CC">W</font>eb</a> </td>
</tr>
<tr>
<td> </td>
<td height="18"><img src="bilder/shim.gif" width="15" height="15" align="absmiddle" id="gra"><a href="#">·
Advanced<i> </i><font color="#6699CC">W</font>eb</a> </td>
</tr>
<tr>
<td height="18"> </td>
<td><img src="bilder/shim.gif" width="15" height="15" align="absmiddle" id="gra"><a href="#">·
Professional<i> </i><font color="#6699CC">W</font>eb</a> </td>
</tr>
<tr>
<td> </td>
<td><img src="bilder/shim.gif" width="15" height="15" align="absmiddle" id="gra"><a href="#">·
Company <font color="#6699CC">W</font>eb</a> </td>
</tr>
<tr>
<td><b> </b></td>
<td height="18"><img src="bilder/shim.gif" width="15" height="15" align="absmiddle" id="gra"><a href="#">·
Testaccount</a><b></b></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</td>
<td colspan="4"> Inhalt</td>
</tr>
</table>
<p> </p>
</body>
</html>
|
---
Blumenbeet
Diese Nachricht wurde geändert von: Rieke |
| Profil
E-Mail
Website
Editieren
Zitieren
|
Rieke
Foren-Team
Beiträge: 1503
|
Nachtrag:
Der · ist nur überbleibsel und soll durch die pfeil.gif ersetzt werden.
---
Blumenbeet
|
| Profil
E-Mail
Website
Editieren
Zitieren
|
sondermuelli
Quasselstrippe
Beiträge: 369
|
Rieke schrieb am 02.03.2005 16:52
zerlegen und umsetzen muss das anschliessend eine andere "arme Socke" , nur will ich natürlich schon das es beim basteln schon so ausschaut wie ichs meine/haben will
|
die arme sau.
den übeltäter haben wir jetzt auch. die tabellenzelle ist schlicht zu schmal, bzw. die links sind zu breit, sodass die links zwangläufig unter die grafik rutschen. ausserdem hat den links immer noch das float:left gefehlt.
probiers mal damit:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13: |
a:link, a:visited, a:active {
color: #333366;
text-decoration: none;
display: block;
font-size: 9pt;
height: 17px;
letter-spacing: 0px;
border:1px solid #FFF;
width:125px;
float:left;
}
|
---
wer hilft mir beim geschirr spülen?
|
| Profil
E-Mail
Website
Editieren
Zitieren
|
Rieke
Foren-Team
Beiträge: 1503
|
Okay , jetzt habe ichs so:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25: |
a:link, a:visited, a:active {
color: #333366;
text-decoration: none;
display: block;
font-size: 9pt;
height: 17px;
letter-spacing: 0px;
border:1px ;
border-style: invisible;
width:125px;
float:left;
}
a:hover {
color: #333366;
display: block;
background-color: #FFCC99;
border: 1px solid #fff;
}
#gra {float:left;
display: block;
}
|
Ohne hover ist der reine Text Link zu sehen (ohne border drumherum)=korrekt.
Wenn hover dann ist ein fablicher Hintergrund der weiss unrahmt ist = korrekt.
Im Firefox perfektes Ergenbnis.
Im IE "wackeln" die Navigantionszeilen wenn ich mit der Maus drüber gehe. Grund muss sein das er ohne hover den Platz des invisible borders nicht berücksichtigt. Wenn ich jetzt die höhe anpasse, so das es im IE passt, fängt es natürlich im Firefox an zu wackeln.
I hate IE ! ... und warscheinlich noch einige andere Browser, die ich noch nicht getestet hab 0.o
---
Blumenbeet
Diese Nachricht wurde geändert von: Rieke |
| Profil
E-Mail
Website
Editieren
Zitieren
|
n0f3aR
Mausakrobat
Beiträge: 155
|
Dann mach doch für hover nen Border der die selbe Farbe wie der Hintergrund hat, dann fällt es nicht auf und sollte klappen ;)
---
Kostenlos Webspace bei funpic.de
|
| Profil
E-Mail
Editieren
Zitieren
|
