Hallo!
Ich habe folgendes Problem, schaut euch das am besten mal kurz an:
http://undercover.pytalhost.com/beispiel.html
Wenn ich die Seite im Internet Explorer 7 schmäler mache (Breite des Browser-Fensters verringere), dann hüpft der Text im Inhaltsbereich von der Höhe her unter das Navigationsmenü. In Opera und in Firefox tritt dieser Effekt nicht auf.
Ich habe keine Idee, woran das liegen könnte. Ich fange gerade erst an, mich mit HTML und CSS zu befassen und herumzuprobieren.
Hier ist die zugehörige HTML-Datei:
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>
<title>Beispiel-Website</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="title">
[img]header.png[/img]
</div>
<div class="menu">
<ul class="menu">
[*][url='startseite.html']Startseite[/url]
[*][url='praxisteam.html']Praxisteam[/url]
[*][url='praxis.html']Praxisräume[/url]
[*][url='sprechzeiten.html']Sprechzeiten/Kontakt[/url]
[*][url='wegbeschreibung.html']So finden Sie uns[/url]
[*][url='leistungen.html']Leistungen[/url]
[*][url='informationen.html']Informationen[/url]
[*][url='impressum.html']Impressum[/url]
[/list]</div>
<div class="content">
Dieser Text springt unter das Navigationsmenü, wenn das Browserfenster im Internet Explorer 7 schmal genug gemacht wird.
</p>
</div>
</body>
</html>Und hier die CSS-Datei:
Code
body {
font-family: Verdana, sans-serif;
background-color: #FFFFFF;
}
img.title {
margin-left: 40px;
}
div.title {
padding-right: 200px;
border-bottom: 2px solid #006400;
margin-bottom: 10px;
background-image: url(farbverlauf.gif);
background-repeat: repeat-x;
}
div.menu {
float: left;
background-image: url(farbverlauf2.gif);
background-repeat: repeat-y;
width: 180px;
margin-right: 0;
padding-right: 0;
}
ul.menu {
list-style-type: none;
font-style: Arial;
font-weight: bold;
font-size: 80%;
color: #00330A;
line-height: 200%;
text-align: left;
margin-left: 0;
margin-right: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 20px;
}
div.content {
font-size: smaller;
margin-top: 0;
margin-left: 200px;
width: 80%;
}
h1, h2 {
font-family: sans-serif;
}
a:link {
color: #00330A;
text-decoration: none;
}
a:hover {
color: green;
text-decoration: underline;
}
a:active {
color: red;
text-decoration: none;
}
a:visited {
color: #00330A;
text-decoration: underline;
}
table td {
font-size: smaller;
}Wäre riesig, wenn ihr mal kurz drüber gucken könntet, vielleicht entdeckt ihr die Ursache des Problems.
Herzlichen Dank!
Sebastian