Code tags on website

[James Hambrick]

I am wanting to style a code tag on my website that works much like most do on forums like this one. Right now I have the yellow background and different font working fine on single line code, but once I try multi-line code I run into problems. For a two line code it shows two yellow boxes that overlap each other. I essentially have to put new lines between them until they line up. There has to be an easier way.

This is what I have on for my code tag in my style.css

code {border: solid 1px green;
	font-size: 1.3 em; 
 	color: green; 
	margin: 10px; 
	padding:5px; 
	background: #FFFFB3}

You can see a post I have with code tags here

http://randomlyjames.com/2012/06/oracle-10g-new-purge-feature/

I do not have any multi-line examples since they do not look right.

[Bear Bibeault]

The <code> tag is an inline element, not a block element. Why aren't you using <pre>?

[James Hambrick]

Bear Bibeault wrote:The <code> tag is an inline element, not a block element. Why aren't you using <pre>?

pre as it sits does not put the text inside a box like I want. Should I just change by style.css so it says pre instead of code?

[Bear Bibeault]

Give it a try and see if it results in the appearance that you want.

[James Hambrick]

Bear Bibeault wrote:Give it a try and see if it results in the appearance that you want.

I have this in my style.css

pre {border: solid 1px green;
	font-size: 1.3 em; 
 	color: green; 
	margin: 10px; 
	padding:5px; 
	background: #FFFFB3}

Which works as a multi-line code box, but now anything I type after the 'end PRE' ends up beside the 'code box' and not below it. UGH!