CSS in IE, OPERA, FIREBIRD

Status
Nicht offen für weitere Antworten.
synomus

synomus

Grünschnabel
Hallo!


ich habe ein Problem mit der Erstellung einer Layout-Vorlage.

Ich habe mit Hilfe von CSS ein dreispaltiges Layout erstellt und für die Bereiche Navigation, Login.... nochmal div´s mit einer Breite von 120px erstellt.

Wenn man in diesen div jetzt Text ergänzt, wird es im IE (wie gewollt), innerhalb des Containers angeordnet. -> siehe Bild

ie.jpg


in Opera und Mozilla sieht es allerdings so aus:

opera.jpg


Wenn nötig, ergänze ich auch gerne den Quelltext.


Kann mir jemand sagen, wie ich die Darstellung in Opera so aussehen lassen kann, wie die im IE?



Für Antworten bin ich SEHR dankbar! :)


Gruß
Simon
 
Voila:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>-__--/ SYNOMUS \--__</title>
<style type="text/css">
<!--
body {
background: #FF9933;
font: 101%;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0px;
overflow: auto;
text-align: center;
}

#mitte {
margin: auto;
width: 760px;
background: transparent;
border: outset;
border-color: #FF9933;
margin-top: 20px;
text-align: left;
}

#nav, #content, #right {
width: 16%;
float: left;
margin-top: 50px;
}

#nav, #right {
min-width: 120px;
}

#content {
width: 68%;
margin-top: 30px;
}

#top {
height: 70px;
}

#logo, #top_nav {
float: left;
}

#logo {
width: 400px;
height: 70px;
}

.tab {
border: dotted 1px;
background-color: #FF6600;
padding: 2px;
margin: 3px 4px 4px 0px;
}

.tab_nav {
border: dotted 1px;
background-color: #FF6600;
padding: 2px;
margin: 20px 2px 2px 0px;
}

#bottem {
font-size: 70%;
border-top: dotted 1px;
text-align: center;
}

.link {
background: transparent;
text-decoration: none;
color: #996633;
}

.link:hover {
background-color: #FF9933;
text-decoration: underline;
display: block;
color: black;
}

p {
border: ridge 1px;
padding: 2px;
border-color: #FF9933;
}

.clear {
background-color: transparent;
padding: 2px;
margin: 3px 4px 4px 0px;
}

#right {
float: right;
}
-->
</style>
<!-- login-modul -->
CMS_CONTAINER[x]
<!-- login m -->
</head>
<body>

<div id="mitte">

<div id="top">
<div id="logo">CMS_CONTAINER[x]</div>
<div id="top_nav">CMS_CONTAINER[x]</div>
</div>

<div id="nav">
<div class="tab">CMS_CONTAINER[x]</div>
<div class="tab_nav">CMS_CONTAINER[x]</div>
<div class="tab_nav">CMS_CONTAINER[x]</div>
</div>

<div id="content">
<div class="clear">CMS_CONTAINER[x]
</div>

</div>

<div id="right">
<div class="tab">CMS_CONTAINER[x]</div>
<div class="tab">CMS_CONTAINER[x]</div>
<div class="tab">CMS_CONTAINER[x]</div>
</div>

<br style="clear:both;">
<div id="bottem">Copyright &copy; 2004 <a href="mailto:s@h79.de">synomus</a></div>

</div>

</body>
</html>
Zum Vergrößern anklicken....

Gruß
Simon
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück