1. Home
  2. Forums Index
  3. Browser Side / HTML 8:23 pm May 21, 2026

Forum Moderators: open

Message Too Old, No Replies

Border Issues in IE6

border-right issues

         

jrthib

2:55 pm on Sep 16, 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:

CSS

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

HTML

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

Thanks,
Joe

[edited by: tedster at 9:05 pm (utc) on Sep. 16, 2006]
[edit reason] format for easier reading [/edit]

penders

2:21 pm on Sep 17, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Hi jrthib, in the code you've posted the right-border does seem to display OK in IE6 (it looks the same as FF too).

I guess there must be some other CSS that is affecting it?!

jrthib

9:57 pm on Sep 17, 2006 (gmt 0)

10+ Year Member



strange... I wish i could post the page where it actually is having the problem rather than just code so you can check it out. I've done all i can to fix it. I did however, on the site decrease the text size by 1 in IE6 and the border reappeared. Any ideas why it is being pushed off?

penders

9:17 am on Sep 18, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



...but in IE6 the right border on the list does not display...

Sorry, I miss-read - I took the right border on your <td> as being the right border of your list (li elements)!

Yes, indeed, the border-right of your list does not show, because the border-right does not have any width, at least it is not explicitly given a width (and neither are your top and left borders). You are only setting a width on your border-bottom.

Your CSS: 

.newscolumns ul li { 
... 
border-bottom:1px solid #cdcdcd; /* Only setting width on bottom border */ 
border-top-color:black; 
border-left-color:black; 
border-right-color:black; 
... 
}

To give your top, left and right borders a width (and make them visible), you can simply remove the "-bottom" bit, to give a border on all 4 sides, since you are already overriding the color on the other borders: 

.newscolumns ul li { 
... 
border:1px solid #cdcdcd; /* Width on all borders */ 
border-top-color:black; 
border-left-color:black; 
border-right-color:black; 
... 
}

Alternatively, you can explicitly set the border on all four sides, as you did initially on the border-bottom.

Hope that helps, sorry for the miss-diagnosis initially!

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / HTML 8:23 pm May 21, 2026