Forum Moderators: not2easy

Message Too Old, No Replies

Border Displaying Issues in IE

Border issues

         

jrthib

2:08 am on Sep 15, 2006 (gmt 0)

10+ Year Member



I'm in a bit of confusion right now. I've made unordered lists and modified them using css so they display without bullets, are centered, and have borders on 3 of the 4 sides. On the first page i created it worked fine with the borders all showing correctly. I simply duplicated this page and edited the list items but in IE6 the right border on the list does not display correctly. It is not even there. Some of the pages have this border-right problem and some of the others do not. Any suggestions?

by the way, disregard any of the classes in the html not defined in the css. They aren't linked to anything yet.

Code in question:


<style type="text/css">
.newscolumns { border-left: 1px solid #999999; border-right: 1px solid #999999; border-top-color: #999999; border-bottom-color: #999999; }
.newscolumns ul { margin: 0; padding: 0; border-top: 1px solid #cdcdcd; }
.newscolumns ul li { text-align:center;list-style:none; padding:6px; background-color:#ffffff ; border-bottom: 1px solid #cdcdcd; border-top-color: black; border-left-color: black; border-right-color: black;hover:expression(this.onmouseover=new Function("this.style.background='#d6d6d6';"),this.onmouseout=new Function("this.style.background='#FFFFFF';"));}
.newscolumns ul li:hover { text-align:center; list-style:none; padding:6px; background-color:#d6d6d6 ; }
.newsnavbackbottom {background-image:url(newsnavback.gif);background-position:bottom;background-repeat:none;}
.newsnavbacktop {background-image:url(newsnavback.gif);background-position:top;background-repeat:none;}
</style>

<div align="center">
<br>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr valign="middle" height="16">
<td class="caleventstop" width="600" height="16">
<div align="center">
<b><font size="2" color="white">General News</font><font size="2" color="black"><br>
</font></b></div>
</td>
</tr>
<tr valign="middle">
<td class="newscolumns" width="600">
<ul>
<li>
<div align="center">
<b><i><font size="2"><a href="roadrace2006.htm">Along the Thames 5K Roadrace October 8, 2006 - Application Form</a><br>
</font><font size="1">Updated Jun 13, 2006</font></i></b></div>
<li>
<div align="center">
<b><i><font size="2"><a href="craftbazaar.htm">20th Annual Craft Bazaar on Nov. 11th</a><br>
</font><font size="1">Updated May 19, 2006</font></i></b></div>
<li>
<div align="center">
<b><i><font size="2"><a href="bishopsopengolf2006.htm">23rd Annual Bishop's Open Golf Tournament on June 22 at the Pautipaug Country Club</a><br>
</font><font size="1">Updated Apr 15, 2006</font></i></b></div>
<li><b><i><font size="2"><a href="artexhibit2006.htm">20th Annual Art Exhibit of Catholic Elementary and Secondary Art of the Diocese of Norwich</a><br>
</font><font size="1">Updated Jan 31, 2006</font></i></b>

</ul>
</td>
</tr>
<tr valign="middle" height="19">
<td class="caleventsbottom" width="600" height="19">
<div align="center"></div>
</td>
</tr>
</table>

swa66

12:34 am on Sep 17, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



This does not look like valid CSS. Random errors are often caused by syntax errors (and/or MSIE bugs :-( ).

Try getting the syntax right and then reduce the CSS and HTML till the problem disapears, that point where you add/remove to create the problem might be very enlightning as to the cause.

Check your CSS syntax [jigsaw.w3.org]