Div not aligning correctly in IE 1

rachelskuse · Apr 30, 2009

Hi,

I have a website which looks fine in Firefox but one div is not aligning correctly in IE - can anyone help me with what I need to do? I think the problem may be with #top_info rather than #datetime but I can't figure it out.

You can view the website here:

http://www pixelmunky

co uk / testing / group / index.html

css is:

Code:

/* default styles */
body {
	padding: 5px 0 0 0;
	margin: 0;
	font: 0.7em Tahoma, Arial, sans-serif;
	line-height: 1.7em;
	background: #fff url(../_images/bg.gif) repeat-x;
	color: #454545;
}
a {
	color: #4e4d64;
	background: inherit;
}
a:hover {
	color: #4e4d64;
	background: inherit;
}
p {
	margin: 0 0 5px 0;
}
h1 {
	font: bold 2.2em Arial, Sans-Serif;
	padding: 8px 0 0 0;
	margin: 0;
	letter-spacing: -1px;
}
h2 {
	margin: 0;
	padding: 0;
	font: bold 1.8em Arial, Sans-Serif;
	letter-spacing: -1px;
}
h1 a, h2 a {
	color: #000;
	background: inherit;
	text-decoration: none;
}
ul {
	margin: 0;
	padding : 0;
	list-style : none;
}
img {
	border: 0;
}
/* layout */
#content {
	margin: 15px auto;
	width: 960px;
}
#logo {
	margin: 5px 0 10px 0;
}
#top_info {
	float: right;
	color: #4e4d64;
	background: #fff;
	margin: 20px 5px 7px 0;
	text-align: right;
}

/* main horizontal menu */
#tablist {
	padding: 3px 0;
	margin: 0;
	float: left;
}
#tablist li {
	list-style: none;
	display: inline;
	margin: 0;
}
#tablist li a {
	text-decoration: none;
	padding: 4px 22px;
	margin-right: 2px;
	background: #4e4d64 url(../_images/corner.gif) no-repeat top right;
	font-weight: bold;
	color: #fff;
}
#tablist li a:hover {
	background: #6495AB url(../_images/corner.gif) no-repeat top right;
	color: #fff;
}
#tablist li a.current {
	background: #b5d9f9 url(../_images/corner.gif) no-repeat top right;
	color: #4e4d64;
	padding: 6px 22px;
}
/* main menu brands */
#brands {
	clear: left;
	float: left;
	width: 640px;
	background: #B0D0DC url(../_images/brandsbg.gif) repeat-x left bottom;
	padding: 8px 5px;
	margin: 0 0 5px 0;
	color: #fff;
	height: 59px;
}
#brands li a {
	background-image: url(../_images/bullet.gif);
	background-repeat: no-repeat;
	background-position: center left;
	padding: 0 0 0 10px;
	text-decoration: none;
}
#brands li a:hover {
	color: 4e4d64;
	text-decoration: underline;
}
/* datetime */
#datetime {
	float: right;
	text-align: right;
	background: #fff url(../_images/datetimebg.gif) no-repeat;
	padding: 32px 20px 12px 20px;
	min-height: 32px; /* FF height */
	height: 25px;	/* IE height */
	width: 270px;
}
.button {
	padding: 4px;
	font: bold 1em Arial, Sans-Serif;
}
/* left side */
#left {
	float: left;
	width: 635px;
	margin: 0 0 10px 0;
}
.shareprice {
	margin: 0 0 10px 0;
	padding: 8px;
	background: #f4f4f9 url(../_images/bgshade.gif) repeat-x;
	color: #4e4d64;
	border-bottom: 1px solid #ccc;
}
.shareprice a:hover{
	color: #ed1464;
	font-weight: normal;
}
.left_articles {
	margin: 0 0 10px 0;
	background: #fff url(../_images/bgshade.gif) repeat-x;
	color: #42423b;
	padding: 15px 15px 5px 10px;
}
.date {
	font-size: .9em;
	padding: 0 0 0 12px;
	background: #fff url(../_images/news.gif) no-repeat center left;
	color: #4e4d64;
}
.bigimage {
	float: left;
	clear: left;
	border: 1px solid #ccc;
	background: #ebebf3;
	color: #000;
	width: 200px;
	height: 150px;
	margin: 0 15px 5px 0;
}
.splitter {
	background: #fff url(../_images/bg2.gif) repeat-x;
	color: #4e4d64;
	padding: 5px;
	margin: 0;
}

.splitter a:hover{
	color: #ed1464;
	font-weight: normal;
}
.brandcol{
	float: left;
	width: 115px;
	padding: 0 10px 0 15px;
}
.linkscol{
	float: left;
	width: 186px;
	padding: 0 10px 0 15px;
}

.shareprice {
    background-color:#ffffff;
    border:1px solid #cccccc;
    color:#42423b;
    padding:5px 5px 5px 5px;
}

/* right side */
#right {
	float: right;
	width: 310px;
	margin: 0 0 10px 0;
}
.right_articles {
	border: 1px solid #ccc;
	padding: 8px;
	margin: 0 0 10px 0;
	background: #ebebf3;
	color: #454545;
}
.image {
	float: left;
	margin: 0 9px 3px 0;
}
.agatimes {
	border-top: 1px dotted #ccc;
	border-bottom: 1px dotted #ccc;
	padding: 5px 0 5px 0;
	margin: 25px 0 10px 0;
}
/* footer */
#footer {
	clear: both;
	color: #4e4d64;
	background: #FFF;
	padding: 10px 0 0 0;
	border-top: 1px solid #ccc;
}
#footer .right {
	float: right;
}

.search {
	padding: 25px 0 0 45px;
}

ul.borderedlist li {
	border-bottom: 1px dashed #dbdae7;
}
ul.borderedlist li a {
	display: block;
	color: #42423b;
	height: 26px;
	padding-top: 1px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 2px;
}

ul.alist li a {
	padding-left: 25px;
	background: url(../_images/footer_list.jpg) left bottom no-repeat;
	text-decoration:none;
}
ul.alist li a:hover {
	padding-left: 25px;
	background: url(../_images/footer_list.jpg) left bottom no-repeat;
	color: #ed1464;
	text-decoration:underline;
}

html is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>
<title>Group</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="_assets/_css/common.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content">

  <div id="top_info">
    <p>Welcome to xxxxxxxx xxxxxxxx <b>xxxxx xxxxxxxx</b><br/>
    xxxxx xx xxxx xxxxxx xxx xxxxxxxx xxx xxxxxx xxxx xxx</p>
  </div>
  <div id="logo"><p><img src="_assets/_images/logo.gif" name="Logo" width="430" height="65" alt="LOGO" /></p></div>  
  <ul id="tablist">
    <li><a class="current" href="#">Group</a></li>
    <li><a href="#">Other</a></li>
    <!--<li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li> 
    <li><a href="#">Link4</a></li>
    <li><a href="#">Link5</a></li>-->
  </ul>
  <div id="brands">
    <div class="brandcol">
      <ul>
        <li><a href="#">LINK1</a></li>
        <li><a href="#">LINK2</a></li>
        <li><a href="#">LINK3</a></li>
      </ul>
    </div>
    <div class="brandcol">
      <ul>
        <li><a href="#">LINK4</a></li>
        <li><a href="#">LINK5</a></li>
        <li><a href="#">LINK6</a></li>
      </ul>
    </div>
    <div class="brandcol">
      <ul>
        <li><a href="#">LINK7</a></li>
        <li><a href="#">LINK8</a></li>
        <li><a href="#">LINK9</a></li>
      </ul>
    </div>
    <div class="brandcol">
      <ul>
        <li><a href="#">LINK10</a></li>
        <li><a href="#">LINK11</a></li>
        <li><a href="#">LINK12</a></li>
      </ul>
    </div>
  </div>
  <div id="datetime">
    <p>
      <script type="text/javascript"><!--

// Get today's current date.
var now = new Date();

// Array list of days.
var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');

// Array list of months.
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');

// Calculate the number of the current day in the week.
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();

// Calculate four digit year.
function fourdigits(number)	{
	return (number < 1000) ? number + 1900 : number;
								}

// Join it all together
today =  days[now.getDay()] + ", " +
              months[now.getMonth()] + " " +
               date + ", " +
                (fourdigits(now.getYear())) ;

// Print out the data.
document.write(today);
  
//--></script>
    </p>
  </div>
  <div id="left">
    <div class="shareprice">
      <p>
      </p>
    </div>
    <div class="left_articles">
      <h2>News Item 1</h2>
      <p class="date">Posted on 28th April</p>
      <img class="bigimage" name="newsimage" src="" width="200" height="150" alt="News Image 1" />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Aliquam a nibh. Nullam faucibus luctus velit. Aenean quis eros ac lacus scelerisque tempor. Pellentesque eget eros. Maecenas laoreet. Pellentesque blandit tellus non felis laoreet porta. Mauris in leo.</p>
      <p>Nullam gravida ante eget dolor eleifend dictum. Vestibulum placerat. Mauris justo ipsum, gravida eu, vulputate non, molestie sit amet, enim. Ut quis purus eu risus scelerisque sagittis.</p>
      <p>&nbsp;</p>
    </div>
    <div class="left_articles">
      <h2>News Item 2</h2>
      <p class="date">Posted on 22nd April</p>
      <img class="bigimage" name="newsimage" src="" width="200" height="150" alt="News Image 2" />
      <p>Integer porta tincidunt mauris. Phasellus ante. Praesent nibh leo, feugiat ut, iaculis ac, pretium ac, dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
      <p>Vivamus justo nunc, bibendum et, suscipit eu, congue sed, augue. Suspendisse potenti. Vestibulum luctus congue ligula. Sed lectus mi, vulputate sit amet, imperdiet non, commodo sed, ligula. Aliquam mattis purus et sem. Curabitur eget elit quis libero porttitor euismod. Phasellus non nunc vel neque ornare ullamcorper.</p>
      <p>&nbsp;</p>
    </div>
    <div class="splitter"></div>
    <div class="linkscol">
      <p><b>Policies</b><br />
      </p>
      <ul class="borderedlist alist">
        <li><a href="#" title="">Policy 1</a></li>
        <li><a href="#" title="">Policy 2</a></li>
        <li><a href="#" title="">Policy 3</a></li>
        <li><a href="#" title="">Policy 4</a></li>
        <li><a href="#" title="">Policy 5</a></li>
      </ul>
      </p>
    </div>
    <div class="linkscol">
      <p><b>Microsites</b><br />
      </p>
      <ul class="borderedlist alist">
        <li><a href="#" title="">microsite.co.uk</a></li>
        <li><a href="#" title="">microsite.co.uk</a></li>
        <li><a href="#" title="">microsite.co.uk</a></li>
        <li><a href="#" title="">microsite.co.uk</a></li>
        <li><a href="#" title="">microsite.co.uk</a></li>
      </ul>
      </p>
    </div>
    <div class="linkscol">
      <p><b>Downloads</b><br />
      </p>
      <ul class="borderedlist alist">
        <li><a href="#" title="Appraisals">Download 1</a></li>
        <li><a href="#" title="Completed Appraisal">Download 2</a></li>
      </ul>
      </p>
    </div>
  </div>
  <div id="right">
    <div class="right_articles">
      <p><img src="" names="Articleimg" width="60" height="60" alt="Article" class="image"/><b>Article 1</b><br />
      Nam aliquam augue et ligula. Morbi consectetur pulvinar massa. Sed sagittis. Quisque eget ante. Duis mattis sodales metus. Donec nec nibh. Morbi ullamcorper rutrum diam. Etiam aliquam magna non nulla. Fusce rutrum blandit mi. Nullam interdum. Donec libero.</p>
    </div>
    <div class="right_articles"><img src="" name="DISCOUNTS" width="292" height="146" alt="Discounts" /></div>
    <div class="right_articles"><img src="" name="TIMES" width="292" height="75" alt="Times" /></div>
    <div class="right_articles">
      <p><img src="" names="Articleimg" width="60" height="60" alt="Article" class="image"/><b>Article 2</b><br />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nibh mi, sodales vel, mattis vitae, scelerisque at, sem. Phasellus vel augue sit amet purus aliquam pretium. Nullam accumsan. Morbi suscipit. Sed nec lorem vel sem luctus scelerisque.</p>
    </div>
    <div class="search"> <a href="[URL unfurl="true"]http://www.google.co.uk"><img[/URL] src="_assets/_images/google.jpg" width="110" height="40" alt="Google" /></a><a href="[URL unfurl="true"]http://www.yahoo.co.uk"><img[/URL] src="_assets/_images/yahoo..jpg" width="110" height="40" alt="Yahoo" /></a></div>
  </div>
  <div id="footer">
    <p class="right">Design/ technical: <a href="#">Online Development</a></p>
    <p>&copy; 2009 Group plc. <br />
    </p>
  </div>
</div>
</body>
</html>

Thanks.

Vragabond · Apr 30, 2009

IE seems to ignore the clear on your #brands and simply float the #datetime next to #tablist. However, since there is nothing floated next to #tablist, you can simply unfloat #tablist and that will fix all your problems.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

rachelskuse · Apr 30, 2009

Ah, thank you SO much! It's been driving me crazy and works perfectly now

feherke · Apr 30, 2009

Hi

Here on Tek-Tips we used to thank for the received help by giving stars. Please click the

* [navy]Thank Vragabond
for this valuable post![/navy]

at the bottom of Vragabond's post. That way you both show your gratitude and indicate this thread as helpful.

Feherke.

http://rootshell.be/~feherke/

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Div not aligning correctly in IE 1

rachelskuse

Programmer

Vragabond

Programmer

rachelskuse

Programmer

feherke

Programmer

Similar threads

Part and Inventory Search

Sponsor