Solved

Get rid of grey overlap?

Posted on 2011-09-29
12
335 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
 
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

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.
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 add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

758 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now