WordPress.org

Ready to get started?Download WordPress

Forums

CSS different in Firefox and IE... please help! (11 posts)

  1. bgswm1
    Member
    Posted 8 years ago #

    Hi all, I'm trying to figure out why my site is screwed up when viewed in IE and looks great in Firefox.

    I feel as though I have to keep fixing this every once in a while. The site is http://www.gadgetell.com.

    I would appreciate it if someone would take a look at my stylesheet and let me know what changes to make. Here is the link to the stylesheet... http://www.gadgetell.com/wp-content/themes/connections/style.css

    Any help would be greatly appreciated. Thank you.

  2. bmg1227
    Member
    Posted 8 years ago #

    Try changing your content from 425px to 420 or even smaller.

  3. bmg1227
    Member
    Posted 8 years ago #

    If that doesn't work, reduce your images in the content to 420px as well. My guess is that the sidebars get squeezed down since there isn't "enough room" which I've had problems with as well. IE shoves them down, Firefox moves it over.

  4. bndooley
    Member
    Posted 8 years ago #

    Try adding

    overflow:hidden;

    to your sidebar.

    Sometimes, IE treats urls as normal text and expands your sidebar too much. This should solve that problem. If it doesn't, let me know.

  5. bgswm1
    Member
    Posted 8 years ago #

    Thanks for your responses... unfortunately reducing my images is not a good option for me since i've had 425 set for a while now.

    bndooley... i added "overflow:hidden;" to the sidebar section of the stylesheet and it's still pushing it down. Have any other suggestions?

  6. chuck232
    Member
    Posted 8 years ago #

    Chances are, your main content is too wide and is displacing the sidebar. I've found that the margin property isn't rendered the same in FF and IE (or something like that). So, there's really no solution other than to shrink the main content or the sidebar width.

  7. Doodlebee
    Member
    Posted 8 years ago #

    Use a conditional comment to serve up different margins, etc for IE. This is very common - IE renders margins, padding and widths differently than Firefox does. You should always design for Firefox first, and use conditional comments to fix IE issues after - so you're almost there :)

  8. bgswm1
    Member
    Posted 8 years ago #

    do you have an example of a conditional comment to put there? No matter what I put in the stylesheet, it doesn't fix the problem in IE... any more suggestions?

  9. bmg1227
    Member
    Posted 8 years ago #

    You need top reduce the size of the images as I have stated before - just reducing the width of the content isn't good enough. I know it's a pain, but trust me, it's the only way to go.

  10. bgswm1
    Member
    Posted 8 years ago #

    Just wanted to give anybody that has this problem in the future a heads up... Here's the solution that I used so I didn't have to reduce the width of my images...

    I used conditional formatting so it only changed the output in IE (since firefox looked good already). put this code in the <head> part of each page. Also, I made a new stylesheet for IE that will overwrite the original stylesheet when IE is used. Enjoy!

    <style type="text/css" media="screen">
    @import url( <?php bloginfo('stylesheet_url'); ?> );
    </style>
    <!--[if IE]>
    <style type="text/css">
    @import "http://www.gadgetell.com/wp-content/themes/connections/styleIE.css";
    </style>
    <![endif]-->

    Within the styleIE.css file, I put the code overflow:hidden; where appropriate. Thanks for all your your help.

  11. usa
    Member
    Posted 8 years ago #

    This is only for the connections theme right?

    I've the Wuhan theme and since the WP update i have this problem...

    http://www.verenigdestaten.info/usablogs/hilde/

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags