[SOLVED] Making a thin border around stuff

[Azu]

j{border-style:solid;}

 

<j>Make a border around this text</j><j>and another</j>

 

<j>and another</j> <j>and another</j>

<j>and another</j>

<j>and another</j>

 

 

It works fine in Firefox and Opera but in internet explorer the border doesn't show up.. any ideas how I can fix this? I've tried using real tags like p and div but then the border doesn't wrap around the text, instead it expands to fill the whole width of the screen, which is NOT what I am looking for.

 

 

Can someone please help me to get this to work right in internet explorer like it works in everything else?

[aebstract]

Try this code out and see what happens, let me know if it doesn't work, and what it is doing wrong:

 

css

.txtborder {
border: 1px solid #000000;
}

 

 

html

<div class="txtborder">
Make a border around this text

and another
and another
and another
and another
</div>

[bwochinski]

The issue is that <j> is not a real tag, so IE ignores it.  Using <p> or <div> doesn't give the behavior you want because those are both block elements and so by default want to take up as much width as they are allowed by their parent element.

 

You can use the <span> tag, which is an inline element, or add "display: inline;" to the CSS.

 

EDIT:

 

Also, if you want a very thin border, use "border: 1px solid black;"

[Azu]

Thanks I will use p since it's smaller and put the display:inline in the css.

 

It works right in IE now =D

 

 

BTW is there any other browsers I should test in besides Firefox Opera and IE?

[Azu]

When I put the tags around something that is more then one line, it should make the box around both lines, instead of stopping at the end of the line and continuing at the start of the next line like it does now.

 

Any ideas how I can fix this please?

 

Basically I want it to work like using <table><tr><td>stuff</td></tr></table> except only needing 1 tag..

 

 

Sorry for double post but for some reason I wasn't able to edit my other post =(

[aebstract]

Try this code out and see what happens, let me know if it doesn't work, and what it is doing wrong:

 

css

.txtborder {
border: 1px solid #000000;
}

 

 

html

<div class="txtborder">
Make a border around this text

and another
and another
and another
and another
</div>

[Azu]

Edit

 

Thanks there is still the problem though that when it is more then 1 line it stops at the end of the first and then starts again at the second instead of just surrounding them both. And if I remove the inline thing then it stretches out to consume the entire width and I cannot put anything else on that line.

 

Please help =x

[aebstract]

<div class="txtborder">
Make a border around this text

and another
and another
and another
and another
<br /><br />
</div>

 

[bwochinski]

Post the HTML / CSS of what you're trying if you're still having problems.

[Azu]

I just want to make a border wrapped around the text it is that simple

 

 

That is how it should look no matter where the text is it should have a border like that around it so the only way it will be differant then not having a tag at all is that it has that border around it other then that it should look normal...

 

It would also be good if it could use border collapse in case there is 2 or more that have borders that meet.

[aebstract]

<div class="txtborder">
Make a border around this text

and another
and another
and another
and another
<br /><br />
</div>

 

[Azu]

Why do you keep quoting the code that does not work? =(

[aebstract]

Maybe because all of the examples I have given you, I have used somewhere in a website before and it has worked?

 

.boxes {
		float: left;
		position: relative; top: 2px; left: 0px;
		margin: 5px;
		width: 261px;
		text-align: left;
		border:1px solid #d0d0d0;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px;
		background-color: #f6f6f6;
		text-align: center;
}

 

There is an exact copy of css code that is used on a div on a site I have done. It expands depending on information put in to it and there are none of the problems I have heard you list yet.

[Azu]

Thanks.

 

I tried that exactly and it has the exact errors that I already mentioned, though. =(

 

 

Can you just look at the picture please? That is how it should be able to work ^^

[mainewoods]

I don't believe there is any solution for inline items in ie with borders that span more than one line.  You get the open border at the end of the first and the beginning of the second.  If you go to display:block then it will cause a line feed before it and after it and will default to width:100%

[Azu]

Thanks.. looks like I'm screwed then.. =/

I'm gonna have to resort to JAVASCRIPT. Yuck.

 

Can someone move this please?

[dbrimlow]

Until you use a proper DOCTYPE your page will always be unstable.

 

Add this before the <HTML> tag of your page before you even START trying to debug your CSS:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

 

It looks like what you want is a block level item. For you can try a definition list <dl>

 

Then set the border for the definition data in your css. Example from a page of mine (you can play with your margins for the effect you want):

 

dl{margin-top:8px;}

 

dd{background: #fff; display:block; width:60%;border:1px solid #000; padding:4px 0px 5px 20px}

 

Then, in your html, use them for each text box you have as you would for a list item <dl><dd></dd></dl> eg:

 

<dl>

    <dd>In some regions, this one-room apartment is called an efficiency. It is

    basically a one-room apartment with separate bath and sometimes (but not

    always) a separate kitchen. These can range from very small (big enough

    for a sofabed and a desk) to very large (can accommodate a king-size bed

    and have a separate sitting area and dining area).

    </dd>

    <dd><em><strong>An alcove studio</strong></em> has an alcove, or distinct

    separate area or nook for dining or sleeping. Generally, alcove studio implies

    a larger apartment than a straight-line studio Often they are configured in a L shape, or they may have an area separated by an archway that can be sectioned off as a separate

    room.

    </dd>

    <dd><em><strong>A convertible studio</strong></em> is a studio large enough to section off a separates leeping area or bedroom. It can be either a straight-line studio or an

    alcove studio.

</dd> 

</dl>

 

Use your margins and paddings to separate them how you like.

[worldworld]

Try this...

 

<div style="width:200px;text-align:justify;border:1px solid maroon;padding:5px;position:relative;color:black">Matter here..</div>

[Azu]

Thanks fo your help.. I think that I described it wrong though sorry!

 

Basically I just want to do <table><tr><td>text</td></tr></table> but with 1 tag..

 

Is this possible? o_o

[mainewoods]

A html table defaults to a block display item so you've got a block display item that will put a line feed before it and after it.  The difference between a table and a div is that the div defaults to 100% display width and the table will use a smaller width if there is less content.  You can get the same effect with a div by using a small width and using 'white-space:nowrap':

<div style="width:1%;white-space:nowrap;border:1px black solid;">

Hello World</div>

 

Everything has to be either an inline item or a block item however, and as far as I know there is no way to 'get the best of both worlds'.  As soon as you specify it is a block item then there will be newline before and after it.  And if it is specified as an inline item, then you will sometimes get that breaking of the border when a newline is generated by automatic word wrap.  In the past I have abandoned putting borders on inline links because of exactly your issue of the ugly wrapped border. 

[Azu]

Is there any way at all to remove the linefeeds from display:block then? Maybe with javascript or something?

[Azu]

I found out how in another topic

Putting margin-top:0;margin-bottom:0; into it stops it from adding those extra line feeds

[Azu]

I found out how in another topic

Putting margin-top:0;margin-bottom:0; into it stops it from adding those extra line feeds