Mopox: Darstellung fehlerhaft

SELF-Forum

Darstellung fehlerhaft

Mopox
– Informationen zu den Bewertungsregeln

Hallo Community,

ich habe hier ein skalierbares Design gebaut. Bei allen Auflösungen sieht dies gleich aus. Hierzu benutze ich Prozentwerte.

Bei Listen fällt mir dazu jedoch ein merkwürdiges Verhalten auf. In aktuellen Firefox (3.0.0.9) funktioniert alles so wie es soll. In allen anderen Browsern (ie7, opera, safari, chroom) gibt es Probleme. Diese Fallen manchmal erst auf wenn man das Browserfenster vergrößert oder verkleinert.
Dabei stellt man dann merkwürdige Umbrüche die es nicht geben Darf fest und auch einen margin ähnlichen Rand der nicht definiert ist.

Hat jemand hierzu eine Idee (http://mopox.de/files/v1/):
**************************

<!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"><head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<meta name="Author" content="" />  
<meta name="description" content="" />  
<meta name="keywords" content="" />  
<meta http-equiv="pragma" content="no-cache" />  
<link rel="shortcut icon" href="favicon.ico" />  
<link rel="Stylesheet" type="text/css" href="main.css" />  
<title>title</title>  
<script type="text/javascript">  
</script>  
</head>  
<body>  
<div class="main">  
  <div class="menu">  
    <ul>  
      <li><a href="">something</a></li>  
      <li><a href="">else</a></li>  
      <li><a href="">another thing</a></li>  
      <li><a href="">and that</a></li>  
    </ul>  
  </div>  
  <div class="logo">  
    <img src="images/logo.png" style="margin-left: 5%; margin-top: -20%; border: none; width: 80%" alt="" />  
  </div>  
  <div style="clear: both"></div>  
  <div class="bar">  
  </div>  
</div>  
</body>  
</html>

main.css:
**************************

*{  
  padding: 0px;  
  margin: 0px;  
}  
  
body {  
  font-size: 12px;  
  line-height: 16px;  
  font-family: 'Lucida Sans', Tunga, Verdana, Tahoma;  
  background-color: #f50;  
}  
  
.main {  
  margin: 7% 20%;  
}  
  
.logo {  
  width: 20%;  
  height: 64px;  
  background: url(images/menutop-bg.gif) repeat center;  
}  
  
.menu {  
  margin: 0;  
  padding: 0;  
  width: 80%;  
  height: 64px;  
  background: yellow;  
  float: right;  
}  
  
.menu ul {  
	margin: 0;  
	padding: 0;  
	list-style: none;  
}  
  
.menu ul li {  
	position: relative;  
	float: left;  
  padding: 10px 1% 24px;  
  width: 23%;  
  height: 30px;  
	display: block;  
	text-decoration: none;  
	text-align: center;  
	font-weight: normal;  
  background: #2375F8 url(images/menutop-bg.gif) repeat-x bottom center;  
}  
/*  
.menu li {  
  
  background: #2375F8 url(images/menutop-bg.gif) repeat-x bottom center;  
  float: left;  
}  
*/  
.menu a{  
  color: #eee;  
  text-decoration: none;  
}  
  
.bar {  
  margin-top: 1%;  
  width: 80%;  
  height: 20px;  
  background: url(images/menutop-bg.gif) repeat center;  
  float: right;  
}
Beitrag melden
–
Informationen zu den Bewertungsregeln