• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 348
  • Last Modified:

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

0
Tom Knowlton
Asked:
Tom Knowlton
  • 6
  • 5
2 Solutions
 
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
 
ventaurCommented:
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
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
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
 
ventaurCommented:
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now