Get rid of grey overlap?

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

LVL 5
Tom KnowltonWeb developerAsked:
Who is Participating?
 
ventaurConnect With a Mentor Commented:
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
 
ventaurCommented:
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
 
EyalCommented:
try removing the spaces between the </td> to the </tr>
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
ventaurConnect With a Mentor Commented:
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
 
Tom KnowltonWeb developerAuthor Commented:
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
 
Tom KnowltonWeb developerAuthor Commented:
>>>try removing the spaces between the </td> to the </tr>

For example?
0
 
ventaurCommented:
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
 
ventaurCommented:
Note: Just remove float:left; from each header style and item style; not your other styles.
0
 
Tom KnowltonWeb developerAuthor Commented:
This fixed the grey overlap.

But...

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

0
 
ventaurCommented:
Which fix(es) did you implement to get rid of the grey overlap?
0
 
Tom KnowltonWeb developerAuthor Commented:
I removed the float from the styles for header and item.
0
 
Tom KnowltonWeb developerAuthor Commented:
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
All Courses

From novice to tech pro — start learning today.