Solved

Get rid of grey overlap?

Posted on 2011-09-29
12
338 Views
Last Modified: 2012-05-12
How do I get rid of the grey overlap in the header for this table?

See what is circled in red in the image below:

 grey overlap

Here is the relevant HTML:

	<table cellspacing="0" cellpadding="2" align="Center" border="0" id="ctl00_ContentPlaceHolder1_ShoppingCartDetails1_gvCart" style="background-color:Transparent;border-color:Transparent;font-family:Arial;font-size:12px;width:100%;border-collapse:collapse;">
		<tr style="color:White;background-color:Gray;">
			<th class="Title_HeaderStyle" scope="col">Item Description</th><th class="Details_HeaderStyle" scope="col">Details</th><th class="Type_HeaderStyle" scope="col">Type</th><th class="Price_HeaderStyle" scope="col">Price</th><th class="Qty_HeaderStyle" scope="col">Qty</th><th class="Extended_HeaderStyle" scope="col">Ext</th>

		</tr><tr style="white-space:nowrap;">
			<td class="Title_ItemStyle">
<span id="ctl00_ContentPlaceHolder1_ShoppingCartDetails1_gvCart_ctl02_Label1">TESS OF THE DURBERVILLES (ED BUCKLER) (P)</span>
</td><td class="Details_ItemStyle">&nbsp;</td><td class="Type_ItemStyle">New</td><td class="Price_ItemStyle">24.75</td><td class="Qty_ItemStyle">1</td><td class="Extended_ItemStyle">24.75</td>
		</tr>
	</table>

Open in new window

0
Comment
Question by:knowlton
  • 6
  • 5
12 Comments
 
LVL 6

Expert Comment

by:ventaur
ID: 36817815
It looks like an issue with padding, but I cannot tell you how to fix it without seeing your CSS for each of the styles you have assigned to the th tags (i.e., Title_HeaderStyle, Details_HeaderStyle, etc.). Please, provide that CSS.
0
 
LVL 15

Expert Comment

by:Eyal
ID: 36817830
try removing the spaces between the </td> to the </tr>
0
 
LVL 6

Assisted Solution

by:ventaur
ventaur earned 500 total points
ID: 36817847
One quick thing you can try is to assign your table/grid a class, remove the hard-coded styles within each tr, then update the CSS with some rules for your new class style.

HTML:
<table ... class="grid">
  <tr>...</tr>
  ...
</table>

CSS:
table.grid th {
  color: White;
  background-color: Gray;
}
table.grid th, table.grid td {
  padding: 2px;
  white-space: nowrap;
}
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 5

Author Comment

by:knowlton
ID: 36817968
I cannot tell you how to fix it without seeing your CSS for each of the styles you have assigned to the th tags (i.e., Title_HeaderStyle, Details_HeaderStyle, etc.). Please, provide that CSS.
==========================================================================


Here is that CSS.  (  Curious - Is it not publicly available via the page source?)


.Title_HeaderStyle
{
    position:relative;
    float:left;
    text-align:left;
    width:340px;    
    padding:5px;
    background-color:Gray;
    border:1px solid black;
    color:White;    
}
.Title_ItemStyle
{
    position:relative;
    float:left;
    text-align:left;
    width:340px;    
    padding:5px;    
    border:1px solid black;
    
}




.Details_HeaderStyle
{
    position:relative;
    float:left;
    text-align:left;
    width:100px;    
    padding:5px;
    background-color:Gray;
    border:1px solid black;
    color:White;
}
.Details_ItemStyle
{
    position:relative;
    float:left;
    text-align:left;
    width:100px;    
    padding:5px;    
    border:1px solid black;
}




.Type_HeaderStyle
{
    position:relative;
    float:left;
    text-align:left;
    width:50px;    
    padding:5px;
    background-color:Gray;
    border:1px solid black;
    color:White;
}
.Type_ItemStyle
{
    position:relative;
    float:left;
    text-align:left;
    width:50px;    
    padding:5px;    
    border:1px solid black;
}




.Price_HeaderStyle
{
    position:relative;
    float:left;
    text-align:left;
    width:50px;    
    padding:5px;
    background-color:Gray;
    border:1px solid black;
    color:White;
}
.Price_ItemStyle
{
    position:relative;
    float:left;
    text-align:left;
    width:50px;    
    padding:5px;    
    border:1px solid black;
}




.Qty_HeaderStyle
{
    position:relative;
    float:left;
    text-align:left;
    width:50px;    
    padding:5px;
    background-color:Gray;
    border:1px solid black;
    color:White;
}
.Qty_ItemStyle
{
    position:relative;
    float:left;
    text-align:left;
    width:50px;    
    padding:5px;    
    border:1px solid black;
}





.Extended_HeaderStyle
{
    position:relative;
    float:left;
    text-align:left;
    width:50px;    
    padding:5px;
    background-color:Gray;
    border:1px solid black;
    color:White;
}
.Extended_ItemStyle
{
    position:relative;
    float:left;
    text-align:left;
    width:50px;    
    padding:5px;    
    border:1px solid black;
}

.Row_Style
{
    min-height:30px;
    max-height:60px;    
}


.shoppingcartdetailstablewrapper
{
    position:relative;
    float:left;
    width:720px;
    height:100px;
    clear:both;
    margin-left:10px;
}

.modifydetailsclick
{
    border-left:1px solid black;
    border-right:1px solid black;
    border-bottom:1px solid black;
    width:250px;
    position:relative;
    float:left;
    clear:both;
    background-color:#FEF8A9;
    margin-top:0px;
    padding:5px;
}

Open in new window

0
 
LVL 5

Author Comment

by:knowlton
ID: 36817975
>>>try removing the spaces between the </td> to the </tr>

For example?
0
 
LVL 6

Expert Comment

by:ventaur
ID: 36818426
I would remove all the floats you have on each of those CSS styles. Floating basic text content does you no good and could very well lead to the problem you are having. Get rid of "float:left;" in all those styles.

It may be publicly viewable from the page's source, but I didn't see a URL to the page you are having trouble with.
0
 
LVL 6

Expert Comment

by:ventaur
ID: 36818432
Note: Just remove float:left; from each header style and item style; not your other styles.
0
 
LVL 5

Author Comment

by:knowlton
ID: 36818720
This fixed the grey overlap.

But...

Now the 1px solid black gridlines cannot be seen in the header row.

0
 
LVL 6

Expert Comment

by:ventaur
ID: 36818957
Which fix(es) did you implement to get rid of the grey overlap?
0
 
LVL 5

Author Comment

by:knowlton
ID: 36891879
I removed the float from the styles for header and item.
0
 
LVL 6

Accepted Solution

by:
ventaur earned 500 total points
ID: 36892266
Try removing the position:relative; from each header and item style as well.

One other oddity I see is your table is set to a width of 100%, yet your th and td tags all use pixel widths. That could certainly be a problem if all those pixel widths (plus the padding and border widths) add up to a pixel count that is less than the total width of the table (since it is set to stretch the entire width of its parent).
0
 
LVL 5

Author Closing Comment

by:knowlton
ID: 36892778
Okay...the grid lines are back now, once I removed position:relative from the header and item styles.

Thank you!


(I'll take a look at the other problem you mentioned later.  I'll probably open another question at that time)
0

Featured Post

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

839 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