0
Firefox 3.0.9에서 내 사이트에서 작업 중이며 (CSS가있는 초록색입니다) 지금까지는 공정하게 보입니다. 그러나 나는 아래로 내려 가고있는 것처럼 보이는 정상에 떠있는 수평의 nav 바를 가지고있다. 다음은 지금까지 시도한 내용입니다.IE 7이 내 가로 방향 탐색 표시 줄을 이중 선으로 바꾸고 있습니다.
1) 여백을 조정하고 여백을 0으로 설정하고 배경 이미지의 너비를 변경했습니다.
2) IE7 폴더를 만들고 다른 스타일 시트로 브라우저를 지정하려고했습니다. 효과가 없습니다.
3) IE7.js를 사용하여 문제를 해결하려고했으나 효과가 없습니다.
IE가 나를 힘들게합니다! 이견있는 사람? 여기 내 CSS & HTML (웃지 마 ;-))
고마워!
/
--- 내 CSS ---이#body {
margin: 0px 0px 20px 0px;
text-align: center;
background: #450000 url(images/greenstrip.jpg) repeat-x right top;
}
#maincontainer {
width: 720px;
border-width: 8px;
border-color: #fff;
border-style: solid;
position: absolute;
margin-left: 50%;
left: -360px;
margin-right: auto;
}
#box p {
position: absolute;
color: #fffceb;
width: 450px;
margin-top: 275px;
margin-left: 16px;
background: #373635;
font-size: medium;
font-family: "arial rounded mt bold", "times roman";
text-align: left;
line-height: 1.5em;
padding-left:7px;
padding-right:7px;
padding-bottom:7px;
border-style:solid;
border-color:#bec783;
border-width: 3px;
}
#lowerbox p {
position: absolute;
color: #fffceb;
width: 450px;
background: #373635;
font-size: medium;
font-family: "arial rounded mt bold", "times roman";
text-align: center;
line-height: 1.5em;
padding-left:7px;
padding-right:7px;
padding-bottom:7px;
border-style:solid;
border-color:#bec783;
border-width: 3px;
width: 450px;
margin-top: 433px;
margin-left: 16px;
}
#featured p {
position: absolute;
color: #000;
width: 270px;
margin-top: 825px;
margin-left: 128px;
background: none;
font-size: small;
font-family: "arial rounded mt bold", "times roman";
text-align: center;
line-height: 1.5em;
}
#customize p {
position: absolute;
color: #000;
width: 270px;
margin-top: 825px;
margin-left: 420px;
background: none;
font-size: small;
font-family: "arial rounded mt bold", "times roman";
text-align: center;
line-height: 1.5em;
}
.name {
font-weight: bold;
font-style: italic;
color: #bec783;
}
ul {
margin: 0px;
width: 680px;
line-height: 0em;
list-style: none;
font-size: medium;
font-family: "arial rounded mt bold", "times roman";
float: left;
background: url(images/button.gif);
}
ul a {
display: block;
padding: 0 1.2em;
line-height: 2.2em;
text-decoration: none;
color: #fff;
float: left;
margin-left: 6px;
margin-right: 0;
}
ul li {
float: left;
width: auto;
}
ul a:hover {
color:#f26214;
}
ul a:visited {
text-decoration: none;
}
#textpad ul {
position:absolute;
width:100px;
margin-top: 335px;
margin-left: 481px;
background: none;
text-decoration: none;
}
.promise a {
display: block;
color:#000;
line-height: 1em;
font-size: 30px;
font-family: "freestyle script";
width:150px;
}
.promise a:visited {
text-decoration: none;
}
#fet a:link, #fet a:visited {
text-decoration:none;
color: #000;
}
#fet a:hover {
color:#f26214;
}
<!---HTML--->
<!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>
<title>Core 4 Innovative: Website Solutions For Your Small Business</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content=" core 4,web,webpage developer,design,web designer, freelance,low cost" />
<meta name="robots" content="index,follow" />
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body id="body">
<div id="maincontainer">
<table id="Table_01" width="720" height="961" border="0" cellpadding="0" cellspacing="0">
<ul id="nav">
<li><a href="http://www.core4innovative.com/home.html">Home</a></li>
<li><a href="http://www.core4innovative.com/about/about.html">About Us</a></li>
<li><a href="http://www.core4innovative.com/process/our_process.html">Our Process</a></li>
<li><a href="http://www.core4innovative.com/services/services.html">Our Services</a></li>
<li><a href="http://www.core4innovative.com/contact/contactus.aspx">Contact Us</a></li>
</ul>
<div id="textpad">
<ul>
<li class="promise"><a href="#">Affordable Web Hosting Starting at $9.99 per month!<a></li>
</ul>
<div id="box">
<p><span class="name">Core 4 Innovative</span> puts your online success within reach. Using our affordable
website solutions, unique development process and standardized
methods for design you can be sure to recieve a customized product that adds value to your business!</p>
</div>
<div id="lowerbox">
<p><span class="name">We Serve Every Major Industry:</span></br>
Restuarants • Real Estate • Insurance • Entertainment • Apparel • Automotive • Energy • Professional Services</p>
</div>
<div id="featured">
<p><span id="fet"><a href="http://www.core4innovative.com/portfolio/portfolio.html" alt="our featured client">Our Featured Client</a></span></p>
</div>
<div id="customize">
<p>Customize Your website</p>
</div>
<tr>
<td colspan="3">
<img src="images/top.jpg" width="720" height="12" alt=""></td>
</tr>
<tr>
<td>
<img src="images/logo.jpg" width="258" height="137" alt=""></td>
<td colspan="2">
<img src="images/apple_graphic.jpg" width="462" height="137" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/topdivider.jpg" width="720" height="48" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/topdivider-06.jpg" width="502" height="3" alt=""></td>
<td rowspan="2">
<img src="images/notepad.jpg" width="218" height="305" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/getaquotebox.jpg" width="502" height="302" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/roundboxes.jpg" width="720" height="370" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/footer.jpg" width="720" height="88" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="258" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="244" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="218" height="1" alt=""></td>
</tr>
</table>
</div>
</body>
</html>
더 많은 사람들이 볼 수 있도록 "css"및 "html"태그를 추가 할 수 있습니다. – Alconja
... 좀 더 간결한 코드를 위해 '짧은 핸드 선택기'를 연구하고 싶을 수 있습니다. – alex