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 Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Replacement of HTML Table With CSS not working

Status
Not open for further replies.
Jillq

Jillq

Programmer
Jun 28, 2008
30
US
My site has in the header.php file
______________________
media="screen" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css"> textarea {width:50%;} </style>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
</head>

<body>
<div id="contentheader">
<table cellpadding="0" cellspacing="0">
<tr align="center">
<td>ACTUAL SOLUTIONS</td>
<td class="dots">::</td>
<td>ACTUAL CURES</td>
</tr>
</table>
</div>
__________________________________

in the CSS is
_________________________________
div#contentheader {
padding:1.2em 140px;
background-color:#BFBFFF;
}
div#contentheader table {
width:100%;
}
div#contentheader table td {
font-size:1.2em;
color:#3F3F7F;
font-weight:bold;
}
______________________________

I added this to the new CSS code
_______________________________
div.c2 {width: 100%;}
div.c1 {float: left; width: 33%;}
_______________________________

and in the header I replaced the HTML table with this new code

________________________________
<div class="c2">
<div class="c1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Actual Solutions</div>
<div class="c1"><em>::</em></div>
<div class="c1">Actual Cures&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
</div>
______________________________________

The new code validates on it's own, but when placed it in my website, something I'm doing wrong is not allowing the new code to work.
All I'm trying to do is replace an html table with CSS.

Have any idea why the new code isn't working on my site?

Thanks,

JillQ
 
Sort by date Sort by votes
Nope. We can test your code, but since you said that it actually is working, there's no reason for us to bother.

We would need to see your actual code for the entire page, or better, a link to the page. Usually there would be another CSS attribute defined somewhere else interfering with your current CSS, when experiencing issues like you describe. But there's no way to be sure without seeing more of your page.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Here's the code up to the beginning of the text.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="
<head profile="<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title></title>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href=" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href=" />
<meta name="generator" content="WordPress 2.5.1" />


<!-- Powered by AdSense-Deluxe WordPress Plugin v0.8 - -->

<!-- all in one seo pack 1.4.6.8 [-1,-1] -->
<meta name="description" content="Diseases caused by long-term nutritional and antioxidant deficiencies cause eight times more deaths than all other causes of death combined." />

<meta name="keywords" content="degenerative, disease, deterioration, body, degenerative disease, nutrition" />
<!-- /all in one seo pack -->

<meta name="generator" content="WordPress 2.5.1" /> <!-- leave this for stats -->

<link rel="stylesheet" href=" type="text/css" media="screen" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css"> textarea {width:50%;} </style>
<link rel="pingback" href=" />

</head>

<body>
<div id="contentheader">
<table cellpadding="0" cellspacing="0">

<tr align="center">
<td>SOLUTIONS</td>
<td class="dots">::</td>
<td>CURES</td>
</tr>
</table>
</div>
<div id="content">

<div id="colmid">
<div id="colleft">
<div id="col1wrap">
<div id="col1">



Thanks,

JillQ
 
Upvote 0 Downvote
Here's the CSS table"

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>..</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
div.c2 {width: 100%;}
div.c1 {float: left; width: 33%;}
</style>
</head>
<body>
<div class="c2">
<div class="c1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Actual Solutions</div>
<div class="c1"><em>::</em></div>
<div class="c1">Actual Cures&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
</div>
</body>
</html>


The css on the site is

div#contentheader {
padding:1.2em 140px;
background-color:#BFBFFF;
}
div#contentheader table {
width:100%;
}
div#contentheader table td {
font-size:1.2em;
color:#3F3F7F;
font-weight:bold;
}

.dots {
font-family:"Times New Roman";
font-style:italic;
font-weight:bold;
}

.c2 {width: 100%;}
.c1 {float: left; width: 33%;}


I tried it with div.c1/div.c2 and just .c1/.c2 and neither worked.

Thanks
 
Upvote 0 Downvote
1. Add a proper doctype to the css page. Without one, you can't really expect uniform results.

2. Remove the non-breaking spaces ([ignore]&nbsp;[/ignore]) from the CSS code. You can use padding and such for advanced text positioning.

3. Remove the table based css from your CSS example. It does nothing but cause overhead.

Now I am not sure what is not working? Is the simple example working? So having the code for the simple example is useless. And having a link to the old site where it is done with a table is of no use as well. Can you show us where your new page is integrated into the old page and it is not working.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Vragabond,

I'm sure that's part of the problem (&nbsp; in the CSS code). You're definitely the first person I heard say choose HTML tables over CSS tables. What are the conditions when you choose HTML tables over CSS tables? Don't bother just for one table?

Thanks,

Roscoe
 
Upvote 0 Downvote
You're getting confused as to what I said. I said you should remove the styling for tables in your CSS. If you're not using tables in your code, you shouldn't use any styling for it.

There's no choice in choosing HTML over CSS tables, mainly because CSS tables do not exist. CSS is a tool to style HTML elements. HTML is a tool to structure a web page. Since table is part of the structure, it exists in HTML. CSS defines how this table will look like.

Tables should be used in HTML. Whenever you have tabular data on your page, you should use a table. However, in the past, tables were abused to create the layout for a page. For layout, it is smarter to used unnamed blocks (divs) and use css to make the boxes appear in the correct place and size.

Your floated approach would be OK. But you need to show us how it is not working on the page in question.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
The CSS table with the DTD and with the &nbsp; validates

at

The full code containing the CSS table used to test the CSS table is this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>..</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
div.c2 {width: 100%;}
div.c1 {float: left; width: 33%;}
</style>
</head>
<body>
<div class="c2">
<div class="c1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Actual Solutions</div>
<div class="c1"><em>::</em></div>
<div class="c1">Actual Cures&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
</div>
</body>
</html>


I want to replace the HTML table that I have in my code with the CSS table,
this is that HTML table:

<table cellpadding="0" cellspacing="0">
<tr align="center">
<td>ACTUAL SOLUTIONS</td>
<td class="dots">::</td>
<td>ACTUAL CURES</td>
</tr>
</table>

This is that CSS table

<div class="c2">
<div class="c1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Actual Solutions</div>
<div class="c1"><em>::</em></div>
<div class="c1">Actual Cures&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
</div>


I did just that using in these CSS definitions

div#contentheader {
padding:1.2em 140px;
background-color:#BFBFFF;
}
div#contentheader table {
width:100%;
}
div#contentheader table td {
font-size:1.2em;
color:#3F3F7F;
font-weight:bold;
}
div.c2 {width: 100%;}
div.c1 {float: left; width: 33%;}

But it didn't work.


I tried changing div.c2 and div.c1 to .c2 and .c1 and the problem isn't corrected. There is a programming error in there some where.

Thanks,

Jillq
 
Upvote 0 Downvote
1. Your doctype is not proper -- it does not force IE to go into standards mode (other browsers' quirks mode might not be as bad as IE's). I would advise not to continue debugging until you have a proper doctype.

2. You still have non-breaking spaces in your code. I still advise you remove them.

Your code works for me, but to be honest, you still haven't told us what is it that does not work in your circumstance and which is the browser you're seeing this issue.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
I think we're arguing semantics here. There are no css tables.
From the looks of your original page, you are simply trying to display two pieces of text with a pair of colons:

Actual Solutions :: Actual Cures

There are many, many ways of doing this with css.
You could float them as you are doing and give each of them the same % width (or different widths).
You could use a span with padding (much less markup than in your example).
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" [blue]"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL][/blue]
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Double Colon</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
.c2 {width: 95%;
text-align:center;}
.c2 span {
padding: 0 40px 0 40px;
}
</style>
</head>
<body>
<div class="c2">
<h1>Actual Solutions <span>::</span>Actual Cures<h1>
</div>
</div>
</body>
</html>

My example uses a complete doctype. Even though your example validated, you are typically better off using the DTD as above.

You could simplify this further and/or substitue a <p> tag or some other header tag <h2>, etc.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
There's an extraneous </div> tag in my example, but that doesn't affect the output. [blush]

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
Greg,

That's a really simple way of doing the HTML table in CSS. Let me replce my HTML table with your CSS method and see if I can get it to work in my code. I couldn't figure how to get my version of a "CSS table" to work in place of my HTML table (See the html table code in context at the very top of this thread.), so I'll try your way, although even if I could get my CSS to work inplace of the HTML table, I would still try your way.

Thanks Greg,

Jillq
 
Upvote 0 Downvote
Traingamer,
That's a really simple way of doing the ......

Overlooked your name for Greg. Sorry.

Jillq
 
Upvote 0 Downvote
I know some might say this is just needless complaining on my part, but I think that as long as you will refer to CSS based layouts as CSS tables you will have problems with these kind of designs. You need to stop thinking in the context of tables. If I were to ask you to draw me a layout of something on the paper, I am sure you would not be drawing tables but logical blocks instead. Try to wrap your mindset around that.



___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Traingamer,

I tried it but it's not fluid width friendly for text. When you narrow the browser the right most word buckles down to the next line and centers for the whole width, whereas with the table I have the second and last word drop down at the same time and center with the word they go with. And now that I double check my CSS table, it doesn't narrow properly either. So now Im back to square one; How to duplicate <table cellpadding="0" cellspacing="0">
<tr align="center">
<td>ACTUAL SOLUTIONS</td>
<td class="dots">::</td>
<td>ACTUAL CURES</td>
</tr>
</table>

in CSS.
 
Upvote 0 Downvote
Take out the [blue]width: 95%;[/blue] - it really isn't needed. (Of course, it won't solve the problem either).

Use an <h2> or <h3> or something else - or specify a smaller text size - my answer was not designed to be bulletproof/fluid (it was just an example to get you started/thinking).
If you shrink your page that much, what do you want to happen? Is it important to your users? To your branding/image?

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
You can try:
Code: 
.c2 {
text-align:center;
[blue]white-space: nowrap;[/blue]}
but that may not be what you're looking for either.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
Traingamer,

It was worth a try, but unfortuntately it didn't work. Thanks for trying.


Jillq
 
Upvote 0 Downvote
TrainGamer,

I think there' no solution. There's a new CSS property, p.cell {display: table-cell;}, but it doesn't work on IE (FF-OK)and the work around for IE involves "filters". I tried the new property in FF and it doesn't work the same as 3 TDs.

For now, I'm happy with 1 table and 3 cells.


Thanks,

Jillq
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
786
spamjim
spamjim
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
464
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
131
lmcate
lmcate
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
820
Chris Miller
Chris Miller
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
396
3esolar
3

Part and Inventory Search

Sponsor

Back
Top