CSS issue with IE

  • Help! I’ve been designing a new blog for someone here: https://www.fustar.org

    The site seems to be fine in Firefox, but in Internet Explorer, the left of the screen is completely white, rather than the 60px margin-left that I set in the CSS. The weird thing is this only happens occassionly, and only in some pages. The ‘All posts’ category archive is fine, but the ‘film’ category isn’t. How can this be?!

    Any help gratefully accepted with a free invisible muffin and a smile.

    Thanks

Viewing 5 replies - 1 through 5 (of 5 total)

  • The problem may be caused by the different way Internet Explorer renders box model in terms of padding and margins.

    IE does not add margin and padding to the div, but includes it within the total width of a container. This often throws off horizontal alignments.

    Look at the values for the following (for the container box, probably your #outercontainer div) :
    border-left, margin-left, padding-left, or width values.

    Internet Explorer often needs the width:XXpx specified. (XX representing some number in pixels)

    I have linked the issue here:

    https://www.1stpersonpress.com/links/archives/css-problems-with-ie.html#trackbacks

    The post references an explanation via Elise LearningMovableType.com, but the problem isn’t specific to MT templates.

    I have a couple of box model illustrations somewhere, let me see if I can locate and I’ll post those here as well.

    https://www.1stpersonpress.com/links/archives/css/ has a couple of links that are great for visualizing the CSS Box Model.

    Note – for shorthand CSS expressions (all four directions displayed as one line) the value for left will be the last number. CSS shorthand rules are written clockwise, starting from the top:

    example:

    margin: 10px 20px 30px 40px

    is the same as

    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;

    Regarding why the problem occurs on a category page but not on the home page:

    Think boxes within boxes here… The home page template may in effect be wrapping the same area in an extra container – problems with IE box model can often be solved by wrapping the container in an extra set of <div>...</div> and applying the style to that outer container.

    I noticed that your template has an #outercontainer as well as an #innercontainer.

    Play with those horizontal margin and padding values and see if that’s where the variance is happening.

    Thread Starter restlessbtvs

    (@restlessbtvs)

    Thanks, after changing the margin I’ve managed to make the page look slightly better, and I’ll try again further later.

    Pesky IE!

    Like I’ve been saying… IE is, and always will be, a lost cause.

    I wish more people would start using a better browser. Luckilly, only 31% of my visitors use IE and 57% use Firefox. The other 12% are scattered amongst other browsers and RSS readers.

    Good luck with trying to get it to render perfectly in both!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS issue with IE’ is closed to new replies.