Gudday all
It’s time that I started to clean up my wife’s site (and my own act) again.
I have never bothered with the table’s marking up but now it is time.
See the introductory blurb on http://www.petalsandpatches.com/onfreedomswings.htm.
I would like to have the text within tables look like the introduction but cannot get it to look the same. What should I put into itemtable viz. font-family, font-size etc. to have the text in the table look like the text outside the table? And is it better to use px, em or something else?
You can change the borders individually like any css border to match the old (very old fashioned) style table rules. You can also adjust the cellspacing using css border-spacing (ie8+).
Note that the rules above would affect all tables so you would need to add a class to the table and to the css to make it specific to the table in question.
What is the “default” text family?
It depends on the browser or the user settings or styles that are cascading into the table form other parent elements. In your page the body has been set to arial which means the intro text will be arial and so will the rest of the content in the page assuming you haven’t over-ridden it anywhere. However in your table class you have changed it to verdana which is why it is different.
.itemtable {color:Black; font-size:12px;[B] font-family:Verdana, Garamond, "Times New Roman", Arial;[/B] text-align:center;}
Just remove the whole font-family rule and it will revert to Verdana (apart from old versions of IE which need specific font size and family re-applied to tables).
Do a search of the forum threads as there is recent in-depth thread on whether to use ems or pixels for layout (hint - use ems for mre scalable results but the issues aren’t always so clear cut).
Before answering your question, I’ll just add that that font stack doesn’t make any sense. The first font you list should be the one that you want to be used if it’s available, followed up fallback options (in decreasing preference but increasing popularity), ending with serif or sans-serif. If you start with Arial, there’s no point in listing other Windows fonts after that, because anyone who has those fonts will have Arial as well. And you want to have similar looking fonts in there so that you get a similar outcome, whichever font is used. None of those fonts are remotely similar to each other (OK, Garamond and TNR are not worlds apart, but Garamond is not fit for web deployment anyway), so they don’t belong in the same font stack.
I have being fiddling around but note that if I use
See the introductory blurb on http://www.petalsandpatches.com/onfreedomswings.htm.
I would like to have the text within tables look like the introduction but cannot get it to look the same. What should I put into itemtable viz. font-family, font-size etc. to have the text in the table look like the text outside the table? And is it better to use px, em or something else?
Your font declarations are absolutely all over the shop. I would go through your CSS file and strip out every font declaration – size and family. Then start by adding it back in only on body {…}. That will then be inherited to all elements, you don’t need to apply it to each and every one. You can then go through and style headings or other individual elements differently if you want them different.
Note that IE9 and under will not color the borders differently at 1px which is why I reverted to individual border colours (I originally used inset and outset also ;)).