Page 1 of 1
UI compeltely off in firefox... tool/plugin recommendations
Posted: Thu Aug 17, 2006 9:25 pm
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
Posted: Fri Aug 18, 2006 12:54 am
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.
Posted: Fri Aug 18, 2006 12:59 am
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).
Posted: Mon Aug 21, 2006 3:53 pm
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'> <img src='images/spacer.gif' class='sqr' style='vertical-align:middle;' alt='' width='7' height='7' /> Bio</h2><div><a href='edit.php#bio'><img src='images/profile/edit2.gif'></a> </div></div>";
}else{
echo "<div class='leftsideheader includeeditlink'><h2 class='section'> <img src='images/spacer.gif' class='sqr' style='vertical-align:middle;' alt='' width='7' height='7' /> 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'> <img src='images/spacer.gif' class='sqr' style='vertical-align:middle;' alt='' width='7' height='7' /> Bio</div>";
(notice the removal of h2 tag and second div tag)
Problem resolved...
thanks once again for your help guys!!
-Matt
Posted: Tue Aug 22, 2006 12:11 am
by RobertGonzalez
Way to go bro. Glad you got it.
Posted: Wed Aug 23, 2006 7:30 pm
by matt1019
Thanks Everah. You will not believe how much pain in the arse this bug was
-Matt
Posted: Thu Aug 24, 2006 12:35 am
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:
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;
}
Posted: Thu Aug 24, 2006 10:46 am
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:
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