WebテンプレートのCSSに問題があります。
これは私のHTMLファイルです
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Green Pasture by FCT</title>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Abel|Satisfy' rel='stylesheet' type='text/css' />
<link href="/EquityMKC/css/default.css" rel="stylesheet" type="text/css" media="all" />
<!--[if IE 6]>
<link href="default_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script type="text/javascript" src="/EquityMKC/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/EquityMKC/jquery/jquery.fixedMenu.js"></script>
<script>
$('document').ready(function(){
$('.menu').fixedMenu();
});
</script>
</head>
<body>
<div id="header-wrapper">
<div id="header">
<div id="logo">
<h1><a href="#">Equity Group</a></h1>
</div>
<div id="menu" class="menu">
<ul>
<li class="current_page_item"><a href="/EquityMKC/Welcome.jsp" accesskey="1" title="">Welcome</a></li>
<li><a href="/EquityMKC/Publish.jsp" accesskey="2" title="">Publish</a></li>
<li><a href="#" accesskey="3" title="">Trading<span class="arrow"></span></a>
<ul>
<li><a href="/EquityMKC/Buy.jsp">BUY</a></li>
<li><a href="/EquityMKC/Sell.jsp">SELL</a></li>
</ul>
</li>
<li><a href="/EquityMKC/Portfolio.jsp" accesskey="4" title="">Portfolio</a></li>
<li><a href="#" accesskey="5" title="">Blotter<span class="arrow"></span></a>
<ul>
<li><a href="/EquityMKC/Order.jsp">Order</a></li>
<li><a href="/EquityMKC/Trade.jsp">Trade</a></li>
</ul>
</li>
<li><a href="/EquityMKC/About.jsp" accesskey="5" title="">About</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
そして私のCSSファイルは
body {
margin: 0px 0px 0px 0px;
padding: 0;
background: #2B2B2B;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #8F8F8F;
}
h1, h2, h3 {
margin: 0;
padding: 0;
font-weight: 200;
color: #222222;
}
h2 {
font-size: 3em;
}
p, ol, ul {
margin-top: 0px;
padding: 0px;
}
p, ol {
line-height: 180%;
}
strong {
}
a {
color: #5C5539;
}
a:hover {
text-decoration: none;
}
a img {
border: none;
}
img.border {
}
img.alignleft {
float: left;
}
img.alignright {
float: right;
}
img.aligncenter {
margin: 0px auto;
}
hr {
display: none;
}
/** WRAPPER */
#wrapper {
overflow: hidden;
background: #FFFFFF;
}
.container {
width: 1200px;
margin: 0px auto;
}
.clearfix {
clear: both;
}
/* Header */
#header-wrapper {
overflow: hidden;
height: 150px;
}
#header {
width: 1200px;
height: 150px;
margin: 0 auto;
padding: 0px 0px;
}
/* Logo */
#logo {
float: left;
width: 310px;
height: 150px;
padding: 0px 0px 0px 40px;
}
#logo h1 {
padding: 50px 0px 0px 0px;
letter-spacing: -2px;
font-size: 3.6em;
text-transform: uppercase;
}
#logo h1 a {
text-decoration: none;
color: #FFFFFF;
}
/* Menu */
#menu {
float: right;
width: 810px;
height: 80px;
padding: 20px 40px 0px 0px;
}
#menu ul {
float: right;
margin: 0;
padding: 40px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
}
#menu a {
display: block;
margin-left: 1px;
padding: 7px 20px 7px 20px;
letter-spacing: 1px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-size: 16px;
font-weight: 300;
color: #FFFFFF;
}
#menu a:hover, #menu .current_page_item a {
text-decoration: none;
background: #1B5902;
border-radius: 5px;
color: #FFFFFF;
}
/* Page */
#page-wrapper {
overflow: hidden;
}
#page {
overflow: hidden;
width: 1120px;
margin: 0px auto;
padding: 50px 40px;
color: #8F8F8F;
border-top: 1px solid #A1A1A1;
}
/** CONTENT */
#wide-content {
}
#wide-content h2 {
padding: 0px 0px 20px 0px;
letter-spacing: -1px;
font-size: 36px;
color: #222222;
}
/** CONTENT */
#content {
float: right;
width: 800px;
padding: 0px 0px 0px 0px;
}
#content h2 {
padding: 0px 0px 20px 0px;
letter-spacing: -1px;
font-size: 36px;
color: #222222;
}
#content .subtitle {
padding: 0px 0px 30px 0px;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-size: 18px;
color: #81AFC5;
}
/** SIDEBAR */
#sidebar {
float: left;
width: 290px;
padding: 0px 0px 20px 0px;
}
#sidebar h2 {
padding: 0px 0px 30px 0px;
letter-spacing: -1px;
font-size: 2em;
}
/* Footer */
#footer {
margin: 0 auto;
padding: 50px 0px 50px 0px;
}
#footer p {
text-align: center;
font-size: 12px;
color: #757575;
}
#footer a {
color: #757575;
}
/* Three Column Footer Content */
#footer-bg {
overflow: hidden;
padding: 40px 0px;
background:#E5E0DD url(images/main-bsg.png) repeat;
}
#footer-content {
color: #67C8E3;
}
#footer-content h2 {
margin: 0px;
padding: 0px 0px 30px 0px;
letter-spacing: -1px;
text-shadow: 1px 1px 0px #FFFFFF;
text-transform: uppercase;
font-size: 20px;
font-weight: 200;
color: #93776E;
}
#footer-content a {
}
#footer-content a:hover {
text-decoration: underline;
}
#column1 {
float: left;
width: 280px;
margin-right: 30px;
}
#column1 p {
line-height: 1;
}
#column2 {
float: left;
width: 280px;
margin-right: 30px;
}
#column3 {
float: left;
width: 280px;
}
#column4 {
float: right;
width: 260px;
}
/* Banner Style */
#banner-wrapper {
}
#banner {
overflow: hidden;
width: 1160px;
margin: 20px auto 50px auto;
}
#banner .img-border {
height: 350px;
border: 20px solid #FFFFFF;
}
/* Button Style */
.button-style {
display: inline-block;
margin-top: 30px;
padding: 7px 30px;
background: #36332E;
border-radius: 5px;
}
.button-style a {
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-weight: 300;
font-size: 16px;
color: #FFFFFF;
}
/* List Style 1 */
ul.style1 {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.style1 li {
padding: 25px 0px 15px 0px;
border-top: 1px solid #A1A1A1;
}
ul.style1 a {
text-decoration: none;
color: #FFFFFF;
}
ul.style1 a:hover {
text-decoration: underline;
color: #6B6B6B;
}
ul.style1 .first {
padding-top: 0px;
border-top: none;
}
/** LIST STYLE 3 */
ul.style3 {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.style3 li {
padding: 10px 0px 10px 0px;
border-top: 1px solid #A1A1A1;
}
ul.style3 a {
text-decoration: none;
color: #949494;
}
ul.style3 a:hover {
text-decoration: underline;
}
ul.style3 .first {
padding-top: 0px;
border-top: none;
box-shadow: none;
}
ul.style3 .date {
width: 87px;
background-color: #36332E;
margin-top: 20px;
height: 24px;
line-height: 24px;
text-align: center;
font-size: 12px;
color: #FFFFFF;
}
ul.style3 .first .date
{
margin-top: 0px;
}
/* Recent News */
#recent-news {
overflow: hidden;
width: 1120px;
margin: 0px auto;
padding: 50px 40px;
background: #36332E;
color: #8C8C8C;
}
#recent-news h2 {
padding: 0px 0px 20px 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 2.5em;
color: #EDEDED;
}
#recent-news .date {
padding: 0px 0px 10px 0px;
font-weight: bold;
font-style: normal;
color: #E3E3E3;
}
#recent-news p {
font-style: italic;
}
#recent-news a {
font-style: normal;
color: #B8B8B8;
}
#recent-news #rbox1 {
float: left;
width: 250px;
margin-right: 40px;
}
#recent-news #rbox2 {
float: left;
width: 250px;
margin-right: 40px;
}
#recent-news #rbox3 {
float: left;
width: 250px;
}
#recent-news #rbox4 {
float: right;
width: 250px;
}
/* Button Style */
.button-style1 {
margin-top: 30px;
}
.button-style1 a {
padding: 10px 25px;
background: #EBB462;
border-radius: 5px;
text-decoration: none;
text-shadow: 1px 1px 0px #FCE3BB;
color: #36332E !important;
}
.menu{
font: 13px/27px Arial,sans-serif;
color:#3366CC;
height:20px;
}
.menu a:hover{
background-color:#e4ebf8;
color:black;
}
.menu a {
text-decoration: none;
padding: 6px 8px 7px;
color:white;
outline: lime;
}
.menu ul{
list-style: none;
margin:0;
padding:0 0 0 10px;
}
.menu ul li{
padding:0;
float:left;
}
.menu ul li ul li{
padding:0;
float:none;
margin: 0 0 0 0px;
width:60%;
}
.menu ul li ul{
position: absolute;
display:none;
padding: 0px ;
}
.active ul{
display:block !important;
}
.active a{
background-color: black;
border: 1px solid #C3D1EC;
border-bottom: 0;
box-shadow: 0 -1px 5px #CCCCCC;
display: block;
height: 15px;
padding: 0 8px 0 8px;
position: relative;
z-index: 1;
color:#3366CC;
}
.active a:hover{
background-color:white;
}
.active ul a:hover{
background-color:#e4ebf8;
}
.active ul a{
border: 0 !important;
box-shadow: 0 0 0 #CCCCCC;
border:0;
width: 100%;
}
.arrow {
border-color: white transparent transparent;
border-style: solid dashed dashed;
margin-left: 5px;
position: relative;
top: 10px;
}
これはWebページのスナップショットです
トレーディングメニューをクリックすると、間にスペースがあり、買いと売りが表示されます。スペースを削除したい。