Hilfe! Nur noch wenige Schritte zur fertigen Homepage...

[Kathii89]

Hallo zusammen!
Arbeite nun schon seit längerem an meiner ersten Homepage --> http://www.hello-katty.de

Hier kann man schon mal das Layout betrachten..

Es sind nun noch einige Sachen, die ich alleine einfach nicht schaffe..

- Mozilla Firefox sowie Safari erkennen den Halbkreis im Menü, während das Menü bei Internet Explorer total anders aussieht und der Halbkreis nicht zu sehen ist..

- ich habe mit einem iframe meine Galerie eingebaut.. Jedoch schaut dies auch wieder total unterschiedlich aus jenachdem mit welchem browser ich die seite öffne.. Bei Safari passt die Größe des Kastens, bei Mozilla z.b. ist der eingebaute Kasten sehr niedrig.. Also die Höhe stimmt nicht..

- und das letzte Hindernis wäre ein Musikplayer den ich noch einfügen möchte.. Habe mir einen flashstar player heruntergeladen, jedoch habe ich keine Ahnung wie ich diesen in meine Homepage bringe.. :-/


Hier meine css:



a {
text-decoration: none;
color: white;
}

body {
background-color: white;
padding: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
font-family: Arial;
background-position: relative;
background-attachment: scroll;
background-repeat: no-repeat:

}


body#links {
background-image: url("Radfahren1280.jpg");
background-repeat: no-repeat;

}


body#index {
background-image: url("gerbera.jpg");
background-repeat: no-repeat;


}


body#termine {
background-image: url("gerberadunkel.jpg");
background-repeat: no-repeat;

}

body#projekte {
background-image: url("KathlMikro.jpg");
background-repeat: no-repeat;
}

body#kontakt {
background-image: url("gerberaantik.jpg");
background-repeat: no-repeat;

}


table.MenuTable {
width: 100%;
border-spacing: 0px;
background-color: white;
}

div.Content {
position: relative;
color: white;
right: -50%;
width: 42%;
top: 90px;
padding: 30px;
background-image: url("Pixel.png");
-moz-border-radius:30px;
-webkit-border-radius:30px;
-khtml-border-radius:30px;
}

div.Content2 {
position: relative;
color: white;
right: -50%;
width: 40%;
top: 302px;
padding: 30px;
background-color: transparent;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-khtml-border-radius:30px;
}


tr.MenuBar {
width: 100%;
background: url("menurosa.png") repeat-x scroll;
}

td.MenuItem {
width: 10%;
height: 46px;
text-align: left;
background: url("menurosa.png") repeat-x scroll;
}

td.MenuItemActive {
width: 10%;
height: 46px;
text-align: left;
background: url("MenuAlpha.png") no-repeat bottom center;
}

td.MenuItem:hover {
background: url("MenuAlpha.png") no-repeat bottom center;
}

a.MenuLink {
color: white;
text-decoration: none;
font-weight: bold;
font-variant: small-caps;
font-family: Arial;
}



Wäre sehr sehr dankbar für jede Hilfe!!

Vielen Dank!
Kathrin

[jnv]

Zuersteinmal solltest du deinen Quelltext validieren. Extrem auffälige Unterschiede in Browsern liegen zum größten Teil an nicht validem Quelltext.

Dann nutze für Einrückungen entweder (bei Text) text-indent oder ggf. padding.   sieht nicht nur unschön aus - sondern ist es auch

Wie es in anderen Browsern aussieht, kann ich momentan leider nicht sagen. Habe nur FF9 und IE9 zur Hand.