Probleme mit verschiedenen Browsern

evo2 · #1 (**permalink**) 15.06.2005, 18:24

Hi.

Hab erst vor ein paar Tagen mit CSS angefangen und wollte damit meine Seite gestalten.
Ging soweit auch alles ganz gut, aber jetzt wollte ich ein Formular in die Seite einfügen, was aber in Opera 8 zu weit unten angezeigt wird.
Im IE 6 hingegen wird das Formular an der richtigen Stelle angezeigt, aber dafür sind die anderen Boxen verschoben.

Kann mir einer sagen was ich falsch gemacht habe?

HTML

Code:

<?xml version="1.0" encoding="windows-1252"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//de"
   "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>TEST</title>
     <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  </head>

  <body>


  
       <div class="header">
           [img]pics/logo_klein.jpg[/img]
       

       <div class="banner">
           [img]pics/logo_klein.jpg[/img]
       </div></div>
       



       <div class="topnav">
           <ul id="menu">|[*]Section1|[*]Section2|[*]Section3|[*]Section4|[*]Section5|[*]Section6|[/list]       </div>




       <div id="leftmenu">
           
           <div>
               <h4>Sections</h4>
               <ul>[*]Section1[*]Section2[*]Section3[*]Section4[*]Section5[*]Section6[*]Section7[*]Section8[*]Section9[*]Section10[/list]           </div>
           
           <div>
               <h4>Sections2</h4>
               <ul>[*]Section1[*]Section2[*]Section3[*]Section4[/list]           </div>
           
           <div>
               <h4>Sections3</h4>
               <ul>[*]Section1[*]Section2[*]Section3[*]Section4[/list]           </div>
           
       </div>




       <div id="content">

       
           
           <form action="foo.php">

           <fieldset>

             <legend>Beispielformular</legend>
              

              <label class="left">Text:</label>
              <input type="text" size="20" />

              <label class="left">langer Text:</label>
              <input type="text" size="20" />

              <label class="left">noch längerer Text:</label>
              <input type="text" size="20" />

              <input type="submit" value="Test" class="right" />
            </fieldset>

           </form>
           
       
       
       </div>



       
       <div class="footer">
           Content Management System Version 0.1alpha. (C) 2005 by evo2
           - All Rights Reserved.



       </div>
       

       
  </body>
</html>

CSS

Code:

body
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight:bold;
  font-size:0.8em;
  color:#000000;
}

a:link
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight:bold;
  font-size:0.8em;
  color:#000000;
  text-decoration:none;
}

a:visited
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight:bold;
  font-size:0.8em;
  color:#000000;
  text-decoration:none;
}

a:hover
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight:bold;
  font-size:0.8em;
  color:#FF090F;
  text-decoration:underline;
}

a:active
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight:bold;
  font-size:0.8em;
  color:#000000;
  text-decoration:none;
}

a:focus
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight:bold;
  font-size:0.8em;
  color:#000000;
  text-decoration:none;
}

div.header
{
  margin:10px 2% 0px 2%;
  border:1px solid #000000;
  border-bottom-width:0px;
  padding:10px;
  font-weight:normal;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:0.8em;
}

div.banner
{
  float:right;
}

#leftmenu
{
  float:left;
  width:14%;
  text-align:left;
  margin:10px 2% 10px 2%;
}

#leftmenu div
{
  min-height:80px;
  margin-bottom:5px;
  padding:5px;
  border:1px solid #000;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:0.8em;
 
}

div.topnav
{
  margin:0px 2% 0px 2%;
  border:1px solid #000000;
  padding:10px;
  text-align:center;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:0.8em;
}

#content
{
  min-height:500px;
  margin:10px 2% 10px 17%;
  border:1px solid #000000;
  padding:10px;
  text-align:left;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:0.8em;
}

#content div
{
  min-height:80px;
  margin-bottom:10px;
  padding:5px;
  border:1px solid #000;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:0.8em;
}

div.footer
{
  clear:both;
  margin:10px 2% 0px 2%;
  border:1px solid #000000;
  padding:5px;
  text-align:center;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:0.8em;
}
ul#menu
{
margin:0;
padding:0;
}

ul#menu li
{
padding:0 2% 0 2%;
margin:0;
list-style:none;
display:inline;
}

input
{
  border      : 1px solid #DDD;
  background  : #F4F4F4;
  padding:0 2% 0 2%;
  margin:5px;
}

input:focus
{
  border      : 1px solid #AAA;
  background  : #FFF;
}

textarea
{
  border      : 1px solid #DDD;
  background  : #F4F4F4;
  padding:0 2% 0 2%;
  margin:5px;
}

textarea:focus
{
  border      : 1px solid #AAA;
  background  : #FFF;
}

label.left {
float:        left;
text-align:   right;
width:        10em;
padding:0.5em 0.3em 0.5em 0;
}

input[type=text], select {
float:        left;
margin:0.4em 0;
}

input.right {
 float:        left;
 width:        auto;
 clear:        both;
 margin-left:  5.3em;
 margin-right: .3em;
}

input[type=checkbox].right,input[type=radio].right,input[type=submit].right {
 margin-left: 6.3em;
}

form br {
 clear:       both;
}

Mfg
evo2

Floele · #2 (**permalink**) 15.06.2005, 20:06

Die Frage kommt mir bekannt vor

Naja, also ich bleibe mal bei meiner Meinung. Einzigste Idee die ich momentan hätte wäre das Menü nicht zu floaten.

evo2 · #3 (**permalink**) 15.06.2005, 23:32

hmm...
also wenn ich bei #leftmenu das float weglasse gehts.
aber dann is die content box zwar auf der rechten seite, aber unterhalb des leftmenu.

dazu noch nen vorschlag?

mfg
evo2

Floele · #4 (**permalink**) 16.06.2005, 10:37

Du könntest das Menü absolut positionieren...nicht die schönste Lösung aber was besseres fällt mir grade nicht ein.

magick · #5 (**permalink**) 17.06.2005, 19:26

Zitat:

Zitat von evo2

dazu noch nen vorschlag?

Vielleicht dem #content etwas mehr margin links?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Probleme mit der Darstellung in verschiedenen Browsern	chrissie65	CSS	6	03.05.2012 22:59
Probleme mit der Anzeige in verschiedenen Browsern. Bitte um Ratschläge!	gsharpp	CSS	15	11.08.2011 14:59
Wie sieht eine Webseite in verschiedenen Browsern aus	TreasureZone	Grafik, Design, Typografie	5	18.05.2010 20:52
CSS in verschiedenen Browsern	klausschwaben	CSS	1	29.07.2008 16:04
Schriftunterschiede in verschiedenen Browsern	gh23	CSS	1	28.01.2008 23:17