...

View Full Version : Difference in IE and other Browsers



cmhinfo
05-31-2010, 10: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
06-01-2010, 12: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
06-01-2010, 12: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
06-01-2010, 12: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
06-01-2010, 03: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
06-01-2010, 04: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
06-01-2010, 08: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
06-01-2010, 10: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
06-01-2010, 10: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
06-01-2010, 10: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
06-01-2010, 10:55 PM
Can you take screenshots of how it looks on your version in IE and FF?
Thanks

optimus203
06-02-2010, 01:44 AM
Here they are, with _padding revisions. The one on right is IE6 clone on mac.

abduraooft
06-02-2010, 08: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
06-02-2010, 05:01 PM
Nice one abdura. That should be in your signature.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum