Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Disappearing Background Color 1

Status
Not open for further replies.
DonP

DonP

IS-IT--Management
Jul 20, 2000
684
US
I've been pulling my hair out over this! Maybe someone who knows CSS better than I can see what's wrong. I am using styles to create rows and columns (no tables) which is working fine but one "cell" cannot have the width hard-coded so its background color stops at the end of the content. I tried creating a container with the background color that should have applied to the whole row but it was ignored so I am currently using two styles for each "cell".

Each column has something like this but the others have the width hard-coded; this one has it set to auto.


Code: 
.Col6 {
	font-family: Verdana, Arial, sans-serif;
	font-size: small;
	font-weight: normal;
	text-align: left;
	margin-top: 5px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 10px;
	padding-right: 10px;
	width: auto;
	float: left;
	position: relative;
}

The HTML of a sample row is something like this but the actual content and whether it's a RowColor or AltRowColor is dynamic through MySQL and PHP, as is the content:

Code: 
<div class="Col1 RowColor">Agent Cooper</div>
 <div class="Col2 RowColor">601T-3</div>
 <div class="Col3 RowColor">(800) 123-4567</div>
 <div class="Col4 RowColor">&nbsp;</div>
 <div class="Col5 RowColor">18</div>
 <div class="Col6 RowColor">Yes</div>
 <div class="Col7 RowColor">City Name</div>

RowColor is (AltRowColor is similar but with a different color):

Code: 
.RowColor {
	background-color: #EBEBEA;
	font-size: small;
	font-weight: normal;
	padding-top: 0px;
	padding-bottom: 5px;
	position: relative;
}

Any ideas how to get the background color to not have the gap after the content of Col6?

Don
Experienced in HTML, Perl, PHP, VBScript, PWS, IIS and Apache and MS-Access, MS-SQL, MySQL databases
 
Sort by date Sort by votes
Do you have a doctype declared?

I can't seem to recreate this.

On a side note, I'm of the opinion that if your information is tabular, tables are perfect.



[monkey][snake] <.
 
Upvote 0 Downvote
Thanks, yes, there is a DOCTYPE:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

and I tried a few others including the xhtml type.

As for the reason of using styles rather than tables, the prototype had tables originally but there was an issue of making the tables close dynamically which it must do in the middle of the recordset when the dymanic category field changes. It was able to open a table dynamically but it could not close it dynamically so the left side was moved over incrementally to the right each time a new table began. Also, a requirement of this project is that it be tableless.

Don
Experienced in HTML, Perl, PHP, VBScript, PWS, IIS and Apache and MS-Access, MS-SQL, MySQL databases
 
Upvote 0 Downvote
Making a layout tableless when using dynamic (i.e. table-driven) data is somewhat counter-productive.

Those parts of the page which are table data should still use tables (and that is the only place tables should be used). The rest of the page - all layout, etc. should be table-less.

I don't think any of the regular posters here will disagree with this.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
Yes, I know but I am not the one who ordered a completely "tableless" design so I have no choice! They may have to live with one field losing its background color on alternate rows and, other than that, it works and looks fine.

Don
Experienced in HTML, Perl, PHP, VBScript, PWS, IIS and Apache and MS-Access, MS-SQL, MySQL databases
 
Upvote 0 Downvote
Can you post a link to the complete page?

Traingamer is correct. If you are displaying data in a spreadsheet sort of grid then a table is the correct thing to use.

If someone has 'ordered' a tableless design than either:

1. They just mean general layout
2. They don't know what they are asking for

The whole ethos of web standards is to use the right HTML tags for a specific task. NOT to eliminate tables. It just so happens that people used tables for layout. A table tag is perfectly legitimate for displaying a table of data since that what it is actually meant for.

It is both difficult and counter-productive to simulate tabular grids with CSS. Not to mention somewhat pointless.

Again. Web standards = right tags for the job.

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.
 
Upvote 0 Downvote
This is an Intranet site so it's not available outside. However, I found the problem and it's now working perfectly.

Another tag that should have been unrelated to the columns (an <hr> that was between the rows) seems to have been at fault. When I remarked it out, the "columns" went all over the place. To get them back, I tried something again that I had already tried before, which worked this time. I simply added a container around each row and placed the background color in it.

Thanks for your help and ideas.

Don
Experienced in HTML, Perl, PHP, VBScript, PWS, IIS and Apache and MS-Access, MS-SQL, MySQL databases
 
Upvote 0 Downvote
So, if I understand correctly you have a tag that encompasses all your data. Within that tag you have several tags that are stacked one above the other. And within that tag you have several tags floated next to each other, always the one below having the same width as the one on top of it? It looks to me you're making a table.

You can always cut your steak with a spoon, but knife is the tool to use. Even if someone told you you shouldn't be eating food off of a knife.
 
Upvote 0 Downvote
Great analogy Vragabond :)

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
707
3esolar
3
garcosta
  • Locked
  • Question
CSS Coding for Gradient Color Background for all Platforms
Replies
3
Views
133
1DMF
1DMF
csphard
  • Locked
  • Question
need help with footer h3 background-color. 2
Replies
8
Views
274
vacunita
vacunita
nwo4life
  • Locked
  • Question
Paypal button for multiple prices by Quantity and color
Replies
1
Views
100
ChrisHirst
ChrisHirst
yaknowss
  • Locked
  • Question
Create divs with different background colors
Replies
1
Views
117
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top