Effects of Div tags on following Table usage

[showman13]

Just to note: My brain in engaged and has been for awhile on this topic. I've learned and implemented a lot over the past week or so regarding CSS and Div tags, BUT...

I am running into issues with formatting of data within table cells that I've never seen before, when preceding them with div tags for the header portion of a webpage...

This is the site where the formatting is an issue: http://www.hctubs.com/index2.php

All I have ever used in the past has been tables for page layout, but just getting an education in CSS Div tags for layout to some degree.

What i'm wondering is if the use of Div tags for the header portion of a webpage would have any effect on the subsequent use of tables for remaining data on the page?

Header tags and line spacing and bolding of text are all acting differently then they ever have. In fact, if you look at the page source, you will see that all the lines I designated to be bolded, are not being bolded.

If preceeding the tables with div tags is the issue, is there a way to overcome it?

Could / Should the entire page be displayed using Div tags and replace the use of tables altogether?

May sound like strange questions, but trying to figure out the practical use and reasoning of using one over the other.

Hope someone is understanding of these questions and can give me some positive energy feedback.

Thanks
Douglas

[pritaeas]

Hard to tell what you want bolded. Am not digging through your CSS. One possible reason maybe validation errors. Why do you have so many nested tables?

[paulkd]

If I were going to use tables for a quick layout they would have been for the 3 columns at the top, but you have used floated divs, then further down you appear to be using a table where simple divs or paras are called for.

I would start by ripping out the CSS styles e.g. <h3 class="B"> make it <h3>. Your style sheet has a lot of horrendous style names which thankfully you don't appear to be using.

[showman13]

Thank you both for your replies...

pritaeas, There are multiple lines in the body of the page that were encased with the bold tag, but none of them were bolded as well as a good portion of other text formatting that was ignored.

As for the Tables, I've been using the same structure for quite awhile over several projects.
I used a fixed image in the css body tag the fills the screen 100% no matter what size monitor.

The outer table basically just sets up the overall table over the background image with a 150 wide gutter on the left and the right and the main body of 900 between them.

Then the second table I use for the main body content to place a translucent screen behind the body so that the text is more easily readable over the background image that is still visible through the screen.

The third table is used inside the main body table to determine the layout of individual elements of the content in the body of the page.

The header and first 2 tables are parts of a template type system I use so the pages all look the same structurally. Guess it is a good thing that most visitors don't go look behind the curtain to see how it is built, huh?

Paulkd
LOL, yep that stylesheet is a total disaster... it is a compilation over several projects and seems to just continuously grow. I keep telling myself that I should just throw it away and start fresh, but I guess I'm sort of like a hoarder in the respect that I never do throw it away... But that is a whole different story.

My issue / question is in regards to the effect of using DIV tags on the tables that come after. I'm completely new to using div tags at all, and don't really know where to draw the line between them and tables for layout, or maybe there isn't a line.

As I stated before, the use of DIV tags is completely new to me for major site design... My only use of them previous to this was to do a background highlight or something simple. Never anything major.

The <h3 class="B"> is basically there to Bold the header. the <h3> is the header without being bolded.

Maybe I'm going about this all wrong, and maybe the lightbulb will come on during this project to enlighten me to the potential uses of CSS and DIV tags... at least that is what I'm hoping.

[paulkd]

Hi showman13,

The div tags should not affect your table in any way.

You don't actually need div tags, simple H1->H6 and P tags should be sufficient for what you need (and your table).

The reason your H3 isn't naturally bold is that they have been set to "normal" in gen_css.css line 191.

[showman13]

I finally figured out what it was that was causing the issue with the formatting. Well, at least I know the large block that contains the specific issues. Now I just need to isolate what specifically it is.

The issue was in the 'RESET' block of code that I copied and pasted into the CSS... apparently it is doing some things that I didn't need it to do, so I need to investigate more closely to see exactly what it is.

[TonyG_cyprus]

The bottom line for me is tables are for 'tabulated data' i.e price lists, stock lists and the like,
The kind of thing that you are doing on this site needs only divs and css. It would be much, much simpler to code, and you could ditch much of your extremely complicated css. Sorry!
The site is coming on well though, looking good.

[showman13]

Thank You TonyG.

I guess that is where I am still questioning myself. After having used only tables basically for everything for several years, I'm beginning to think that I'm emotionally attached to them or something... LOL

It seems that I'm having a difficult time wrapping my head around the major change, but I think I will get there, and hopefully on this project. I think the struggle is between using tables which I know how to use and get the project done, and taking the time to learn something new, slowing down the completion of the project.

Not understanding why things work the way they do tends to hold me back, like the formatting issues that were caused by a few lines in the reset css, that once removed cleared up, but I don't know why. I'm assuming that since they were reset, that they would then need to be redefined in the CSS, but why go through the process, I'm not sure. But at the same time, some portions of the reset css were necessary for the jquery slider to work...

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Thanks again for your response and direction. Today might be a good day to jump in and see if I can format an entire page without any tables...

Douglas

[TonyG_cyprus]

Did it myself about two years ago,

After having used only tables basically for everything for several years, I'm beginning to think that I'm emotionally attached to them or something... LOL

I was the same, but now life is easier......

[showman13]

This is sort of off topic, but actually in the same realm.

I removed the lines from the reset portion of the CSS that were giving me issues, but I still have on issue that I can't find the answer to in the css...

When I bold a line in the script, it doesn't show as being bolded...

The first line in the last paragraph on this page http://www.hctubs.com/index2.php has bold tags wrapped around it completely, but is is not showing as bolded.

Any idea what might cause that?

<p class="med">
<font size="+1"><b>
HEALTHCRAFT Walk-in-Tubs offers the ONLY Walk In Tub in existence that offers all of the above combination of health benefits.
</b></font> 
No one offers the tremendous Therapeutic benefits of being above to heat the water to over 100+º to greatly enhance these Therapeutic Benefits. In Medical Circles it is widely understood and stated that the hotter the water is the greater the benefits of Hydrotherapy and Ozone Therapy. If there is not a way to heat up the water the ultimate benefits of these therapies is greatly diminished. This is a huge disadvantage and we are the ONLY Walk In Tub that has the ability to heat up the water and offer the Hot Tub benefits of this tremendous Therapy. 
<br>
<center><a href="downloads/web/treatment_times_temps.pdf" target="_blank"><font color="#3366FF" size="+2" STYLE="TEXT-DECORATION: NONE;">Click to read suggested temperature and duration of treatments for specific ailments.</font></a></center>  
</p>

Hi,

Without specifically mentioning why you are having trouble with your bold tags, could I make a couple of suggestions?

First, the idea of a CSS reset style sheet is to give you a blank canvas to start with. It forces all the different browsers to drop all their different ways of displaying some styles. It's a great help in making your pages look the same on different browsers. As you mention, if you reset a style, you need to specifically set it again but just with the styles you want.

Second, the idea of a CSS file is to remove all of the styling from your HTML and place it in a seperate file. Tags like bold should be replaced with their CSS alternative. Your page is being declared as XHTML1 strict which means your HTML tags need to follow XHTML rules to be valid code. This brings me to my third point.

Lastly, try validating your code at http://validator.w3.org/ This will give you a list of errors on your page that may be affecting your styles. Work through the list to correct all the errors and then see how your page looks (you have quite a lot of errors to fix I'm affraid).

[showman13]

Thank you for that direction Zagga.... much appreciated.

Honestly, I don't see a reason for XHTML1 strict...

I'm not designing for handheld devices / phones / etc. so probably no reasnon for anything other than HTML 4.01 Transitional

I haven't ever used that validator, although I seem to remember that someone else mentioned that and I never investigated it.

After changing doc type to HTML and cleaning up some obvious issues, I'm a little perplexed with some errors that the validator continues to display.

It is telling me there is no height or background attribute for a table declaration...

Also that numerous closing paragraph tags don't have matching Open tags, which is incorrect... each is matched up correctly.

I have cleard it from 106 errors down to 8, but don't see what the errors are

But the initial issue still exists - The <b> tag is not bolding the text...

Guess I have more learning to do.

Hi again,

The errors about no height or background for tables are because these tags were deprecated and are no longer valid (another reason to move all style to the CSS file).
In your CSS you can add the style:
table {height: 150px; background-color: black;}
and all your tables will be 150px high with a black background.

If you only want some tables like this, add the style:
.standardtable {height: 150px; background-color: black;}
then whenever you want this style, add the class 'standardtable' to your element.
For example:
<table class='standardtable'>

With the bold issue, add the style:
.boldtext {font-weight: bold;}
then in your HTML, wherever you want the text to be bold, add the class 'boldtext'.
for example:
This text is normal, <span class='boldtext'>this is bold</span>

The errors about paragraphs are harder to check without seeing your current code.