• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navigations Problem + Runde Ecken Problem

Status
Für weitere Antworten geschlossen.

gollum1990

Neues Mitglied
Hallo liebes Forum,

folgendes habe 2 Probleme:

1. Navigation

im Normal Zustand sind die Links in Normaler Schrift. Bei einem Mouse Over wird ein Rahmen erzeugt, sieht dann aus wie Buttons. Das Problem ist, wenn ich per Maus rüber fahre verschieben sich die anderen Links. Beim IE, nach unten. Im Firefox seitlich.

2. Content Bereich mit Runden Ecken

Ich habe einen Content Bereich, dieser ist ein Kasten mit runden Ecken. Dies setzt sich aus 3 Bildern zusammen, einmal Oben für die Oberen Ecken, dann Unten für die unteren Ecken und ein Bild was hinter dem Text angezeigt wird. Im Internet Explorer wird alles perfekt dargestellt. Im Firefox allerdings sieht das ziemlich sch**sse aus. Ich frag mich woran das liegt, ich habe doch alles richtig gemacht oder?

Firefox Screenie:
IE Screenie:


Der Quellcode der HTML Seite:
Code:
<html>
<head>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.1)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.1)" />
<style type="text/css">
* { margin: 0; padding: 0; }
body { font-color: black; font-family: Geneva, Arial, "Helvetica", sans-serif; }
#header { background: #515151; height: 40px; float: left; width: 100%; padding-top: 5px; }
#header ul { margin: 0 0 0 0; padding-left: 25%; }
#header li { list-style: none; display: inline;  }
#header li a { color: white; height: 22px; padding: 2px 15px 3px 15px; letter-spacing: -1px; font-size: 16px; text-decoration: none; }
#header li a:hover { color: #ffd500; border: 2px solid #ffd500;  }
#header li .current { color: #ffd500; border: 2px solid #ffd500; }
#contentoben { background: url("content-oben.png"); margin-left: 25%; height: 50px; width: 500px; }
#contentunten { background: url("content-unten.png"); margin-left: 25%; height: 50px; width: 500px; }
#content {  padding-left: 30px; padding-right: 30px; text-align: justify; float: left; font-size: 11px; background: url(content.png); width: 500px; margin-left: 25%; }
h1 { font-size: 18px; text-decoration: none; font-family: Geneva, Arial, "Helvetica", sans-serif; color: #ffd500; text-align: center; letter-spacing: -1px; }
#content a { color: #ffd500; text-decoration: overline; size: 11px; font-weight: bold; };
#content a:hover { color: black; }
</style>
</head>
<body>
 <div id="header">
     <ul>
	   <li><a href="#">Home</a></li>
	   <li><a href="#">About me</a></li>
	   <li><a href="#">Projects</a></li>
	   <li><a href="#">G-Book</a></li>
	   <li><a href="#">Forum</a></li>
           <li><a href="#">Services</a></li>
	   <li><a href="#">Kontakt</a></li>
	   <li><a href="#">Imprint</a></li>
	 </ul>
 </div>
 <div id="contentoben"></div>
 <div id="content">
   <p>
    <h1>Herzlich Willkommen auf meiner Seite!</h1>
    Ich hoffe Ihnen gefällt diese Homepage! <br/ />
	Bei mir gibt es unter anderem ein eigenes Gästebuch sowie ein Forum, <br />
	darüber hinaus finden Sie meine aktuellen Projekte auf meiner Seite.<br />
	<br />
	Falls Sie fragen an mich haben, können Sie auch das Kontakt Formular nutzen!<br />
	Falls Sie interessante Tutorien haben oder gesehen haben, können Sie diese im<br />
	Forum posten.<br />
	Zudem befindet sich hier noch einige Interessante Links: <a href="#">Linkliste</a><br />
	<br />
	Mit Freundlichen Grüßen<br />
	<br>
	<strong>Pascal</strong>
   </p>
  </div>
 <div id="contentunten"></div>
</body>
</html>

Ich hoffe ihr könnt mir helfen.
 
1. Navigation

im Normal Zustand sind die Links in Normaler Schrift. Bei einem Mouse Over wird ein Rahmen erzeugt, sieht dann aus wie Buttons. Das Problem ist, wenn ich per Maus rüber fahre verschieben sich die anderen Links. Beim IE, nach unten. Im Firefox seitlich.


2. Content Bereich mit Runden Ecken

Ich habe einen Content Bereich, dieser ist ein Kasten mit runden Ecken. Dies setzt sich aus 3 Bildern zusammen, einmal Oben für die Oberen Ecken, dann Unten für die unteren Ecken und ein Bild was hinter dem Text angezeigt wird. Im Internet Explorer wird alles perfekt dargestellt. Im Firefox allerdings sieht das ziemlich sch**sse aus. Ich frag mich woran das liegt, ich habe doch alles richtig gemacht oder?
  1. Border verbrauchen Platz. Bei acht Links mit jeweils 2px auf jeder Seite sind das zusammen 16px. Klar das es beim hovern rumpelt. Da die Links im IE trotzdem nebeneinander passen, liegt der Verdacht nahe, daß er im Quirks-Modus rendert. Passe die Breite der Links an den Hoverzustand an und versetze den IE in den Standard-Modus
  2. Das runde-Ecken-Problem würde ich nach der Validierung angehen.
 
Zuletzt bearbeitet:
Das Content Problem hab ich jetzt in Griff bekommen, es lag wohl an den Padding-Right/Left Angaben, und am Textumfluss, den musste ich für Oben und Unten auch definieren. Die Padding Angaben habe in einer anderen ID hereingetan, diese dann vor dem Text angeben.

Zu dem Button Problem, ich habe die Breite angepasst, jetzt werden beim IE die anderen Links nicht verschoben. Trotzdem verschieben sich die Links im Firefox dennoch seitlich.
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben