Grow your CSS skills. Land your dream job.

css styling not work properly in IE

  • # August 11, 2008 at 5:17 am

    Hi there,

    I am a mac-user, after learning some CSS tricks here, I thought of helping my uncle creating his optical shop website. However, it seem everything mess-up after I previewed it in IE. At first, a gap was appeared in the browser. Later, after I have added in more info, things gone missing. Can any expertise out there give me some tips to solve the problem?

    Below is my html code

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


    Masthead and Logo

    Let’s ride on the green


    Here is my Global reset CSS code

    Code:
    body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
    li, dl, dt, dd, form, a, fieldset, input, th, td
    {
    margin: 0; padding: 0; border: 0; outline: none;
    }

    body
    {
    line-height: 1;
    font-size: 62.5% Helvetica, sans-serif;
    }

    h1, h2, h3, h4, h5, h6
    {
    font-size: 100%;
    padding: .6em 0;
    margin: 0 15px;
    }

    ul, ol
    {
    list-style: none;
    }

    a
    {
    color: black;
    text-decoration: none;
    }

    a:hover
    {
    text-decoration: underline;
    }

    .floatLeft
    {
    float: left;
    padding: .5em .5em .5em 0;
    }

    .floatRight
    {
    float: right;
    padding: .5em 0 .5em .5em;
    }

    Last but not least, this is my customized style sheet

    Code:
    #container {
    margin: 0 auto;
    position: relative;
    text-align: left;
    width: 1010px;
    }

    #preset_mast {
    height: 157px;
    margin: 0;
    padding: 0;
    text-indent: -9999px;
    background: url(images/masthead.gif) no-repeat;
    }

    /* SETTING FOR MAIN */
    #main {
    width: 800px;
    margin-left: 200px;
    position: absolute;
    float: left;
    }

    #main h2.title_bar {
    font-family: helvetica, sans-serif;
    font-size: 2em;
    font-weight: lighter;
    text-indent: 20px;
    color: white;
    padding: 5px 0px 10px 0px;
    background: url(images/titleBar.gif) no-repeat;
    }
    /* END MAIN */

    /* SETTING FOR SIDEBAR */
    #sidebar {
    margin: 0 auto;
    float: left;
    }

    #nav {
    float: left;
    position: absolute;
    top: 160px;
    }

    li.blanktop {
    display: block;
    height: 35px;
    text-indent:-9999px;
    background: url(images/btnBlank_top.gif);
    }

    #nav li a {
    display: block;
    height: 35px;
    text-indent: -9999px;
    margin: 0px 0px -2px 0px;
    }

    #nav li a:hover {
    background-position: top center;
    }

    li.home a{
    width: 210px;
    background: url(images/home_nav.jpg) bottom center;
    }

    li.about a{
    width: 210px;
    background: url(images/aboutus_nav.jpg) bottom center;
    }

    li.services a{
    width: 210px;
    background: url(images/services_nav.jpg) bottom center;
    }

    li.products a{
    width: 210px;
    background: url(images/products_nav.jpg) bottom center;
    }

    li.contact a{
    width: 210px;
    background: url(images/contact_nav.jpg) bottom center;
    }

    li.blankbottom {
    display: block;
    height: 267px;
    text-indent:-9999px;
    background: url(images/btnBlank_bottom.gif);
    }

    body#home li.home a,
    body#about li.about a,
    body#services li.services a,
    body#products li.products a,
    body#contact li.contact a
    {
    background-position: top center;
    }

    #copyrights_info {
    font-family: helvetica, sans-serif;
    font-size:0.7em;
    line-height: 1.2em;
    color: #666;
    text-align: right;
    margin-top: 500px;
    }

    p.emailme a{
    color: #666;
    line-height: 3em;
    }
    /* END SIDEBAR */

    Please I really need some help here. :(

    # August 11, 2008 at 7:14 am

    Maybe you can put all the stuff also online somewhere? That’s easier for us to bugfix…
    I don’t know if you’ve tried conditional statements (special css for IE) yet? You can find more info about that here.

    # August 11, 2008 at 11:32 am

    Hi Edwin,

    Thanks a million for your response. I am really new in this area (CSS). Previously, I did the design totally rely on Dreamweaver. But I thought it’s time to upgrade myself to a more professional level. Here, I uploaded the file to the server. Please feel free to download it and hope that you can show me the way.

    Following is the link, http://www.buncreative.com/demo/website.zip

    Take care, and I shall look forward to hearing from you soon.

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

You must be logged in to reply to this topic.

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