[CSS] Probleem met opmaak divjes Firefox & Opera - Softwareontwikkeling

maandag 7 april 2008 20:29

Acties:

Topicstarter

Hallo beste mede-Tweakers,

Ik heb een probleem met de opmaak van mijn registratiepagina, waarbij ik een formulier gebruik. Ik probeer het geheel in divjes te bouwen, maar de form elementen verspringen een heel stuk naar beneden. De style.css gebruik ik voor al mijn pagina's en het stukje styling in de pagina is als test om het formulier correct te krijgen...alleen werkt het niet. Weet iemand van jullie wat ik verkeerd doe?

Ik heb het al op verschillende manieren geprobeerd, maar ik kom er echt niet meer uit. Waarschijnlijk mis ik ergens een CSS tag, maar ik zie door de bomen het bos niet meer

. Hopelijk kan iemand mij helpen...

Hierbij de CSS en HTML code:

Cascading Stylesheet: style.css

html {
   height:  100%;
}

* html #wrap {
   height:100%
}

body {
   background-color: #ffffff;
   font: 100% Arial, Verdana, Arial, Helvetica, sans-serif;
   height: 100%;
   margin: 0;
   padding: 0;
   text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
   font-size: 11pt;  
}

img {
   border-width: 0px;
}

h1 {
   font-size: 140%;
}

h2 {
   font-size: 120%;
}

h3 {
   font-size: 100%;
}

h1, h2, h3 {
   color: #092650;
}

#wrap {
   background-image: url('../images/background.jpg');
   background-repeat: repeat-y;
   min-height: 100%;
   width: 800px;
   margin-top: 0;
   margin-right: auto;
   margin-bottom: 0;
   margin-left: auto;
   position: relative;
   text-align: left;
}

#header {   
   background-image: url('../images/banner_beleggen.jpg');
   height: 172px;
   padding: 0 10px;
}

#header a {
   color: #b5cc00;
   text-decoration: none;
}

#header p {
   color: #ffffff;
   padding-top: 15px;
   padding-right: 0;
   padding-bottom: 10px;
   padding-left: 0;
   margin: 0;
}

#left {
   float: left;
   padding: 15px 0; /* top and bottom padding create visual space within this div */   
   width: 22%;
}

#left #martkaanbod {
   margin-left: 5px;
}

#left #menu {
   margin-top: 20px;
}

#left #menu a {
   display: block;
   padding: 3px 0 3px 20px;
   margin-left: 5px;
   font-size: 11pt;
   font-weight: bold;
   color: #092650;
   background: url("../images/bullit.jpg") 0px 3px no-repeat;
   text-decoration: none;
}

#left #menu2 a {
   display: block;
   width: 100%;
   margin: 3px 0 0 5px;
   text-decoration: none;
}


#right {
   float: right;
   padding: 15px 0; /* top and bottom padding create visual space within this div */
   width: 23%;
}

.horizontal_line {
   background-image: url(../images/horziontal_line.gif);
   background-repeat: repeat-x;
   background-position: center;
   width: 85%;
   height: 15px;
}

#main {
   position: relative;
   margin-left: 150px;  
}

#content {
   text-align: left;
   padding: 15px 0;
   margin: 0 24% 0 23.5%;
}

#left p, #left h3, #right p, #right h3, #right img{
   margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
   margin-right: 10px;
}

#inner-wrap {
   padding-bottom:80px;
}

#inner-wrap:after {
   content:" ";
   display:block;
   clear:both;
}

#footer {
   background-image: url('../images/footer.jpg');
   bottom:0;
   height: 54px;
   position: absolute;
   width: 100%;
}

#footer #outer {
   height: 54px; 
   width: 400px;
   margin-left: auto;
   margin-right:auto;
   position:relative;
   text-align: left;
}

#footer #outer #inner {
   color: #e3e3e3;
   font-size: 8pt;
   text-align: center;
   width: 400px;
   position: absolute;
   top: 50%;
   height: 20px;
   margin-top: -10px;
}

#login {
   margin-left: auto; 
   margin-right: 10px;
   margin-top: 16px;
   width: 190px;
}

#login #register a, #login #register span {
   color: #ffffff;
   font-size: 8pt;
}

.input_text {
   font-size: 8pt;   
   border-width: 1px;
   border-style: solid;
   border-color: #092650;  
   width: 90px;
}

HTML: registreren.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#form div label {
  display: block;
  float: left;
  width: 130px;
  padding: 3px 5px;
  margin: 0 0 5px 0;
  text-align: right;
}

#form div {
  clear: left;
  display: block;
  width: 374px;
  height: expression('1%');
  margin: 5px 0 0 0;
  padding: 1px 3px;
}

#form div input.inputText, form div input.inputPassword {
  width: 200px;
  padding: 1px 3px;
  margin: 0 0 0 0;
}

div label:before {
  content: '';
}
</style>
</head>
<body>
<div id="wrap">
  <div id="header">
    <p><a href="index.php">home</a>&nbsp;&nbsp;|&nbsp;&nbsp;producten&nbsp;&nbsp;|&nbsp;&nbsp;werkwijze&nbsp;&nbsp;|&nbsp;&nbsp;markt&nbsp;&nbsp;|&nbsp;&nbsp;preferenties&nbsp;&nbsp;|&nbsp;&nbsp;faq&nbsp;&nbsp;|&nbsp;&nbsp;contact</p>
   <form action="login.php" method="post">
    <div id="login">    
      <div class="row"><img src="images/klant_login_beleggen.gif" alt="" /></div>      
      <div id="register"><a href="registreren.php">Registreren</a><span>&nbsp;|&nbsp;</span><a href="wachtwoord.php">Wachtwoord vergeten</a></div>
    </div>
    </form>
  </div>
  <div id="inner-wrap">
    <div id="left"> 
       <form action="search.php" method="post">       
          <div id="search">               
               <img src="images/ik_zoek.gif" alt="ik zoek"/>&nbsp;&nbsp;<input class="input_text" name="search" type="text" maxlength="30"/> 
            <input type="image" src="images/zoek_pijltje.gif" />
              </div>     
      </form>
    <div>&nbsp;</div>
    <div><img id="martkaanbod" src="images/martkaanbod.jpg" alt="markt aanbod" /></div>
      <div id="menu"> <a href="">beleggen in bedrijf</a> <a href="">samenwerken</a> <a href="">bedrijf kopen</a> <a href="">bedrijf verkopen</a> </div>
      <div id="menu2">
        <p>Kijk ook eens op:</p>
        <a href=""><img src="images/beleggen_aanbod.jpg" alt="financierings aanbod voor belegger" /></a> <a href=""><img src="images/agatis_micromarkt.jpg" alt="agatis micromarkt" /></a> <a href=""><img src="images/scan_financieren.jpg" alt="scan financieren" /></a> <a href=""><img src="images/scan_risico.jpg" alt="scan risico" /></a> </div>
      <!-- end left -->
    </div>    
    <div id="right">  
     <img src="images/aanbiedingen.gif" alt="aanbiedingen"/>
      <h3>beleggen in bedrijf</h3>
      <div class="horizontal_line"></div>
      <p>Meer aanbiedingen</p>
      <!-- end #right -->
    </div>
    <div id="content">      
      <h1>Registreren</h1>
            <form id="form" action="">
            <div>
               <label for="postal">Zip/Postal Code:</label>            
               <input type="text" name="postal" id="postal" class="inputText" size="10" maxlength="50" value="" />
            </div>
            <div>
              <label for="city">City:</label>
             <input type="text" name="city" id="city" class="inputText" size="10" maxlength="50" value="" />               
            </div>            
            </form>
      <!-- end #content -->
    </div>
  </div>
  <div id="footer">
    <div id="outer">
      <div id="inner">&copy; 2008 Agatis | Privacy Beleid | Algemene voorwaarden</div>
   </div>
    <!-- end footer -->
  </div>
</div>
</body>
</html>

maandag 7 april 2008 20:33

Acties:

Pkunk

Kan je niet gewoon stap voor stap ccs uit zetten en kijken wanneer er onverwachten dingen gebeuren? Of alles uit en stap voor stap aan zetten

Een voorbeeld online is trouwens ook wel fijn voor de mensen die je willen helpen

Hallo met Tim

maandag 7 april 2008 20:44

Acties:

Michali

Isoleer het probleem inderdaad even. Dan heb je veel sneller een antwoord, mogelijk vind je hem zelf dan zelfs.

Noushka's Magnificent Dream | Unity

maandag 7 april 2008 20:51

Acties:

RiCkY82

Topicstarter

Ik weet nu dat het te maken heeft met het floating gedeelte....ik krijg het alleen niet gefixed
Als ik het floating deel uitzet

Cascading Stylesheet:

#form div {
  /*clear: left;*/
  display: block;
  width: 374px;
  height: expression('1%');
  margin: 5px 0 0 0;
  padding: 1px 3px;
}

Dan rendert ie goed in Firefox en Opera, alleen weer niet IE

maandag 7 april 2008 21:32

Acties:

Pkunk

Kan je iets online zetten?

Hallo met Tim

woensdag 9 april 2008 17:50

Acties:

Makkelijk

Ik heb hem lokaal even gedraait.

Je #form div cleared op basis van de layer #left
Het probleem is dat, ook binnen een nieuwe layer, clear echt invloed heeft op ALLE floating layers, hier ga je niet onderuit komen.

Waarom zet je elk form element in een eigen layer?

[ Voor 8% gewijzigd door Makkelijk op 09-04-2008 17:50 ]

Badieboediemxvahajwjjdkkskskskaa