Grow your CSS skills. Land your dream job.

CSS Firefox works excellent IE shows blank page!

  • # October 27, 2009 at 3:47 pm

    Hello! Good day to you all!

    I was designing a layout for a future wordpress template. But a problem showed up when I was testing for cross-browser campability!

    The page I was designing showed up perfectly in Firefox, but when opening it in Internet Explorer it shows a completly blank page :shock:

    This is the page I was talking about: http://frank.ftfmedia.nl/test/

    Does it give you a blank page as well in IE or is it just me?

    I’m currently using the latest versions of IE and Firefox.

    The following code was used:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    FTF Media Blog – Nieuws & Artikelen over Web Design, Internet Marketing en SEO</p> <p><script type="text/JavaScript" src="curvycorners.js"></script></p> <style type="text/css"> <p>body { background:#0f1e33 url('images/bg.jpg') no-repeat; background-attachment:fixed; height:100%; width:100%; padding:0px; margin:0px; }</p> <p>#wrapper { margin:0px; padding:0px; width:100%; height:100%; }</p> <p>#transhead { margin:0px; background-color:white; opacity:0.36; filter:alpha(opacity=36); width:1010px; height:190px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; /* future proofing */ -khtml-border-radius: 20px; /* for old Konqueror browsers */ position: absolute; top:5px; left:10px; z-index:1; }</p> <p>#flits { position:absolute; top:0px; left:0px; z-index:0; }</p> <p>#menubalk { margin:0px 0px 0px 0px; background-image:url('images/menubalkbg.png'); width:100%; height:38px; position:absolute; top:170px; z-index:4; }</p> <p>#menushine { position:absolute; top:162px; left:920px; z-index:5; }</p> <p>#logo { position:absolute; top:20px; left:40px; z-index:5; }</p> <p>#knop1 { background-image:url('images/knop.png'); position:absolute; top:129px; left:500px; z-index:3; margin:0px; color:#0f75bc; font-family:Arial; font-size:14px; font-weight:bold; text-align:center; padding:20px 0px 0px 0px; width:163px; height:53px; text-transform: uppercase; }</p> <p>#knop2 { background-image:url('images/knop.png'); position:absolute; top:129px; left:658px; z-index:3; margin:0px; color:#0f75bc; font-family:Arial; font-size:14px; font-weight:bold; text-align:center; padding:20px 0px 0px 0px; width:163px; height:53px; text-transform: uppercase; }</p> <p>#knop3 { background-image:url('images/knop.png'); position:absolute; top:129px; left:816px; z-index:3; margin:0px; color:#0f75bc; font-family:Arial; font-size:14px; font-weight:bold; text-align:center; padding:20px 0px 0px 0px; width:163px; height:53px; text-transform: uppercase; }</p> </style> <p>



    Homepage
    Nieuws
    Articles


    I hope you guys can help me out! If you want to give me some advice on my CSS.. that’s also great;)

    Thanks,
    Frankenkill

    # October 27, 2009 at 4:20 pm

    Like Rob’s sticky says validation is always a good place to start http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Ffrank.ftfmedia.nl%2Ftest%2F
    See if it makes a difference when you close that <title> tag.

    # October 28, 2009 at 5:23 am

    Just took a look in Chrome and IE8 and both worked fine.

    # October 28, 2009 at 11:57 am

    Just tried in IE8 got blank screen, added </title> and worked fine.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

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