10 replies [Last post]
beson
beson's picture
Offline
newbie
Taiwan
Last seen: 13 years 20 weeks ago
Taiwan
Timezone: GMT+8
Joined: 2007-03-26
Posts: 3
Points: 0

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. Sad

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 21 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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?

Verschwindende wrote:
  • CSS doesn't make pies

beson
beson's picture
Offline
newbie
Taiwan
Last seen: 13 years 20 weeks ago
Taiwan
Timezone: GMT+8
Joined: 2007-03-26
Posts: 3
Points: 0

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 21 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Is it the mysterious BOM?

Is it the mysterious BOM?

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It is but three times

It is but three times repeated :? perhaps it's the utf-32 big indian :shrug:

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 24 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Hugo wrote:It is but three

Hugo wrote:
It is but three times repeated :?
well, it is the third server...
:shrug:

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

wolfcry911 wrote:Hugo

wolfcry911 wrote:
Hugo wrote:
It is but three times repeated :?
well, it is the third server...
:shrug:

Good point! missed that Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

beson
beson's picture
Offline
newbie
Taiwan
Last seen: 13 years 20 weeks ago
Taiwan
Timezone: GMT+8
Joined: 2007-03-26
Posts: 3
Points: 0

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. Sad

Thank you all and your time for doing so great help!!

Best regards.
Benson

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 21 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

BOM = Byte Order Mark

BOM = Byte Order Mark Wink

Verschwindende wrote:
  • CSS doesn't make pies