PDA

View Full Version : Difference in IE and other Browsers



cmhinfo
May 31st, 2010, 11:04 PM
Hello,

We are currently creating a "updating news box" on our site. The box is lines up perfectly and looks great in IE but in Firefox, and other browsers, the text is moved down and doesn't align with the backround. We don't know if it is our HTML code or CSS that is causing the problem. It is only occuring in these two boxes and now where else on the page.

The page link is here (http://cmhinfo.org/javascript/javascriptest.html). The two boxes are on the right and noth have white image backrounds. One says News and the other says connect.

Here is the link to our CSS: click here (http://cmhinfo.org/css/css.css)

Thank You for your help!

optimus203
Jun 1st, 2010, 01:28 AM
There are many errors on this page. Try fixing the issues and see if this resolves problems: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcmhinfo.org%2Fjavascript%2Fjavascriptest.html

cmhinfo
Jun 1st, 2010, 01:38 AM
I have already did the validator and the issues that it brings up do not have anything to do with the problems that I am having.

optimus203
Jun 1st, 2010, 01:46 AM
You should still fix the errors.

Anyways, there is a duplicate instance of .toolbox-connect on line 313 you might want to remove. There is an expanded instance of this on line 457.

Have you tried changing height to auto instead of having fixed height?

There is also a duplicate instance of .toolbox-news on line 283 (updated version appears to be on line 402).

Hope this helps.

Code1
Jun 1st, 2010, 04:58 AM
Try running the validation on big sites and see how many errors you come up with. :eek:
Try it on Yahoo, Ebay, Facebook, etc. Do you really think it is valid for a successful website.......:confused:

optimus203
Jun 1st, 2010, 05:24 AM
There is no need to get so defensive about the issue. No, it is not necessary, but its still good practice and form.

cmhinfo
Jun 1st, 2010, 09:25 PM
Current Status: I have fixed the duplicates in the CSS and am working on the errors in HTML. Still no luck getting them to match up. For some reason the items are showing up lower in Firefox and other browsers then in IE. The way that it is in IE is perfect.

optimus203
Jun 1st, 2010, 11:06 PM
As a general rule of thumb, I design for all browsers EXCEPT IE, then go back and fix IE issues.

I changed this code for the "Connect" part and it seems to help the spacing issue (i just removed top padding)



.toolbox-connect{
width:250px;
height:125px;
float:left;
background:url('http://cmhinfo.org/images/post_bg.gif') top left no-repeat;
padding:0 28px 0 25px;
margin:0 15px 11px 0;
line-height:1em;
}

cmhinfo
Jun 1st, 2010, 11:34 PM
As a general rule of thumb, I design for all browsers EXCEPT IE, then go back and fix IE issues.

I changed this code for the "Connect" part and it seems to help the spacing issue (i just removed top padding)



.toolbox-connect{
width:250px;
height:125px;
float:left;
background:url('http://cmhinfo.org/images/post_bg.gif') top left no-repeat;
padding:0 28px 0 25px;
margin:0 15px 11px 0;
line-height:1em;
}


Ok, we changed the top padding to 0 and added the line-height and it didn't do anything. It even brought the heading up more in IE (not wanted). We then tryed it without the line height and it still stayed the same in FF. Thanks for the try though.:)

optimus203
Jun 1st, 2010, 11:47 PM
Removing the top-padding shifted everything up for me, and made it centered in Div. If you want to do an IE only designation for this element (to keep what you have before), you could do something like this:

padding:0 28px 0 25px;
_padding: 15px 28px 0 25px; /* this will render the top padding in IE6 and below, but will be ignored by other browsers */

cmhinfo
Jun 1st, 2010, 11:55 PM
Can you take screenshots of how it looks on your version in IE and FF?
Thanks

optimus203
Jun 2nd, 2010, 02:44 AM
Here they are, with _padding revisions. The one on right is IE6 clone on mac.

abduraooft
Jun 2nd, 2010, 09:52 AM
I have already did the validator and the issues that it brings up do not have anything to do with the problems that I am having.
Might be, though I'd like to point out the reason for why we don't help you (http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you)!

optimus203
Jun 2nd, 2010, 06:01 PM
Nice one abdura. That should be in your signature.