Ben voor een 2de zit project dus een website aant maken, maar gezien ik hier amper ervaring me heb ben ik dit heel stapsgewijs aant doen.
De bedoeling is om hem zowel deftig weer te laten geven in IE als in FF.
Nu zit ik bij het begin al met een probleem.
hierkan je het begin vinden.
Als je dit in FF bekijkt dan zie je normaal een gecentreerde lay-out met een rood, blauw en oranje blok die mooi op elkaar aansluiten.
Bekijk ik dit in IE (versie 6 e.v.) dan plakt dit in men linkerbovenhoek, verdwijnt een stuk van het rode deel (omdat ik een -margin in men css heb gezet, doe ik dit niet, dan krijg ik in FF whitespace boven het rode deel), zijn er nog grijze stukjes tussen de drie vlakken, ...
hier vind je men code:
Code: Select all
body{
font-size:100%;
margin:0px;
padding:0px
}
div.container{
width:75%;
margin-left:auto;
margin-right:auto;
background-color:gray
}
div.header{
margin-top:-16px;
height:100px;
background-color:red
}
div.contents{
margin-top:-16px;
background-color:blue
}
div.footer{
margin-top:-16px;
height:50px;
background-color:orange
}
td.right {
text-align:right
}
Code: Select all
<html>
<head>
<link rel="stylesheet" type="text/css" href="frontpage.css" />
<title>startpage test</title>
</head>
<body>
<div class="container">
<div class="header">
<p>This is supposed to be a header</p>
</div>
<div class="contents">
<p>This is a test</p>
<form name="registerInput">
<table>
<tr>
<td class="right"><p>First Name: </p></td>
<td><input type="text"></td>
</tr>
<tr>
<td class="right"><p>Last Name: </p></td>
<td><input type="text"></td>
</tr>
<tr>
<td class="right">Password: </td>
<td><input type="password"></td>
<td><p style="font-size:0.625em">(8 to 16 alphanumerical characters)</p></td>
</tr>
</table>
</form>
</div>
<div class="footer">
<p>This is supposed to be a footer</p>
</div>
</div>
</body>
</html>