• Hi!
    I have done a website and now it looks good on my Mac in both Safari and Firefox. Then I looked at it in Internet Explorer, AND IT LOOKS AWFUL!

    The left sidebar (built with a background-image in the UL) has white spaces everywhere, and the page posts have moved down under the left sidebar.

    Here is my URL: https://bastardforlag.se/wordpress

    Anyone how knows whats wrong and how I can correct it for IE (without ruining the site in Safari and Firefox)?

Viewing 15 replies - 1 through 15 (of 20 total)
  • Hi!

    I took a quick look at your site and I think that this would help a bit for the menu:

    Add height:31px; and get rid of padding-bottom:19px; for #meny ul ul li. Different browsers will render the text a little bit different and the total height can probably differ a bit (and create white spaces in your case). The white spaces are visible in Firefox (Mac) too right now.

    I can’t tell right now why the layout is messed up. Debugging IE-related errors is kind of a pain in the butt ??

    /A swede to another ??

    IE 6 & 7 bugs are a nightmare for all and unfortunately it’s not an easy fix that can be explained here on the forum. It’s best you research as there are tonnes of resources on the net regarding this already.

    A common method of incorporating the solutions is to create separate style sheet to address the bugs for different version of IE and link them using conditional comments.

    Thread Starter Odenberg

    (@murmelin)

    Anemo:

    Tack s? mycket! Adding 31 px and removing the padding seems to work perfect!

    Now its “only” the weird placement of the page posts that needs to be fixed.

    Joseph: Thanks for your answer. Do you have any suggestions what I should look for when I try to find a solution?

    I’m not very good at debuggin IE issues myself and haven’t looked at your source codes in detail so I don’t have any specific suggestions.

    You’ll just have to look for whatever CSS rules that aren’t working as they’re supposed to and google a few keywords.

    Inga problem! ??

    I wonder if it has something to do with #header. How about adding display: none; to #header just to rule this out?

    Thread Starter Odenberg

    (@murmelin)

    Thanks a lot!
    Unfortunately, making the header display: none, does not help.

    Its really, really frustrating when it look okey in Firefox and Safari (Mac) and then looks like shit in Explorer. This is my first attempt to build a site in WP so there are so many things I dont get, even if I have solved most of my earlier issus by googleing.

    I often add a border around my divs when debugging to check their width and placement (Observe that a 1px border will ADD 2px to the divs width so subtract 2 pixels to get proper widths). Then I try to disable (display: none;) different objects just to see how it affects the layout.

    It’s too bad that the Firebug plugin (for Firefox) isn’t available for IE ??

    Hmmmm….

    #pagecontainer seems to have the same width (960px) as the wrapper. This seems odd since it’s supposed to float left of sidebar which is another 230px (including left margin). It’s like trying to fit an elephant inside a phone booth ??

    Try to limit the total width (including margin and padding) of #pagecontainer to 730px or less and see what happens. Maybe it’s a better idea to place #sidebar inside the #pagecontainer div too?

    Thread Starter Odenberg

    (@murmelin)

    Hej igen och stort tack f?r ditt engagemang!

    The thing is, when I set the #pagecontainer width to 730 px; it looks fine in IE but then it looks like crap in Firefox and Safari (for Mac), since the bakgrundimage is pushed to the left and the post is placed below the sidebar.

    Is kind of Moment 22…

    What about moving #sidebar inside the #pagecontainer DIV and setting the latters width to 960px again?

    You can add special css for only IE by adding this code in your header:

    <!--[if lte IE 7]>
    <link type="text/css" href="<?php bloginfo( 'template_url' ) ?>/styles/ie.css">
    <![endif]-->

    This will only apply the css from your-template-directory/styles/ie.css for IE 7 or lower.

    Read more about it here.

    Hope this helps! I also dislike (understatement) IE ??

    Thread Starter Odenberg

    (@murmelin)

    Tried to put the sidebar in the #pageconatiner. Unfortunately, it does not fix the problem in IE, and it messes up the blogg-section in Firefox and sends the right sidebar down under the left sidebar.

    So now I will try the solution with an extra css for IE. Hold your tumbs!

    Thread Starter Odenberg

    (@murmelin)

    Hi again!

    I have now made two css-files; one for IE and one for all the others. In the IE-css I set the #pageconatiner width to 730px. I then put the code:
    <!–[if lte IE 7]>
    <link type=”text/css” href=”<?php bloginfo( ‘template_url’ ) ?>/styles/ie.css”>
    <![endif]–>

    in the head section, but it still wont work.
    HATE Explorer.

    Hi!

    Are you sure that the css-link is pointing at the right location in your template folder? I copied the full link to ie.css from the page source pasted it in the brower address field and got an error.

    And now ie.css is loaded BEFORE the “regular” css. Place the conditional code right before </head> to make sure ie.css is loaded after the regular one. The styles loaded last are the ones that the browser must obey ??

    Thread Starter Odenberg

    (@murmelin)

    Hello and thanks so much for your help. I must be doing something wrong, because in IE the site still looks weird.

    This is what my <head> looks like:
    – – – – – – – – – – – – – – – – – – – – – – – – – – – – –

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

    <html xmlns=”https://www.w3.org/1999/xhtml”&gt;

    <head profile=”https://gmpg.org/xfn/11″&gt;

    <title><?php bloginfo(‘name’); ?><?php wp_title(); ?></title>

    <meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />

    <meta name=”generator” content=”WordPress <?php bloginfo(‘version’); ?>” /> <!– leave this for stats please –>

    <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />

    <link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”<?php bloginfo(‘rss2_url’); ?>” />

    <link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”<?php bloginfo(‘rss_url’); ?>” />

    <link rel=”alternate” type=”application/atom+xml” title=”Atom 0.3″ href=”<?php bloginfo(‘atom_url’); ?>” />

    <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />

    <?php wp_get_archives(‘type=monthly&format=link’); ?>

    <?php //comments_popup_script(); // off by default ?>

    <?php wp_head(); ?>

    <script type=”text/javascript” src=”https://use.typekit.com/vch1efa.js”></script&gt;
    <script type=”text/javascript”>try{Typekit.load();}catch(e){}</script>

    <!–[if IE 7]>
    <link type=”text/css” href=”<?php bloginfo( ‘template_url’ ) ?>/styles/ie.css”>
    <![endif]–>

    </head>
    – – – – – – – – – – – – – – – – – – – – – – – – – – – – –

    If I use <!–[if lte IE 7]> instead of <!–[if IE 7]>, I get Internal Error at Netrenderer.

    Hi!

    I still get an error when trying to look at: https://bastardforlag.se/wordpress/wp-content/themes/Minimalia/styles/ie.css. The file should open as text in the browser window unless the server is actively trying to block me ??

    Is there a folder named styles in the themes folder? Your regular css-file seems to be placed in the themes root folder.

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Problems in IE’ is closed to new replies.