XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Probleme mit verschiedenen Browsern (http://xhtmlforum.de/showthread.php?t=35816)

evo2 15.06.2005 17:24

Probleme mit verschiedenen Browsern
 
Liste der Anhänge anzeigen (Anzahl: 2)
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 15.06.2005 19:06

Die Frage kommt mir bekannt vor 8)

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

evo2 15.06.2005 22: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 16.06.2005 09:37

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

magick 17.06.2005 18:26

Zitat:

Zitat von evo2
dazu noch nen vorschlag? :)

Vielleicht dem #content etwas mehr margin links?


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:44 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2022, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2022