5 replies [Last post]
dodong
dodong's picture
Offline
newbie
Last seen: 3 years 18 weeks 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.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 10 hours 56 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5085
Points: 2666

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.

dodong
dodong's picture
Offline
newbie
Last seen: 3 years 18 weeks 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.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 49 weeks 2 days 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

dodong
dodong's picture
Offline
newbie
Last seen: 3 years 18 weeks 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:rene@shanghaiprintshop.com" 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>

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 49 weeks 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Is there a question?

Quest

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