asked on

Style sheets: inline boxes

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?

ASKER CERTIFIED SOLUTION

jbirk

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

65471

ASKER

Still does not work. Here is the code. See what it does for you.

<html>
<head>
<style type="text/css">
Em { display: inline; border-width: medium; border-style: dashed; }
</style>
</head>
<body><p>Several <em> emphasized words</em> appear here.</p>
</body>
</html>

jbirk

Hmmm... for some reason the border-width: medium; is causing it to have the line breaks and when using display: inline it really doesn't like the two together. The inline works as expected normally but there's some interaction between the two that I don't undertsand (bug netscape?)

Well, anyway, maybe you can get someone else who knows CSS better to help. Just reject my answer.

Good luck!
-Josh