Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS - right border overlapping top in the corners

Posted on 2006-07-13
8
Medium Priority
?
401 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

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

Since upgrading to Office 2013 or higher installing the Smart Indenter addin will fail. This article will explain how to install it so it will work regardless of the Office version installed.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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 …
Six Sigma Control Plans

715 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