FireFox doesn't break lines & gaps in IE around Images 1

[comboy]

Hi All,

I'm new to XHTML and CSS but have a good grasp of HTML 4.0.

I've two problems regarding the site.

1. One of my pages has a 3 col layout and in FFOX only the paragraph in the middle col does not seem to recognise the </br> tag as their are no line breaks appearing and the text is showing as one block

2. In IE a gap appears between my images and my DIV. Both the DIV and Image are set to the same height and width.

Here is the xhtml

<div id="leftside"> 
  <div class="left1"> </div>
  <div class="left2"> <img src="../images/countdrug.jpg" height="100" width="100" alt="drug1" /> </div>
  <div class="left3"> </div>
  <div class="left4"> <img src="../images/countdrug.jpg" height="100" width="100" alt="drug2" /> </div>	
  <div class="left5"> </div>
  </div> 

<div id="rightside"><img src="../images/map.gif" height="320" width="320" alt="map to cleary's pharmacy" />  </div>

 <div id="anchorcontentd">
 	<div class="contentd">

	<h1> Contact Details</h1>
	<p>
	Address: Strand Road Portmarnock</br>
	Co. Dublin.
	</br>
	Telephone: +353 1 8461466
	</br>
	Facsimile: +353 1 8461326 
	</br>
	e-mail:<a href="mailto:me.ie"><img class="middle" src="images/sendit.gif" width="200" height="20" alt="email us"/> </a>
	</p> 
	
	<h1> Business Hours </h1>
	
	<p>
	Monday - Friday: 9.30am - 8.00pm 
	</br>
	Saturday: 9.30am - 6.00pm 
	</br>
	Sunday & Bank Holidays: 12.00am - 1.30pm
	</p>

      </div>
 </div>

and here is the CSS

#leftside{
	float: left;
	width: 150px;
	height: 340px;
	background-color: #0000ff;}

.left1 {
	margin-left:10px;
	width:102px;
	height:10px;
	border-left: 1px solid #ffffff;}

.left2 {
	margin-left:10px;
	height:100px;
	width:100px;
	border-top: 1px solid #ffffff;
	border-left: 1px solid #ffffff;
	border-right: 1px solid #ffffff;}

.left3 {
	margin-left:10px;
	height:10px;
	width:101px;
	border-right: 1px solid #ffffff;
	border-top: 1px solid #ffffff;}

.left4 {
	margin-left:10px;
	height:100px;
	width:100px;
	border: 1px solid #ffffff;}

.left5 {
	margin-left:10px;
	width:102px;
	height:10px;
	border-left: 1px solid #ffffff;}

#rightside{
	float: right;
	width: 320px;
	height: 340px;}

#anchorcontentd{
	margin: 0px 320px 0px 150px;
	height: 340px;
	border-right: 1px solid #0000ff;}


.contentd{
	padding: 10px 10px 10px 10px;
	min-height: 340px;
	height: 340px;
	font-face: arial;
	font-size: 15px;}

Thanks in advance for the help,

Graham.

 

[Rieekan]

For the line breaks... The tag should be <br />, not </br>.

IE is a little weird when it comes to whitespace around images. Take the whitespace out of your code for the images and it should fix the issue.

- George

 

[comboy]

George cheers for that I'll give it a try, re the </br> just following the manual must give them a shout to tell them they have it wrong.

Cheers,


Graham