rumboppeler
Hallo allerseits,
anbei ein HP Entwurf für ein Seminar. Im Firefox 3.0.8 gibt es keine Probleme. Im IE 7 werden allerdings die auf index.htm die Links "Die Ausstellung", "Das Seminar", "Kontakt" und "Die Idee" nicht angezeigt bzw. das farbige Quadrat liegt oberflächlicher als die Schrift, so dass das nicht angezeigt wird. In einem anderen IE (Version kenne ich nicht) sind die kleinen Quadrate auf der Startseite total verschoben.
Habt ihr eine Idee, wie ich das beheben kann bzw. wie das überhaupt zustande kommt?
IE 7:
IE (Version nicht bekannt):
Hier mein (ewig langer..) Quelltext + CSS. Wahrscheinlich kann man das kürzer und eleganter lösen, aber naja... mein erstes Mal
(Tipps erwünscht!)
Quelltext:
Und so sieht's richtig im firefox aus:
anbei ein HP Entwurf für ein Seminar. Im Firefox 3.0.8 gibt es keine Probleme. Im IE 7 werden allerdings die auf index.htm die Links "Die Ausstellung", "Das Seminar", "Kontakt" und "Die Idee" nicht angezeigt bzw. das farbige Quadrat liegt oberflächlicher als die Schrift, so dass das nicht angezeigt wird. In einem anderen IE (Version kenne ich nicht) sind die kleinen Quadrate auf der Startseite total verschoben.
Habt ihr eine Idee, wie ich das beheben kann bzw. wie das überhaupt zustande kommt?
IE 7:
IE (Version nicht bekannt):
Hier mein (ewig langer..) Quelltext + CSS. Wahrscheinlich kann man das kürzer und eleganter lösen, aber naja... mein erstes Mal
(Tipps erwünscht!)
Quelltext:
Code:
<div id="boxleft">
<!-- InstanceBeginEditable name="contentleft" -->
<div id="contentleft">
<div id="box200_1">
<!--quadrat oben rechts gruen seminar-->
<p><a href="seminar.htm" id="link">Das Seminar</a></p>
<div id="quadrategruen">
<div id="box200_1_3"></div>
<div id="box200_1_2"></div>
<div id="box200_1_1"></div>
<div id="box200_1_6"><p><a href="dozenten.htm">Dozenten</a></p></div>
<div id="box200_1_5"></div>
<div id="box200_1_4"></div>
<div id="box200_1_9"><p><a href="inhalte.htm">Inhalte</a></p></div>
<div id="box200_1_8"><p><a href="exkursionen.htm">Exkursionen</a></div>
<div id="box200_1_7"></div>
</div>
</div>
<div id="box200_2">
<!--quadrat oben links blau ausstellung-->
<p><a href="ausstellung.htm" id="link">Die Ausstellung</a></p>
<div id="quadrateblau">
<div id="box200_2_3"></div>
<div id="box200_2_2"></div>
<div id="box200_2_1"></div>
<div id="box200_2_6"><p><a href="*********htm">Anfahrt</a></p></div>
<div id="box200_2_5"></div>
<div id="box200_2_4"></div>
<div id="box200_2_9"><p><a href="konzeption.htm">Konzeption</a></p></div>
<div id="box200_2_8"><p><a href="oeffnungszeiten.htm">Öffnungszeiten</a></p></div>
<div id="box200_2_7"></div>
</div>
</div>
<div id="box200_3">
<!--quadrat unten rechts gelb idee-->
<p><a href="idee.htm" id="link">Die Idee</a></p>
<div id="quadrategelb">
<div id="box200_3_3"></div>
<div id="box200_3_2"></div>
<div id="box200_3_1"></div>
<div id="box200_3_6"></div>
<div id="box200_3_5"></div>
<div id="box200_3_4"></div>
<div id="box200_3_9"><p><a href="lehrreich.html">lehrreich</a></p></div>
<div id="box200_3_8"></div>
<div id="box200_3_7"></div>
</div>
</div>
<div id="box200_4">
<!--quadrat unten links rot kontakt-->
<p><a href="kontakt.htm" id="link">Kontakt</a></p>
<div id="quadraterot">
<div id="box200_4_3"></div>
<div id="box200_4_2"></div>
<div id="box200_4_1"></div>
<div id="box200_4_6"><p><a href="kontaktformular.htm">Kontaktformular</a></p></div>
<div id="box200_4_5"></div>
<div id="box200_4_4"></div>
<div id="box200_4_9"><p><a href="impressum.htm">Impressum</a></p></div>
<div id="box200_4_8"><p><a href="presse.htm">Presse</a></p></div>
<div id="box200_4_7"></div>
</div>
</div>
</div>
CSS:
#contentleft {
width: 396px;
height: 396px;
background-color: #222;
margin: 50px;
}
/*begin: quadrat oben rechts gruen seminar*/
#box200_1 {
height: 198px;
width: 198px;
float: right;
}
#quadrategruen {
width: 198px;
height: 198px;
margin-top: -30px;
}
#quadrategruen p {
text-align: right;
padding: 55px 1px 0px 1px;
}
#quadrategruen a {
font-size: 8px;
color:#FFFFFF;
text-decoration:none;
font-style: normal;
font-weight: normal;
}
#box200_1_1{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_gruen_01.gif);
}
#box200_1_2{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_gruen_02.gif);
float: right;
}
#box200_1_3{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_gruen_03.gif);
float: right;
}
#box200_1_4{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_gruen_04.gif);
}
#box200_1_5{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_gruen_05.gif);
float: right;
}
#box200_1_6{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_gruen_06.gif);
float: right;
}
#box200_1_7{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_gruen_07.gif);
}
#box200_1_8{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_gruen_08.gif);
float: right;
}
#box200_1_9{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_gruen_09.gif);
float: right;
}
/*end: quadrat gruen*/
/*begin: quadrat blau oben links ausstellung*/
#box200_2 {
height: 198px;
width: 198px;
}
#quadrateblau {
width: 198px;
height: 198px;
margin-top: -30px;
}
#quadrateblau p {
text-align: right;
padding: 55px 1px 0px 1px;
}
#quadrateblau a {
font-size: 8px;
color:#FFFFFF;
text-decoration:none;
font-style: normal;
font-weight: normal;
}
#box200_2_1{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_blau_01.gif);
}
#box200_2_2{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_blau_02.gif);
float: right;
}
#box200_2_3{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_blau_03.gif);
float: right;
}
#box200_2_4{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_blau_04.gif);
}
#box200_2_5{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_blau_05.gif);
float: right;
}
#box200_2_6{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_blau_06.gif);
float: right;
}
#box200_2_7{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_blau_07.gif);
}
#box200_2_8{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_blau_08.gif);
float: right;
}
#box200_2_9{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_blau_09.gif);
float: right;
}
/*end: quadrat blau ausstellung*/
/*begin: quadrat unten rechts gelb idee*/
#box200_3 {
height: 198px;
width: 198px;
float: right;
}
#quadrategelb {
width: 198px;
height: 198px;
margin-top: -30px;
}
#quadrategelb p {
text-align: right;
padding: 55px 1px 0px 1px;
}
#quadrategelb a {
font-size: 8px;
color:#FFFFFF;
text-decoration:none;
font-style: normal;
font-weight: normal;
}
#box200_3_1{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_gelb_01.gif);
}
#box200_3_2{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_gelb_02.gif);
float: right;
}
#box200_3_3{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_gelb_03.gif);
float: right;
}
#box200_3_4{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_gelb_04.gif);
}
#box200_3_5{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_gelb_05.gif);
float: right;
}
#box200_3_6{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_gelb_06.gif);
float: right;
}
#box200_3_7{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_gelb_07.gif);
}
#box200_3_8{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_gelb_08.gif);
float: right;
}
#box200_3_9{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_gelb_09.gif);
float: right;
}
/*end: quadrat unten rechts gelb idee*/
/*begin unten links rot kontakt*/
#box200_4 {
height: 198px;
width: 198px;
float: right;
}
#quadraterot {
width: 198px;
height: 198px;
margin-top: -30px;
}
#quadraterot p {
text-align: right;
padding: 55px 1px 0px 1px;
}
#quadraterot a {
font-size: 8px;
color:#FFFFFF;
text-decoration:none;
font-style: normal;
font-weight: normal;
}
#box200_4_1{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_rot_01.gif);
}
#box200_4_2{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_rot_02.gif);
float: right;
}
#box200_4_3{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_rot_03.gif);
float: right;
}
#box200_4_4{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_rot_04.gif);
}
#box200_4_5{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_rot_05.gif);
float: right;
}
#box200_4_6{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_rot_06.gif);
float: right;
}
#box200_4_7{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_rot_07.gif);
}
#box200_4_8{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_rot_08.gif);
float: right;
}
#box200_4_9{
width: 66px;
height: 66px;
background-image: url(../images/boxes/quadrate66px/quadrate66px_rot_09.gif);
float: right;
}
/*end: quadrat rot kontakt*/Und so sieht's richtig im firefox aus:
Zuletzt bearbeitet von einem Moderator:
. Damit ich nicht immer alles neu schreiben muss, habe ich mir für manche Aufgaben das grobe html-gerüst sozusagen als Vorlage abgespeichert, und hier einfach vergessen den Teil rauszunehmen.
