HTML Forum

**cyclone22** · 12-26-2007, 11:51 AM

The following web page http://pathology.50webs.com/staff.html i designed appears correctly only in opera and firefox.IN others as internet explorer 6 and 7 the text next to the photos appear in a wrong way and t photos are aligned wrongly.whats the problem?

here are some screen shots as it appears in each browser.
img169.imageshack.us/my.php?image=firefoxct1.jpg
img241.imageshack.us/my.php?image=ie7dw1.jpg
img444.imageshack.us/my.php?image=operanj8.jpg
http://img241.imageshack.us/my.php?i...3b4e783zx0.png

Here is the code of the webpage

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="cs" />
<meta name="robots" content="all,follow" />
<meta name="author" content="All: ... [Nazev webu - www.url.cz]; e-mail: info@url.cz" />
<meta name="copyright" content="Design/Code: Vit Dlouhy [Nuvio - www.nuvio.cz]; e-mail: vit.dlouhy@nuvio.cz" />
<title>Pathology</title>
<meta name="description" content="..." />
<meta name="keywords" content="..." />
<link rel="index" href="CrystalX/." title="Home" />
<link rel="stylesheet" media="screen,projection" type="text/css" href="./css/main.css" />
<link rel="stylesheet" media="print" type="text/css" href="./css/print.css" />
<link rel="stylesheet" media="aural" type="text/css" href="./css/aural.css" />
<style type="text/css">
/*<![CDATA[*/

/*]]>*/
</style>

<style type="text/css">
/*<![CDATA[*/
p.c3 {text-align: left}
h3.c2 {text-align: center}
div.c1 {text-align: center}
/*]]>*/
</style>
</head>
<body id="www-url-cz">

<div id="main" class="box">
<div id="header">
<h1 id="logo"><a href="index.html" title="Pathology">Department of Pathology</a></h1>
<hr class="noscreen" />

<div class="noscreen noprint">
<p><em>Quick links: <a href="#content">content</a>, <a href="#tabs">navigation</a>, <a href="#search">search</a>.</em></p>
<hr /></div>

</div>


<div id="tabs" class="noprint">
<h3 class="noscreen">Navigation</h3>
<ul class="box">
<li><a href="index.html">Home</a></li>
<li><a href="history.html">History</a></li>
<li id="active"><a href="staff.html"><span class="style18">Staff</span></a></li>

<li><a href="research.html">Research</a></li>
<li><a href="publications.html">Publications</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="training.html">Training </a></li>
</ul>
<hr class="noscreen" /></div>


<div id="page" class="box">
<div id="page-in" class="box">
<div id="strip" class="box noprint">
</div>


<div id="content">
<div class="article">
<h2 class="style5"><a href="#" class="style8">Academic Staff members</a></h2>
<p><img src="photos/MVC.jpg" alt="" width="55" height="78" align="left" /></p>
<p> <span class="style17">Prof.M.V.C de Silva</span><br />
Head, Professor of Pathology<br />
(MBBS, Dip.Path, MD Histopathology)</p>
<p><img src="photos/PA.jpg" alt="" width="55" height="78" vspace="5" align="left" /></p>
<p> <span class="style17">Prof.P.Angunawela</span><br />
Professor in Pathology<br />
(MBBS,Dip.Path,MD Histopathology,FRCPA,FRCPath(UK))MIAC)</p>
<p><img src="photos/DL.jpg" alt="" width="55" height="78" align="left" /></p>
<p> <span class="style17">Prof.M.D.S.Lokuhetty</span><br />
Associate Professor in Pathology<br />
(MBBS,Dip.Path,MD Histopathology)</p>
<p><img src="photos/niranthi.jpg" alt="" width="55" height="78" align="left" /></p>
<p> <span class="style17">Dr.Niranthi Perera</span><br />
Senior Lecturer<br />
(MBBS,Dip.Path,MD Histopathology)</p>
<p><img src="photos/Lallindra.jpg" alt="" width="55" height="78" align="left" /></p>
<p> <span class="style17">Dr.Lallindra Gooneratne</span><br />
Lecturer<br />
(MBBS,Dip.Path,MD(Haem),MRCPath(UK))</p>
<p><img src="photos/Priyani.jpg" alt="" width="55" height="78" align="left" /></p>
<p> <span class="style17">Dr.A.A.H.Priyani</span><br />
Probationary Lecturer<br />
(MBBS,Dip.Path,MD Histopathology)</p>
</div>

<hr class="noscreen" />

<div class="article">
<h2 class="style5"><a href="#" class="style8">Non Academic Staff members</a></h2>
<ul>
<li><strong>Mrs.H.G.S.R Nanayakkara</strong><br />
Staff Assistant</li>
</ul>
<ul>
<li><strong>Mrs.B.N.S Karunarathne</strong><br />
Staff Assistant</li>
</ul>
<ul>
<li><strong>Mrs.R.L.C Hemamali</strong><br />
Staff Technical Officer - Grade I</li>
</ul>
<ul>
<li><strong>Mrs.Y.W Jayasekera</strong><br />
Staff Technical Officer - Grade I</li>
</ul>
<ul>
<li><strong>Mrs.H.A.Y Shirani</strong><br />
Staff Technical Officer - Grade I</li>
</ul>
<ul>
<li><strong>Mrs.G.K Wijesinghe</strong><br />
Staff Technical Officer - Grade II</li>
</ul>
<ul>
<li><strong>Mrs.K.T.K Perera</strong><br />
Technical Officer Grade - I</li>
</ul>
<ul>
<li><strong>Mr.B.D.M.U Kularathne</strong><br />
Technical Officer Grade - II</li>
</ul>
<ul>
<li><strong>Mr.O.M Prabth Chaminda</strong><br />
Technical Officer Grade - II</li>
</ul>
</div>

<hr class="noscreen" /></div>


<div id="col" class="noprint">
<div id="col-in">

<hr class="noscreen" />

<hr class="noscreen" />

<h3 class="style7">Links</h3>
<ul id="links">
<li><a href="http://www.cmb.ac.lk/">UOC</a></li>
<li><a href="http://www.cmb.ac.lk/academic/medicine/index.htm">UCFM</a></li>
<li><a href="index.html">Home</a></li>
</ul>
<br />
<hr class="noscreen" />
<div class="c1">
<h3 class="style7">Pathology Department<br />
(since 1941)</h3>
<br />
<p><img src="photos/department.jpg" alt="" width="124" height="120" /></p>
<br /></div>
<h3 class="style7 c2">Pathology Museum</h3>
<ul>
<li>Vast number of pathology specimens....</li>
</ul>
<ul>
<li>Specimen catalogue & descriptive cards for easy access....</li>
</ul>
<h3 class="style7 c2">Virtual learning</h3>
<div class="c1">
<p><img src="photos/vlc.jpg" alt="" width="110" height="110" /></p>
<h3>Way towards future...,</h3>
</div>
</div>
</div>
</div>
</div>


<div id="footer">
<div id="top" class="noprint">
<p><span class="noscreen">Back on top</span> <a href="#header" title="Back on top ^">^</a></p>
</div>
<hr class="noscreen" />
<p class="c3" id="createdby">created by <a href="about.html">Webdesign</a> </p>
<p> � Department of Pathology,Faculty of Medicine,Colombo.</p>
</div>
</div>

</body>
</html>

Please help me to fix the problem.
Thank you!

**Truly** · 12-26-2007, 01:36 PM

Try making the image float left, that should make the text fall directly to the side.

Hope that works!

**ADAM Web Design** · 12-26-2007, 01:43 PM

The problem isn't IE in this case...it's your code. It doesn't conform to the XHTML Strict doctype.

http://validator.w3.org/check?uri=ht...Inline&group=0

If you want it to work across the board, do something like this (you can adjust the numbers as you see fit, but leave the floats intact.):

Code:

div.picture {
    width:  55px;
    float:  left;
    padding:  5px;
}
div.staff-info {
     float:  left;
     padding:  5px;
   /* you can insert a fixed width here if you want...your layout's fixed-width, so you can get away with it here */
}
div.cleft {
    clear:  left;
    height:  1px; 
    overflow:  hidden;
}

...
...
...

Code:

<div class="picture">Picture 1</div>
<div class="staff-info">Staff Info 1</div>
<div class="cleft"></div>
<div class="picture">Picture 2</div>
<div class="staff-info">Staff Info 2</div>
<div class="cleft"></div>

My guess is that IE is ignoring the align="left" in your code because it's invalid.

**LadynRed** · 12-26-2007, 03:17 PM

Actually, I think it's this in your page:

<?xml version="1.0"?> -- the XML statement BEFORE anything else throws IE into quirks mode.

**cyclone22** · 12-26-2007, 09:00 PM

Thank you so much for your quick reply.I'll apply the changes to the code.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!