Hi,
i have my site looking like this :

html>
    <head>
        <title>Toller Titel</title>
        <link rel="stylesheet" type="text/css" href="layout.css"/>
        <meta http-equiv="Content-Type"
                  content="text/html; charset=ISO-8859-1" />

<script language="JavaScript">
<!--
button1= new Image();
button1.src = "bilder/menue/menue1.jpg"
button2= new Image();
button2.src = "bilder/menue/menue2.jpg"
button3= new Image();
button3.src = "bilder/menue/menue3.jpg"
//-->
  </script>

<div id="menue">
    <div style="text-align: center;">

    <a href="bla.html" onmouseover="button1.src='bilder/menue/menue1.jpg';" onmouseout="button1.src='bilder/menue/menue1_in.jpg';"> <img src="bilder/menue/menue1_in.jpg" style="border: 0px solid ; width: 96px; height: 58px;" alt="" name="button1" border="0"><br>Erstens!!<br></a>
    <a href="foo.html" onmouseover="button2.src='bilder/menue/menue2_in.jpg';" onmouseout="button2.src='bilder/menue/menue2.jpg';"> <img src="bilder/menue/menue2.jpg" style="border: 0px solid ; width: 96px; height: 58px;" alt="" name="button2" border="0"><br>FOO<br></a>
    <a href="bar.html" onmouseover="button3.src='bilder/menue/menue3in.jpg';" onmouseout="button3.src='bilder/menue/menue3jpg';"> <img src="bilder/menue/menue3jpg" style="border: 0px solid ; width: 96px; height: 58px;" alt="" name="button3" border="0"><br>BAAAAAAR<br></a>
    </div>
</div>
   <style type="text/css">
   body { background-repeat: no-repeat; background-attachment: fixed; background-image: url('bilder/hintergrund.gif'); background-position: center }
   </style>
   <div style="text-align: center;">
   <div id="inhalt">
  <div id="topkurz">
  <h3>Herzlich Willkommen!</h3>
  </div>

  <div id="topquer">
  <h1>Anfang und so weiter</h1>
  </div>
  </div>
<h3>Hallo und Willkommen zum Xten Mal!!</h3>
<h1>Mehr Text!!!1</h1>
<p>informativer Text informativer Text informativer Text </p>
  </div>
  </div>

</div>

with layout.css like this :

#menue {width: 96px; float: left;}
#hintergrund {float:center;}
#topquer{
background-color:#bf040d;
color: #FFFFFF;
padding:0;
margin:0;
height:80px;}
#inhalt{
width:700px;
border-top:0px solid #E4E4E4;
margin:0px;
margin-left:auto;
margin-right:auto;
padding:0px;}

#topkurz{
background-color:#000000;
color:#9B9B9B;
padding:0px;
margin:0px;
height:20px;}

When i open the page in Firefox everything is allright except that when i resize the browserwindow at some point the 2 div sections hit the menu on the left. this would be no problem if there were just pictures, but because i have labeled the pictures the text-links get a red backgroundcolor.
My second problem is that IE begins drawing the sections under the menu for some sick reason when i resize the window. i would really like to know how i can avoid those events without forcing my website to load in a prescaled (unresizeable) window.
sorry for my bad english & thanks in advance!

if you menu is positioned absolutely or relatively positioned, i can see this happening

do you have a link, i am not completely sure what is happening

This article has been dead for over six months. Start a new discussion instead.