Position of div correct in FF, wrong in IE7

Repoman013

02-13-2009, 09:50 AM

Hi all,

I made a rss feed block for my portal page and when it comes to position the feed is nicely centered in Firefox but in IE7 it is way off.
I've searched the interweb and also these forums but could not find a solution to my problem.
Below are some pics to clarify my problem along with the code I used.

Firefox - Correct position
http://img7.imageshack.us/img7/889/77444449me6.gif

IE7 - Wrong position
http://img132.imageshack.us/img132/9527/18846265hg9.gif

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rss-feed</title>
<script type="text/javascript" src="javascript/rsspausescroller.js"></script>
<style type="text/css">
.container {
margin: 0;
padding: 0;
background: url(images/hdr_mid2.gif) top left repeat-x;
white-space: nowrap;
height: 27px;
width: 100%;
text-align: center;
}
.left {
background: url(images/hdr_left2.gif) top left no-repeat;
}
.right {
background: url(images/hdr_right2.gif) top right no-repeat;
padding-top: 8px;
height: 19px;
}
#pscroller1 {
width: 640px;
height: 18px;
border: none;
padding: 0px;
background-color: transparent;
text-align: center;
}
.rssclass .rsstitle {
font-weight: bold;
}
.rssclass .rssdate {
color: gray;
font-size: 85%;
}
.rssclass a {
text-decoration: none;
}
.rssfeed {
margin: 0;
padding: 0;
float: right;
white-space: nowrap;
}
</style>
</head>
<body>

<div class="container">
<div class="left">
<div class="right"><script type="text/javascript">new rsspausescroller("wor", "pscroller1", "rssclass", 3500, "_new")</script></div>
</div>
</div>

</body>
</html>

abduraooft

02-13-2009, 09:52 AM

Fix Your Site With the Right DOCTYPE! (http://www.alistapart.com/articles/doctype)
Validate your markup (http://validator.w3.org/#validate_by_input) and fix the errors, if any

Repoman013

02-13-2009, 10:05 AM

Thanks for the quick reply.
I fixed the errors by validating the code but the problem remains.
Below is the updated code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rss-feed</title>
<script type="text/javascript" src="javascript/rsspausescroller.js"></script>
<style type="text/css">
.container {
margin: 0;
padding: 0;
background: url(images/hdr_mid2.gif) top left repeat-x;
white-space: nowrap;
height: 27px;
width: 100%;
text-align: center;
}
.left {
background: url(images/hdr_left2.gif) top left no-repeat;
}
.right {
background: url(images/hdr_right2.gif) top right no-repeat;
padding-top: 8px;
height: 19px;
}
#pscroller1 {
width: 640px;
height: 18px;
border: none;
padding: 0px;
background-color: transparent;
text-align: center;
}
.rssclass .rsstitle {
font-weight: bold;
}
.rssclass .rssdate {
color: gray;
font-size: 85%;
}
.rssclass a {
text-decoration: none;
}
.rssfeed {
margin: 0;
padding: 0;
float: right;
white-space: nowrap;
}
</style>
</head>
<body>

<div class="container">
<div class="left">
<div class="right"><script type="text/javascript">new rsspausescroller("wor", "pscroller1", "rssclass", 3500, "_new")</script></div>
</div>
</div>

</body>
</html>

abduraooft

02-13-2009, 10:29 AM

Alright! could you post a link to your page? All that I could see is a blank page, as I don't have those background images.

Repoman013

02-13-2009, 10:32 AM

Sure i can :)

http://www.prophecyofhellscream.com/test/portal.php

jerry62704

02-13-2009, 06:48 PM

Have you already fixed the problem? I don't see much difference between IE6 and FF3.

Repoman013

02-13-2009, 07:14 PM

It's IE7 that is messing around.

No fix yet, problem remains. :(

chasyaj

02-13-2009, 11:45 PM

I'm viewing in IE 6 and it does not show up correctly. Weird. Not sure what Jerry saw, but there is definately text going where I can't see it.

Have you tried ?

.rssfeed {
margin-left: auto;
margin-right: auto;
padding: 0;
float: right;
white-space: nowrap;

Repoman013

02-13-2009, 11:53 PM

Thanks for the reply chasyaj but it didn't fix the problem :(
Could it be a javascript problem or?