rocky01
07 Jan 2011, 01:46 AM
I am trying to build a simple webpage. whenever I reduce the size of the browser window the image on the webpage also shifts from its original position. It just goes haywire when the window size is reduced. What should I do to prevent this from happening? This is happening both in firefox and ie8.
I am enclosing the source code here. the code related to the image is
<div class="margin"><img src="images/me1.jpg" class="left" height=300 width=300/></div></div>
The image is posted at the top right corner of the page. When the size reduces the image jumps to some arbitrary position.
<!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>
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Photoelectron Spectroscopy</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="logo">
<div class="logo_l">
<h2>Electron <br><br>Spectroscopy Lab</h2>
</div>
<div class="margin"><img src="images/me1.jpg" class="left" height=300 width=300/></div></div>
</div>
</div>
<!-- header ends -->
<div id="main">
<!-- header begins -->
<div id="header">
<div id="buttons">
<a href="main.html" class="but" title="">Home</a><div class="razd_b"></div>
<a href="research.html" class="but" title="">Research</a><div class="razd_b"></div>
<a href="lab.html" class="but" title="">Laboratory</a><div class="razd_b"></div>
<a href="members.html" class="but" title="">Members</a><div class="razd_b"></div>
<a href="pub.html" class="but" title="">Publications</a>
</div>
<!-- content begins -->
<div id="content">
<div id="right">
<h1>Objective</h1>
<div class="text">
Our aim is to learn what is an <span class="fun">electron</span> and how it interacts with its environment in a material. The emphasis is on materials exhibiting interesting<span class="fun"> magnetism and superconductivity.</span> Electronic structure constitutes the microscopic origin of all material properties. A solid is a metal, semiconductor, insulator, superconductor or magnet is determined by the electronic interactions. Even the elastic and thermal properties depend on the<span class="fun"> electronic structure</span>.Thus, the knowledge of the behavior of electrons in a material will provide microscopic understanding of
material properties that has immence fundamental interest and one can do material engineering to fabricate new material of technological interests.
</div>
<h1>Techniques</h1>
<div class="text">
We employ photoelectron spectroscopy to probe the electronic structure directly. In this technique, photons are used to excite the electrons from different energy levels. If the energy of the photoexcited electrons is sufficiently large, they are ejected through the sample surface and are detected by an efficient electron detectors. Depending on the energy of the excitation source and the detection process, the technique is named as XPS (x-ray photoemission spectroscopy), UPS (ultra-violet photoemission spectroscopy), ARPES (angle-resolved photoemission spectroscopy), SRPES (spin-resolved photoemission spectroscopy) etc. We have set up all these facilities in our laboratory.
<p>To probe the coupling of electrons with other electrons, lattice etc, we employ High Resolution Electron Energy Loss Spectroscopy (HREELS).</p>
To obtain the electronic structure theoretically, we calculate the electronic band structure using Full potential linearized Augmented Plane Wave method (FLAPW). The electron electron Coulomb repulsion and spin-orbit coupling are considered in these calculations.<br>
The photoemission spectra are also analyzed using various model (multiband Hubbard model, Anderson Impurity model) calculations
that provide the detailed knowledge of the electronic structure and interaction parameters.<br>
</div> </div>
<div id="left">
<h1>Current Research</h1>
<div class="list">
<div class="opt"><div class="opt_a">
<a class="" href=""></a>
</div></div>
<div class="opt"><div class="opt_a"> <a class="" href=""></a>
</div></div>
<div class="opt"><div class="opt_a"><a class="" href=""></a>
</div></div>
<div class="opt"><div class="opt_a"><a class="" href=""></a>
</div></div>
<div class="opt"><div class="opt_a"><a class="" href=""></a>
</div></div></div>
<h1>Lab News</h1>
<div class="box10"><div class="box_top"></div>
<div class="left_b"><span class="w">Thursday, Dec 30, 2010</span><br />
Had a good and deep look at the website.
<div class="read"><a href="#"><img src="images/read_more.png" alt=""/></a></div>
</div>
<div class="box_bot"></div></div>
<div style="height:7px"></div>
<div class="box10">
<div class="box_top"></div>
<div class="left_b"><span class="w">Tuesday, Jan 4, 2011</span><br />
This website is ready.
<div class="read"><a href="#"><img src="images/read_more.png" alt="" /></a></div></div>
<div class="box_bot"></div></div></div>
<div style="clear: both"></div></div>
<!-- content ends -->
<!-- footer begins -->
<div id="footer">
<p>Copyright 2010. <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
<p>Design by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash Templates</a> for <a href="http://www.flashtemplatesdesign.com/" title="Free Flash Templates">Free Flash Templates</a></div>
<!-- footer ends -->
</div>
</body>
</html>
I am enclosing the source code here. the code related to the image is
<div class="margin"><img src="images/me1.jpg" class="left" height=300 width=300/></div></div>
The image is posted at the top right corner of the page. When the size reduces the image jumps to some arbitrary position.
<!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>
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Photoelectron Spectroscopy</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="logo">
<div class="logo_l">
<h2>Electron <br><br>Spectroscopy Lab</h2>
</div>
<div class="margin"><img src="images/me1.jpg" class="left" height=300 width=300/></div></div>
</div>
</div>
<!-- header ends -->
<div id="main">
<!-- header begins -->
<div id="header">
<div id="buttons">
<a href="main.html" class="but" title="">Home</a><div class="razd_b"></div>
<a href="research.html" class="but" title="">Research</a><div class="razd_b"></div>
<a href="lab.html" class="but" title="">Laboratory</a><div class="razd_b"></div>
<a href="members.html" class="but" title="">Members</a><div class="razd_b"></div>
<a href="pub.html" class="but" title="">Publications</a>
</div>
<!-- content begins -->
<div id="content">
<div id="right">
<h1>Objective</h1>
<div class="text">
Our aim is to learn what is an <span class="fun">electron</span> and how it interacts with its environment in a material. The emphasis is on materials exhibiting interesting<span class="fun"> magnetism and superconductivity.</span> Electronic structure constitutes the microscopic origin of all material properties. A solid is a metal, semiconductor, insulator, superconductor or magnet is determined by the electronic interactions. Even the elastic and thermal properties depend on the<span class="fun"> electronic structure</span>.Thus, the knowledge of the behavior of electrons in a material will provide microscopic understanding of
material properties that has immence fundamental interest and one can do material engineering to fabricate new material of technological interests.
</div>
<h1>Techniques</h1>
<div class="text">
We employ photoelectron spectroscopy to probe the electronic structure directly. In this technique, photons are used to excite the electrons from different energy levels. If the energy of the photoexcited electrons is sufficiently large, they are ejected through the sample surface and are detected by an efficient electron detectors. Depending on the energy of the excitation source and the detection process, the technique is named as XPS (x-ray photoemission spectroscopy), UPS (ultra-violet photoemission spectroscopy), ARPES (angle-resolved photoemission spectroscopy), SRPES (spin-resolved photoemission spectroscopy) etc. We have set up all these facilities in our laboratory.
<p>To probe the coupling of electrons with other electrons, lattice etc, we employ High Resolution Electron Energy Loss Spectroscopy (HREELS).</p>
To obtain the electronic structure theoretically, we calculate the electronic band structure using Full potential linearized Augmented Plane Wave method (FLAPW). The electron electron Coulomb repulsion and spin-orbit coupling are considered in these calculations.<br>
The photoemission spectra are also analyzed using various model (multiband Hubbard model, Anderson Impurity model) calculations
that provide the detailed knowledge of the electronic structure and interaction parameters.<br>
</div> </div>
<div id="left">
<h1>Current Research</h1>
<div class="list">
<div class="opt"><div class="opt_a">
<a class="" href=""></a>
</div></div>
<div class="opt"><div class="opt_a"> <a class="" href=""></a>
</div></div>
<div class="opt"><div class="opt_a"><a class="" href=""></a>
</div></div>
<div class="opt"><div class="opt_a"><a class="" href=""></a>
</div></div>
<div class="opt"><div class="opt_a"><a class="" href=""></a>
</div></div></div>
<h1>Lab News</h1>
<div class="box10"><div class="box_top"></div>
<div class="left_b"><span class="w">Thursday, Dec 30, 2010</span><br />
Had a good and deep look at the website.
<div class="read"><a href="#"><img src="images/read_more.png" alt=""/></a></div>
</div>
<div class="box_bot"></div></div>
<div style="height:7px"></div>
<div class="box10">
<div class="box_top"></div>
<div class="left_b"><span class="w">Tuesday, Jan 4, 2011</span><br />
This website is ready.
<div class="read"><a href="#"><img src="images/read_more.png" alt="" /></a></div></div>
<div class="box_bot"></div></div></div>
<div style="clear: both"></div></div>
<!-- content ends -->
<!-- footer begins -->
<div id="footer">
<p>Copyright 2010. <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
<p>Design by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash Templates</a> for <a href="http://www.flashtemplatesdesign.com/" title="Free Flash Templates">Free Flash Templates</a></div>
<!-- footer ends -->
</div>
</body>
</html>