Hi everyone Im very new to CSS so please bear with me.
Through complete trial and error I managed to get the browser images exactly where I wanted them. But for the life of me I can not figure out where they are getting there reference point from. Everything I thought would work, didnt. And now that they are exactly where I want them the code makes no sense to me.
If (for example) they are getting their reference point from the container div then they should be piled up on top of each other as they are only 10px apart and are 30px images.
If however the first image gets its reference from the container div and each additional image gets its reference from the previous image they would be miles apart.
But in fact the first image appears to be approximately 100px from the container div and each additional image appears to have approximately 10px between them.
If anyone can enlighten me I would in deed be appreciative.
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Title</title>
<link rel="stylesheet" href="css/basic.css" media="screen">
<style type="text/css" media="screen">@import url("css/elegant.css");</style>
<link rel="stylesheet" href="css/print.css" media="print">
<style type="text/css" media="screen">
img.chrome {position: relative; left: 100px;}
img.explorer {position: relative; left: 110px;}
img.firefox {position: relative; left: 120px;}
img.opera {position: relative; left: 130px;}
img.safari {position: relative; left: 140px;}
</style>
<style type="text/css" media="print">
img.chrome {display: none;}
img.explorer {display: none;}
img.firefox {display: none;}
img.opera {display: none;}
img.safari {display: none;}
</style>
</head>
<body>
<div id="container">
<div id="header" title="site name">
<div id="skipmenu"><a href="#">link</a></div>
<h1>site name</h1>
</div>
<div id="mainnav">
<ul>
<li><a href="#">link</a></li>
</ul>
</div>
<div id="menu">
<h3>Contents</h3>
<ul>
<li><a href="#">link</a></li>
</ul>
<p class="tinytext">sometext</p>
<h3>Head 2</h3>
<ul>
<li><a href="#">link</a></li>
</ul>
</div>
<div id="contents">
<div class="blogentry">
<h2><a href="#">link</a></h2>
<h3>header</h3>
<p>
<img class="imagefloat" src="images/flower.jpg" alt="White Rose" width="100" height="100" border="0"></p>
<p> </p><p> </p><p>some text</p><p> </p><p> </p><p>some text</p><p> </p><p> </p><p>some text</p>
<div>
<img class="chrome" src="images/browsers/chrome.gif" alt="Chrome" width="31" height="30" border="0">
<img class="explorer" src="images/browsers/explorer.gif" alt="Internet Explorer" width="31" height="30" border="0">
<img class="firefox" src="images/browsers/firefox.gif" alt="Firefox" width="31" height="30" border="0">
<img class="opera" src="images/browsers/opera.gif" alt="Opera" width="28" height="30" border="0">
<img class="safari" src="images/browsers/safari.gif" alt="Safari" width="28" height="30" border="0">
</div>
<ul>
<li><a href="#"><span class="questionlink">Learn More ></span></a></li>
<li>Category: <a href="#">link</a></li>
</ul>
</div>
</div>
<div id="footer">
Copyright © site name
</div>
</div>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Title</title>
<link rel="stylesheet" href="css/basic.css" media="screen">
<style type="text/css" media="screen">@import url("css/elegant.css");</style>
<link rel="stylesheet" href="css/print.css" media="print">
<style type="text/css" media="screen">
img.chrome {position: relative; left: 100px;}
img.explorer {position: relative; left: 110px;}
img.firefox {position: relative; left: 120px;}
img.opera {position: relative; left: 130px;}
img.safari {position: relative; left: 140px;}
</style>
<style type="text/css" media="print">
img.chrome {display: none;}
img.explorer {display: none;}
img.firefox {display: none;}
img.opera {display: none;}
img.safari {display: none;}
</style>
</head>
<body>
<div id="container">
<div id="header" title="site name">
<div id="skipmenu"><a href="#">link</a></div>
<h1>site name</h1>
</div>
<div id="mainnav">
<ul>
<li><a href="#">link</a></li>
</ul>
</div>
<div id="menu">
<h3>Contents</h3>
<ul>
<li><a href="#">link</a></li>
</ul>
<p class="tinytext">sometext</p>
<h3>Head 2</h3>
<ul>
<li><a href="#">link</a></li>
</ul>
</div>
<div id="contents">
<div class="blogentry">
<h2><a href="#">link</a></h2>
<h3>header</h3>
<p>
<img class="imagefloat" src="images/flower.jpg" alt="White Rose" width="100" height="100" border="0"></p>
<p> </p><p> </p><p>some text</p><p> </p><p> </p><p>some text</p><p> </p><p> </p><p>some text</p>
<div>
<img class="chrome" src="images/browsers/chrome.gif" alt="Chrome" width="31" height="30" border="0">
<img class="explorer" src="images/browsers/explorer.gif" alt="Internet Explorer" width="31" height="30" border="0">
<img class="firefox" src="images/browsers/firefox.gif" alt="Firefox" width="31" height="30" border="0">
<img class="opera" src="images/browsers/opera.gif" alt="Opera" width="28" height="30" border="0">
<img class="safari" src="images/browsers/safari.gif" alt="Safari" width="28" height="30" border="0">
</div>
<ul>
<li><a href="#"><span class="questionlink">Learn More ></span></a></li>
<li>Category: <a href="#">link</a></li>
</ul>
</div>
</div>
<div id="footer">
Copyright © site name
</div>
</div>
</body>
</html>
Answers