Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Website Screwed Up in IE - Need Help

    Hey guys,

    I'm a relative newbie to CSS code, and am learning as I go along. I've created a small personal website with only the home page complete so far. Things display fine in all Mac browsers and FF on Windows. Of course, I didn't expect things to work in IE, but half the page won't load, and what does load is completely screwed up. I know that you can set conditionals by loading an external style sheet for IE, but that's all I know.

    I look at the page in IE and have no idea how to fix it. In other words, I need help with knowing what CSS needs fixing to make it look decent. For instance, even my header isn't loading all the way and that's a JPEG. How do I fix that with CSS? I don't know where to start. Also, please tell me where I can make things simpler on myself by cleaning up the code. I know that I probably did some things the hard way. Thanks in advance in to anyone willing to help!

    Here's the site: sarahkenney.net

    Here's the HTML:
    _________________________________________________
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
    <html>
    <head>
    <title>SarahKenney.net</title>
    <link rel="stylesheet" type="text/css" href="site.css"/>
    <!--[if IE]> <link href="ie.css" rel="stylesheet" type="text/css"> <![endif]-->

    </head>

    <div id="header"</div>

    <div id="wrapper">

    <div id="navigation">
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="900" height="50" id="flashnav" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="allowFullScreen" value="false" />
    <param name="movie" value="newnav.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#999999" /> <embed src="flash/newnav.swf" quality="high" bgcolor="#999999" width="900" height="40" name="flashnav" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object>
    </div>

    <div id="articles">
    <h1>Brand New Hello</h1>
    <br><div class="subtitle">June 18, 2009 by Sarah Kenney</div>
    <p><div class="intro">Change is in the air, and this new site design is just the beginning. I invite you to come along for the ride as new footholds are found, and great experiences shared. Welcome to the new SKdN.</div>
    </p>
    <p>As you can see, this site looks completely different. If you were to try any of the links - with the exception of the RSS Subscribe and Twitter links on the bottom right - you would find that none of them are operational yet. That's because it takes time to build a website from scratch, and I expect to be busy with it for another week or posibly two. My strengths are not in web design or coding, but I am learning as I go along, and must add that I'm having incredible fun playing the webmaster.</p>

    <p>You will also notice that this is no longer a traditional blog site. For what I truly want to do with this site, a blog template is simply to limiting, even if I could customize it as I did with my previous design. Working with an installed version of WordPress and editing the PHP files was a mess to sort through, and not 100% customizable. Now, I can have full control over everything displayed. The only downside is that my updates and editing of the site are no longer automated and must be manually done. I'll be very well aquainted with the role of a webmaster as time goes on, however, my knowledge only scratches the surface of what a true webmaster knows. Hmm...that sounds a bit like I'm discussing an ancient Asian artform.
    </p>
    <p>Gradually, you might notice new things coming to life on this site, and with a little bit of luck and some hard work, hopefully it will be complete soon. Thanks for stopping by, and I hope you visit often! Subscribe to make it easy!</p>


    <A href="http://www.google.com"></A>
    </div><!--ARTICLES--!>

    <div id="homeimage"></div>

    <div id="archivebox">
    <div id="archivetext">
    <h2>Archives</h2>
    <p>Catch up on all you've missed, or go back and read past articles/posts again!</p>
    <a href="http://www.google.com">Archives...</a>
    </div><!-- archivetext -->
    </div><!-- archivebox -->

    <div id="followbox">
    <div id="followtext">
    <h2>RSS Subscribe</h2>
    <p>Get RSS feeds every time this site is updated, so you can keep in touch.</p>
    <a href="http://www.sarahkenney.net/rssfeed.xml">Subscribe Now...</a>
    <a href="http://www.sarahkenney.net/rssfeed.xml"><img src="images/home/rssicon.png" width="50px" height="20px" border="0" alt="RSS Feed" class="rssfeed"/></a>
    <p></p>
    <br>
    <h2>Get Tweeted</h2>
    <p>Follow my updates on <a href="http://twitter.com/trylikeafool">Twitter</a>.</p>
    </div>
    </div>

    <div id="footer">
    <ul class="footer">
    <li>Site design and content &copy;2009 Sarah Kenney</li>
    <li class="contact">Contact me: <a href="mailto:trylikeafool@gmail.com">trylikeafool@gmail.com</a></li>
    </ul>
    </div>
    </div><!--wrapper--!>
    <body>
    </html>

    __________________________________________________

    Here's the CSS:
    __________________________________________________
    html, body {
    margin: 0;
    padding: 0;
    background: #fff;
    font-family: Myriad Pro, Arial, Helvetica, sans-serif; }


    #wrapper {
    width: 900px;
    margin: auto; }

    #header {
    background-image: url('images/site/header.png');
    height: 167px;
    margin: auto;
    width: 900px;
    margin-top: 15px;
    margin-bottom: 0px; }

    #navigation {
    width: 900px;
    margin: auto;
    margin-top: 0px;}


    #articles {
    width: 600px;
    background: WHITE;
    color: black;
    padding: 0px;
    float: left;
    font-size: .85em;
    margin-top: 20px;
    }

    .intro {
    color: gray;
    font-size: 18px;
    padding-top: 0px; }

    h1 {
    color: #b6c95d;
    font-size: 45px;
    font-weight: normal;
    margin-bottom: -10px; }

    .subtitle {
    color: gray;
    font-size: 12px;}

    a {
    color: #0560ea;
    text-decoration: none;}

    a:hover {
    text-decoration: underline; }

    #homeimage {
    background: white;
    float: right;
    width: 245px;
    height: 315px;
    background-image: url("images/home/homeimage.png");
    background-repeat: no-repeat;
    background-position: center top;
    margin-top: 35px;
    }

    #archivebox {
    float: right;
    width: 237px;
    height: 200px;
    background-image: url("images/home/archivebox.png");
    background-repeat: no-repeat;
    background-position: center top;
    margin-top: 30px;
    }

    #archivetext {
    color: black;
    padding-top: 35px;
    padding-left: 25px;
    font-size: .85em;
    width: 200px;
    height: 200px;
    }

    h2 {
    margin: 0px;
    font-size: 1.5em;
    margin-bottom: -10px; }

    #followbox {
    float: right;
    clear:both;
    background-image: url("images/home/followbox.png");
    width: 220px;
    height: 275px;
    background-repeat: no-repeat;
    background-position:center top;
    margin-top: 15px;
    margin-right: 2px;
    padding-left: 10px; }

    #followtext {
    color: black;
    padding-top: 30px;
    padding-left: 20px;
    font-size: .85em;
    width: 175px;
    height: 200px;
    }

    img.rssfeed {
    float: right;

    margin-right: 25px;
    margin-top: -22px; }


    #footer {
    background-image: url("images/site/footer.png");
    background-repeat: no-repeat;
    height: 50px:
    width:900px;
    clear: both;
    color: white;
    font-size: .8em;
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 20px;}

    ul.footer {
    list-style: none; padding: 0; margin: 0;}

    ul.footer li {
    display: inline;
    margin-left: 0px;}

    ul.footer li.contact {
    margin-left: 425px; }


    ________________________________________________
    Last edited by trylikeafool; 06-19-2009 at 02:01 AM.

  • #2
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    You need to enter your page into the W3C Validator. You've got a lot of errors (don't even have a body tag )

    Fix those, and you'll be fine. I can only see one difference in the padding on the bottom yellow square that you'll need to adjust.

    BTW, I'd seriously consider changing that font you chose. It is not easy on the eyes at all.

    Good Luck.

  • #3
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Quote Originally Posted by Fisher View Post
    (don't even have a body tag )
    Factoid: body tags are optional.

    Your doctype is incorrect and puts IE into quirks mode. Use this one:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •