Font-size not acting as I'd expect 1

Kuloch · Jul 28, 2004

Hey, I'm tweaking around with my business's site and seem to be having trouble with the font-size. I set body { font-size: 11pt } in a .css, but after the first 3 blocks of text everything goes back to a base 12pt - even if I change body's size to, say, 6pt. I can still % size, but it's from 12pt rather than my body's style.

Below is a stripped-down version of the page, and I can link to a copy of the actual page script if it'd help. I suspect I'm doing something around the 2nd table to block inheritance of body's font-size, but I can't see it with my few months of CSS experience (learned from the w3schools' tutorial).

[tt]
[Begin stylesheet]

body
{
font-family: Verdana, Times, sans-serif;
font-size: 11pt;
}

div.currTitle { font: bold 120%; }

.plus1 { font-size: 110%; }

.plus2 { font-size: 133%; }

.plus3 { font-size: 150%; }

.fullWidth { width: 100%; }

[End Stylesheet]

<div class="currTitle">Welcome</div>

<p>
<table class="plus2">
[some table stuff; various style classes used,
but none touch font or font-size;
text affected by stylesheet's body font-size]
</table>
</p>

<p>text size here changes w/ body style's size</p>

<table class="fullWidth">
<tr class="center"><td>
<table><tr><td>

<div class="plus2">NOW IGNORING FONT-SIZE</div>
<ul>
<li><a class="plain" href="link">still ignoring</a></li>
[repeat 4x]
</ul>

</td></tr></table>

</td><td>
<img>
</td></tr></table>

<div class="plus2">still ignoring</div>

<p>still ignoring</p>
[/tt]

... and so on

Any comments/suggestions are appreciated.

cLFlaVA · Jul 28, 2004

<div class="plus2"> is ignoring for obvious reasons - it's set to a font size of 133%.

<p> doesn't work because there is no font-size declared for it in the css. Try changin the following in your css:

body, p {
font-family: Verdana, Times, sans-serif;
font-size: 11pt;
}

*cLFlaVA
----------------------------
A polar bear walks into a bar and says, "Can I have a ... beer?"
The bartender asks, "What's with the big pause?

vongrunt · Jul 28, 2004

Some tags (TABLE, INPUT) don't inherit font-size from BODY. Try this:

Code:

body[b], table[/b]
{	font-family: Verdana, Times, sans-serif;
	font-size: 18pt;
}

Kuloch · Jul 29, 2004

Ok, so I guess my assumption that everything inherits values from an enclosing tag is wrong. That might explain a couple other apparent oddities...

Though I still don't follow below (further stripped down from above, with just the pertinent styles)

[tt]
<div style="font-size: 120%">

text 133% of body's style

</div>

<p>
<table style="font-size: 133%">

text size is 133% of body's style

</table>
</p>

<table><tr><td>
<table><tr><td>
<div style="font-size: 133%">

text size is 133% of browser's default

</div>
</td></tr></table>
</td></tr></table>
[/tt]

Inside the <div> and <p><table>, the body's style is applied. Then inside the <table><table><div>, body's is ignored.

Then, every <div> and <p> afterward also ignores body's style. Does the table-in-a-table block the inheritance that was previously there?

I'll give your suggestions a try, though. I imagine they'll fix the problem, but I'd like to understand exactly how CSS works. Thanks again.

Kuloch · Aug 3, 2004

I set font-size for div, p, and table; and as said, it fixed my problem. I'll have to remember to always set base for each tag in the future.

But I'm still baffled at how it responded to my initial css, inheriting for a few tags, then dropping the inheritance (but keeping font-family and color inheritance). I'd *really* appreciate any ideas on what exactly happened.

Perhaps it's just a bug in CSS that - if your ss is done right - you should never hit. But I still think I'm just missing something.

ChrisHunt · Aug 4, 2004

Font size should be inherited from <body> down to the tags it encloses but, as you've found out, sometimes it isn't - due to browser bugs. Were you getting the same problem with all browsers, or just one of them?

Are you declaring a full <DOCTYPE> for your document? If not, browsers may render your page in "quirks mode" including all kinds of old misbehaviours instead of applying the latest standards.

Another possible cause of your problem is that a CSS rule is being cascaded from somewhere that you haven't noticed. You can track this down by using the Firefox browser (or similar Mozilla product) with the Web Developer extension. The extension gives you the option of clicking on an element on your page and having it tell you which CSS rules apply to it. Very handy in tracking down CSS conflicts.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

Kuloch · Aug 4, 2004

All the computers I use (about 6 between 2 houses) have IE 6.X, so it might just be a M$ bug. I tried Mozilla once, but I've just been so used to IE for so long... I'll get Firefox up and running once I finally set up my Linux box (should be soon).

Yeah, my DOCTYPE is declared, as well as all/most other standard pre-body tags. There *shouldn't* be any errors in my code...

I'm also curious, where would be the best place to ask for critiques of my site? I know HTML pretty well, CSS a bit, and I've done some basic PHP - so I can probably within a few days figure out how to do most anything (that isn't too complicated), but I'm not a graphic artist by any stretch, and this is my first actual production site.

The address is:

http://cavs.ath.cx/

I had my sister look at it, and she said "Well... it's pretty boring." I don't want to turn it into a cheesy big-flashy-colorful-stuff-all-over page, and neither do I want to just copy off some other site.

If anyone here wouldn't mind giving a tip or two - or just redirecting me to a layout/overall-look advice place - I'd appreciate it.

BillyRayPreachersSon · Aug 5, 2004

where would be the best place to ask for critiques of my site?

From a design perspective, you could try the Web Site Designers forum:

http://www.tek-tips.com/threadminder.cfm?spid=253

From a coding perspective, I'd say here or the JS forum might be your best bet.

Hope this helps,
Dan

ChrisHunt · Aug 5, 2004

First impressions, on hitting the first page, is "who or what is CAVS? Where are those links going to take me?". My assumption, for example, was that "Church" would take me to some personal pages about your local church - not to your business which deals with churches.

The purpose of that splash screen appears to be to change your company name according to who you're selling to. It's a kinda cute idea - but what does it say to potential customers about your business? "These guys can't even decide what their name is, why should I trust them with my money?". I assume you've already looked into the legal implications (if any) of the one business, three names setup.

If it were my business, I'd drop the three names bit and have visitors arrive directly in, say,

http://cavs.ath.cx/welcome.php?div=Custom

. If you're really wedded to the multi-name idea, put more information on the splash page introducing your company, what is does, and directing visitors to the area likely to be of interest to them.

Once you're in, it looks pretty good. Simple, straightforward, clear. The only thing you might consider placing more prominently is your geographical location - you should be looking to rate high on searches like "Ohio video installation", and you're unlikely to do so with the address tucked away at the end.

The other weak point content-wise is the "Showcase". It should be a really good selling point, but it's not doing much for you as-is. All you've got is pictures of bits of AV kit - black & white boxes with switches, lights and wires. As a layman, I don't even know what I'm looking at, let alone whether it's a good installation.

Instead, take each of your showcase sites as a case study. Write a description of each job - the particular challenges involved in each one, the skills you used to surmount them, and the capabilities of the system you installed. The pictures can then be used to illustrate these points.

Looking under the hood, the first thing I see is that your pages don't validate. It's nothing major - a malformed <meta> tag and a lot of missing alt attributes - but you should fix it. I also note that (as I guessed before) you don't have a full DOCTYPE declaration - it should be

Code:

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

You've only got the first half.

You've got a LOT of tables in there to handle your layout. Some of them don't seem to do anything at all, for example:

Code:

  <table><tr><td>

<!-- -->
<div class="plus2">
  Our Commitments:
</div>
<ul>
  <li><a class="plain" href="what.php?div=Custom#quality">High Quality Standards</a></li>
  <li><a class="plain" href="what.php?div=Custom#price">Low Price Overhead</a></li>
  <li><a class="plain" href="what.php?div=Custom#service">Dependable Service</a></li>
  <li><a class="plain" href="what.php?div=Custom#config">Customized Setup</a></li>
  <li><a class="plain" href="what.php?div=Custom#ease">Ease-of-Use</a></li>
</ul>
<!-- -->

  </td></tr></table>

What's that table for? Also, you should be using proper heading tags for your (sub)headings instead of <div>s, for example:

Code:

<h2>Our Commitments:</h2>

That's enough comment for now. All-in-all, I think it's 90% of the way to being a really good site - whatever your sister says! It just needs some final polishing.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

Kuloch · Aug 10, 2004

Quick question while I'm working on your suggestions...

Is there a good tag for just changing font style?

I've always disliked the <H#> tags due to the automatic double break after them, and it'd also be nice to change style mid-paragraph (like the deprecated <b> and <i>, but for strict compliance).

I couldn't find anything in a manual search through an XHTML reference listing, so I've just been using <p> and <div> for that purpose. Yeah, it kind of defeats the purpose of XHTML, but I don't see any other convenient way to change font (unless <a> would do it, but that still feels like a hack to me).

cLFlaVA · Aug 10, 2004

Something like this?

[tt]<p>
This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. <span style="color:red;">This is a body of text.</span> This is a body of text. This is a body of text. This is a body of text. This is a body of text.
</p>[/tt]

*cLFlaVA
----------------------------
A pirate walks into a bar with a huge ship's steering wheel down his pants.
The bartender asks, "Are you aware that you have a steering wheel down your pants?"
The pirate replies, "Arrrrr! It's driving me nuts!

ChrisHunt · Aug 11, 2004

Is there a good tag for just changing font style?

The best way is to use CSS applied to whatever tag is appropriate. As cLFlaVA says, you can use <span>s in the middle of paragraphs, unless there's a more meaningful tag for the particular context you're interested in (eg. <code>, <var>, <address>, etc.). For example, if you want to highlight particular sentences in a paragraph:

Code:

<p>
This is ordinary. This is ordinary. This is ordinary. This is ordinary. <span class="highlight">This is important.</span> This is ordinary. This is ordinary.
</p>

You can then put in your CSS file:

Code:

.highlight {
   font-weight: bold;
}

Note that I didn't call the class "bold", even though that's what it does. That's in case I change my mind in the future about how to highlight text, to a marker pen look for example:

Code:

.highlight {
   background-color: yellow;
}

I've always disliked the <H#> tags due to the automatic double break after them

That's easily dealt with - just restyle them to your taste with CSS:

Code:

h1, h2, h3, h4, h5, h6 {
   margin-bottom: 0; /* or whatever you prefer */
}

It's important to use proper heading tags for headings, as search engines pay extra attention to the headings in your document. There are also accessibility benefits to be had from them.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

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!

Font-size not acting as I'd expect 1

Kuloch

Programmer

cLFlaVA

Programmer

vongrunt

Programmer

Kuloch

Programmer

Kuloch

Programmer

ChrisHunt

Programmer

Kuloch

Programmer

BillyRayPreachersSon

Programmer

ChrisHunt

Programmer

Kuloch

Programmer

cLFlaVA

Programmer

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor