See attached pictures to see the difference.
I'm using a CSS file from one of the CoffeeCup HTML themes (Classical Jazz). I added another CSS file to use for the Other Links box. Here's the html code for the contents of the box.
<div class="floatright">
<h2>Other Links</h2>
<hr />
<ul >
<li><a href="conference-brochures.html" title="Conference brochures">Conference Brochures</a></li>
<li><a href="calendar.html" title="UPC Events">Calendar</a></li>
<li><a href="legupdate/2011MasterSummaries.pdf" target="_blank">2011 Leg Update Summary</a></li>
<li><a href="trainingVideos.html">Online Video Training</a></li>
</ul>
</div> <!-- End of div class: floatright -->
<h2>Other Links</h2>
<hr />
<ul >
<li><a href="conference-brochures.html" title="Conference brochures">Conference Brochures</a></li>
<li><a href="calendar.html" title="UPC Events">Calendar</a></li>
<li><a href="legupdate/2011MasterSummaries.pdf" target="_blank">2011 Leg Update Summary</a></li>
<li><a href="trainingVideos.html">Online Video Training</a></li>
</ul>
</div> <!-- End of div class: floatright -->
Here's the code for the applicable CSS (this is my own added code - it isn't in the original CSS file that came with the them):
.floatright{
float:right;
width:200px;
border-width:1px;
border-style:solid;
border-color:#BDC8C0;
margin:10px 0 10px 10px;
padding:2px;
background-color:#BADFF0;
}
div.floatright p {
color:#613F1D;
margin: 0 5px 5px 10px;
padding:2px;
}
div.floatright h2 {
margin:10px 0 10px 0;
text-align:center;
}
div.floatright li {
padding:5px;
font-size:1.1em;
text-align:center;
}
div.floatright li a {
text-decoration:none;
color:#425C82;
}
div.floatright li a:hover {
color:#FFFFFF;
text-decoration:underline;
}
float:right;
width:200px;
border-width:1px;
border-style:solid;
border-color:#BDC8C0;
margin:10px 0 10px 10px;
padding:2px;
background-color:#BADFF0;
}
div.floatright p {
color:#613F1D;
margin: 0 5px 5px 10px;
padding:2px;
}
div.floatright h2 {
margin:10px 0 10px 0;
text-align:center;
}
div.floatright li {
padding:5px;
font-size:1.1em;
text-align:center;
}
div.floatright li a {
text-decoration:none;
color:#425C82;
}
div.floatright li a:hover {
color:#FFFFFF;
text-decoration:underline;
}
Here's the website URL: http://www.upc.utah.gov
I don't understand why the local preview works, but it's different on the server (live). I'm pretty sure it's something to do with problems in my CSS code. I'm just learning CSS and so I wouldn't be surprised at all if that's what is causing my issue.
It displays properly in Firefox and Chrome.
Any ideas how to make it work in IE (I'm using v. 9)?
