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>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;
}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
