Grow your CSS skills. Land your dream job.

IE display errors

  • # August 3, 2010 at 10:59 am

    Hello,
    This is my first site, it may well be a code nightmare, I dont know. It renders fine in all browsers but IE. In IE sidebar and header colr renders as black instead of green and top picture doesnt appear. Also spry bar appears white instead of green.

    Pls advise
    thx

    http://www.marketingworksnow.com

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





     

     
    Follow MKTworksNow on Twitter



    # August 3, 2010 at 11:29 am

    Without meaning to be rude, I would recommend learning proper CSS coding before attempting to make a website in an outdated and wholly incorrect way.

    Get a book to teach yourself the correct way to create sites :)

    http://www.amazon.com/Build-Your-Site-R … 345&sr=8-4

    # August 3, 2010 at 1:33 pm

    I’m gonna have to agree with TT_Mark. Helping you would go against my wish to rid the web community of subpar websites. Tabled layout with scripts everywhere instead of divs and css are totally bringing down your website.

    Anyways it doesn’t look much different in IE than it does in any other browser..other than the fact that by default all your scripts are blocked on my IE and I end up with white boxes with red x’s on the corners.

    # August 4, 2010 at 9:43 am

    :oops: haha ok…im 17, this was my first try. I’ll get that book!

    Thx

    # August 4, 2010 at 11:55 am

    I am doing my best to teach myself primarily through trial and error. I started a new page from scratch using alot more div tags and zero tables thus far. Also, should I avoid scripts such as the spry elements?

    # August 4, 2010 at 1:27 pm
    "wkhnolan" wrote:
    I am doing my best to teach myself primarily through trial and error. I started a new page from scratch using alot more div tags and zero tables thus far. Also, should I avoid scripts such as the spry elements?

    No need to apologise, its just best to start out learning correctly rather than having to relearn everything again at a later date. Where were you getting the tutorials for learning table layouts from?

    I would generally avoid the spry elements, especially on menus.

    Good to see you’re taking the initiative and trying out the div layout. We’re all here to help

    # August 9, 2010 at 12:06 pm

    Thanks Mark,

    My name is Will by the way. I have started writing the new page using no tables, all div. Also, I’ve started making my own menu bar instead of using spry. I’d like some feedback on what I’ve done so far. I’m teaching myself as I go, It’s alot of trial and error. I did order the book you suggested. I can already see how this method is much cleaner and easier to manage.

    Thx

    http://www.marketingworksnow.com

    Here is my HTML:

    Code:
    <body>
    <div id="container">
    <div id="header" align="center"><img src="PicturesFiles/green-logo-web.jpg" /></div>

    <div id="wrapper" align="center">

    <div id="div1" style="float: left; width: 115px;">
    <div align="left" id="menudiv"><ul class="solidblockmenu">
    <li><div><a href="#">Home</a></div></li>
    <li><div><a href="#">About</a></div></li>
    <li><div><a href="#">Sustainable Technology</a></div></li>
    <li><div><a href="#">Contact</a></div></li>
    </ul></div>
    </div>

    <div id="div2">
    <embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-159.swf width=550 height=550 vspace="35" wmode=transparent type=application/x-shockwave-flash> </embed>
    </div>
    </div>
    </div>
    </body>

    Here is the CSS:

    Code:
    body {
    background-image: url(PicturesFiles/greenbackground.jpg);
    text-align:center;
    }
    #container {
    margin-right: auto;
    margin-left: auto;
    width:1000px;
    }
    #header {
    width:1000px;
    background-color: #004930;
    }
    #wrapper {
    position:absolute;
    color: #FFFFFF;
    width: 1000px;
    }
    #div1 {
    height:650px;
    background-color:#004930;
    }
    #div2 {
    width: 550px;
    margin-right: auto;
    margin-left: auto;
    }
    .solidblockmenu{
    margin: -20px;
    float:left;
    font: bold 14px Arial;
    width: 75px;
    padding-top: 50px;
    }

    .solidblockmenu li{
    display: inline;
    }

    .solidblockmenu li a{
    float: left;
    color: white;
    padding: 10px 11px 10px 0px;
    border-bottom: 1px solid #A57923;
    }

    .solidblockmenu li a:visited{
    color: white;
    }

    .solidblockmenu li a:hover, .solidblockmenu li .current{
    color: white;
    background:;
    }

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

You must be logged in to reply to this topic.

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