Support » Themes and Templates » CSS different in Firefox and IE… please help!

Viewing 10 replies - 1 through 10 (of 10 total)
  • Try changing your content from 425px to 420 or even smaller.

    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.

    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.

    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?

    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.

    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 🙂

    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?

    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.

    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.

    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/

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘CSS different in Firefox and IE… please help!’ is closed to new replies.