Bildschirmauflösung in Firefox

nieselfriem · 1 Juni 2007

Hallo ich habe das Problem, das meine HTML site und das mit meinem CSS bei einer 1024 auflösung ganz nett dargestellt wird. Wen ich jedoch die Bildschirmauflösung z.B. auf 1152x864 stelle verschiebt sich mein dargstelltes Formular nach unten.
HTML:

Code:

<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
  <head><meta http-equiv="Content-type" content="text/html ; CHARSET=iso-8859-1"/>
    <title>Test Registrierung</title>
    <link rel="stylesheet" type="text/css" href="css/basic.css" media="screen"/>
  </head>
  <body color="ffffff">
     <div id="header">
       <h1>Agent Pepper</h1>
    </div>
     <div id="navigation">
     <ul id="mainnavi">
            <li>
              <a href="index.php" title="Zur&uuml;ck ur Startseite">Start</a>
            </li>
            <li>
              <a href="about.html" title="&Uuml;ber uns">&Uuml;ber uns</a>
            </li>
            <li>
              <a href="register.html" title="&Uuml;ber uns">Registrierung</a>
            </li>
            <li>
              <a href="impressum.html" title="Impressum">Impressum</a>
            </li>
            <li>
              <a href="kontakt.html" title="kontak">Kontakt</a>
            </li>
            <li>
              <a href="formular2.php" title="login">Login</a>
       </li>
          <ul>               
    </div>
    <div id="sidebar">
    </div>
    <div id="content">
      <div id="formset">
        <form action="register.php" method="post">
          <fieldset><label>Pers&ouml;hnliche Daten</label>
          <table border="1" width="400px" cellpadding="0" cellspacing="2" border="0" class="maintext">
            <tr>
              <td>
               <table border="1" width="400px" cellpadding="0" cellspacing="2" border="0" class="maintext">
                 <tr> 
             <td align="left" width="150">Vertragsart</td>
                  <td width="133"><input type="radio" name="accountType" value="p">Privat</td>
             <td width="133"><input type="radio" name="accountType" value="f">Firma</td>    
            </tr>
               </table>
              </td>
             </tr>
             <tr>
               <td>
                 <table border="1" width="400px" cellpadding="0" cellspacing="2" border="0" class="maintext">
                   <tr>
                     <td align="left">
                       <select name="user_title" size="1">
               <option selected>Herr</option>
               <option>Frau</option>
                  </select>   
                     </td>
                   </tr>
                 </table>
               </td>
             <tr/>
             <tr>
               <td align="left">
                 <table border="1" width="400px" cellpadding="0" cellspacing="2" border="0" class="maintext">
                   <tr>
                     <td align="left" >
                        <strong>Vorname:</strong><br/>
              <input name="vorname" value="" size="25" type="text" class="maintext"/>
          <td align="left" width="*">
                        <strong>Nachname:</strong><br/>   
              <input name="nachname" value="" size="25" type="text" class="maintext"/>
                    </td>
                   </tr>
                 </table>
               </td>
             </tr>
             <tr>
               <td>
                 <table border="1" width="400px" cellpadding="0" cellspacing="2" border="0" class="maintext">
                     <tr>
                       <td align="left" ><strong>Firma:</strong><br/>
                    <input name="firmenname" value="" size="25" type="text" class="maintext"/>
                       </td>
                      </tr>
                  </table>
          </td>   
             </tr>
             <tr>
               <td>
                 <table border="1" width="400px" cellpadding="0" cellspacing="2" border="0" class="maintext">
                   <tr>
                     <td align="left" >
                       <strong>Geburtsdatum:</strong> (TT.MM.JJJJ)<br/>
                  
                     <select class="maintext" name="geburtstag">
                        <option value="">--</option>
                        <option value="01" >01</option>
                         <option value="31" >31</option>
                       
                     </select>   
                     <select class="maintext" name="geburtsmonat">
                        <option value="">--</option>
                     
                        <option value="12" >12</option>
                        
                     </select>
                     <select class="maintext" name="geburtsjahr">
                        <option value="">--</option>
                       <option value="1900" >1900</option>
                        
                     </select>                     
                       </td>   
                   </tr>
                 </table>
               </td>
             </tr>
             <tr>
               <td>
                 <table border="1" width="400px" cellpadding="0" cellspacing="2" border="0" class="maintext">
                   <tr>
                     <td align="left" >
                       <strong>Passwort:</strong><br/>
             <input name="pass" value="" size="25" type="password" class="maintext"/>
                     </td>
                     <td align="left" width="*">
                        <strong>Passwort best&auml;tigen:</strong><br/>
                        <input name="conf" value="" size="25" type="password" class="maintext"/>
                     </td>
                   </tr>
                 </table>
               </td>
             </tr> 
          </table>
        </fieldset>
        <p/>
              
        </form>   
       </div> 
     </div>
</body>
</html>

CSS:

Code:

#body {
font-size: 85%;
font-famliy: 'Trebuchet MS', Verdana, Arial, Sans-Serif;
text-align: center;
}

#wrap {
width: 900px;
margin: 0 ;
text-align: center;
}

#formset{
width: 900px;
margin: 0 ;
text-align: left;
}

#header {
float: left;
width: 900px;
height: 100px;
text-align: center;
border-top: 1px solid #999;
}

#navigation {
float: left;
width: 900px;
height: 50px;
border-bottom: 1px solid #999;
border-top: 1px solid #999;
top:0px;
left:0px;
background-color:rgb(100,180,250);
z-index:1;
}
#sidebar {
float: left;
width: 150px;
height: 400px;
top: 0;

}

#content {
float: left;
width: 700px;
height: 400px;
border-right: 1px solid #999;
border-left: 1px solid #999;
top: 0;
}

#current {
  background: url(bg_menuitem.gif)
  #979797 repeat-x 0px -160px;
  color: #fff;
  cursor: default;
  padding: 0 15px;
}


#mainnavi li {
  border-right: 1px solid #676767;
  display: inline;
}

#mainnavi li a {
  color: #fff;
  padding: 0 15px;
  text-decoration: none;
}

#mainnavi li a:hover {
  background: url(bg_menuitem.gif)
  #676767 repeat-x 0px -80px;
  text-decoration: none;
}

#form {
text-align:left;
width:700px;
} 

#navigation ul {
list-style-type: none;
}

#navigation ul li {
display: inline;
}


h1, h2, h3, h4, h5, h6 {
margin: 20px;
}

p.boxtext {

border: 1px solid #000;
padding: 5px;

}

p {
margin: 15px 20px;
}

#list {
list-style-position:outside;
}

form {
width:500px;
}

#person label {
display:block;
font-weight: bold;
text-align:left;
}

#aktivierung label {
display:block;
font-weight: bold;
}

#login label {
display:block;
font-weight: bold;
}

fieldset {
 border: 1px solid #dbd;
 width:650px;
 background: #fafafa;
 }
 
 .fieldset_2 {
 border: 1px solid #dbd;
 width:625px;
 background: #fafafa;
 }

legend {
font-weight: bold;
font-size: 120%;
color: #999;
}

textarea {
width: 425px;
heigth: 125px;
}

a.navi,a.navi_first,a.navi_self{
display:block;
white-space:nowrap;
overflow:hidden;
border-left:1px solid black;
border-right:1px solid black;
border-bottom:1px solid black;
font-family:Tahoma,sans-serif;
font-size:12px;
font-weight:bold;
text-decoration:none;
letter-spacing:0.1em;
padding:3px;
text-align:center;
}
a.navi_first {
border-top:1px solid black;
}

a.navi:link,a.navi:link,a.navi:visited,a.navi_first:visited {
background-color:rgb(115,115,75);
color:white;
}

a.navi_self:link,a.navi_self:visited {
background-color:gray;
color:white;
}

a.navi:hover,a.navi_first:hover,a.navi_self:hover,a.navi:active,a.navi_first:active,a.navi_self:active {
background-color:white;
color:black;
}



#navcontainer
{
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
border-top: 1px solid #999;
z-index: 1;
}

Was kann ich dagegen mache. Ich habe doch egentlich alles mit absoluten Positionen festgelegt.

Danke für den Tipp!

P.S. Sorry für die langes Codes, wollte nur evtl wichtige Details nicht weglassen

Gruß niesel

EDIT:
Problem gelöst

Mod-Edit: Beiträge zusammengeführt, es gibt einen Edit-Button! (Alti)

Bildschirmauflösung in Firefox

nieselfriem

Mitglied

Neueste Beiträge