• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 313
  • Last Modified:

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?
1 Solution
I don't even get the border in mine..  All I get is the red tet.. (all on one line) -- IE 4.01

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.


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:
<style type="text/css">
SPAN.em { color: red; border-style: groove; border-width: thick;
    border-color: red }
    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>

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.
That's ok, just happy to help... err...  well sort of.

Best of luck!

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now