CSS Fragen, bitte Hilfe

Hallo!

Habe 1 Problem mit CSS und hoffe hier Hilfe zu finden.
Meine Seite hab ich mit CSS Boxen erstellt, sieht im FF einwandfrei aus. Wenn ich nun die Seite im IE öffnen verziehen sich 2 Boxen. Wenn ich die 2 nun anpasse siehts im FF wieder murks aus. Woran kann das liegen?

Hier mein Code in der HTML Datei:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="cache-control" content="no-cache" />
<title>Meine Page</title>
<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="lib/prog.js"></script>
<style type="text/css">
@import 'style.css';
</style>
</head>
<body>


  <div id="rahmen"> 
    <div id="head"></div>
    <div id="middle"> 
      <div id="left"> 
        <ul>
          [*][img]images/kontakt.gif[/img]
          [*][img]images/impressum.gif[/img]
        [/list]
      </div>
      <div id="menu" class="txt"> 
        <ul>
          [*]<a name="unternehmen">Unternehmen</a>
          [*]<a name="leistungen">Leistungen</a>
		  [*]<a name="service">Service</a>
		  [*]<a name="labor">Labor</a>
		  [*]<a name="team">Team</a>
		  [*]<a name="home">Home</a>
        [/list]
      </div>
      <div id="content"></div>
      <div id="right"></div>
    </div>
    <div id="footer"></div>
</div>
</body>
</html>

Alles anzeigen

Und hier mein CSS:

Code

#rahmen {
	/* Hauptrahmen um die Page */
	width: 642px;
	height: 550px;
	position: fixed;
	left: 200px;
	top: 20px;
}
#head {
	/* Headbereich */
	background-image: url('images/header.jpg');
	width: 642px;
	height: 169px;
}
#middle {
	/* Div layer für den Mittleren Bereich */
	width: 642px;
	height: 367px;
	position: absolute;
}
#footer {
	/* Div layer für Fußbereich */
	background-image: url('images/footer.jpg');
	width: 642px;
	height: 14px;
	position: absolute;
	top: 536px;
}
#left {
	/* Middle Bereich linke Spalte */
	background-image: url('images/left.jpg');
	background-repeat: no-repeat;
	width: 103px;
	height: 367px;
	position: absolute;
	padding-top: 215px;
	padding-left: 38px;
}
#left li {
	display: block;
	cursor: pointer;
	list-style-type: none;
}
#menu {
	/* Menu im Middle Bereich */
	background-image: url('images/menu.jpg');
	width: 524px;
	height: 26px;
	position: absolute;
	top: 0px;
	left: 103px;
	z-index: 2;
	text-align: left;
}
#menu li {
	display: inline;
	cursor: pointer;
	padding: 0px;
	margin: 0px;
	color: #FF0000;
}
#menu li:hover {
	color: #000000;
}
#content {
	/* Content im Middle Bereich */
	background-image: url('images/content.jpg');
	background-repeat: no-repeat;
	width: 524px;
	height: 330px;
	overflow: auto;
	position: absolute;
	left: 103px;
	top: 26px;
	padding-left: 0px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
}
#right {
	/* Rechte Seite im Middle Bereich */
	background-image: url('images/right.jpg');
	width: 15px;
	height: 367px;
	position: absolute;
	left: 627px;
}


/* ###### KLASSEN ###### */
.txt {
	font-size: 11px;
	font-family: verdana;
}

Alles anzeigen

Kann ich 2 verschiedene CSS's anlegen? eine für IE und eines für FF? Wie kann ich dann bloß dem Besucher sagen welches CSS eingesetzt werden soll?

Bitte um Hilfe.

MfG

rincewind

http://www.alistapart.com --> code --> CSS

browserhacks lernen...

sejuma

Die Browser-Hacks waren diesmal nicht schuld, sondern zu viele positions absolute und fehlende float-Angaben.
Ich hab die CSS mal etwas umgeschrieben. Achtung: Statt der background-images hab ich Farben eingesetzt, damit's besser deutlich wird.
Die müsstest du dann wieder ersetzen. Mach dir vorsichtshalber ne Sicherungskopie von deiner Datei. Sollte die Anordnung nicht deinen Vorstellungen entsprechen, dann melde dich nochmal.
Jedenfalls sieht's im IE und FF gleich aus.

CSS

Code

#rahmen {
   /* Hauptrahmen um die Page */
   width: 642px;
   height: 550px;
   margin: 0 auto;
   top: 20px;
}
#head {
   /* Headbereich */
   background-color:green;
   width: 642px;
   height: 169px;
}
#middle {
   /* Div layer für den Mittleren Bereich */
   width: 642px;
   height: 367px;
      background-color:#000099;
}
#footer {
   /* Div layer für Fußbereich */
   background-color:yellow;;
   width: 642px;
   height: 14px;
   clear:both;
}
#left {
   /* Middle Bereich linke Spalte */
   background-color:#ff0000;
   background-repeat: no-repeat;
   width: 103px;
   height: 367px;
   float:left;
      padding-left: 38px;
}
#left li {
   display: block;
   cursor: pointer;
   list-style-type: none;
}
#menu {
   /* Menu im Middle Bereich */
   background-color:black;;
   width: 642px;
   height: 26px;
   clear:both;
   float:left;
   top: 0px;
   left: 103px;


   text-align: left;
}
#menu li {
   display: inline;
   cursor: pointer;
   padding: 0px;
   margin: 0px;
   color: #FF0000;
}
#menu li:hover {
   color: #000000;
}
#content {
   /* Content im Middle Bereich */
   background-image: url('images/content.jpg');
   background-repeat: no-repeat;
   width: 524px;
   height: 330px;
   overflow: auto;
   position: absolute;
   left: 103px;
   top: 26px;
   padding-left: 0px;
   padding-top: 10px;
   padding-right: 0px;
   padding-bottom: 0px;
}
#right {
   /* Rechte Seite im Middle Bereich */
   background-image: url('images/right.jpg');
   width: 15px;
   height: 367px;
   position: absolute;
   left: 627px;
}


/* ###### KLASSEN ###### */
.txt {
   font-size: 11px;
   font-family: verdana;
}

Alles anzeigen

edit: sehe gerade, dass der content noch fehlt. Wo soll der denn hin in der Anordnung der farbigen Kästen oder wie sollen die angeordnet werden?

Hey, danke für die Antwort!
Hab deinen CSS Code ausprobiert, hab meine Bilder eingefügt und dann war alles total durcheinander, hab einfach mein gesichertes nochmal genommen und bei dem #menu, wo der fehler war das float: left; angegeben, und bum jetzt passt alles :).
vielen Dank!! super Forum hier!

Hätte aber noch eine Frage, wie bekomm ich denn einen Div zentriert?
Also meinen #rahmen umschließt ja alle anderen divs, und die divs innerhalb des rahmen sind an diesem ausgerichtet, dann könnte ich doch den #rahmen Div zentrieren?
Jednefalls wenn ich dem div ein align="center" mitgebe wird bloß der Text zentriert. Und im CSS will der mir den auch nicht zentrieren. Setze ich die Position auf absolute und geb dem einen Abstand von links von 200px, im FF rückt der ein, im IE wiedermal nicht.

sejuma

Mit margin: 0 auto; für den Rahmen
steht oben im Code
Sorry für meine Anordnungen, ich hatte da zwei ID's vergessen.

Macht nix ;)...

Jap, margin: 0 auto; macht im IE alles in die Mitte, aber im FF bleibts leider links ausgerichtet? Woran liegt das?
MfG

sejuma

Hast du auch das position:fixed; rausgenommen?

Ohja, daran lags *g... danke für die Hilfe.

Hätte noch eine letzte Frage, dann dürfte ich alles haben :D.
In meiner Box #menu wird im FF der Text am unteren Rand ausgerichtet, und im IE am oberen Rand. Auf sowas wie vertical-align reagiert keiner der beiden Browser

sejuma

Ich kann's mir momentan im FF leider nicht ansehen. Vertikal-align bezieht sich auf die Ausrichtung innerhealb einer Zeile und nützt diesbzgl. nichts.
Probier's mal mit einem padding-top Wert, der gibt den inneren Abstand zum oberen Containerrand an.

Das mit dem Padding-top hat leider nicht funktioniert. Das müsste ja in den Minusbereich gehen, aber das geht nicht.
Das ist etwas komisch, im IE ist die Schrift ganz oben, im FF ganz unten ausgerichtet. Versteh ich irgendwie nicht.

Habs nun anders gelöscht, hab einfach vor meine #menu box ein * html #menu gesetzt, dies wird nur im IE aufgerufen, und hab dann das ganze nochmal für #menu gemacht, nur dann die angaben die im FF vernünftig ausschauchen.. schient zu funzen.

sejuma

Das ist grundsätzlich eine Möglichkeit, um den Boxen-Hack des IE zu umgehen.
Möglicherweise kannst du darauf jedoch verzichten, wenn du einen gültigen DOCTYPE in dein html-Dokument einfügst.
http://www.carsten-protsch.de/zwischennetz/d…rer.html#syntax
http://www.css4you.de/wsdoctypeswitch/index.html#quirksmode

meikschmidt

Eerreiche ich eigentlich mit "z-index" im css auch eine ladereihenfolge, oder ist das tatsächlich nur die reine Ebenen-Reihenfolge?

yeti66

meikschmidt,

z-index legt die Reihenfolge der Überlappung der Ebenen fest. So, wie das HTML-Dokument gelesen (abgearbeitet wird- von oben nach unten ) werden auch die Bilder Inhalte geladen.

Gruß yeti66

meikschmidt

das habe ich mir schon fast gedacht. nun habe ich das broblem das ich ein frameset mit css definiert habe, das eine typische anordnung hat.

Kopfzeile (oben), Navigation (links), Anzeigen-Leiste (rechts) und Fusszeile unten. In dieser reihenfolge wird es auch geladen. ich möchte das dieses layout auch so beibehalten wird. allerdings soll die Anzeigenleiste, die z.B. google oder ebay zuletzt geladen werden.

yeti66

Das ist was für die JS-Abteilung!
unsichtbar laden und zeitvesetzt sichtbar machen. Hier ein Ansatz:
http://forum.de.selfhtml.org/archiv/2003/9/t56175/

Gruß yeti66

Tags