Grow your CSS skills. Land your dream job.

Content Not Displaying Correctly in IE 8 and iOS Safari

  • # September 14, 2011 at 10:16 am

    Strangely, my site http://www.crosst.org displays incorrectly only on IE and iOS Safari (mobile). It appears to be cutting off the repeating images for the header, mid bar and footer as well as not centering the main content. I’ve been over it and can’t find anything that would cause this. Any suggestions would be great!! Thanks.

    # September 14, 2011 at 11:07 am

    It appears, after looking into this some more, it is cutting off any css background “repeat-x” content only when scrolling in a smaller browser window. This happens in all browsers, so is it a overflow problem or what? Could someone take a look and help me figure this out please? http://www.crosst.org

    # September 14, 2011 at 11:10 am

    I’m not seeing the error you’re talking about @svoltmer. I’m looking at it in IE9 in compatibility mode and I don’t see anything wrong.

    # September 14, 2011 at 11:31 am

    The only time i see it cut the content off on the right side is if you use a windowed view of the webpage instead of full screen. Try to scroll to the right and you’ll see what I am talking about.

    # September 14, 2011 at 11:39 am

    I’m guessing this has something to do with the set width of the ‘footer-resize’ div.

    overflow:hidden 

    on the ‘footer’ might be a start but I dunno.

    Oddly, the left and centre images/links in the footer don’t render in Chrome! [EDIT: That was AdBlock...just figured that out]

    # September 14, 2011 at 11:42 am

    This might be the zaniest stylesheet I’ve ever seen.

    That header should be done like this … in my opinion anyway.


    #header {width: 100%; height: 40px; margin: 0; background-image: url(whatever); background-repeat: repeat-x; background-position: top left;}

    Then address it:



    That’s just me though.

    # September 14, 2011 at 12:25 pm

    I know the sheet is whacked, I took over for another guy who designed the basic template and he coded the css crazy! I’ve been changing here and there as I get time for clarity.

    # September 14, 2011 at 2:10 pm

    Check this out. I have a absolutely positioned “leaf” that displays perfectly except on IE and iOS Safari. Why is it so far over to the left?

    # September 14, 2011 at 2:33 pm

    I am an idiot. forgot to position:relative the parent……

    # September 14, 2011 at 2:46 pm

    I am an idiot. forgot to position:relative the parent…

    I both love and hate those moments!

    # September 14, 2011 at 4:01 pm

    for the most part, you never want to set width: 100% on block level elements. They take up all available width by default anyway. What I would do is to remove those widths and place a min-width on the body of 1105px, which is the minimum needed to include all your content (including the leaf, which by the way should have its width set to 206, not 287). This way all the children divs of body will be at least 1105 wide and their background will scroll with the scrollbar to that point.

    Also note that using empty clearing divs is bad practice and that margin: 0 auto will not center a 100% width element, nor will it center an element with no width set (you have this in main). Also, why is the repeating bg image for the header so wide? If it’s repeating you only need a small slice (I like to use 10px, but some use 1, 5, or other small amount) – not 1300px.

    # September 14, 2011 at 4:07 pm

    Thanks wolf, Someone else set up the basic template for the site and I am gradually changing the css as I have time. I know there is a lot of wonky stuff in there. Thanks for the suggestions!!

    # September 14, 2011 at 4:39 pm

    I am curious as to how you would clear the div with the “header-main” since I can’t use “overflow:hidden” due to the “leaf” positioned absolute from it. I am always trying to learn. Thanks

    # September 15, 2011 at 10:33 am

    I can think of two things off the top of my head. The simplest is to just give #block header a height. That area, I’m guessing, is going to be fairly consistent through-out the site. No reason not to set it’s height and allow the leaf to overflow it. The second would be to simply add the clear to the next element (the slider in this case). It does the exact same thing.

    # September 15, 2011 at 12:15 pm

    I opted for clear:both on the next element. That being said, what about the case of the two floats without individual parents? I am referring to the “tab-top” and the following floats, “logo-main” and “menu-main”. I have to use an empty “div” with “class=”clr” don’t I? Thanks for all your help wolf!

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".