Forum Moderators: not2easy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
<div id="nav">%%NAVIGATION%%</div>
<div id="top">
<a href="%%BASE_ADDRESS%%">
<img src="theme/img/title.png" alt="%%TITLE%%" />
</a>
</div>
<div id="right">
%%RIGHT_TEXT_SHY%%
</div>
%%MAIN_TEXT_SHY%%
%%FOOTNOTES%%
</div>
<div id="footerbox">
</div>
</body>
</html>
In the right column I have the following HTML code
%%RIGHT_TEXT_SHY%% = ...
<p>happy birthday, aaron!</p>
<div class="address">
<p>Name</p>
<p>Street</p>
</div>
My stylesheet looks like this:
blockquote, h1, h2, h3, h4, h5, h6, input, li,
p, select, td, textarea {
font-family:georgia,verdana,arial,helvetica,sans-serif;
font-size:90%;
}
#right {
float:right;
width: 27%;
}
#right p {
font-size:75%;
}
#right div.address {
margin: 8px 12px;
}
#right div.address p {
text-indent:0px;
margin: 0px;
}
#right div.address p.ort {
margin: 2px 0px 0px 0px;
}
p {
margin: 8px 12px;
line-height: 1.2em;
text-indent: 16px;
}
The strange thing is that Name and Street will be displayed in a smaller font than happy birthday, aaron both in Moz1.1 and IE6. Why?
Only if I add font-size: 100%; to the #right div.address class do I get the right result. But why do I need to do that. It was my understanding that that was the default unless any element inherited something differently from one of its ancestors. (I do realize that the last part is a redundant sentence, since that is the meaning of default.)
I did not set the font-size for any element <html><body><div id="right"><div class="address"><p> other than p. So html, body, #right, div.address all should be set to the default 100%. Then why do I need to set in explicitly. Is this just an error in the implementation or I there something Iīm missing.
Any help would be appreciated.
Andreas
but that example you provided seems to prove that inheritance is taken a little more than literally!
I can't tell from all your code but I'm thinking that the paragraph setting may have something to with it...but that is just a guess
I know it's not (always)logical, (much as we'd like it to be) but it's the only thing I can see, from the code you've provided...
but it goes to prove that no matter how much you/we may understand this CSS lark...they're always going to catch us out ;)
Suzy
I have been very careful to avoid any inherited font-size settings since I know these to be buggy across a lot of implementations.
Could you please explain your idea about the paragraph settings to be the cause of this behaviour. There is no more code tinkering with paragraph font-sizes.
Andreas
ref:
<p>happy birthday, aaron!</p>
<div class="address">
<p>Name</p>
<p>Street</p>
</div>
but I'm thinking that because the div class"address" appears after the <p> tag you've applied the font-size to..that perhaps the following <p> tags are inheriting where they shouldn't..
like I say it's not logical, but without the whole page code and CSS I can't say for sure.
I've just spent the weekend getting a guestbook CSS & XHTML compliant, so at this point I'm about ready to believe anything!...tired and greyer :)
Suzy
[edit] I'm presuming you're using php or the like,
I notice you have a general setting for your <p> tag, so without knowing what <div> this falls in.. it's fairly impossible to say...
if you've a test page online can you sticky me the URL...this may help
thanks
Suzy[/edit]
I seem to have lost the "owner edit button" on my posts so had to reply this way again..
Andreas, it must have been late and I must have been tired ;)
I understand code now ;)
in you original post, there is a closing </div> tag that doesn't have an opening one.....and I had pasted code into f/page which auto removed it, so I didn't see it earlier
don't know if that affects anything
re: previous post just ignore it!
Suzy
Nick
Nick, you are right, but that does not change the strange inheritance behaviour. Any ideas on that?
Andreas
Nick
At least I was able to increase my post count. ;)
BTW CSS sucks if you canīt get it to work for no apparent reason.
Andreas
Backtrack and evaluate each font sizing and style applied and you will see how this is happening. Remember that CSS is cascading and applies items down that list and closest to the actual content rendered. I have to look at this a bit closer, but that is what I am seeing.
You may try lifting all those combo styles out of your sheet and simplify the styles a bit. [easier to debug, less chances of items being applied twice to an element or text.]
holly
PS: (Added after post) - I noticed a TD in the styles, is this area also in a table cell by any chance? If so, TD(90% size)(P 90% size), then (address class 75%) size may be going on here, also?
Have you run the CSS through [jigsaw.w3.org...] just in case there is something that has been missed?
Andreas
I noticed a TD in the styles, is this area also in a table cell by any chance? If so, TD(90% size)(P 90% size), then (address class 75%) size may be going on here, also?
There are no tables on the page at all.
Andreas
In the <p> of div "address" maybe there're two styles applied (90% after 75%)?
If this is true, I'd modify one of the styles
