Question

求CSS高手来看看我做得网页为什么多出了一大片空白啊？

按照网上的模板修改制作了一个网站，在我电脑上做出来是这个效果。
可是我发给别人看，别人打开就变成了这个效果？多了这么一大片空白，怎么解决啊？求解答。附上开头一部分style.css。求指导怎么修改

我是新手，请各位大神尽量说通俗点，
body{
background-color:#5B5F53;
font-family:Arial, Helvetica, sans-serif;
padding:0;
font-size:12px;
margin:0px auto auto auto;
color:#000000;
}
a{
color:#f8981d;
}
.clear{
clear:both;
}
p{
padding:5px 0 5px 0;
margin:0px;
text-align:justify;
line-height:19px;
}
p.details{
padding:5px 15px 5px 15px;
font-size:11px;
}
p.details_cart{
clear:both;
padding:25px 30px 5px 0px;
font-size:11px;
font-style:italic;
}
p.more_details{
padding:25px 20px 0px 20px;
font-size:11px;
}#wrap{
width:900px;
height: auto;
margin:auto;
background-color:#FFFFFF;
}
.header{
width:900px;
height:181px;
background:url(images/header.jpg) no-repeat center;
}
.logo{
padding:30px 0 0 20px;
}
/*-----------------------------menu-------------------*/
#menu{
width:628px;
height:30px;
float:right;
padding:43px 0 0 10px;
}
#menu ul{
display:block;
list-style:none;
padding:9px 0 0 10px;
margin:0px;
}
#menu ul li{
display:inline;
padding:0px;
margin:0px;
height:20px;
}
#menu ul li a{
height:27px;
display:block;
padding:0px 10px 0 10px;
margin:0 4px 0 4px;
_margin:0 2px 0 2px;
float:left;
text-decoration:none;
text-align:center;
color:#fff;
font-size:13px;
line-height:25px;
}
#menu ul li.selected a{
height:27px;
display:block;
padding:0px 10px 0 10px;
margin:0 5px 0 5px;
float:left;
text-decoration:none;
text-align:center;
color:#c4dfa6;
font-size:13px;
line-height:25px;
}
#menu ul li a:hover{
color:#c4dfa6;
}
/*----------------crumb_nav------------------*/
.crumb_nav{
padding:5px 0 10px 0px;
}
.crumb_nav a{
color:#990000;
}
span.red{
color:#990000;
}
.price{
font-size:14px;
padding:0 0 0 15px;
margin:2px 0 5px 0;
}
span.colors{
padding:2px 2px 0 2px;
}
/*------------------------------------center content--------------------*/
.center_content{
width:900px;
padding:0px 0 0 0;
background:url(images/center_bg.gif) repeat-y center;
}
.left_content{
width:490px;
float:left;
padding:20px 0 20px 20px;
}
.right_content{
width:370px;
float:left;
padding:20px 0 20px 20px;
}





Answer 1

兼容性问题，做好页面后要在各个浏览器上测试的，建议你安装一个ietest，这个可以测试所有的ie浏览器，我的电脑上就装了好几个浏览器，包括ietest，火狐，谷歌，360，一般这几个能搞定，你的页面也就不怎么错位了。

你可以一块一块的测试一下，到网上查找一下兼容性问题解决的方法（网上有很多），像浮动问题，用过之后就要清除浮动等等，对照方法八自己的错误修改下就好了。

Answer 2

代码那么多，要修改有点困难（我看的都头晕了），建议有问题的那个区块先拿出来，然后把有问题的区块一个个删除拿来测试，你做网站的，网站一块块的做好都是要拿多浏览器测试的！

我现在做网站页面设计做好一个导航都要多浏览器测试看看兼不兼容，你这个网站都做好了，才发现不兼容，检查的过程本身就是十分麻烦的，如果你自身的水平不怎么样，要修改就更困难了，何况你是修改别人的代码！

Answer 3

好多代码，大致看了下，根据你的menu顶部padding是43，自身搞30，可以判断头部应该只有73px的高度。
可是你还定义了
.header{
width:900px;
height:181px;

181的高度，应该是多出来了100多像素，看你的图空白和头部比例，应该就是header这个181px定义多了。是不是定义81px，结果前面多了个1？
你试试把181px改成80px试试看效果。

Answer 4

可能是浏览器不兼容

一般把做好的网页复制给人都会有点问题！（没装环境的原因吧）

最好是右键你做好的网页 保存 在打开肯能会好点

Answer 5

能不能把你的这个页面代码也贴出来，有结构才好让别人分析呀，总不能让别人去猜你的代码吧。希望下次请求帮助的时候注意。