Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Can’t figure out IE!!!

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #25045
    nchipping
    Member

    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:




    Linearstars – Home

    • 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!

#58585
TheDoc
Member

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.

#58586
nchipping
Member

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

#58622
nchipping
Member

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:




Linearstars – Home

  • 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;}

    #58697
    nchipping
    Member

    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?

    #59327
    kamil
    Member

    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;
    }

    #59328
    kamil
    Member

    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;
    }

    #59335
    nchipping
    Member

    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 8 posts - 1 through 8 (of 8 total)