What happened to my site? Pls. help have a look. | CSS Creator

5 replies [Last post]

Sun, 2011-03-20 10:49

dodong

Offline

newbie

Last seen: 12 years 1 week ago

Timezone: GMT+8

Joined: 2011-03-20

Posts: 3

Points: 4

Hello everybody I need your help,

I'm new in website design and I don't know where to fix this problem.

Here's what I did:

I created the design using Dreamweaver in 2 languages. I created another sub folder for Chinese language. I tried to preview the design in Dreamweaver and I found no problem.

I uploaded my files using Filezilla then check online and found they're not the same view in Explorer, Firefox, Google Chrome & Safari.

Pls. help me what to do. Here's the site.

Any input is highly appreciated.

Thanks in Advance.

Tags:

Sun, 2011-03-20 22:58

#1

Tony

Tony's picture

Offline

Moderator

Brisbane

Last seen: 1 week 1 day ago

Brisbane

Timezone: GMT+10

Joined: 2003-03-12

Posts: 5344

Points: 2965

Hi dodong, It's quite

Hi dodong,
It's quite normally to experience differences in browsers and versions of browsers.
First step to bring the differences closer together is to validate.
You have an error in your CSS on line 255.

Mon, 2011-03-21 02:38

#2

dodong

Offline

newbie

Last seen: 12 years 1 week ago

Timezone: GMT+8

Joined: 2011-03-20

Posts: 3

Points: 4

What happened to my site? Pls. help have a look.

I have no idea that there is a validator, I will find out.

I have a follow-up question:

The flags button English & Chinese are not the same placement when viewed on big screen monitor, my monitor is 17" and it looks ok but when viewed on 19" or wide screen the flags are not in the correct placement.

How to make these buttons stays in the same location either small or wide monitor?

Here's the site.

Mon, 2011-03-21 03:21

#3

Tyssen

Tyssen's picture

Offline

Moderator

Brisbane

Last seen: 8 years 24 weeks ago

Brisbane

Timezone: GMT+10

Joined: 2004-05-01

Posts: 8201

Points: 1386

Don't use position:absolute

Use floats instead.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Mon, 2011-03-21 05:11

#4

dodong

Offline

newbie

Last seen: 12 years 1 week ago

Timezone: GMT+8

Joined: 2011-03-20

Posts: 3

Points: 4

html & css code

Here's the code of html & css:

CSS CODE:

body{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#fff;
	background-color:#000;
}
 
body#home{
 
}
 
#homep{
background-color:#200100;
}
 
#wrap{
	width:980px;
	margin:auto;
}
 
#top{
	height:120px;
	padding-top:0px;
	text-align:center;
}
 
#home1, #home2{
	margin-bottom:-2px;
	height:490px;
	background:url(../images/1.jpg) center 328px no-repeat;
	cursor:pointer;
	width:615px;
	margin-left:182px;
	padding-top: 0px;
}
 
#home2{
	background:url(../images/1.jpg) center 145px no-repeat;
}
 
#item{
	padding:20px 0;
	text-align:center;
	background-color:#4E0000;
}
 
#item ul li{
	display:inline;
	padding-right:15px;
}
 
#footerh{
	text-align:center;
	color:#707070;
	padding-top:30px;
}
 
/*** sub ***/
 
#nn{
	padding-top:2px;
	height:27px;
	overflow:hidden;
	padding-left:160px;
}
 
.nav,#home_hover , #about_hover , #products_hover , #gallery_hover , #services_hover , #contact_hover{
	background:url(../images/nav.jpg);
	padding-top:2px;
	height:27px;
	overflow:hidden;
	padding-left:160px;
}
 
#home_hover , .home_hover{
	background:url(../images/nav.jpg) left -30px;	
}
 
#about_hover , .about_hover{
	background:url(../images/nav.jpg) left -60px;
}
 
#products_hover , .products_hover{
	background:url(../images/nav.jpg) left -90px;
}
 
#gallery_hover , .gallery_hover{
	background:url(../images/nav.jpg) left -120px;	
}
 
#services_hover , .services_hover{
	background:url(../images/nav.jpg) left -150px;	
}
 
#contact_hover , .contact_hover{
	background:url(../images/nav.jpg) left -180px;	
}
 
#sub{
	background:url(../images/bg_sub.jpg) left top no-repeat;
	color:#000;
	padding-left:350px;
	padding-top:60px;
	padding-right:80px;
	height:600px;
}
 
#nav li{
	float:left;
	width:110px;
	list-style:none;
	height:27px;
	text-align:center;
	cursor:pointer;
}
 
#sub2,#sub21{
	background-color:#393939;
	padding:20px;
}
 
#sub21{
	padding:20px 0;
	text-align:center;
}
 
#sub2 h3{
	text-align:center;
	font-weight:normal;
	line-height:25px;
}
 
#products{
	text-align:center;
}
 
 
#products li{
	display:inline;
	padding-left:25px;
}
 
.yellow{
	color:#ffa800;
}
 
#sub3{
 
}
 
#contacts{
	background:url(../images/bg_contacts.jpg) left top no-repeat;
	height:660px;
	color:#000;
	padding-top:90px;
}
 
#address , #cform{
	float:left;
}
 
#address{
	width:330px;
	padding-left:90px;
	color:#FFF;
}
 
#address td{
	padding:8px 5px;
}
 
#address a{
	color:#FFF;
	text-decoration:none;
}
 
#cform{
	padding-left:65px;
	width:350px;
	padding-top:10px;
}
 
#cform form{
	padding-top:20px;
}
 
#contacts p{
	margin:0;
	padding:0;
	margin-top:1px;
	font-weight:bold;
}
 
.tt, .tt2 , .tt3{
	width:280px;
	margin-bottom:19px;
	border:none;
	background:none;
}
 
.tt2 , .tt3{
	margin-bottom:16px;
}
 
#contacts textarea{
	width:342px;
	border:none;
	overflow:auto;
	height:80px;
	background:none;
}
 
#ss{
	text-align:center;
}
 
#ss input{
	background:url(../images/btn_submit.jpg) left top no-repeat;
	border:none;
	width:79px;
	height:23px;
	cursor:pointer;
	margin-top:10px;
}
 
.req{
	color:#F00;
}
 
#mopSlider{
	background-color:#333;
	padding-bottom:10px;
	font-weight:bold;
}
 
#slider{
	width:800px;
}
 
#slider1{
	clear:both;
}
 
#loader11{
	overflow:hidden;
}
 
#loader11 div{
	display:inline;
	float:left;
}
 
#slider1 div{
	width:250px;
	height:230px;
}
 
div{
 
}
 
p{
 
}
 
#slider1 p{
	visibility:hidden;
	line-height:14px;
	margin:0;
	padding:0;
}
 
#top_img, #btm_img{
	overflow:hidden;
	margin-left:180px;
	padding-bottom:30px;
	padding-top:30px;
	width:800px;
}
 
#top_img li, #btm_img li{
	float:left;
	list-style:none;
	font-weight:bold;
}
 
#top_img a, #btm_img a{
	color:#FFF;
}
 
#c_footer{
	clear:both;
	text-align:center;
	padding-top:150px;
	color:#666;
}
 
#s_footer{
	margin-top:-20px;
	text-align:center;
	color:#666;
}
 
#a_footer{
	padding-top:70px;
	color:#666;
}
 
#pp{
	background-color:#333;
	padding:20px;
	font-weight:bold;
	text-align:center;
}
 
#tbl_pp{
	text-align:left;
}
 
#tbl_pp table{
	margin-left:20px;
}
 
#tbl_pp table td{
	padding:5px;
}
 
#home,#home2{
	text-align:center;
}

Here's the HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上海印花</title>
<link rel="stylesheet" type="text/css" href="chn/css/defaults.css"/>
<link rel="stylesheet" type="text/css" href="chn/css/styles.css"/>
 
<script type="text/javascript" src="chn/js/jquery.js"></script>
<script type="text/javascript" src="chn/js/custom.js"></script>
<style type="text/css">
<!--
body {
	background-color: #000000;
}
.style1 {color: #666666}
#Layer1 {
	position:absolute;
	left:916px;
	top:99px;
	width:58px;
	height:18;
	z-index:1;
	background-color: #000000;
}
.style4 {color: #FF9933}
.style5 {color: #FFFFFF}
-->
</style>
</head>
 
<body>
 
<div id="Layer1"> <em><span class="style4"><a href="contact.html"></a></span></em> <em><span class="style4"><a href="index.html"></a></span></em><span class="style4"><span class="style5"><a href="chn/contact.html">中文 </a></span></span><a href="chn/contact.html"><em><span class="style4"><img src="images/cn flag.jpeg" width="24" height="15" border="0" /> </span></em></a></div>
<div id="wrap">
	<div id="header">
  <img src="images/header.png" alt="Header" width="980" height="125" border="0" /></div>
 <div class="contact_hover" id="nn">
<ul id="nav">
            <li id="home">&nbsp;</li>
            <li id="about">&nbsp;</li>
            <li id="products">&nbsp;</li>
            <li id="gallery">&nbsp;</li>
            <li id="services">&nbsp;</li>
            <li id="contact"class="sel">&nbsp;</li>
    </ul>
  </div>
 
  <div id="sub2">
 
    <h3>&nbsp;</h3>
    <h3>&nbsp;</h3>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <h3> 
      <table class="center" align="center" height="409" width="472">
      <tbody><tr>
      		<td align="right"><div align="right"><span class="style99"><strong>Contact Us:</strong></span></div></td>
      		<td width="379"><div align="left"></div></td>
      </tr>
      	<tr>
        	<td align="right" width="168"><div class="style99" align="right">        	  
        	  <div align="right"><span class="style10">Company Name:</span></div>
        	</div></td>
            <td><div class="style82" align="left">
              <h4 class="style11">Shanghai Printshop Co., Ltd.</h4>
            </div></td>
        </tr>
        <tr>
        	<td align="right" valign="top"><div class="style99" align="right">        	  
        	  <div align="right"><span class="style10">Street Address:</span></div>
        	</div></td>
            <td><div class="style82" align="left">
              <h4 class="style11">No.  52, Bldg. 62, Rm. 202, Sui Hua Road</h4>
            </div></td>
        </tr>
        <tr>
        	<td align="right"><div class="style99" align="right">        	  
        	  <div align="right"><span class="style10">City:</span></div>
        	</div></td>
            <td><div class="style82" align="left">
              <h4 class="style11">Shanghai</h4>
            </div></td>
        </tr>
        <tr>
        	<td align="right"><div class="style99" align="right">        	  
        	  <div align="right"><span class="style10">Country:</span></div>
        	</div></td>
            <td><div class="style82" align="left">
              <h4 class="style11">China</h4>
            </div></td>
        </tr>
        <tr>
        	<td align="right"><div class="style99" align="right">        	  
        	  <div align="right"><span class="style10">Zip Code:</span></div>
        	</div></td>
            <td><div class="style82" align="left">
              <h4>200941</h4>
            </div></td>
        </tr>
        <tr>
        	<td align="right"><div class="style99" align="right">        	  
        	  <div align="right"><span class="style10">Telephone:</span></div>
        	</div></td>
            <td><div class="style82" align="left">
              <h4 class="style11">(086) 21-66762481</h4>
            </div></td>
        </tr>
        <tr>
        	<td align="right"><div class="style99" align="right">        	  
        	  <div align="right"><span class="style10">Fax:</span></div>
        	</div></td>
            <td><div class="style82" align="left">
              <h4 class="style11">(086) 21-56497985</h4>
            </div></td>
        </tr>        
        <tr>
        	<td align="right"><div class="style99" align="right">        	  
        	  <div align="right"><span class="style10">Website:</span></div>
        	</div></td>
            <td><div class="style82" align="left">
              <h4><a href="http://www.shanghaiprintshop.com/" class="style11">www.shanghaiprintshop.com</a></h4>
            </div></td>
        </tr>
		<tr>
          <td align="right"><div class="style99" align="right">            
            <div align="right"><span class="style10">Email:</span></div>
          </div></td>
          <td><div class="style82" align="left">
            <h4><a href="mailto:[email protected]" class="style11">rene@shanghaiprintshop.com</a></h4>
          </div>
          <div align="center"></div></td>
        </tr>        
    </tbody></table>
    </h3>
    <h3>&nbsp;</h3>
    <h3>&nbsp;</h3>
    <div id="products">
      <div id="a_footer">
   <p>&nbsp;</p>
   <p><span class="style1">2010  © 版权归上海蔓禾蕊服饰有限公司所有，不得转载</span></p>
      </div>        
    </div>
 
  </div>
 
 
</div>
</body>
</html>

Mon, 2011-03-21 06:39

#5

Tyssen

Tyssen's picture

Offline

Moderator

Brisbane

Last seen: 8 years 24 weeks ago

Brisbane

Timezone: GMT+10

Joined: 2004-05-01

Posts: 8201

Points: 1386

Is there a question?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference