Hallo alle zusammen,
ich habe eine Webseite erstelle und mir ist aufgefallen das im IE7 meine Elemente verschoben sind. Leider weiß ich nicht genau was ich dabei falsch gemacht habe. Im IE8 sieht alles so aus wie es sein soll.
Vielleicht kann mir ja jemand von Euch helfen!
Hier ist mal der html-code!
Nicht erschrecken, für einige sieht es bestimmt wie Kraut und Rüben aus.
In der Sache bin ich noch ein Anfänger.
und hier der css-code:
Es wäre eine super Hilfe, wenn es jemanden gibt der mir behilflich sein kann.
Danke im Voraus!
LG Ramona
ich habe eine Webseite erstelle und mir ist aufgefallen das im IE7 meine Elemente verschoben sind. Leider weiß ich nicht genau was ich dabei falsch gemacht habe. Im IE8 sieht alles so aus wie es sein soll.
Vielleicht kann mir ja jemand von Euch helfen!
Hier ist mal der html-code!
Nicht erschrecken, für einige sieht es bestimmt wie Kraut und Rüben aus.
In der Sache bin ich noch ein Anfänger.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Tierärztliche Praxis am Fliegerhort,Tierarzt,Oschatz,Impressum,Chiropraktik,Röntgen,Hund,Katze,Sachsen, Wermsdorf,Nicole Thiel,Heilung,Parasitenbekämpfung,Mikrochip-Implantation,EU-Heimtierausweis,Zahnsteinentfernung,Blockaden,Pferd, Verspannungen,Regeneration,Muskelschwund,Galopp,Schmerzen" />
<meta name="copyright" content="Ramona Baller" />
<meta name="robots" content="index,follow"/>
<meta name="author" content="Ramona Baller" />
<meta name="description" content="Impressum der Tierarztpraxis am Fliegerhort Oschatz" />
<meta name="language" content="de-de" />
<title>Tierarzt am Fliegerhorst Oschatz :: Impressum ::</title>
<link href="css/test.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div class="header-impressum">
<div class="logo"><h1><a href="startseite.html"></a></h1></div>
</div> <!-- end of header -->
<div class="navigation">
<ul>
<li><a href="startseite.html">Startseite</a></li>
<li><a href="praxisteam.html">Unser Praxis-Team</a></li>
<li><a href="praxis.html">Praxisrundgang</a></li>
<li><a href="leistungen.html">Unsere Leistungen</a></li>
<li><a href="chiropraktik.html">Chiropraktik</a></li>
<li><a href="aktuelles.html">Aktuelles</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li class="active"><a href="impressum.html">Impressum</a></li>
</ul>
<!-- end of navigation --></div>
<div class="content">
<div class="maincontent">
<h1>Impressum</h1>
<p>Tierärztliche Praxis <br />für Kleintiere u. Veterinärchiropraktik
<br />Nicole Thiel</p>
<p>Finkenweg 8<br />04758 Oschatz</p>
<p>Telefon / Fax: 034 35 / 97 94 875<br />Mobil: 0177/ 97 28 681<br />eMail: <a href="mailto:info@tierarztpraxis-fliegerhorst.de">info@tierarztpraxis-fliegerhorst.de</a></p>
<br />
<br /><br />
</div> <!-- end of maincontent-->
<!-- Bild rechts mit Zitat -->
<div class="image"><img src="http://www.psd-tutorials.de/forum/images/hase.png" width="202" height="177" alt="Hase sitzt im Gras" />
<p> <!--hier kann ein Zitat stehen--></p>
</div><!-- Ende Bild mit Zitat -->
</div><!-- end of content -->
<div class="footer">
<div class="copy">© copyright bei Tierärztliche Praxis Nicole Thiel 2011</div>
<div class="impressum"><a href="impressum.html">Impressum</a></div>
</div> <!--end of footer -->
<div style="clear: both;"></div>
</div> <!-- end of wrapper -->
</body>
</html>
und hier der css-code:
Code:
@charset "utf-8";
/* CSS Document */
html,body
{
font-family: Verdana, Arial, sans-serif;
font-size: 100.01%;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #ccbca4;
background-image: none;
}
h1 {
font-size: 1em;
color: #731144;
line-height: 1.2em;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
font-size: 0.9em;
color: #731144;
line-height: 1.2em;
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 0.85em;
color: #666;
}
/*-------------------------------anfang wrapper---------------------------*/
#wrapper {
width: 1024px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
background-image: url(../images/bg_wrapper.gif);
background-repeat: repeat-y;
}
#wrapper .content .maincontent small a {
color: #731144;
font-size: 0.85em;
}
small {
font-size: 0.85em;
color: #666;
}
/*--------------------------------------end of wrapper-------------------*/
/*------------------------------anfang header----------------------*/
.header {
height: 250px;
width: 1024px;
}
.header-index {
height: 250px;
width: 1024px;
background-image: url(../images/hund_index.png);
background-repeat: no-repeat;
}
.header-index h1 {
background-image: url(../images/logo.png);
background-repeat: no-repeat;
float: right;
width: 473px;
height:200px;
margin-top: -13px;
margin-right: 13px;
text-indent: -9999px;
}
.header-index h1 a:link, .header h1 a:visited {
display:block;
width: 473px;
height:200px;
}
.header-leistungen {
height: 250px;
width: 1024px;
background-image: url(../images/header_leistungen.png);
background-repeat: no-repeat;
}
.header-leistungen h1 {
background-image: url(../images/logo.png);
background-repeat: no-repeat;
float: right;
width: 473px;
height:200px;
margin-top: -13px;
margin-right: 13px;
text-indent: -9999px;
}
.header-leistungen h1 a:link, .header h1 a:visited {
display:block;
width: 473px;
height:200px;
}
.header-chiropraktik {
height: 250px;
width: 1024px;
background-image: url(../images/header_chiropraktik.png);
background-repeat: no-repeat;
}
.header-chiropraktik h1 {
background-image: url(../images/logo.png);
background-repeat: no-repeat;
float: right;
width: 473px;
height:200px;
margin-top: -13px;
margin-right: 13px;
text-indent: -9999px;
}
.header-chiropraktik h1 a:link, .header h1 a:visited {
display:block;
width: 473px;
height:200px;
}
.header-aktuelles {
height: 250px;
width: 1024px;
background-image: url(../images/header_aktuelles.png);
background-repeat: no-repeat;
}
.header-aktuelles h1 {
background-image: url(../images/logo.png);
background-repeat: no-repeat;
float: right;
width: 473px;
height:200px;
margin-top: -13px;
margin-right: 13px;
text-indent: -9999px;
}
.header-aktuelles h1 a:link, .header h1 a:visited {
display:block;
width: 473px;
height:200px;
}
.header-kontakt {
height: 250px;
width: 1024px;
background-image: url(../images/header_kontakt.png);
background-repeat: no-repeat;
}
.header-kontakt h1 {
background-image: url(../images/logo.png);
background-repeat: no-repeat;
float: right;
width: 473px;
height:200px;
margin-top: -13px;
margin-right: 13px;
text-indent: -9999px;
}
.header-kontakt h1 a:link, .header h1 a:visited {
display:block;
width: 473px;
height:200px;
}
.header-impressum {
height: 250px;
width: 1024px;
background-image: url(../images/header_impressum.png);
background-repeat: no-repeat;
}
.header-impressum h1 {
background-image: url(../images/logo.png);
background-repeat: no-repeat;
float: right;
width: 473px;
height:200px;
margin-top: -13px;
margin-right: 13px;
text-indent: -9999px;
}
.header-impressum h1 a:link, .header h1 a:visited {
display:block;
width: 473px;
height:200px;
}
.header-danke {
height: 250px;
width: 1024px;
background-image: url(../images/header_danke.png);
background-repeat: no-repeat;
}
.header-danke h1 {
background-image: url(../images/logo.png);
background-repeat: no-repeat;
float: right;
width: 473px;
height:200px;
margin-top: -13px;
margin-right: 13px;
text-indent: -9999px;
}
.header-danke h1 a:link, .header h1 a:visited {
display:block;
width: 473px;
height:200px;
}
.header-praxisteam {
height: 250px;
width: 1024px;
background-image: url(../images/header_team.png);
background-repeat: no-repeat;
}
.header-praxisteam h1 {
background-image: url(../images/logo.png);
background-repeat: no-repeat;
float: right;
width: 473px;
height:200px;
margin-top: -13px;
margin-right: 13px;
text-indent: -9999;
display: inline;
}
.header-praxisteam h1 a:link, .header h1 a:visited {
display:block;
width: 473px;
height:200px;
}
.header-praxis {
height: 250px;
width: 1024px;
background-image: url(../images/header_praxis.png);
background-repeat: no-repeat;
}
.header-praxis h1 {
background-image: url(../images/logo.png);
background-repeat: no-repeat;
float: right;
width: 473px;
height:200px;
margin-top: -13px;
margin-right: 13px;
text-indent: -9999;
display: inline;
}
.header-praxis h1 a:link, .header h1 a:visited {
display:block;
width: 473px;
height:200px;
}
/*---------------------end of header---------------------------*/
/*-----------------------navigation--------------------------*/
.navigation {
display: inline;
text-align: left;
background-repeat: no-repeat;
margin-top: -5px;
background-image: url(../images/navi_bg.png);
float: left;
height: 347px;
width: 180px;
margin-left: 45px;
color: #731144;
font-family: Arial, Helvetica, sans-serif;
padding-right: 10px;
clear: both;
}
.navigation ul {
margin-top: 30px;
list-style-type: none;
padding-left: 20px;
}
.navigation li
{
font-family: Arial, Helvetica, sans-serif;
color: #731144;
padding-left: 0px;
line-height: 1.8em;
font-size: 0.85em;
font-weight: bold;
text-align: left;
}
.navigation ul li a {
text-decoration: none;
color: #731144;
}
.navigation ul .active a
{
color: #666;
text-decoration: none;
}
.navigation li a:hover
{
color:#666;
}
*html .navigation
{
background: none;
width: 180px;
height: 387px;
}
/*-----------------------------end of navigation--------------------*/
/*--------------------------anfang maincontent-----------------------*/
.maincontent {
float: left;
width: 450px;
margin-top: 20px;
margin-left: 10px;
padding-left: 10px;
height: auto;
margin-right: 50px;
display: inline;
}
.maincontent p a {
color: #731144;
}
/*------------------end of maincontent-----------------------------*/
/*------------------anfang content-----------------------------------*/
.content {
width: 992px;
margin-top: -5px;
margin-right: 16px;
margin-bottom: 0px;
margin-left: 16px;
height: auto;
min-height: 680px;
}
.image {
float: left;
height: 500px;
width: 220px;
margin-left: 20px;
margin-top: 20px;
padding-left: 10px;
padding-top: 10px;
display: inline;
}
tr {
font-size: 0.85em;
color: #666;
line-height: 1.5em;
}
strong {
color: #731144;
}
/*----------------------------end of content------------------*/
/* -----------------------footer--------------------*/
.footer {
height: 50px;
width: 1024px;
float: left;
background-image: url(../images/footer_bg.png);
background-repeat: no-repeat;
margin-right: auto;
margin-left: auto;
}
.copy
{
height: 25px;
width: 350px;
text-align: left;
float: left;
font-size: 0.75em;
color: #FFF;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 100px;
padding-top: 10px;
}
.impressum
{
height: 25px;
width: 195px;
text-align:right;
font-family: Arial, Helvetica, sans-serif;
float:right;
margin-top: 5px;
margin-right: 125px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 10px;
}
.impressum a
{
color: #fff;
font-size: 0.75em;
text-decoration:none;
}
.impressum a:hover
{
text-decoration:underline;
}
.hervorhebung {
color: #731144;
}
.rotunterstreichung {
color: #731144;
text-decoration: underline;
}
.zitat {
font-size: 0.75em;
line-height: 2em;
}
Danke im Voraus!
LG Ramona
Zuletzt bearbeitet: