IE Top Border Being Cutoff Problem

Question

jonsan32 12 Junior Poster in Training

12 Years Ago

With my code below, IE keeps cutting off the top border portion of the box around my dates. Can anyone get this to look good in IE. I suck when it comes to that kinda stuff. And yea, no picking at my overall coding skills either - I know that kinda sucks as well :-)

Thanks for any help.

<style type="text/css">

a#link1:link {
 COLOR: #fff000/*The color of the link*/
}
a#link1:visited {
 COLOR: #fff000/*The color of the visited link*/
}
a#link1:hover {
 COLOR: red /*The color of the mouseover or 'hover' link*/
}
BODY { COLOR: #000000 /*The color of all the other text within the body of the page*/
}

.jamactive {  width: auto;
 padding: 6px 10px;
 background: #0066CC;
 border: solid 1px #000099;
  font: 12px/100% Verdana, Tahoma, sans-serif;
font-weight: 500;
 color: #ffffff;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
-webkit-appearance: none;
 cursor: pointer;}

.jamactive:hover
{ 
background-color: #000099;
 border: solid 1px #000066;}

.jaminactive {  width: auto;
 padding: 6px 10px;
 background: #666666;
 border: solid 1px #000000;
  font: 12px/100% Verdana, Tahoma, sans-serif;
font-weight: 500;
 color: #cccccc;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
-webkit-appearance: none;
 cursor: pointer;}

.jaminactive:hover
{ 
color: #ffffff;
}


.jamactive:hover
{ 
background-color: #000099;
 border: solid 1px #000066;}

.jamdate {  width: auto;
 padding: 3px 4px;
 background: #FFFFCC;
 border: solid 1px #888;
  font: 11px/100% Verdana, Tahoma, sans-serif;
font-weight: 500;
 color: #222222;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
-webkit-appearance: none;
 cursor: pointer;}



 .box-container{
  position:relative;
  width:920px;
  margin:0px auto 0px auto;
  _margin-top:0px;
  overflow:hidden;
  -moz-border-radius:15px;
  -webkit-border-radius:15px;
 }
 .boxcontents{
  background:#FFF;
  margin:10px;
  padding:0px;
 }
 .clear{
  display:block;
  clear:both;
  height:0;
  line-height:0;
 }
 .bg-black{
  background:#000;
 }
 .bg-red{
  background:#A00;
 }
 .bg-green{
  background:#060;
 }
 .bg-blue{
  background:#009;
 }
 .brd-black{
  border:solid 2px #000;
 }
 .brd-red{
  border:solid 2px #A00;
 }
 .brd-green{
  border:solid 2px #060;
 }
 .brd-blue{
  border:solid 2px #009;
 }
 .left{
  float:left;
  padding-right:10px;
 }
 .right{
  float:right;
  padding-left:10px;
 }
  .center{
   text-align:center;
  }

</style>


      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" language="javascript">
$(function(){
 var $rowSelectors = $("#controls input.rowSelector");
 var $eventRows = $("tbody#eventsList tr");
 function setStripes(){
  $eventRows.not(":hidden").removeClass('stripe1').addClass('stripe0').filter(":odd").removeClass('stripe0').addClass('stripe1');
 }
 $rowSelectors.click(function(){
  $rowSelectors.each(function(){
   var fn = this.checked ? 'show' : 'hide';
   $eventRows.filter("." + this.value)[fn]();
   setStripes();
  });
 });
 $("#massControls a").click(function(){
  $rowSelectors.attr('checked', (this.name==='1')?true:false).eq(0).triggerHandler('click');
 }).eq(0).click();//change to .eq(1).click() for initially [all off]
});
</script>                    







<div align="center"><table><tbody>
<tr><td width=600>  <!--[if IE]> <font style="background-color:#fff000;">You're using Internet Explorer, which may be too out-of-date for our website. Try a <a href="http://whichbrowserforme.org/" target="_blank">safer, more modern browser</a> please. <a href="https://www.google.com/chrome?&brand=CHMB&utm_campaign=en&utm_source=en-ha-na-us-sk&utm_medium=ha" target="_blank">-- Click here for our favorite--</a></font> <![endif]--></td></tr></tbody></table></div>
<br />

<center>

<table width=930><tr><td>

<div align=right id="controls">
<input type="checkbox" class="rowSelector" id="rs0" value="league" /><label for="rs0">Leagues</label> | <input type="checkbox" class="rowSelector" id="rs1" value="tourny" /><label for="rs1">Tournaments</label> | <input type="checkbox" class="rowSelector" id="rs2" value="camp" /><label for="rs2">Camps/Clinics</label> | <input type="checkbox" class="rowSelector" id="rs3" value="misc" /><label for="rs3">Miscellaneous</label> | <span id="massControls">[<a id="rowSelectorAll" name="1" style="text-decoration:none"><b>ALL</b></a>] | [<a id="rowSelectorNone" name="0" style="text-decoration:none"><b>NONE</b></a>]</span> 
</div>
<br />

<div align="left">
<table width=100% cellspacing=1 cellpadding=5 style="border-left:3px solid black; border-right:3px solid black; border-top:3px solid black;"><tbody id="eventsList">



<tr height=30 style="background-color:#000000; border-bottom:3px solid black;"><td>
<table width=100% cellpadding=0 style="color:white; text-transform:uppercase;"><tr><td width=20%>Date</td><td style="border-left: 1px solid #000000; padding: 5px;" width=60%>Upcoming Events</td><td style="border-left: 1px solid #000000; padding: 5px;" width=20%>Details</td></tr></table>
</td></tr>

<tr class="league" onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">9/9/12 - 10/23/12</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=60%>Fall League</td><td style="border-left: 1px solid #000000; padding: 5px;" width=20%><a href="http://form.jotformpro.com/form/21875228167965" target="_blank" style="text-decoration: none;"><span class="jamactive">Pay Late Fees - $130</span></a></td></tr></table>
</td></tr>

<tr class="misc" onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">10/5/12</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=60%>Team Write-up Contest Entries Due</td><td style="border-left: 1px solid #000000; padding: 5px;" width=20%><a href="http://www.jamball.com/2010/12/team-write-up-contest.html" target="_blank" style="text-decoration: none;"><span class="jamactive">Enter Contest</span></a></td></tr></table>
</td></tr>


<tr class="league" onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">10/13/12 - 10/14/12</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=60%>Fall League: JV/Varsity Tournament</td><td style="border-left: 1px solid #000000; padding: 5px;" width=20%><a href="http://www.jamball.com/2010/12/fall-tournament.html" target="_blank" style="text-decoration: none;"><span class="jamactive">Brackets</span></a></td></tr></table>
</td></tr>

<tr class="league" onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">10/20/12 - 10/21/12</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=60%>Fall League: 3rd-8th Grade Tournament</td><td style="border-left: 1px solid #000000; padding: 5px;" width=20%><a href="http://www.jamball.com/2010/12/fall-tournament.html" target="_blank" style="text-decoration: none;"><span class="jamactive">Brackets</span></a></td></tr></table>
</td></tr>

<tr class="tourny" onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">10/26/12 - 10/28/12</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=60%><a href="https://docs.google.com/open?id=1l1j6tZGvzrILzleuWtaz7y7MfF-GR-RmrgHV6wMXj4wBoJCjE5mcLiDGQ4fg" target="_blank">J.A.M. Tournament: MONSTER BASH</a> - <font color="#660000">Deadline: Oct. 21st</font></td><td style="border-left: 1px solid #000000; padding: 5px;" width=20%><a href="http://www.jamtournaments.com/" target="_blank" style="text-decoration: none;"><span class="jamactive">More Info</span></a></td></tr></table>
</td></tr>

<tr class="camp" onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">11/3/12 - 11/4/12</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=60%>J.A.M. Individual Clinic</td><td style="border-left: 1px solid #000000; padding: 5px;" width=20%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jaminactive">Registration TBA</span></a></td></tr></table>
</td></tr>

<tr class="league" onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">December TBD</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=60%>Winter League <font size=1><i>presented by Protect the Paint</i></font></td><td style="border-left: 1px solid #000000; padding: 5px;" width=20%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jaminactive">Registration TBA</span></a></td></tr></table>
</td></tr>

<tr class="league" onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">4/7/13</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=60%>Spring League</td><td style="border-left: 1px solid #000000; padding: 5px;" width=20%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jaminactive">Registration TBA</span></a></td></tr></table>
</td></tr>


</tbody>
</table></div>
<div align="right"><a href="http://www.jamball.com/p/tos.html"><font size=1>Terms of Service</font></a> | <a href="http://www.jamball.com/2010/09/directions.html"><font size=1>Driving Directions</font></a> | <a href="http://www.jamball.com/2010/09/advertising.html"><font size=1>Add Your Event</font></a> | <a href="http://www.jamball.com/2010/10/newsletters.html"><font size=1>Change Notifications</font></a></div>



</td></tr></table>



<br /><br />

   <div id="wrapper"><div class="box-container bg-black"><div class="boxgloss"></div><div class="boxcontents brd-black"><style type="text/css">
.arrowlistmenu{
width: 650px; /*width of menu*/
}

.arrowlistmenu .headerbar{
font: 14px arial;
color: black;
background: black url(http://i40.photobucket.com/albums/e250/jonsan32/blockdefault1-1.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
}

.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding: 5;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 9px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #fff333;
background: url(http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 3px 3;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
border-bottom: 0px solid #dadada;
font-size: 100%;
}

.arrowlistmenu ul li a:visited{
color: #fff333;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #000000;
background-color: #ffffff;
}
</style>    <table bgcolor="#000000"><tbody>
<tr><td valign="top"><div align="left" class="arrowlistmenu"><h3 class="headerbar"><b>J.A.M.'s Latest Updates</b></h3><ul>

<li><a href="http://www.jamball.com/2010/12/team-write-up-contest.html">Team Write-Up Contest entries are due October 5th</a></li>

<li><a href="http://www.jamball.com/search/label/Newsletters">Click here to Read our C.E.O.'s latest Newsletter</a></li>





</ul></div></td> <td align="center" width="250"><script src="http://www.google.com/jsapi" type="text/javascript">
</script> <script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js" type="text/javascript">
</script> <style type="text/css">
#picasaSlideshow {
width: 200px;
height: 150px;
margin-bottom: 5px;
padding: 5px;
}
</style> <script type="text/javascript">
google.load("feeds", "1");
function OnLoad() {
var feed = "https://picasaweb.google.com/data/feed/base/user/jonsanders32/albumid/5576296240289968929?alt=rss&kind=photo&hl=en_US";
var options = {
displayTime:2000,
transistionTime:600,
numResults : 100,
scaleImages:true,
fullControlPanel : true
};
var ss = new GFslideShow(feed, "picasaSlideshow", options);
}
google.setOnLoadCallback(OnLoad);
</script>  <div class="gslideshow" id="picasaSlideshow"><div class="feed-loading">Loading...</div></div><a href="http://www.jamball.com/2010/10/photos.html" id="link1"><b>View All Photos | Add Your Own</b></a>     </td> </tr>
</tbody></table>       </div><div class="clear"></div></div></div>

<br /><br /></center>

web-browser web-design

2 Contributors
2 Replies
561 Views
3 Weeks Discussion Span
Latest Post 12 Years Ago Latest Post by jonsan32

JorgeM 958 Problem Solver

12 Years Ago

I took at look at this with IE9 and Chrome and the only difference was that there was a box around the dates in IE as opposed to the rounded corners as seen with Chrome.

What version of IE did you have a problem with?

Also, it would be easier if you post your code a bit more organized. this has nothing to do with coding skills.

try to at least follow the standard html structure. It makes it easier for others to help you.

<!DOCTYPE html>
<html>
<head>
<title>Your Title</title>
<style type="text/css">
<!--your styles -->
</style>
<script type="text/javascript"><!--Your Script info --></script>
</head>

<body>
<!-- Your HTML Code Here -->
</body>
</html>

iamthwee commented: yep +14

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jonsan32 12 Junior Poster in Training · Answer 1 · 2012-10-26T17:19:15+00:00

I just found this answer after searching myself.

Add "position: relative" to stop the top border from being cutoff.