p, id, and class in divs

[IanS]

I'm trying to avoid using 'p' inside a div as it causes a line-break and I want the text right at the top of the box.Have font family and style set in outer div using id, which works, but cannot make an inner div (inside the other) recognise the style set in the id for this.Tried using 'span class="mystyle"' here, but this doesn't work either.Can anyone suggest a legal way of doing what I'm trying to do, I'm obviously not getting it at all. (Old-timer still trying to port my brain over from tables...)Been reading through the w3 site and forum for a week now, btw, can't find what I need to know.thanks in advance,IanPS. or if I'm talking nonsense here, please tell what isn't nonsense?!

[Synook]

It's semantically incorrect to not use paragraphs for text (and invalid, I believe). If you don't want the "line-break" (not quite sure what you are referring to), remove it using CSS.

[thescientist]

do you have a live link? or some code showing what you've tried?

[IanS]

How do you remove a line-break with CSS?No live link yet. Code below.Okay, this is actually working as far as lining-up the the text with the top of the box is concerned. (It has to line up with the top of the logo on it's left.)However, the second div for text isn't getting the font change defined in the id (#textContainerTWO), its just coming up as default Times.This is so easy, what am I missing?Or is it just so wrong???stylesheet -.....#content { width: 350px; padding: 0 10px 10px 0; margin: 0;}#logoContainer { float: left; width: 107px; height: 89px; margin-bottom: 1px;}#textContainerONE { padding:0; margin:0; font-family: Verdana, sans serif; font-size:9pt; color:#44444; line-height: 1.3;}#textContainerTWO { (-- this one doesn't work) padding:0; margin:0; font-family: "Century Gothic", Verdana, Arial, Helvetica, sans-serif; font-size:10pt; color:#757978; line-height: 1.3;}html -.....<div id=content><div id=logoContainer><img src="index_files/logo1.jpg" border=0></a></div><div id=textContainerONE><b>Title</b><br />sub-title link<br />sub-title link<br />sub-title link<br /></div><div class="clearer"></div><div id=logoContainer><img src="index_files/logo2.jpg" border=0></a></div><div id=textContainerTWO><b>Title</b> <br />sub-title link <br />sub-title link <br />sub-title link <br /></div><div class="clearer"></div></div>

[thescientist]

you should try putting your id's in quotes, as well as any other inline style declarations, and move all your CSS declarations to the stylesheet if possible. check out the validator (see my sig), it can you help you catch little mistakes in your code (which I see a few more of). It's good practice to always declare a size (relative or absolute) for things like line height, border, etc and maybe even good practice to maintain consistency between them, i.e. using all px instead of mixing pixels and points?. You should also avoid using <br> tags, that's what margin and padding are for.

[jeffman]

I routinely set the margin and padding of <p> elements to 0. That eliminates empty space beneath paragraphs, and above the first one. That generally also eliminates the need for <br> elements, since beginning a new <p> now has the same effect. If you DO want space before or (more usually) after a <p> element, set it's margin-bottom property to some positive value.

[IanS]

I understood that using px to set font size doesn't work in IE? That's why I used pt. (Haven't tried px on IE yet.)Thanks, setting margins, etc., to 0 in p sorted out that problem.I thought it would be something blindingly obvious, but not immediately apparent (hey, that's a good description of CSS for the newbie! Or maybe I should just make it my sig.)cheers,IanPS. Still not sure about 'relative' and 'absolute' or when/how this works...

[ShadowMage]

It's semantically incorrect to not use paragraphs for text (and invalid, I believe).

Even if the text is inside a div? I know that's not invalid, because I do it and it does validate using a XHTML Strict DTD, but is it really semantically incorrect to put bare text inside a div?

[jeffman]

Don't confuse semantics with structural validity. You can put a footnote in a <h1> element and get validated. Note that Synook tends to be pretty stiff when it comes to semantics. I don't mean that judgmentally. The point being made is simply that text belongs in a text-oriented container, not simply a general-purpose container.FWIW, I have occasionally discovered that I can clear up cross-browser problems by putting "naked" text in a <p> element. List-style drop-down menus come immediately to mind.

[thescientist]

PS. Still not sure about 'relative' and 'absolute' or when/how this works...

relative units of measurement refer to those units who's size is not fixed to anything, more that their size is relative to something else. Examples are %'s and em's, which are relative to their parent element and browser font-magnification/size, respectively.absolute units of measurement are fixed, like pixels. 100px is a 100px, no matter what the screen size is. Resolution is another matter entirely...

[IanS]

Many thanks allI'll redo the pages to make sure all is as it should be.Better that than run into trouble later and can't figure out why...I only used the 'naked' text in an attempt to get rid of the white space above the paragraph. All sorted now.Actually, this arises from 'design-think' as different from 'coding-think'. I'm a designer by nature, not a coder. So sometimes the creating process is looking for solutions that can get a bit 'off the wall' if there isn't a proper understanding of the coding rules. But I still prefer 'hand-crafting' to drowning in 'dreamweaver' anyday!cheers,IanPS. Trying to mark this one as 'solved' but can't find where to do that.