- This topic is empty.
-
AuthorPosts
-
June 4, 2009 at 1:35 pm #25045nchippingMember
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!
June 4, 2009 at 2:08 pm #58585TheDocMemberA 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 #58586nchippingMemberThe 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 #58622nchippingMemberThe 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
- + 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 7, 2009 at 9:50 pm #58697nchippingMemberI 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 #59327kamilMemberTry 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 #59328kamilMemberTry 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 #59335nchippingMemberI 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?
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.