...

View Full Version : IE6 & 7 CSS Problem



lazyserv
08-17-2010, 05:41 AM
Hi guys.. i have coded a website.

Now the website look just perfect in Firefox, but not in IE 6 & 7.

I know must use css hack or ie css fix to get the problem out.. but problem is i don't know which one i should start 1st?

maybe some css master here have a look at my code and tell me which code can do the fixing so my website can appear nice in IE 6,7 and 8?

please help me.. im still beginner in CSS :(

my website link

http://henshin.my/new/artwork
http://henshin.my/new/studio


* {
margin: 0px;
padding: 0px;
}
body, html {
background-color: #eceff1;
height: auto;
width: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
}
img {
border: 0;
}
a, a:hover, a:active, a:visited {
text-decoration: none;
}
#header {
background-color: #cccccc;
height: 15px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
}
#logo {
width: auto;
height: 80px;
text-align: center;
margin-top: 10px;
}
#container {
text-align: center;
margin: 90px auto 0px auto;
padding: 0px;
border: 0;
width: 1000px;
}
#sidebar {
float: left;
width: 190px;
text-align: left;
}
#content {
float: left;
width: 782px;
margin-left: 6px;
padding: 2px;
text-align: center;
}
#footer {
background-color: #000000;
height: 40px;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
}
/* Menu Styling */
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.pointer {
color: #000;
font-size: 18px;
}
.color a {
font-family: Verdana;
font-size: 15px;
color: #000000;
text-decoration: none;
margin: 5px;
}
/* Artwork Styling */
ul.box li {
width: 250px;
height: 110px;
}
ul.link {
width: 250px;
font-family: Century Gothic;
font-size: 14px;
color: #000000;
text-decoration: none;
}
ul.link li {
margin: -8px 30px 0px 0px;
}
.widget {
width: 782px;
padding-top: 10px;
text-align: center;
}
.widget a {
color: #222;
text-decoration: none;
}
.widget a:hover {
color: #009;
text-decoration: none;
}
.tabnav li {
display: inline;
list-style: none;
padding-left: 8px;
padding-right: 5px;
}
.tabnav li a {
text-decoration: none;
text-transform: capitalize;
color: #222;
padding: 5px 15px;
outline: none;
}
.tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a {
background: #dedbd1;
color: #222;
text-decoration: none;
}
.tabdiv {
margin-top: 2px;
padding: 5px;
}
.tabdiv li {
float: left;
list-style-type: none;
padding: 5px 3px 0px 3px;
}
.ui-tabs-hide {
display: none;
}
.imghover {
padding: 4px;
background-color: #ccc;
border: 1px solid #ddd;
}
.imghover:hover {
padding: 4px;
background-color: #eee;
border: 1px solid #666;
}

abduraooft
08-17-2010, 09:33 AM
#footer {
background-color:#000000;
bottom:0;
height:40px;
left:0;
position:fixed;
right:0;
} IE6 doesn't support fixed positions, though there's a clever fix for this, see http://www.cssplay.co.uk/layouts/fixed.html

Do you really need the fixed positions applied for header and footer?

lazyserv
08-17-2010, 11:53 AM
not really.. after i view my website in IE 6 i found alot of trouble..

i think i might restructure the background..

i will try make a new structure to fit the website if i found any error i will come back again.

MOD: please don't close this topic. Thank you.

effpeetee
08-17-2010, 04:13 PM
not really.. after i view my website in IE 6 i found alot of trouble..

i think i might restructure the background..

i will try make a new structure to fit the website if i found any error i will come back again.

MOD: please don't close this topic. Thank you.
Many useful references here. (http://www.exitfegs.co.uk/Sources.html)

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum