We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

Style sheets: Inline boxes

65471
65471 asked
on
Medium Priority
345 Views
Last Modified: 2010-04-09
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?
Comment
Watch Question

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

Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Commented:
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

Author

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.

Commented:
That's ok, just happy to help... err...  well sort of.

Best of luck!
-Josh
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.