9 replies [Last post]
shindasingh
Offline
Regular
Last seen: 16 years 42 weeks ago
Joined: 2006-04-22
Posts: 11
Points: 0

Hi guys,

This is my first time posting so I hope I'm not breaking any rules.

Basically I'm running into a problem where Firefox is showing me the site the way I want it, while Internet Explorer is rendering things a little differently.

The page is http://www.shindasingh.com/playground/yudh/.

The main problem I'm facing is the Nav Bar the grey border is a little thicker in IE then in Firefox, but more importantly in IE the marquee holder is showing as a big block rather then the single line that it should be (as is working in Firefox).

Below is the CSS I'm using. Any help would be appreciated.

Thanks in advance to anyone who can help.

/* CSS Document */

body{
	background-image:url(images/background.gif);
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	text-align:center
}

#wrapper{
	width:775px;
	height:600px;
	vertical-align:top;
	background-color:#FFFFFF;
	border: 2 #333333 thick;
	margin: 0px auto;
}

#header{
	width:740px;
	background-color:#669999;
	height:200px;
	margin:0 auto;
	background-image:url('images/header.jpg');
}

#navBar{
	width: 760px;
	margin:0 auto;	
	background-color:#555555;
	height:30px;
	/*margin-top:10px;*/
	font-size:12px;
}

#navBar ul
{
	text-align: center;
	padding:0;
	margin:0;
	color:white;
	height:38px;
	font-family:Arial,Helvetica,sans-serif;
	font-weight:bolder;

}

#navBar ul li
{
	float:left;
	padding:0;
	width: 20%;
	list-style-type:none;
/*	background-color: #036;  */
		background-image:url(images/navbar.gif);
}

#navBar ul li a
{
	float:left;
	padding:5px 0 5px 0;

	color:white;
	text-decoration:none;
	width:100%;
}

#navBar ul li a:hover
{
	background-color:#369;
	color:white;
	width:100%;
}

#body{
	width:760px;
	height: 350px; 
	background-color:#FF0000;
	margin: 0 auto;
	margin-top:5px;
	text-align:left;

}

.imgBox{
	width:475px;
	background-color:#CCCCCC;
	height:235px;
	margin-left: 10px;

}

.tickerBarDate{
	background-color:#8C8A8C;
	width:120px;;	
	background-color:#242424;
	color:#FFFFFF;
	height:20px;
	text-align:left;
	background-image:url(images/datespcer.gif);
	background-position:right;
	background-repeat:no-repeat;
	float:left;
	padding-left:20px;
}

.tickerBarMarquee{
	background-color:#8C8A8C;
/*	width:600px; /* Firefox  */ 
	width:620px; /* Firefox  */
	float:right;
}

.tickerBarMarquee ul li{
	float:left;
	list-style-type:none; 
	margin-right:20px;
	display:inline;

}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 17 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Re: Firefox Vs IE Rendering Problems..

shindasingh wrote:
This is my first time posting so I hope I'm not breaking any rules.

Unfortunately you are and this one is quite relevant to the problem you're experiencing with IE:

Quote:
Ensure that you have a valid, full DTD and that you are rendering in 'Standards' mode.

You don't have a doctype.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

shindasingh
Offline
Regular
Last seen: 16 years 42 weeks ago
Joined: 2006-04-22
Posts: 11
Points: 0

[SOLVED] Firefox Vs IE Rendering Problems..

Thanks for the reply.

Sorry for the mistake, but again thanks for helping me solve the problem.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 41 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

[SOLVED] Firefox Vs IE Rendering Problems..

Did that fix it?

Verschwindende wrote:
  • CSS doesn't make pies

shindasingh
Offline
Regular
Last seen: 16 years 42 weeks ago
Joined: 2006-04-22
Posts: 11
Points: 0

[SOLVED] Firefox Vs IE Rendering Problems..

It helped me solve the big block problem that was plaguing the ticker banner earlier.

The only real problem I'm having now is figuring out the discrepancies in the way FireFox and Internet Explorer render sizes.

For example in IE the ticker banner is set at about 21 px to fully take up the space where as in FireFox this appears to be to much. I've found spacing in other places to also be acting a little weird, leading me to wonder if 10 px in FireFox really equals 10px in IE?

I've found some posts about removing white space from between the tags, but after trying that, it didn't seem to help too much. If you have any advice on this regard, it would be apreciated.

*Note CSS Code thats changed since the above is:

.tickerBarMarquee ul li{

	float:left;
	list-style-type:none; 
	margin-right:10px;
	display:inline;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	height:16px;
	padding-top:5px;
}

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 39 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

[SOLVED] Firefox Vs IE Rendering Problems..

The problem seems to come from the div wrapping your javascript marquee.
marquee cannot wrap a list and is not approved by the W3C!
You have a css error in #wrapper :
border: 2 #333333 thick;

A quick fix seems to be having

<div style="font-size:5px;">
<div class="tickerBarDate">

drhowarddrfine
Offline
Leader
Last seen: 13 years 10 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

[SOLVED] Firefox Vs IE Rendering Problems..

Yes. There is no <marquee> tag in html4 strict. Validate your html and CSS for all your errors.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

shindasingh
Offline
Regular
Last seen: 16 years 42 weeks ago
Joined: 2006-04-22
Posts: 11
Points: 0

[SOLVED] Firefox Vs IE Rendering Problems..

Thanks for all the replies, you guys have been a great help.

So I've validated everything, and it all appears to be ok. I'm still a little confused though as to how to fix the way that IE renders, since it seems to have problems with the spaces.

Primarily in the nav bar. The amount of grey underneath the buttons should be minimal, and Firefox seems to understand that just fine, while Internet Explorer still seems to be mucking things up. Any ideas or tips?

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 39 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

[SOLVED] Firefox Vs IE Rendering Problems..

You can try to replace height:38px; in #navBar ul by height:1%; (or height:30px;)

shindasingh
Offline
Regular
Last seen: 16 years 42 weeks ago
Joined: 2006-04-22
Posts: 11
Points: 0

[SOLVED] Firefox Vs IE Rendering Problems..

Worked like a charm.

Thanks Laughing out loud