Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 15.06.2005, 17:24
evo2 evo2 ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.06.2005
Beiträge: 2
evo2 befindet sich auf einem aufstrebenden Ast
Standard Probleme mit verschiedenen Browsern

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
Angehängte Grafiken
Dateityp: jpg vorschau4-ie-klein.jpg (22,3 KB, 362x aufgerufen)
Dateityp: jpg vorschau4-op-klein.jpg (21,4 KB, 362x aufgerufen)
Mit Zitat antworten
Sponsored Links