UI compeltely off in firefox... tool/plugin recommendations

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
matt1019
Forum Contributor
Posts: 172
Joined: Thu Jul 06, 2006 6:41 pm

UI compeltely off in firefox... tool/plugin recommendations

Post by matt1019 »

Hi guys,

My project, when viewed under IE 5.5 on win xp pro sp2 looks exactly like how I intend for it to look.

But when the same project is viewed in Mozilla Firefox v1.0, the whole UI/or the layout rather is off.

Could this be caused by using multiple CSS's?

OR, is there a plugin for "webmasters" for firefox that can help detect what the cause of the problem is?

I checked out plugindoc (from mozilla) but couldnt' find anything useful.

Do you have any plugins in mind that can help detect problems such as mine...

Also, I did use the Javascript Console... found couple minor bugs and fixed em.

OH and do you guys think that trying to validate my project could yeild results ? (i mean, can it point out and say that: "this class is conflicting with this" or something similar?)

never used validation before.... as this is my first and only project so far

Thanks Guys,

-Matt
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

What the cause is for your problems we cannot see without looking at the code.

What do you mean by multiple css's?

An essential plugin for FF is the webdeveloper toolbar.

Yes, validation is important. Always go for 100%. That's the first thing you should do. It will not point out why your layout is messed up, but by validating the chances of that happening due to an error in your code are less.

Last, always start developing in a modern browser like FF. And only after everything works take a look in IE. IE5.5 is a very buggy browser, not used a lot anymore. So if you develop for IE5 first you're certain that in a lot of other browsers things are messed up.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Code for FF and Opera, hack for IE when done. Validate often. The CSS validator will tell you about conflicts in the CSS code, but won't tell you what will or won't work in certain browsers. But the best thing to do is code for compliance in compliant browsers. Then hack the code for noncompliant browsers (Like the family of IE browsers).
matt1019
Forum Contributor
Posts: 172
Joined: Thu Jul 06, 2006 6:41 pm

Post by matt1019 »

thanks guys,

I got it!! took couple of days, used webmaster plugin....and got it ;)

the pesky little problem was in here in css code--- which worked fine for IE but not for FIRE FOX v1.0:

Code: Select all

h2.section {
	margin-top: 10px;
	font-size: 12px;
}

.leftsideheader {
  background-image:url(images/pp.gif) ;
  background-repeat: repeat-x;
  color: #FFFFFF;
  font-size: 12px;
  padding-top: 10px;
  padding-bottom: 0px;

}
 .includeeditlink { 
	text-align: right;
}
and I was calling it like so:

Code: Select all

if ($data['user_id'] == $userdata['user_id']){
echo "<div class='leftsideheader includeeditlink'><h2 class='section'>&nbsp;&nbsp;<img src='images/spacer.gif' class='sqr' style='vertical-align:middle;' alt='' width='7' height='7' />&nbsp;&nbsp;Bio</h2><div><a href='edit.php#bio'><img src='images/profile/edit2.gif'></a>&nbsp;&nbsp;</div></div>";
}else{
echo "<div class='leftsideheader includeeditlink'><h2 class='section'>&nbsp;&nbsp;<img src='images/spacer.gif' class='sqr' style='vertical-align:middle;' alt='' width='7' height='7' />&nbsp;&nbsp;Bio</h2><div><img src='images/profile/edit3.gif'></div></div>";
}
To resolve the problem, I simply changed the whole darn thing to this:

Code: Select all

echo "<div class='leftsideheader'>&nbsp;&nbsp;<img src='images/spacer.gif' class='sqr' style='vertical-align:middle;' alt='' width='7' height='7' />&nbsp;&nbsp;Bio</div>";
(notice the removal of h2 tag and second div tag)

Problem resolved...

thanks once again for your help guys!!

-Matt
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Way to go bro. Glad you got it.
matt1019
Forum Contributor
Posts: 172
Joined: Thu Jul 06, 2006 6:41 pm

Post by matt1019 »

Thanks Everah. You will not believe how much pain in the arse this bug was :?

-Matt
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

So what was the problem then? You removed the h2. Let me guess: the (default) styles of the h2 were pushing things around in the box? Just curious.

One trick in css is to start with a clean set:

Code: Select all

* {margin:0;padding:0;}
Removes all default margin and padding of all elements. That way you're sure that it's not the browser's default value which is pushing thing around. There are some drawbacks to this method so you could also specify the defaults a bit:

Code: Select all

h1,h2,h3,h4,h5, ul,li,p {
margin:0;padding:0;
}
ul li {
margin-left:1em;
}
p {
margin:1em 0 0;
}
matt1019
Forum Contributor
Posts: 172
Joined: Thu Jul 06, 2006 6:41 pm

Post by matt1019 »

matthijs wrote:So what was the problem then? You removed the h2. Let me guess: the (default) styles of the h2 were pushing things around in the box? Just curious.

One trick in css is to start with a clean set:

Code: Select all

* {margin:0;padding:0;}
Removes all default margin and padding of all elements. That way you're sure that it's not the browser's default value which is pushing thing around. There are some drawbacks to this method so you could also specify the defaults a bit:

Code: Select all

h1,h2,h3,h4,h5, ul,li,p {
margin:0;padding:0;
}
ul li {
margin-left:1em;
}
p {
margin:1em 0 0;
}

Ahhh... i see. I will give this a go.

Thanks matthijs! :)

-Matt
Post Reply