Inline CSS complications
Please help me with my CSS. I just learned / am still learning CSS. My site was done without CSS and now I'm going in to each individual page and converting all the font tag to style (CSS) tags. After the header and the footer files, I'm on only my second page to 'convert' and I've run into problems. Please help me.
My page in question is at http://www.charlottemlb.com/softball/leagues.shtml. I've got CSS working properly in the header but sometimes I need to vary from the norm to create different size text by using INLINE CSS tagging. This is where my problem is.
I stopped 'fixing' the text just after the line "Mecklenburg County Park & Recreation" (just under Open Leagues). It used to look just like the section below it ("Charlotte Sports Connection"). But when I put in my I end up with a HUGE double line spacing problem! It should only be before the next text line. What's going on here? I was under the impression that I HAD to close my tags (, , etc) in order for an inline CSS code to work. If is always going to create this problem, than how should I be coding my INLINE CSS
Please help! Thank you very much!!
Suzanne posted this at 03:52 — 27th April 2002.
She has: 5,507 posts
Joined: Feb 2000
You have badly formed HTML, that's the problem.
Mecklenburg County Park & Recreation
Should be:
Mecklenburg County Park & Recreation
...
Or even better
Mecklenburg County Park & Recreation
...
Do you see what the differences are?
fifeclub posted this at 17:32 — 27th April 2002.
He has: 688 posts
Joined: Feb 2001
No such luck. I changed all font, bold, and itlics tags in that section to inline CSS and I still get massive spaces. Inparticular, look at the line "a.k.a. Park & Rec". Aside from the fsct that it should be italics, it should be a both above and below it, but those closing tags (both and ) are still causing problems
Busy posted this at 23:16 — 27th April 2002.
He has: 6,151 posts
Joined: May 2001
any reason your using inline instead of just one file to call your css from?
you could use a content tag or a content tag or even use the tag
Suzanne posted this at 23:27 — 27th April 2002.
She has: 5,507 posts
Joined: Feb 2000
there is no such thing as a .
I really recommend you validate that code. If you use line-height in the CSS there will be spacing problems in Netscape, however you shouldn't be using in your code at all at this point.
Drop it into valid HTML like this:
Mecklenburg County Park & Recreation
Content goes here.
IMAGE
HEADING
CONTENT
...
And you will lose most of the spacing problems. Don't use space at all, instead allow the browser to automatically do the spacing for you. You can control it in CSS if there is the need (like with tables).
The problem is that a) you are using inline CSS instead of local or global where it's not needed and b) you have badly formed HTML and it's mucking things up.
Suzanne posted this at 23:50 — 27th April 2002.
She has: 5,507 posts
Joined: Feb 2000
Oh, and there are naturally spaces between paragraphs. You can sort of control this now with CSS, but if you really don't want any lines between paragraphs at all (as opposed to one blank line), then you'll have to put all the text into one and use where needed. However...
blah blah blah blah
blah blah blah
Is the same as
blah blah blah blah
blah blah blah
But the latter is far neater and forwards compatible.
fifeclub posted this at 02:41 — 28th April 2002.
He has: 688 posts
Joined: Feb 2001
Perhaps I've been going about this wrong. I am using 'global' CSS for all "normal" text (Helvetica 12px). I am using inline CSS to overwrite individial sections to prodice bold, italics, and various sizes. Are you suggesting that maybe I use the 'global' type (or whatever it's called)? In my header I have specific menu css's that work perfectly. Should I do it in a similar way to that, with many variations that I just call using the class tag?
Suzanne -
You suggested Content goes here. but how do I start a new line similar to ? I guess my overall question is simply how do you perform a type function, without actually using , so as to not screw up my type inline CSS? (if that makes sense)
Thanks again to all who are trying to help me.
Suzanne posted this at 03:14 — 28th April 2002.
She has: 5,507 posts
Joined: Feb 2000
I'm not sure why you think that is going to screw up the CSS. I'm assuming you haven't assigned any CSS to the tag. is a new line.
Name name name
Address
City State ZIP
Makes this:
Name name name
Address
City State ZIP
You don't need to set anything special for et cetera.
Also, instead of setting up classes, use the heading tags properly for headings. Hold on, I'm going to nab the first page and rework it a little to show you.
Suzanne posted this at 03:29 — 28th April 2002.
She has: 5,507 posts
Joined: Feb 2000
Okay, you do know what the tag is for? It's a line break. ONLY. It is not a holder element. There is no closing tag for .
Your code
Mecklenburg County Park & Recreation
a.k.a. Park & Rec
parkandrec.com
The right code
Mecklenburg County Park & Recreation
a.k.a. Park & Rec
parkandrec.com
With over 450 registered teams, Park & Rec is the predominant adult slow-pitch softball league in Charlotte, and is the primary focus of this website. Park & Rec hosts both spring and fall leagues for Mens, Womens, Co-Rec, Industrial, Over-50, and Church. Spring leagues consist of a ten week long season of either twice-a-week or once-a-week, followed by divisional playoff tournaments. The spring season is immediately followed by the Tournament Of Champions featuring the best qualifying teams from each division in a county wide championship series. Fall leagues are five weeks long, twice-a-week only.
You would have to set .heading to be whatever you want, in this case, font-size: 14px; font-weight: bold; text-decoration: underline. Though I would caution against underline as it's conventionally a link online.
fifeclub posted this at 13:27 — 29th April 2002.
He has: 688 posts
Joined: Feb 2001
Okay so I got the spaces to disappear, but by accident. The code I used is
Mecklenburg County Park & Recreation
a.k.a. Park & Rec
parkandrec.com
(park and rec)
What I still don't understand (sorry) is probably the reason I was confused in the first place. I have the closing at the end of these 4 lines. Why in the above example does the bold/underline not affect the rest of the section before the If this were or or tag it would effect EVERYTHING between the start and end of that tag (all 4 lines).
taff posted this at 15:31 — 29th April 2002.
They have: 956 posts
Joined: Jun 2001
my guess would be that the div tag is messing things up. iirc, nesting div within p is invalid coding. change the div tag to a span tag. you may have to play with the breaks though.
.....
Suzanne posted this at 19:59 — 29th April 2002.
She has: 5,507 posts
Joined: Feb 2000
At the risk of being redundant...
1. Use VALID HTML
2. Validate your HTML
3. THEN apply CSS
DIV is not an inline element (SPAN is).
You're just going to frustrate yourself if you keep going like this.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.