Style sheets: Inline boxes

I will increase points to 85 if you have a working answer:

Understanding of course, that netscape and IE have limited and varying implementations of CSS, I have the following question: I want to make a line of text which contains an inline box with a border followed by regular text. Here is my CSS code:

P {
font-size: 12pt;
line-height: 14pt;
text-align: left;
vertical-align: top;
font-family: geneva,verdana,tahoma,arial,helvetica;}

EM { color: red;
border-style: groove;
border-width: thick;
border-color: red; }

And here is my HTML code:

<P>Here is some text <em>contained within </em> a block of text</P>

What I get in netscape is three lines of text, the middle one (<em>) has the border of course. Now, how do I get these on one line and not three?
65471Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
ckayterConnect With a Mentor Commented:
Rather than using <em> tags, try defining the border in a span class.

In your CSS file:

SPAN.em { color: red; border-style: groove; border-width: thick;
border-color: red }

In your text:

<P>Here is some text <SPAN CLASS="em">contained within </SPAN> a block of text</P>

I'm not sure HTML will permit you to put a border around a group of characters within a line, but if you can, this is how it would be done.

Colleen

0
 
MasseyMCommented:
I don't even get the border in mine..  All I get is the red tet.. (all on one line) -- IE 4.01

0
 
jbirkCommented:
I looked into Colleen's suggestions and they don't work in Netscape...  I'm not sure if there is a control for this that will work in Netscape 4.0-4.05 (maybe 4.06 fixed it?) but I suppose a workaround could be to use tables forcing them to occur on the same line...  something like this:
<html>
<head>
<style type="text/css">
SPAN.em { color: red; border-style: groove; border-width: thick;
    border-color: red }
</style>
</head>
<body>
    In your text:

<TABLE cellpadding=0 cellspacing=0 border=0><TR>
<TD vali>Here is some text </TD>
<TD><SPAN CLASS="em">contained within</SPAN> </TD>
<TD>&nbsp;a block of text</TD></TR></TABLE>
</body>
</html>

-Josh
0
 
65471Author Commented:
Thanks kcarter, but I tried that previously. It's not that you were wrong per se, the CSS 2.0 spec allows that. It's just that Netscape and IE aren't yet fully border savvy. I think jbirk's answer is the best way for now. Although, I had hoped to avoid that. But, I'll give kcarter some points and if jbirk wants any, he can email me to resubmit the question.
0
 
jbirkCommented:
That's ok, just happy to help... err...  well sort of.

Best of luck!
-Josh
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.