Firefox und IE problem

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

12:34, 6.4.2009

Hallo,

Ich hab hier ein Problem beim Positionieren, weil der Mozilla Firefox das nicht so Anzeigt wie ich das will:

<html>
	<head>
		<title></title>
                 <link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
         	<div align="center">
                 	<div class="header_top"></div>
                         <div class="header">
                         	<a href="#"><img src="img/logo.jpg" style="float:left; margin-left:70px;"></a>
                         	<div style="clear:both;"></div>
                                 <a href="#" class="header_link1">Impressum</a>
                                 <p align="center">~ Mit Sicherheit voll dabei ~</p>
                                 <div class="menu" align="left">
                                   	<div class="button"><a href="#">HOME</a></div>
                                         <div class="button"><a href="#">&Uuml;BER UNS</a></div>
                                         <div class="button"><a href="#">LEISTUNGEN</a></div>
                                         <div class="button"><a href="#">AKTUELLES</a></div>
                                         <div class="button"><a href="#">KONTANKT</a></div>

                                 </div>
                         </div>
                 </div>
	</body>
</html>

Und Css:

body {
 	background-color: #f5bb00;
}
img {
	border:0px;
}
.header_top{
 	width: 922px;
         height: 48px;
         background-image: url(img/header1.jpg);
}
.header{
 	width: 922px;
         height: 78px;
         background-image: url(img/header2.jpg);
}
.header p {
 	color: #064187;
         font-family: verdana;
         font-size: 11px;
         font-weight: bold;
         margin-top:-79px;
}

.header_link1 {
  	color:#1a3c88;
         font family: verdana;
         font-size: 12px;
         text-decoration:none;
         float:right;
         margin-right: 90px;
         margin-top:-80px;
}
.header_link1:hover {
 	text-decoration: underline;
}
.menu {
      width:590px;
      height:30px;
      margin-right: -180px;
      margin-top:36px;
}
.button{
	width: 95px;
         height:30px;
         border: solid #1a3c88 1px;
         text-align:center;
 	color: #1a3c88;
         font-family: verdana;
         font-size:12px;
         padding-top: 6px;
         float:left;
         margin-left:3px;
         font-weight:bold;
 }
.menu a {
        color:#1a3c88;
         font family: verdana;
         font-size: 12px;
         text-decoration:none;

}
.menu a:hover{
 	text-decoration: underline;
}

Der Firefox zeigt die Buttons weiter unten an und nicht in dem Bereich "header".

Bitte helft mir!

Danke!

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
~~w******s~~

12:44, 6.4.2009
Lad ma die Sachen hoch oder gib den Link von der Seite an, dann ist es wesentlich einfacher zu sehen wo der Fehler ist. Sonst muss man erst deinen Code studieren.

Tipp: Du kannst es ja mal selbst probieren, indem du mit FF Addon Firebug da ran gehst. Das ist in solchen Sachen sehr nützlich.

Gruß werktags
Autor dieses Themas
lassidaassi

lassidaassi hat kostenlosen Webspace.

13:20, 6.4.2009
jetzt hab ich´s hochgeladen lassidaassi.lima-city.de
~~e********l~~

13:58, 6.4.2009
Aua...
1) Kein Doctype gesetzt -> Quirksmodus -> Ganz Böse!
2) Man beginnt die Entwicklung im Idealfall aufm Firefox, weil der näher am W3C Standard ist. Danach kommt der IE dran. Im Idealfall parallel testen.
3) Die Menuelemente würde ich mit Listen machen. Das ist wesentlich einfacher.
cookies

cookies hat kostenlosen Webspace.

14:15, 6.4.2009
Bei dir ist in jedem Browser ein anderer Fehler:

IE (richtig)

T-Online-Browser (richtig)

Google Chrome

Firefox

Opera

Safari

Da würde ich mir mal ganz stark Gedanken machen!

Beitrag zuletzt geändert: 6.4.2009 14:17:22 von cookies
~~w******s~~

14:32, 6.4.2009
Deine Seite hab ich mir mal vorgenommen und etwas angepasst. Ich erläuter hier jetzt nicht alles sondern nur ein paar grundlegende Sachen. Hier kannste dir das ganze anschauen und deine Quelltexte verbessern.

Also grundlegend war schon ein recht unübersichtlicher Aufbau. Da würd ich mir demnächst vorher ein paar Gedanken machen. Das ist nämlich nicht unwichtig. Hab in Grunzügen etwas mehr Ordnung hineingebracht. Dein "div class="header" hab ich in ein "div class="bottom" benannt und relativ positioniert um dann die Elemente, die dadrin sind absolut positonieren zu können. Das hat den Vorteil, dass alles einen festen Platz hat. Mein Positionierungen weichen von deiner immer um ein paar Pixel ab. Da kannst ja noch mal probieren. Das mit dem Menü habe ich etwas besser gelöst, da du zu viele unlogische divs genutzt hast, ich dagegen "ul li". Den Link selbst habe ich den Wert "display: block" gegeben. Somit ist nicht nur das bisjen in der Box, sondern die ganze Box als Link klickbar.
Getestet mit IE6 und FF3.
Fragen dazu kannste hier gerne stellen oder ne PN an mich

Gruß werktags

Edit: @kekse: Du hast zuviele Browser daher bitte nochmal testen..

Beitrag zuletzt geändert: 6.4.2009 14:33:59 von werktags
cookies

cookies hat kostenlosen Webspace.

14:35, 6.4.2009
Das geht jetzt in allen Browsern, die ich oben genannt habe.
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city

Firefox und IE problem

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!