Solved

Get rid of grey overlap?

Posted on 2011-09-29
12
337 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!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
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).

831 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