IE problems with image allignment.

Hi, this is my first post here. I'll probably stick around because this is a really good forum!

Anyway, I could use a little help please. I'm a relatively new designer and I can't figure this out. I'm not too good with Js yet but I'll serve separate sheets if I have to.

I have a two column design and in Firefox, it looks fine. In IE, the sidebar is pushed down like 30 px for no apparent reason. I moded a Dreamweaver basic starter page, but not by much.

Here is the code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="twoColFixRtHdr.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
<style type="text/css"> 
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRt #sidebar1 { width: 220px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRt #sidebar1 { padding-top: 30px; }
.twoColFixRt #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>

<body class="twoColFixRt">

<div id="container">
  <div id="sidebar1">
<img src="images/slices_02.gif" width="283" height="775" alt="side" />
  <!-- end #sidebar1 --></div>
  <div id="mainContent">
    <img src="images/slices_01.gif" width="497" height="177" alt="masthead" />
	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
<!-- end #container --></div>
</body>
</html>

CSS

@charset "utf-8";
* {
	margin: 0; padding: 0;
}
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: white;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
img {
	margin: 0;
	padding: 0;
}

.twoColFixRt #container {
	width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 0 auto;
	text-align: left; /* this overrides the text-align: center on the body element. */
}
.twoColFixRt #sidebar1 {
	float: right; /* since this element is floated, a width must be given */
	width: 283px;
}
.twoColFixRt #mainContent {
	margin: 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
} 
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 0px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 0px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

RhysW

Newbie Poster

1 post since Sep 2008

Reputation Points: 20

Solved Threads: 0

3 Years Ago

0

Please give break tag between every div tag

sreein1986

Posting Whiz

306 posts since May 2008

Reputation Points: 12

Solved Threads: 34

2 Years Ago

Show Comments

-1

Hello Sreein!

In html file its written (conditional CSS at line no 12) that if the browser is IE then padding 30px from top will be added and the code is like following ;

<!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRt #sidebar1 { padding-top: 30px; }

So remove that 30px padding from top, the issue will be solved.

If its solved then please add a reputaion for me.

Happy coding!

dipak_passion

Light Poster

34 posts since Dec 2008

Reputation Points: 11

Solved Threads: 1

2 Years Ago

0

If you want two column to appear next to each, float them. The div tag is a block element and it has line break. So, you cannot place them next to each normally like text. You may also use absolute position property or float. You floated one , but the another didn't. That is that, no floated element has still line break and it push down from another element. You must to float it too.

Zero13

Practically a Master Poster

624 posts since Jan 2009

Reputation Points: 120

Solved Threads: 139

IE problems with image allignment.

This article has been dead for over three months