1
Ektron CMSのテンプレートがロックされているためにページcssを使用することを余儀なくされましたが、私のh3.subheadが3つの列すべての上部に揃っていない問題を解決しようとしています。 Chromeでは、col1とcol3に不要な余分なスペースがあります。 IEでは、3つの列すべてに余分なスペースがあります。修正する方法がわからないここでスペーシング/パディングの問題を修正するにはどうすればよいですか？
* {
padding: 0;
margin: 0;
}
* a {
text-decoration: underline;
}
* a:hover {
text-decoration: none;
}
#sidebar {
width: 20%;
float: right;
padding: 15px 30px 5px 5px;
}
#left {
padding-left: 25px;
float: left;
width: 70%;
}
.clear {
clear: both;
}
#sidebar h2 {
display: block;
padding: 5px;
border-bottom: solid 1px #808184;
text-transform: uppercase;
color: #158C59;
}
#sidebar ul {
list-style: none;
/*margin-bottom:15px;*/
}
#sidebar li {
display: block;
border-bottom: solid 1px #f2eddc;
line-height: 200%;
}
h3.subhead {
font-size: 12px;
text-transform: uppercase;
color: #fff;
display: block;
padding: 5px 0 5px 5px;
background: #158c59;
}
/*.columns {padding:0 8px 0 8px;}*/
.col1 {
width: 30%;
float: left;
}
.col3 {
width: 30%;
float: right;
}
.col2 {
margin: 0 32% 0 32%;
}
.clear2 {
width: 590px;
clear: left;
float: right;
color: #fff!important;
}
.columns div {
background: #f2eddc;
height: 240px;
}
.columns div p {
padding: 5px;
}
.columns h3 {
align: top;
top: 0px;
}
#subnav {
padding: 9px 50px 0 420px;
color: #fff;
}
#subnav a {
color: #fff;
text-decoration: none;
}
img.leftalign,
img.rightalign {
display: block;
padding: 3px;
background: #efefef;
border: solid 1px #ddd;
}
img.leftalign {
float: left;
margin-right: 8px;
}
img.rightalign {
float: right;
margin-left: 8px;
}
h1#sitename {
display: block;
padding: 5px 70px 0 50px;
color: #fff;
}
#sitename a,
#sitename a:visited,
#sitename a:hover {
color: #fff;
text-decoration: none;
}
#left h2 {
color: #158c59!important;
}
blockquote {
background: #efefef;
padding: 5px;
border: solid 1px #ddd;
display: block;
margin: 5px;
}
blockquote.leftalign {
width: 300px;
float: left;
}
.post ul,
.post ol {
margin-bottom: 15px;
}
.post li {
padding: 3px;
}<div id="wrap">
<div id="content">
<div id="left">
<div class="columns">
<div class="col1">
<h3 class="subhead">Strategic Reinvention Plan</h3>
<p>WHEDA is always working to stay current and look towards how we can best succeed in the future.
<a href="uploadedFiles/Website/Feb 2016 Board SRPI presentation 2.pptx" title="WHEDA Strategic Reinvention Plan" target="_blank">Click here</a> to view the presentation by our leadership, presented at the last all staff meeting.</p>
</div>
<div class="col3">
<h3 class="subhead">New Employees</h3>
<p>Welcome to
<a href="http://whedanet.wheda.com/Default.aspx?id=2318" title="Ging Skievaski">Ging Skievaski</a> on our Risk & Compliance team and
<a href="http://whedanet.wheda.com/Default.aspx?id=2320" title="Michael Clark">Michael Clark</a> on our Information Technology team!
<br/>
<br/>
<br/>
</p>
</div>
<div class="col2">
<h3 class="subhead">2016 Board Meeting Schedule</h3>
<p>Remember, you can't wear jeans on days that the WHEDA board is meeting. The 2016 meeting schedule is:</p>
<p><strike>February 17</strike>
<br/>April 20
<br/>June 15
<br/>August 17
<br/>October 19
<br/>December 21 </p>
</div>
</div>
<div class="clear2"></div>
<br/>
<div class="post">
<h2>WHEDA Logo Files</h2>
<p>Logo for Use in Partner Publications - <b>All logo use must follow our <a href="https://www.wheda.com/WorkArea/DownloadAsset.aspx?id=293" title="Brand Standards">Brand Standards</a> </b>
<br/>(Right click and select Save As)</p>
<table dropzone="copy" style="text-align: center; width: 100%; border-spacing: 0px; border-collapse: collapse;">
<tbody>
<tr>
<td style="cursor: default;">
<img src="https://www.wheda.com/assets/0/81/90/179/646ddd39-3e15-4bb2-8efb-5c90f4eceb24.jpg" alt="Main Logo JPG" title="Main Logo JPG" class="fancy" width="300px" draggable="true" /> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="sidebar">
<h2>Quick Links</h2>
<ul>
<li>
<a href="http://apps.whedanet.wheda.com/suggestionbox">Employee Suggestion Box</a>
</li>
<li><i><a href="http://whedanet.wheda.com/uploadedFiles/WHEDANET/Administration/Human_Resources/Suggestion%20Box%208-27-15.pdf">Suggestion Box Tracker</a></i>
</li>
<li>
<a href="mailto:[email protected]">Submit a Help Desk Ticket</a>
</li>
<li>
<a href="http://whedanet.wheda.com/uploadedFiles/WHEDANET/Marketing/MARKETINGJobTicket2014fill.pdf">Submit a Marketing Ticket</a>
</li>
<li>
<a href="http://whedanet.wheda.com/Default.aspx?id=1941">Applications</a>
</li>
</ul>
<h2>Resources</h2>
<ul>
<li>
<a href="https://portal.adp.com/">ADP</a>
</li>
<li>
<a href="http://whedanet.wheda.com/WorkArea/linkit.aspx?LinkIdentifier=id&ItemID=1635&libID=1656">DocFinity Information</a>
</li>
<li>
<a href="https://login.salesforce.com/">Salesforce Login</a>
</li>
<li>
<a href="http://wi.gov/state/">Wisconsin eGov Portal</a>
</li>
<li>
<a href="http://wi.gov/state/core/sowdir/directory_online.asp">State of Wisconsin Phone/Email Directory</a>
</li>
<li>
<a href="http://ces.landsend.com/WHEDAgear">WHEDAGear Online Store</a>
</li>
<li>
<a href="http://whedanet.wheda.com/WorkArea/linkit.aspx?LinkIdentifier=id&ItemID=387&libID=408">Loan Committee Schedule</a>
</li>
<li>
<a href="http://whedanet.wheda.com/uploadedFiles/WHEDANET/Finance/Travel%20and%20Expense%20Reimbursement%20Form(1).xlsm">Travel Expense Reimbursement</a>
</li>
<li>
<a href="http://whedanet.wheda.com/uploadedFiles/WHEDANET/Finance/travelpolicy.pdf">Travel Policy</a>
</li>
<li>
<a href="http://whedanet.wheda.com/uploadedFiles/Website/Loan%20Policy%20043015%20FINAL%20Board%20Approved.pdf">Loan Policy</a>
</li>
<li>
<a href="http://whedanet.wheda.com/uploadedFiles/WHEDANET/Marketing/Social%20Media%20and%20Communications%20Policy.pdf">Communications & Social Media Policy</a>
</li>
<li>
<a href="http://whedanet.wheda.com/uploadedFiles/WHEDANET/Finance/EthicsHotline.pdf">Whistleblower/Ethics Hotline - FAQs</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
どのバージョンのIEが不要なスペースを追加していますか？ – Nathan
私はそれを得ることはありません - col2の余白によって引き起こされる白いギャップまたは何を意味しますか？それは 'margin：0 32％' - > 'margin：0 30％'で固定されていますか？ – Christoph
ネイサン、私はIE 11でそれを試しました。クリストフ、いいえ、列の黄褐色の背景色がサブヘッダの背景色の緑の上に飛び出しています。 – Chris569x