Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Difference in IE and other Browsers

    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. 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

    Thank You for your help!

  • #2
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    There are many errors on this page. Try fixing the issues and see if this resolves problems: http://validator.w3.org/check?verbos...scriptest.html
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    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.
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #5
    New to the CF scene
    Join Date
    May 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    validator?

    Try running the validation on big sites and see how many errors you come up with.
    Try it on Yahoo, Ebay, Facebook, etc. Do you really think it is valid for a successful website.......

  • #6
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    There is no need to get so defensive about the issue. No, it is not necessary, but its still good practice and form.
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #7
    New to the CF scene
    Join Date
    May 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    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)

    Code:
    .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;
    }
    Last edited by optimus203; 06-01-2010 at 10:10 PM.
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #9
    New to the CF scene
    Join Date
    May 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by optimus203 View Post
    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)

    Code:
    .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.

  • #10
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    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 */
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #11
    New to the CF scene
    Join Date
    May 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can you take screenshots of how it looks on your version in IE and FF?
    Thanks

  • #12
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Here they are, with _padding revisions. The one on right is IE6 clone on mac.
    Attached Thumbnails Attached Thumbnails Difference in IE and other Browsers-ff.png   Difference in IE and other Browsers-ie6-mac.png  
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #13
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Quote Originally Posted by cmhinfo View Post
    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!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #14
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Nice one abdura. That should be in your signature.
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •