HTML/CSS FireFox/IE probleem

**Max B** · 11-04-2009, 16:31

Beste,

ik heb me site bijna af met basen maar toen kwam ik erachter dat ie op Firefox er niet uit ziet zoals ik het wil, maar op Internet Explorer ziet ie er precies uit zoals ik het wil. Hoe komt dit? Kan iemand mij hierbij helpen. Onder heb ik de HTML en CSS meegegeven en een paar screenshots.

Alvast Bedankt!
Max

-------------HTML----------------

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Gangster-Terra - Start gratis je eigen maffia game!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="LAYOUTCRIMEBUILDER/styles.css" />
<body bgcolor="#2b2d2e">
<div id="container">
<div id="header">
<div id="banner">
<a href="#">Home </a>| Aanmelden | Ledenlijst | Contact</div>
<div class="header_login">
<form action="LAYOUTCRIMEBUILDER/login.php" method="post" name="login"> 
<span class="tekst">Gebruikersnaam:</span>
<span class="input"><input type="text" name="gebruikersnaam" />
</span>
<span class="tekst">Wachtwoord:</span>
<span class="input"><input type="password" name="wachtwoord" />
</span>
   <span class="button">
    <input type="submit" name="login" value="Inloggen" />
   </span><br /><center><h6>Wachtwoord vergeten | Registreer</h6></center></form></div>
</div>
</div>
 
  <div id="wrapper">
    <div id="content">
 <div id="contentInside"> 
 <h2 class="h2S">  Start gratis je eigen maffia game site!</h2><p>
     Op deze website kun je eenvoudig een eigen maffia game starten. Je kiest een naam voor je crime spel en kan meteen beginnen met spelen.<br>      
     Ook zijn er veel manieren aanwezig om jouw criminal spel uit te breiden en uniek te maken. 
      Zoek een layout uit, wijzig de header: de mogelijkheden zijn oneindig!<p>
        <a href="#"><img src="LAYOUTCRIMEBUILDER/afbeeldingen/MakeGame.But.jpg" border="0"></a>  <a href="#"><img src="LAYOUTCRIMEBUILDER/afbeeldingen/seepreview.But.jpg" border="0"></a>
 
      </div>
 
      <div class="box" id="news">
        <div class="box-t">
          <div class="box-r">
            <div class="box-b">
              <div class="box-l">
                <div class="box-tr">
                  <div class="box-br">
                    <div class="box-bl">
                      <div class="box-tl">
                        <h2>Gangster-Terra Nieuws</h2>
                        <p><font color="cc6666">
                        Gangster-Terra online!&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;  29-03-2009</font><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet, lorem laoreet porttitor pellentesque, orci mauris semper elit, vel sodales tellus nisi eget elit. Nulla laoreet lacinia lectus. Aliquam ante magna, feugiat eu, sodales eu, laoreet quis, diam. Aliquam erat volutpat. Praesent aliquam odio ac risus.<hr align="center" width="300px" height="1px">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
 
 
</div>
</body>
</html>

---------------CSS-----------------

Code:

html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;color:#afb3b6;text-align:center;}
p{margin:0 10px 10px}
a{padding:5px; text-decoration:none; color:#000000;}
*{
padding: 0px 0px 0px 0px;
} 
/*header&headerlogin*/
div#header{ background-image:url(LAYOUTCRIMEBUILDER/afbeeldingen/header.jpg); width:956px;
height:299px; 
}
#banner{
 font-size:14px;
 font-family:Arial, Helvetica, sans-serif;
 padding: 0px 0px 0px 670px;
 color:#000;
 margin-left:auto;
 background-color:#ff6144;
 margin-left:3px;
 width:280px;
 height:20px;
}
div#header .header_login
{
 width: 355px;
 height: 100px;
 background-image:url(LAYOUTCRIMEBUILDER/afbeeldingen/login.jpg);
 background-position:left;
 background-repeat:no-repeat;
 float: right;
 margin: 85px 0px 0px 40px;
 padding: 10px 0px 0px 0px;
}
div#header .header_login span.tekst
{
 width: 100px;
 height: 20px;
 color: #afb3b6;
 float: left;
 clear: both;
 line-height: 10px;
 text-align: right;
}
div#header .header_login span.input
{
 width: 161px;
 height: 20px;
 color: #afb3b6;
 font-weight: bold;
 float: left;
 line-height: 10px;
 padding: 0px 0px 0px 20px;
}
div#header .header_login span.input input
{
 width: 152px;
 height: 12px;
 background: #363131;
 border: 1px SOLID #C59E76;
 color:#FFF;
 padding: 2px;
 font-size: 10px;
}
div#header .header_login span.button
{
 clear: both;
 width: 100px;
 height: 26px;
 padding: 0px 0px 0px 152px;
}
div#header .header_login span.button input
{
 width: 90px;
 height: 22px;
 background: url("images/input_submit.gif") repeat-x;
 border: 1px SOLID #afb3b6;
 font-size: 10px;
 font-weight: bold;
 padding: 0px;
 margin: 5px 0px 0px 0px; 
}
 
/*content*/
div#container{text-align:left}
div#content p{line-height:1.4}
div#container{width:956px;margin:0 auto}
div#wrapper{float:right;width:100%}
div#content{ background-image:url(LAYOUTCRIMEBUILDER/afbeeldingen/content.jpg);
background-repeat:no-repeat;
width:956px;
height:835px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#contentInside{ font-family:"Arial Rounded MT Bold";
font-size:12px;
padding-right:400px;
width:500px;
height:auto;
padding-top:40px;
}
div#footer{clear:left;width:100%}
 
/*box*/
.box {
 margin: -200px 0px 0px 0px;
  float: right;
  width: 380px;
  background: #0c0c0c;
  margin-right: 18px;
  margin-bottom: 400px;
}
.box-t { background: top url(afbeeldingen/box_t.jpg) repeat-x; }
.box-r { background: right url(afbeeldingen/box_r.jpg) repeat-y; }
.box-b { background: bottom url(afbeeldingen/box_b.jpg) repeat-x; }
.box-l { background: left url(afbeeldingen/box_l.jpg) repeat-y; }
.box-tr { background: top right url(afbeeldingen/box_tr.jpg) no-repeat; }
.box-br { background: bottom right url(afbeeldingen/box_br.jpg) no-repeat; }
.box-bl { background: bottom left url(afbeeldingen/box_bl.jpg) no-repeat; }
.box-tl { background: top left url(afbeeldingen/box_tl.jpg) no-repeat; }
.box-tl {
  padding: 13px 18px;
}
.h2S {
 font-size: 20px;
}

**gast2960** · 11-04-2009, 17:19

Firefox ziet er (bijna) altijd goed uit, de fout ligt dus niet aan Firefox maar aan Internet Explorer.

Tip: Slice de website voor firefox, vervolgens de bugs in IE eruit halen. Er zijn namelijk wel veel IE
fixen maar geen FF fixen.

**Max B** · 11-04-2009, 17:23

Ok bedankt ik zal het gelijk uitproberen

**gast13152** · 11-04-2009, 22:00

clear:both; onder de header ?

ik zie de div #container ook niet in je css staan? #container {text-algin:center; float:left; margin 0 auto; witdh: "breedte website"; height: auto;}

vervolgens de clear div onder de header, probeer dat eens

**Max B** · 12-04-2009, 10:42

Origineel gepost door nickhell

clear:both; onder de header ?

ik zie de div #container ook niet in je css staan? #container {text-algin:center; float:left; margin 0 auto; witdh: "breedte website"; height: auto;}

vervolgens de clear div onder de header, probeer dat eens

Beste nickhell,
ik heb gedaan wat jij zei alleen nu is die van firefox helemaal naar de linkerkant, en die van internet explorer de header naar links en de content in het midden.
Een paar screenshots van FF en IE zijn meegegeven.

Max

FF-------------------------------IE

**René Vennik** · 12-04-2009, 10:49

Ik zou overnieuw beginnen en het geheel in 1 container zetten:

html:

Code:

<!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">
<head>

    <title>Titel</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />    
    
</head>
<body>

<div id="container">

    <div id="header">

    </div>

    <div id="content">

    </div>

</div>

</body>

css:

Code:

*{ margin: 0; padding: 0; }

body{
text-align: center; // werkt centeren het ook in IE5.5
}

#container{
width: 900px; // zelf een eigen breedte inzetten
margin: 0 auto;
text-align: left; // herstel text-align: center;
}

**Max B** · 12-04-2009, 10:50

Bedankt, dat zal ik dan maar doen.
Ik laat wel van me horen als het gelukt is.

Max

HTML/CSS FireFox/IE probleem

HTML/CSS FireFox/IE probleem

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals