Grow your CSS skills. Land your dream job.

Can’t figure out IE!!!

  • # June 4, 2009 at 1:35 pm

    Hi,

    I’m having some great issues with working on IE with the site I’m currently doing. It works great in Firefox, Opera, Safari, etc., but just not IE. The website is http://www.linearstars.com

    Here’s a screenshot of what is looks like in Firefox:

    [img]http://www.linearstars.com/images/Picture%201.png[/img]

    Here’s IE:

    [img]http://www.linearstars.com/images/Picture%202.png[/img]

    Anyway, I’m not sure how to change this and make it work – the whole site is funky is places that work on the other browsers. If the images aren’t showing properly, follow the links to them to see the full images.

    Here is the HTML for the home page:

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




    • Why Linearstars LED fixtures?
    • + Long-lasting: 50,000 hour life. Or, simply put,
        
      four hours of light per day for 34 years.
    • + Energy-efficient: 10 to 20 times more energy
        
      efficient than halogen or xenon.
    • + Highly customizable: choose from 4 different
         body
      styles for specific applications, 18
         different lengths,
      numerous light-output colors,
         fixture-body colors,
      and more,
         most for no charge.
    • + 5 year Manufacturer’s Warranty: One of the
         best
      warranties in the lighting industry. Rest
         assured
      that we stand behind our product,
         so you can, too.
    • + Learn more
    • - benefits
    • - products
    • - pictures
    • - customization
    • - sizing & pricing
  • + Become a Dealer






And the CSS for the homepage:

Code:
font { font:Arial, Helvetica, sans-serif; font-weight:400;}
body {background:#FFF;}
img {text-decoration:none; border:none;}

#shadow {background: url(../images/shadow_sides.gif); width:1075px; background-repeat:repeat-y; margin:0 auto;}
#container {width: 1024px; margin:50px auto; background:#FFF; border: solid 1px #666;}
#header {float: left; }
#nav {float:right; margin:-16px 50px 0px 10px;}
#nav ul {list-style:none; display:block; }
#nav ul li {float: left; list-style:none; display:block; text-align:center;}
#nav ul li a {text-decoration: none; color:#333;}
#nav ul li a:hover {text-decoration:underline; color:#FFCC00;}
#nav ul li a:visited {text-decoration:none; color:#333;}

/*home*/#content {font-family: Arial, Helvetica, sans-serif;font-size: 11px; margin: -25px 0px 5px 100px; float:left; width:280px; padding:10px;}
#content ul li {list-style:none}
#content ul li a {text-decoration:none; color:#333;}
#content ul li a:hover {text-decoration:underline; color:#999;}
#content ul li a:visited {text-decoration:none; color:#333;}

/*products*/#content2 {font-family:Arial, Helvetica, sans-serif;font-size: 12px; margin:10px auto 50px; width:720px; padding:10px; border:solid 1px #333;}

#lights {float:left; list-style:none; display:block; margin:-56px 0px 0px -56px;}
#uc1 {float: left;list-style:none; display:block;}
#uc1-current {
float:left; width: 268px; margin:-8px 5px 0px 5px; padding: 15px 0px 10px 0px;
list-style:none; display:block; border-top:1px solid #333; border-right:1px solid #333; border-left:1px solid #333;
text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:14px;
background:#FFF;
}

#uc2 {float: left;list-style:none;display:block; margin:0px 5px;}
#uc2-current {
float:left; width: 268px; margin:-8px 5px 0px 5px; padding:15px 0px 10px 0px;
list-style:none; display:block; border-top:1px solid #333; border-right:1px solid #333; border-left:1px solid #333;
text-align:center;font-family:Arial, Helvetica, sans-serif; font-size:14px;
background:#FFF;
}

#ic {float: left;list-style:none; display:block; margin:0px 5px;}
#ic-current {}

#cic {float: left;list-style:none;display:block; margin:0px 5px;}
#cic-current {}

/*END OF PRODUCTS AREA*/

/*pictures*/#content3 {font-family:Arial, Helvetica, sans-serif;font-size: 12px; margin:10px auto 50px; width:720px; padding:10px; border:solid 1px #333;}
/*pricing*/#content4 {font-family:Arial, Helvetica, sans-serif;font-size: 12px; margin:10px auto 50px; width:720px; height: 366px; padding:10px; border:solid 1px #333;}
/*customization*/#content5{font-family:Arial, Helvetica, sans-serif;font-size: 12px; margin:10px auto 50px; width:720px; height: 366px; padding:10px; border:solid 1px #333;}
/*contact*/#content6{font-family:Arial, Helvetica, sans-serif;font-size: 12px; margin:10px auto 50px; width:720px; padding:10px; border:solid 1px #333;}

#gallery {float: left; margin:-30px 0px 40px 70px; padding:10px; text-align:center; font-family:Arial, Helvetica, sans-serif;}
#gallery h2 {text-align:center; font-family:Arial, Helvetica, sans-serif; padding:10px;}
#gallery-content {font-size: 14px; color: #333; width:272px; height: 80px;}

#footer {margin: -105px auto 0px;}
#footer-shadow {margin: -55px auto; font-family:Arial, Helvetica, sans-serif; font-size:12px; }

.left {float:left;}
.header {float:left; margin: 25px 25px;}
.clear {clear:both;}
.black {color: #333; font-family:Arial, Helvetica, sans-serif; font-size: 11px; padding:49px 5px 0px 5px; text-align:center; }
.last {color: #333; font-family:Arial, Helvetica, sans-serif; font-size:11px; padding:49px 5px 0px 5px; text-align:center; border:none;}
.home {background: url(../images/nav/home-white.gif); width: 60px; height:70px;}

/*THIS AREA IS FOR THE NAV BAR FOR EACH ONE WHEN YOU ARE ON THAT PAGE*/
.products {background: url(../images/nav/products-white.gif); width: 72px; height:70px;}
.pictures {background: url(../images/nav/pictures-white.gif); width:65px ;height: 70px;}
.pricing {background:url(../images/nav/pricing-white.gif);width:56px ;height: 70px;}
.customization {background: url(../images/nav/customization-white.gif);width:96px ;height: 70px;}
.contact-us {background:url(../images/nav/contactus-white.gif);width:80px ;height: 70px;}
/*THIS IS THE END OF THE CURRENT NAVBAR STATUS AREA*/

.words_list {float:right; width:338px; margin:10px 63px 10px 10px; padding:10px;}
.words_list ul li {list-style: none;}
.words {float:right; width: 338px; margin:10px; padding:10px; }
.words_header {float:right; margin:0px 260px 5px 0px; padding:0px 10px;}
.words_header h2 {font-family: Arial, Helvetica, sans-serif;}

.pic {float:left; margin:80px 0px 10px 30px; padding:5px;}
.pics {float:left;margin:25px 0px 25px 60px; padding:5px;}
.left_text {float:left; margin:0px 0px 0px 65px;}
.products_text {float: right;width:175px; margin:20px 30px 10px 0px; font-size:11px;}
.contact {float:right; margin: 0px 60px 0px 0px;}
.left_text2 {float:left; margin:0px 10px 10px 10px; width:300px;}
.left_text_header {float:left; margin:0px 0px 5px 0px; padding:0px 10px;}
.left_text_header h2 {font-family:Arial, Helvetica, sans-serif;}
.center {text-align:center;font-family:Arial, Helvetica, sans-serif;}
.center h2{text-align:center; font-family:Arial, Helvetica, sans-serif;}
.center_text {text-align:left; font-family:Arial, Helvetica, sans-serif; width:325px; padding:5px; margin:5px 0px 5px 185px; font-size:11px;}

Please help!

# June 4, 2009 at 2:08 pm

A couple things first:

1) Validate the page (you have "<div id="container">" twice, you can’t have two of the same id’s on one page, there’s also something up with the nav that I didn’t bother to look at)

2) Do not use <br>’s as design elements. I see you are trying to push content around by using them. Use margins in your CSS instead.

3) I’m not sure if it’s the server, but the page takes a VERY long time to load.

I’ve given up on waiting for the page to load in IE6, I’ll have to check again later.

# June 4, 2009 at 2:37 pm

The server just went down for a while – so check back in a few hours. Otherwise, I’ll validate it right now and see…

# June 5, 2009 at 12:53 pm

The site is up and working now, and I have worked on the validation of the code as well. I tried it in IE this morning, and it’s working slightly better, but still not working in a lot of areas. Please help!

Here’s the code:

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




  • Why Linearstars LED fixtures?
  • + Long-lasting: 50,000 hour life. Or, simply put,
      
    four hours of light per day for 34 years.
  • + Energy-efficient: 10 to 20 times more energy
      
    efficient than halogen or xenon.
  • + Highly customizable: choose from 4 different
       body
    styles for specific applications, 18
       different lengths,
    numerous light-output colors,
       fixture-body colors,
    and more,
       most for no charge.
  • + 5 year Manufacturer’s Warranty: One of the
       best
    warranties in the lighting industry. Rest
       assured
    that we stand behind our product,
       so you can, too.
  • + Learn more
  • - benefits
  • PDF Downlaod

  • - products
  • - pictures
  • - customization
  • - sizing & pricing
  • + Become a Dealer





  • Code:
    font { font:Arial, Helvetica, sans-serif; font-weight:400;}
    body {background:#FFF;}
    img {text-decoration:none; border:none;}

    #shadow {background: url(../images/shadow_sides.gif); width:1075px; background-repeat:repeat-y; margin:0 auto;}
    #container {width: 1024px; margin:50px auto; background:#FFF; border: solid 1px #666;}
    #container2 {width: 1024px; margin:50px auto; background:#FFF; border: solid 1px #666;}
    #header {float: left; width:450px }
    #nav {float:right; margin:-16px 50px 0px 10px; width:440px;}
    #nav ul {list-style:none; display:block; }
    #nav ul li {float: left; list-style:none; display:block; text-align:center;}
    #nav ul li a {text-decoration: none; color:#333;}
    #nav ul li a:hover {text-decoration:underline; color:#FFCC00;}
    #nav ul li a:visited {text-decoration:none; color:#333;}

    /*home*/#content {font-family: Arial, Helvetica, sans-serif;font-size: 11px; margin: -20px 0px 5px 80px; float:left; width:280px; padding:10px;}
    #content ul li {list-style:none}
    #content ul li a {text-decoration:none; color:#333;}
    #content ul li a:hover {text-decoration:underline; color:#999;}
    #content ul li a:visited {text-decoration:none; color:#333;}

    /*products*/#content2 {font-family:Arial, Helvetica, sans-serif;font-size: 12px; margin:10px auto 50px; width:720px; padding:10px; border:solid 1px #333;}

    #lights {float:left; list-style:none; display:block; margin:-56px 0px 0px -56px; width:600px;}
    #uc1 {float: left;list-style:none; display:block; width:75px;}
    #uc1-current {
    float:left; width: 268px; margin:-8px 5px 0px 5px; padding: 15px 0px 10px 0px;
    list-style:none; display:block; border-top:1px solid #333; border-right:1px solid #333; border-left:1px solid #333;
    text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:14px;
    background:#FFF;
    }

    #uc2 {float: left;list-style:none;display:block; margin:0px 5px;width:75px;}
    #uc2-current {
    float:left; width: 268px; margin:-8px 5px 0px 5px; padding:15px 0px 10px 0px;
    list-style:none; display:block; border-top:1px solid #333; border-right:1px solid #333; border-left:1px solid #333;
    text-align:center;font-family:Arial, Helvetica, sans-serif; font-size:14px;
    background:#FFF;
    }

    #ic {float: left;list-style:none; display:block; margin:0px 5px;width:75px;}
    #ic-current {}

    #cic {float: left;list-style:none;display:block; margin:0px 5px;width:75px;}
    #cic-current {}

    /*END OF PRODUCTS AREA*/

    /*pictures*/#content3 {font-family:Arial, Helvetica, sans-serif;font-size: 12px; margin:10px auto 50px; width:720px; padding:10px; border:solid 1px #333;}
    /*pricing*/#content4 {font-family:Arial, Helvetica, sans-serif;font-size: 12px; margin:10px auto 50px; width:720px; height: 366px; padding:10px; border:solid 1px #333;}
    /*customization*/#content5{font-family:Arial, Helvetica, sans-serif;font-size: 12px; margin:10px auto 50px; width:720px; height: 366px; padding:10px; border:solid 1px #333;}
    /*contact*/#content6{font-family:Arial, Helvetica, sans-serif;font-size: 12px; margin:10px auto 50px; width:720px; padding:10px; border:solid 1px #333;}

    #gallery {float: left; width:510px; margin:-30px 0px 40px 70px; padding:10px; text-align:center; font-family:Arial, Helvetica, sans-serif;}

    #footer {margin: -105px auto 0px; width:1024px;}
    #footer-shadow {margin: -55px auto; font-family:Arial, Helvetica, sans-serif; font-size:12px; width:1075px; }

    .left {float:left; width:500px;}
    .header {float:left; margin: 25px 25px; width:336px;}
    .clear {clear:both;}
    .black {color: #333; font-family:Arial, Helvetica, sans-serif; font-size: 11px; padding:49px 5px 0px 5px; text-align:center; }
    .last {color: #333; font-family:Arial, Helvetica, sans-serif; font-size:11px; padding:49px 5px 0px 5px; text-align:center; border:none;}
    .home {background: url(../images/nav/home-white.gif); width: 60px; height:70px;}

    /*THIS AREA IS FOR THE NAV BAR FOR EACH ONE WHEN YOU ARE ON THAT PAGE*/
    .products {background: url(../images/nav/products-white.gif); width: 72px; height:70px;}
    .pictures {background: url(../images/nav/pictures-white.gif); width:65px ;height: 70px;}
    .pricing {background:url(../images/nav/pricing-white.gif);width:56px ;height: 70px;}
    .customization {background: url(../images/nav/customization-white.gif);width:96px ;height: 70px;}
    .contact-us {background:url(../images/nav/contactus-white.gif);width:80px ;height: 70px;}
    /*THIS IS THE END OF THE CURRENT NAVBAR STATUS AREA*/

    .words_list {float:right; width:338px; margin:10px 63px 10px 10px; padding:10px;}
    .words_list ul li {list-style: none;}
    .words {float:right; width: 338px; margin:10px; padding:10px; }
    .words_header {float:right; margin:0px 260px 5px 0px; padding:0px 10px; width:100px;}
    .words_header h2 {font-family: Arial, Helvetica, sans-serif;}

    .pic {float:left; margin:80px 0px 10px 30px; padding:5px; width:210px;}
    .pics {float:left;margin:25px 0px 25px 60px; padding:5px; width:224px;}
    .left_text {float:left; margin:0px 0px 0px 65px;width: 180px;}
    .products_text {float: right;width:175px; margin:20px 30px 10px 0px; font-size:11px;}
    .contact {float:right; margin: 0px 60px 0px 0px; width:310px;}
    .left_text2 {float:left; margin:0px 10px 10px 10px; width:300px;}
    .left_text_header {float:left; margin:0px 0px 5px 0px; padding:0px 10px; width:100px;}
    .left_text_header h2 {font-family:Arial, Helvetica, sans-serif;}
    .center {text-align:center;font-family:Arial, Helvetica, sans-serif;}
    .center h2{text-align:center; font-family:Arial, Helvetica, sans-serif;}
    .center_text {text-align:left; font-family:Arial, Helvetica, sans-serif; width:325px; padding:5px; margin:5px 0px 5px 185px; font-size:11px;}
    .PDF {margin:-24px 0px 50px 60px; width:31px;}
    .up {margin:-54px 0px 0px 0px; width:120px;}

    # June 6, 2009 at 9:54 am

    start out from the same point, use some kind of CSS reset, this ensures that the elements all use
    the same values in all browsers. for example, a subset of the eric meyer reset, one I use

    html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, a, img, p,
    table, th, tr, td {margin: 0; padding: 0; border: 0;}

    Al

    # June 7, 2009 at 9:50 pm

    I will try that and see how it works – do you do this for all of the sites you build at the top of your style sheets?

    # June 19, 2009 at 8:01 am

    Try this…

    body {
    background:#FFFFFF;
    margin:50px 0 0;
    }
    #shadow {
    background:transparent url(../images/shadow_sides.gif) repeat-y scroll 0 0;
    margin:0 auto;
    width:1075px;
    }
    #container {
    background:#FFFFFF;
    border:1px solid #666666;
    float:left;
    width:1024px;
    }

    # June 19, 2009 at 8:02 am

    Try this…

    body {
    background:#FFFFFF;
    margin:50px 0 0;
    }
    #shadow {
    background:transparent url(../images/shadow_sides.gif) repeat-y scroll 0 0;
    margin:0 auto;
    width:1075px;
    }
    #container {
    background:#FFFFFF;
    border:1px solid #666666;
    margin:0px auto;
    width:1024px;
    }

    # June 19, 2009 at 11:31 am

    I will try that out, but just curious, what does the "background:transparent url(../images/shadow_sides.gif) repeat-y scroll 0 0;" do? I understand using an image for the background, and I understand repeating, but the scroll and transparent parts I don’t understand. Any explanations of what is probably some simple CSS?

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

    You must be logged in to reply to this topic.

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