?
Solved

Converting clunky table with one big image bg to a modern DIV

Posted on 2012-09-18
6
Medium Priority
?
208 Views
Last Modified: 2012-09-27
Hello

I have a table on a site that is giving me headaches.

I would like to convert it to a div version

I'll post the url in my next comment.

I use this "table" on several pages. Most of them are 3 column.  But occasionally it needs to be 4 columns.

But for now I would like it to be a 3 column and look about the same way it does as a table.  It has a background image that fills the entire overall div.  I need to keep the background as an image because of beveled edges, which for now the client wants.

Any best practices and modern browser compatible (firefox, ie and chrome) would be appreciated:

Thanks

Rowby
0
Comment
Question by:Rowby Goren
  • 4
  • 2
6 Comments
 
LVL 9

Author Comment

by:Rowby Goren
ID: 38411988
Here's a tiny link to the site:

Link to test site

It's the top table with the word Daytona on it.

Rowby
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38412556
The table / div debate has been raging for years - at the core of it is that tables should be used for representing tabular data and not for layout.

In this case it looks like your table is being used for tabular data - and converting it to a div is not necessarily best practice.

What are the primary reasons for you to want to change it?
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 38412833
Hi Julian

For compatibility reasons.  I'm having problems keeping the table compatible on different browsers -- Firefox, Explorer and Chrome  

if you look at the link in firefox the word Daytona at the top of the table is precisely positioned as my client wants it.  But in Chrome it is slightly higher.

As I clone this table for other products it seems to take forever to get it all positioned correctly.  So I thought that all DIVS would be the way to go and be more easily compatible.

I originally built it as a table because it was tabular data.  And after looking over the debates, I went with it.  But now I am not sure it is the best choice.

Your thoughts?

Thanks

Rowby
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 60

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 38413001
I would keep it as a table but I would refrain from using <p> tags in the cells. Unless you nullify the styling on <p> the tag comes pre-styled and is not the same across all browsers.

Change your <p> to <div>'s or <span>'s - if you can't achieve the styling you want directly through the <td> element.

With respect to the background image - you can achieve the same affect by doing the following

In the <td> that contains Daytona - put a <div> with a background containing only the gray rounded bits. You can style the div like so
<td class="columnTitles">
  <div class="colTop">Daytona</div>
</td>
.colTop{
    background: url(/images/stories/SKU_PNGs/daytona/daytona-specs-bg.png) no-repeat 0 0;
    width: 165px;
    height: 26px;
    line-height: 26px;
    text-align: center;
}
.colBottom {
    background: url(/images/stories/SKU_PNGs/daytona/daytona-specs-bg.png) no-repeat 0 -628px;
    width: 165px;
    height: 26px;
    line-height: 26px;
    text-align: center;
}

Open in new window


You can then give the <td> elements in the centre column a background colour of #78933d and the last cell at the bottom can be styled like so
<td><div class="colBottom">Yes </div></td>

Open in new window


Naturally you can collapse the background image to just the top and bottom and adjust stylesheet accordingly.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 38413470
Ah  those "p" tags.  I thought they would help with the styling.   But I see what you mean.

Let me digest your suggestions (give me a day -- will be gone today)  and try them out!

Rowby
0
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 38441126
Hi<br /><br />Sorry for the delay. I fixed the p's and  Will watch for those <p>'s in table in the future.  I will also try the rounded bits like you said next time around.   Rowby
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month16 days, 15 hours left to enroll

862 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