Dear all:
I have three servers #1, #2, and #3 for web site developing and testing.
It looked fine when I worked on #1 and #2, both on FireFox 2 and IE 6.
Here's the odd thing, when I tried to implement it on server #3, it only works properly on FF2. It looks terrible on IE6.
Here's the CSS code:
/* CSS Document */
a{text-decoration: none; color: #3C56FF;}
a:visited{color: #3C56FF;}
a:hover{text-decoration: underline;}
body{
margin: 0;
padding: 0;
font: small Verdana, Arial, Helvetica sans-serif;
color: #666666;
background-color: #CCCCCC;
}
h3{
margin-top: 0;
font-size: medium;
font-weight: bold;
padding-bottom: 0.25em;
border-bottom: 2px solid #FF9E28;
}
h4{
margin-top: 0;
font-size: small;
font-weight: bold;
padding-bottom: 0.25em;
border-bottom: 1px solid #FF9E28;
}
img{
border: none;
}
input{font: small Verdana, Arial, Helvetica, sans-serif;}
ul{
margin-top: 0;
}
li{
padding: 0.25em 0;
}
table{
width: 79%;
margin-bottom: 20px;
}
table.middle{
width: 50%;
}
table.narrow{
width: 30%;
}
textarea{font: small Verdana, Arial, Helvetica, sans-serif;}
th{
border: 1px solid gray;
border-width: 0 0 1px 1px;
text-align: left;
vertical-align: bottom;
padding: 0 0.5em;
}
select{font: small Verdana, Arial, Helvetica, sans-serif;}
#total{
padding: 0;
position: relative;
width: 980px;
margin: 5px auto;
background-color: #CCCCCC;
border: solid 1px #666666;
}
#header {
position: relative;
width: 100%;
height: 69px;
background-color: #FFFFFF;
padding: 3px 0;
}
#header a{
font: 32px Verdana, Arial, Helvetica, sans-serif;
color: #990000;
}
#search {
position: absolute;
top: 20px;
right: 25px;
height: 60px;
width: 210px;
}
#nav{
position: relative;
top: 1px;
height: 23px;
width: 100%;
background-color: #FFFF00;
padding: 3px 0;
}
#nav a{
vertical-align: middle;
border-left: 1em solid #3366CC;
border-bottom: 1px solid #3366CC;
padding-left: 6px;
margin-left: 3px;
}
#nav a:hover{
text-decoration: none;
border-left: 1em solid #FF9E28;
border-bottom: 1px solid #FF9E28;
padding-left: 6px;
}
#login {
position: absolute;
top: 2px;
right: 0px;
}
#main {
position: relative;
top: 2px;
width: 100%;
min-height: 950px;
background-color: #FFFFFF;
}
/*\*/
* html #main {
height: 950px;
}
/**/
#main img{
border: none;
float: left;
}
#main h2{
font: large sans-serif, Arial, Helvetica;
font-weight: bold;
}
#main td{
border-bottom: 1px dotted gray;
padding: 0.5em 0.5em;
}
#main .excerpt{color: black;}
#main .note{
color: #5C5C5C;
padding-bottom: 1em;
}
#menu {
float: right;
width: 20%;
height: 940px;
background-color: #FFFFFF;
}
#menu ul{
list-style: none;
margin: 0 8px 0 8px;
padding: 0;
border: none;
}
#menu li{
border-bottom: 1px solid #FFFFFF;
margin: 0;
padding: 0;
vertical-align: bottom;
}
#menu table{
width: 170px;
text-align: center;
}
#menu a:link, #menu a:visited{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #3C88FF;
border-right: 1px solid #3C88FF;
background-color: #3366CC;
color: #FFFFFF;
text-decoration: none;
}
#menu a:hover{
background-color: #FF9E28;
color: #FFFFFF;
text-decoration: none;
}
#userInfo{
position: relative;
width: 160px;
color: #FFFFFF;
background-color: #FF9E28;
margin: 0 0 10px 0;
padding: 5px;
text-align: center;
}
#footer {
position: relative;
top: 3px;
width:100%;
height: 23px;
text-align: center;
background-color: #FFFF00;
}
#round{
margin: 8px;
}
.button{
margin: 10px 0 0 10px;
}
.item{
float:left;
margin:5px;
}
.roundbox{
height: 1px;
overflow: hidden;
background-color: #FF9E28;
border-right: 5px solid #FF9E28;
border-left:5px solid #FF9E28;
}
.r1{
margin: 0 10px;
}
.r2{
margin: 0 7px;
}
.r3{
margin: 0 5px;
}
.r4{
margin: 0 4px;
}
.r5{
margin: 0 3px;
}
.r6{
margin: 0 2px;
}
.r7{
margin: 0 1px;
}
.content{
height: auto;
padding: 10px;
background-color: #FFFFFF;
}
.warning{
display: block;
background-color: red;
color: white;
text-align: center;
}
and the URL: site
Best regards.
Benson
For those of us without
For those of us without access to IE6, could you elaborate a little more on what's not displaying properly?
Yes, of course. 1. I
Yes, of course.
1. I defined the font size as "small" in body, but it seems to be showed as "medium".
body{
margin: 0;
padding: 0;
font: small Verdana, Arial, Helvetica sans-serif;
color: #666666;
background-color: #CCCCCC;
}
2. In order to make my main contents in the middle of browser, I set the margin as (5px middle). But it is showed on the left side when using IE6.
#total{
padding: 0;
position: relative;
width: 980px;
margin: 5px auto;
background-color: #CCCCCC;
border: solid 1px #666666;
}
Best regards.
Benson
This isn't a CSS problem,
This isn't a CSS problem, your in Quirks Mode most likely, look at your main page in a decent editor and see what if any characters you have before the DTD.
Here I've checked for
Here I've checked for you.
<!DOCTYPE html PUBLIC
You've saved/transfered the file with some form of encoding, re-save the files plain ansi
Is it the mysterious BOM?
Is it the mysterious BOM?
It is but three times
It is but three times repeated :? perhaps it's the utf-32 big indian :shrug:
Hugo wrote:It is but three
It is but three times repeated :?
:shrug:
wolfcry911 wrote:Hugo
Hugo wrote:well, it is the third server...It is but three times repeated :?
:shrug:
Good point! missed that
It looks CORRECT on each
It looks CORRECT on each server after I re-saved files, I guess this is the weird BOM problem you guys mentioned. It takes me two days to solve.
Thank you all and your time for doing so great help!!
Best regards.
Benson
BOM = Byte Order Mark
BOM = Byte Order Mark