Solved

Style sheets: inline boxes

Posted on 1998-09-04
3
217 Views
Last Modified: 2010-04-09
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?
0
Comment
Question by:65471
  • 2
3 Comments
 
LVL 8

Accepted Solution

by:
jbirk earned 50 total points
ID: 1837366
I haven't tested it but w3 specifications say that this:
display: inline;
will cause it to be displayed in-line, i.e. not as a block element.

hope it works for you!
-Josh
0
 

Author Comment

by:65471
ID: 1837367
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>
0
 
LVL 8

Expert Comment

by:jbirk
ID: 1837368
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
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
using web browser with BING 40 110
HTML File in SharePoint 2013 Library 4 46
Poster Video HTML 5 Scale to fit video 3 37
JavaScript: Issue with onClick 5 34
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

930 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now