Solved

CSS - right border overlapping top in the corners

Posted on 2006-07-13
8
394 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
ID: 17101951

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
ID: 17102100
If you remove the border-left and border-right for the TD the gap goes away.

Marcos
0
 

Author Comment

by:russomr
ID: 17102354
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
Simplifying Server Workload Migrations

This use case outlines the migration challenges that organizations face and how the Acronis AnyData Engine supports physical-to-physical (P2P), physical-to-virtual (P2V), virtual to physical (V2P), and cross-virtual (V2V) migration scenarios to address these challenges.

 
LVL 4

Expert Comment

by:CaldNT
ID: 17102445
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
 

Author Comment

by:russomr
ID: 17102502
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
ID: 17103395
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
ID: 17122246
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
ID: 17122339
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

Comprehensive Backup Solutions for Microsoft

Acronis protects the complete Microsoft technology stack: Windows Server, Windows PC, laptop and Surface data; Microsoft business applications; Microsoft Hyper-V; Azure VMs; Microsoft Windows Server 2016; Microsoft Exchange 2016 and SQL Server 2016.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
topping2 challenge 13 91
topping3 challenge 14 80
Tviruailstringtree sort multi columns on header click 1 63
Adding Namespace to the second node of the xml 16 73
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
Displaying an arrayList in a listView using the default adapter is rarely the best solution. To get full control of your display data, and to be able to refresh it after editing, requires the use of a custom adapter.
Viewers will learn how to properly install Eclipse with the necessary JDK, and will take a look at an introductory Java program. Download Eclipse installation zip file: Extract files from zip file: Download and install JDK 8: Open Eclipse and …
With the power of JIRA, there's an unlimited number of ways you can customize it, use it and benefit from it. With that in mind, there's bound to be things that I wasn't able to cover in this course. With this summary we'll look at some places to go…

772 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