IE Top Border Being Cutoff Problem

Question

jonsan32 12 Junior Poster in Training

13 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="" 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="" 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="" 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="" 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=""><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=""><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="">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="" 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 = "";
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="" 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>

html-css javascript

2 Contributors
2 Replies
588 Views
3 Weeks Discussion Span
Latest Post 13 Years Ago Latest Post by jonsan32

Dani AI

Generated 10 Months Ago

Brief summary: the top edge of the small date label was being clipped in Internet Explorer. reported that forcing the date element to establish its own layout/stacking context fixed the symptom, and ’s advice to use a proper DOCTYPE and tidy markup is relevant because quirks mode or broken markup can change how IE paints boxes.

Why this happens: older IE variants treat inline elements inside table cells and parents with overflow differently than modern browsers. If the date span does not create its own layout or stacking context, the browser can clip borders or rounded corners when the parent cell/table is painted. Forcing a layout/stacking context (or triggering IE’s "hasLayout") causes IE to render the border correctly. A secondary issue in the original markup was reliance on vendor-prefixed radius rules; adding the standard border-radius and background-clip improves consistency across browsers.

Practical checklist (apply in order until the clipping stops):

Force a layout/stacking context on the date element or its container (positioning or the legacy hasLayout trigger).
Make the date an inline-block so padding and borders behave predictably.
Add the unprefixed border-radius and use background-clip: padding-box for proper rounded-corner rendering.
Check parent elements for overflow:hidden or table border-collapse; try overflow: visible or border-collapse: separate / appropriate cell padding.
For IE8 and earlier, consider a graceful square fallback or a polyfill for rounded corners.
Use IE’s F12 dev tools to inspect computed box model, z-index and which ancestor is clipping.

Minimal example (adapt to the project’s existing rules):

.jamdate {
  position: relative;
  display: inline-block;
  border-radius: 5px;
  background-clip: padding-box;
  /* legacy: zoom:1;  uncomment only if supporting old IE that needs hasLayout */
}

This combines the positioning fix with a more robust box model so the date box renders consistently across browsers.

All 2 Replies

JorgeM 958 Problem Solver

13 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>

Member #46692 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.

IE Top Border Being Cutoff Problem

Dani AI

Recommended Answers Collapse Answers

All 2 Replies

Recommended Answers