Solved

CSS - right border overlapping top in the corners

Posted on 2006-07-13
8
392 Views
Last Modified: 2006-11-18
This will be a fun one to try and explain.

The best way I can do this is to show you.  I have the below code:

<html>
  <head>
    <title>Test</title>
    <STYLE TYPE="text/css">
            TD#MenuGroup {
                  background-color: #1B4E8D; text-align: center; width: 156; font-weight: bold; border-left: solid 1px #1B4E8D; border-right: solid 1px #1B4E8D; border-bottom: solid 1px #BEBEBE; border-top: solid 1px #BEBEBE;}
    </STYLE>
  </head>
  <body>
    <form id="Form1" method="post" runat="server">
      <table border="0" cellpadding="0" cellspacing="0" width="200">
            <tr>
                  <td id="MenuGroup" width="100">test</td>
                  <td id="MenuGroup" width="100">test</td>
            </tr>
      </table>
    </form>
  </body>
</html>

If you look at the page it creates, you'll notice that between the two 'test' cells there is a pixel break on the top border and the bottom of the cells.  The reason for this is that it seems that the left and right border takes precedence and overlaps the top and bottom where they join in the corners, therefore creating that little gap.  Is there anyway to set it so that the bottom and top have precedence and will show instead of the right and left at the corners?  This is what's causing that little gap and it's driving me crazy?

I realize there are other ways to set it up to eliminate that gap, like nesting the table within an outter table and just setting a top and bottom border on the outer table.  Unfortunately the above is just a small piece of more code that cannot be changed.

Thanks.
I hope I am making sense.
0
Comment
Question by:russomr
  • 4
  • 3
8 Comments
 
LVL 8

Expert Comment

by:Shakti109
Comment Utility

Just a curiosity, but are the 1 pixel borders necessary?

If you set the top/bottom (or left/right), to 0 pixels the 1 pixel of a different color goes away (the "gap").
0
 
LVL 4

Expert Comment

by:CaldNT
Comment Utility
If you remove the border-left and border-right for the TD the gap goes away.

Marcos
0
 

Author Comment

by:russomr
Comment Utility
I need to keep the borders on the left and right.  The above is just a scaled down version of what I'm trying to accomplish.  In the full code, once the cells are hoverd over, a gray boarder appears on the left and right.  But when the mouse un-hovers, I set the border color to the same as the cell to make it appear as if the border disappear.  I can provide the full code if you like, but the bottom line is I need the bottom border to go all the way across on the cells as opposed to the side borders going all the way down.

0
 
LVL 4

Expert Comment

by:CaldNT
Comment Utility
Try this:

<html>
 <head>
 <title>Test</title>
 <STYLE TYPE="text/css">
 TD#MenuGroup {
 background-color: #1B4E8D; text-align: center; width: 156; font-weight: bold; border-bottom: solid 1px #BEBEBE; border-top: solid 1px #BEBEBE;}
 </STYLE>
 </head>
 <body>
 <form id="Form1" method="post" runat="server">
 <table border="0" cellpadding="0" cellspacing="0" width="200">
 <tr>
 <td id="MenuGroup" width="100">test</td>
 <td id="MenuGroup" width="100">test</td>
 </tr>
 </table>
 </form>
 </body>
 </html>


Does it display how you want it to?

Marcos
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:russomr
Comment Utility
It displays for this scaled down version, but as I said earlier in the post, I need to keep the side borders.

Here is the full code.  Notice the gaps.  Bottom line is I'm trying to get rid of them.

<STYLE TYPE="text/css">
            TABLE#MenuGroupTable { FONT-SIZE: 8pt; FONT-FAMILY: verdana; HEIGHT: 20px }
            TABLE#MenuItemTable { FONT-SIZE: 8pt; FONT-FAMILY: verdana; HEIGHT: 20px }
            TABLE#MenuItemTableBg { BACKGROUND-COLOR: #113159; TEXT-ALIGN: center }
            TD#MenuGroup { BORDER-RIGHT: #1b4e8d 1px solid; BORDER-TOP: #bebebe 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #1b4e8d 1px solid; WIDTH: 156px; BORDER-BOTTOM: #bebebe 1px solid; BACKGROUND-COLOR: #1b4e8d;  TEXT-ALIGN: center }
            TD#MenuGroupSelected { BORDER-RIGHT: white 1px solid; BORDER-LEFT: white 1px solid; WIDTH: 156px; BACKGROUND-COLOR: #113159; TEXT-ALIGN: center }
            TD#MenuItem { WIDTH: 100px; BACKGROUND-COLOR: #113159; TEXT-ALIGN: center }
            A.MenuGroupText:link { FONT-WEIGHT: bold; COLOR: #ffffff; TEXT-DECORATION: none }
            A.MenuGroupText:visited { FONT-WEIGHT: bold; COLOR: #ffffff; TEXT-DECORATION: none }
            A.MenuGroupText:active { FONT-WEIGHT: bold; COLOR: #ffffff; TEXT-DECORATION: none }
            A.MenuGroupText:hover { FONT-WEIGHT: bold; COLOR: #ffffff; TEXT-DECORATION: none }
            A.MenuItemText:link { FONT-WEIGHT: normal; COLOR: #ffffff; TEXT-DECORATION: none }
            A.MenuItemText:visited { FONT-WEIGHT: normal; COLOR: #ffffff; TEXT-DECORATION: none }
            A.MenuItemText:active { FONT-WEIGHT: normal; COLOR: #ffffff; TEXT-DECORATION: none }
            A.MenuItemText:hover { FONT-WEIGHT: bold; COLOR: #ffffff; TEXT-DECORATION: none }
</STYLE>
<table border="0" cellspacing="0" width="780" id="MenuGroupTable">
      <tr>
            <td id="MenuGroup" onmouseover="this.style.backgroundColor='#4C76AB';this.style.borderLeft='solid #BEBEBE 1px';this.style.borderRight='solid #BEBEBE 1px';"
                  onmouseout="this.style.backgroundColor='#1B4E8D';this.style.borderLeft='solid #1B4E8D 1px';this.style.borderRight='solid #1B4E8D 1px';"><asp:HyperLink ID="hlContacts" Runat="server" CssClass="MenuGroupText" Text="CONTACTS" NavigateUrl="#" /></td>
            <td id="MenuGroup" onmouseover="this.style.backgroundColor='#4C76AB';this.style.borderLeft='solid #BEBEBE 1px';this.style.borderRight='solid #BEBEBE 1px';"
                  onmouseout="this.style.backgroundColor='#1B4E8D';this.style.borderLeft='solid #1B4E8D 1px';this.style.borderRight='solid #1B4E8D 1px';"><asp:HyperLink ID="hlTestLink" Runat="server" CssClass="MenuGroupText" Text="TEST LINK" NavigateUrl="#" /></td>
            <!--  <td id="MenuGroupSelected"><a href="#" class="MenuGroupText">MENU GROUP 2</a></td>  -->
            <td id="MenuGroup" onmouseover="this.style.backgroundColor='#4C76AB';this.style.borderLeft='solid #BEBEBE 1px';this.style.borderRight='solid #BEBEBE 1px';"
                  onmouseout="this.style.backgroundColor='#1B4E8D';this.style.borderLeft='solid #1B4E8D 1px';this.style.borderRight='solid #1B4E8D 1px';"><asp:HyperLink ID="hlEvents" Runat="server" CssClass="MenuGroupText" Text="EVENTS" NavigateUrl="#" /></td>
            <td id="MenuGroup" onmouseover="this.style.backgroundColor='#4C76AB';this.style.borderLeft='solid #BEBEBE 1px';this.style.borderRight='solid #BEBEBE 1px';"
                  onmouseout="this.style.backgroundColor='#1B4E8D';this.style.borderLeft='solid #1B4E8D 1px';this.style.borderRight='solid #1B4E8D 1px';"><asp:HyperLink ID="hlNewsletters" Runat="server" CssClass="MenuGroupText" Text="NEWSLETTERS" NavigateUrl="#" /></td>
            <td id="MenuGroup" onmouseover="this.style.backgroundColor='#4C76AB';this.style.borderLeft='solid #BEBEBE 1px';this.style.borderRight='solid #BEBEBE 1px';"
                  onmouseout="this.style.backgroundColor='#1B4E8D';this.style.borderLeft='solid #1B4E8D 1px';this.style.borderRight='solid #1B4E8D 1px';"><asp:HyperLink ID="hlVenues" Runat="server" CssClass="MenuGroupText" Text="VENUES" NavigateUrl="#" /></td>
      </tr>
</table>
<table border="0" cellspacing="0" width="780" id="MenuItemTableBg">
      <tr>
            <td>
                  <table border="0" cellspacing="0" cellpadding="0" id="MenuItemTable">
                        <tr>
                              <td id="MenuItem"><a href="#" class="MenuItemText">ITEM 1</a></td>
                              <td id="MenuItem"><a href="#" class="MenuItemText">ITEM 2</a></td>
                              <td id="MenuItem"><a href="#" class="MenuItemText">ITEM 3</a></td>
                        </tr>
                  </table>
            </td>
      </tr>
</table>
0
 
LVL 4

Expert Comment

by:CaldNT
Comment Utility
Hello,

It has no left/right border onmouseover it reduces the width(to avoid the text from scrolling when the ouse is over the cell) and sets the left/right border to what you specified. The onmouseout sets the border to none and restores the width. This code displays identically on Firefox and IE.

Try this sample code:

<html>
 <head>
 <title>Test</title>
 <STYLE TYPE="text/css">

       table
       {
            border: 0px;
            padding: 0px;
            margin:0px;
       }
       TD#MenuGroup {
             padding:0px;
             margin:0px;
       background-color: #1B4E8D;
       text-align: center;
       width: 100px;
      font-weight: bold;

       border-bottom: solid 1px #BEBEBE;
       border-top: solid 1px #BEBEBE;
 }



 </STYLE>
 </head>
 <body>
 <form id="Form1" method="post" runat="server">
       <table cellspacing="0px">
       <tr>

             <td id="MenuGroup"
                   onmouseover="this.style.backgroundColor='#4C76AB';
                   this.style.borderLeft='solid #BEBEBE 1px';
                   this.style.borderRight='solid #BEBEBE 1px';
                   this.style.width='98px';"
                  
                   onmouseout="this.style.backgroundColor='#1B4E8D';
                   this.style.borderLeft='none';
                   this.style.borderRight='none';
                   this.style.width='100px';"
                   >test</td>
                   <td id="MenuGroup"
                   onmouseover="this.style.backgroundColor='#4C76AB';
                   this.style.borderLeft='solid #BEBEBE 1px';
                   this.style.borderRight='solid #BEBEBE 1px';
                   this.style.width='98px';"
                  
                   onmouseout="this.style.backgroundColor='#1B4E8D';
                   this.style.borderLeft='none';
                   this.style.borderRight='none';
                   this.style.width='100px';"
                   >test</td>
             
                    <td id="MenuGroup"
                   onmouseover="this.style.backgroundColor='#4C76AB';
                   this.style.borderLeft='solid #BEBEBE 1px';
                   this.style.borderRight='solid #BEBEBE 1px';
                   this.style.width='98px'"
                  
                   onmouseout="this.style.backgroundColor='#1B4E8D';
                   this.style.borderLeft='none';
                   this.style.borderRight='none';
                   this.style.width='100px';;"
                   >test</td>
      
       </tr>
       </table>
 </form>
 </body>

 </html>

Any questions, feel free to ask.

Good luck,

Marcos

0
 

Author Comment

by:russomr
Comment Utility
CaldNT, I was able to implement your suggestion.  Thank you.

I will award you the points, however do you know how I might be able to consolidate the style code?

I created the style class of:

.OnMouseOver { background-color: #4C76AB; border-left: solid #BEBEBE 1px; border-right: solid #BEBEBE 1px; width 98px; }

and in the code, I changed a line to:

<td id="MenuGroup"
                onmouseover="this.className='OnMouseOver';"                
                ......
                >

The onmouseover now does not work.  What am I doing wrong?  Is it the syntax or just not possible?

Thanks again.
0
 
LVL 4

Accepted Solution

by:
CaldNT earned 250 total points
Comment Utility
Hello,

Great idea! This makes much cleaner easier to maintain code.

Each cell:
<td class="out" onmouseover="this.className='over';" onmouseout="this.className='out';">test</td>

and some css (you have to set all the properties for .over and .out so you don't get some funny stuff happening with css):

 td.over
 {
      padding:0px;
      margin:0px;
      background-color: #1B4E8D;
      text-align: center;

      font-weight: bold;

  background-color:#4C76AB;
  border-left:solid #BEBEBE 1px;
  border-right:solid #BEBEBE 1px;
  width:98px;
 }

 td.out
 {
          padding:0px;
           margin:0px;
      background-color: #1B4E8D;
      text-align: center;
      width: 100px;
     font-weight: bold;

      border-bottom: solid 1px #BEBEBE;
      border-top: solid 1px #BEBEBE;
  border-left:none;
  border-right:none;

 }

Here it is a sample code you can try:

<html>
 <head>
 <title>Test</title>
 <STYLE TYPE="text/css">

      table
      {
          border: 0px;
          padding: 0px;
          margin:0px;
      }
     

 td.over
 {
      padding:0px;
      margin:0px;
      background-color: #1B4E8D;
      text-align: center;

      font-weight: bold;

  background-color:#4C76AB;
  border-left:solid #BEBEBE 1px;
  border-right:solid #BEBEBE 1px;
  width:98px;
 }

 td.out
 {
          padding:0px;
           margin:0px;
      background-color: #1B4E8D;
      text-align: center;
      width: 100px;
     font-weight: bold;

      border-bottom: solid 1px #BEBEBE;
      border-top: solid 1px #BEBEBE;
  border-left:none;
  border-right:none;

 }


 </STYLE>
 </head>
 <body>
 <form id="Form1" method="post" runat="server">
      <table cellspacing="0px">
      <tr>

           <td class="out"
                onmouseover="this.className='over';"
               
                onmouseout="this.className='out';"
                >test</td>
           <td class="out"
                onmouseover="this.className='over';"
               
                onmouseout="this.className='out';"
                >test</td>
               <td class="out"
                onmouseover="this.className='over';"
               
                onmouseout="this.className='out';"
                >test</td>
      </tr>
      </table>
 </form>
 </body>

 </html>

Good luck,

Marcos
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Whether you've completed a degree in computer sciences or you're a self-taught programmer, writing your first lines of code in the real world is always a challenge. Here are some of the most common pitfalls for new programmers.
This is about my first experience with programming Arduino.
An introduction to basic programming syntax in Java by creating a simple program. Viewers can follow the tutorial as they create their first class in Java. Definitions and explanations about each element are given to help prepare viewers for future …
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now