css styling not work properly in IE

[buncreative]

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:

Masthead and Logo

Let’s ride on the green

• btnBlank_top
• home
• about us
• our services
• our products
• contact
• btnBlank_bottom

copyrights ©Nanyang Optical
All Rights Reserved

Concept & Idea: Buncreative

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. :(

[buncreative]

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.

[Author]

Posts