element overflow problem 1

[Geates]

I'm designing a VBS tutorials website/script depot. I have a css style for displaying code.

.code {
	background-color: #FFFFFF;
	color: #000000;
	font-family: courier;
	font-size: 12px;
	border: 1px solid #AAAAAA;
	padding: 5px;
	border-top: 2px solid #AAAAAA;
	width: 100%;
	overflow: auto;
}

I also use the <pre> tag to preserve the formatting.

<span class="code"><pre>
set objShell = WScript.CreateObject("WScript.Shell")
strSID = "S-1-5-21-725345543-57989841-1801674531-500"
strWallpaper = objShell.RegRead("HKU\" & strSID & "\Control Panel\Desktop\Wallpaper")
</pre></span>

Oddily, the <pre> seems to add an extra line-break (indicated by the blue veritcal bar) Where is that coming from!

What's with the extra line break?


Also, when content extends beyond the horizontal borders of the element, a horizontal scrollbar is added so you can see the rest of the content. Unfortunately, the scrollbar seems to get added WITHIN the element and thus forcing (at least from the perspective of the interpreter) a vertical scroll bar also be placed.

Is there a way to ONLY have a horizontal scrollbar?

-Geates

"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live."
- Martin Golding

"There are seldom good technological solutions to behavioral problems."
- Ed Crowley, Exchange guru and technology curmudgeon

 

[Vragabond]

It is most likely the bottom margin of the <pre> tag. A lot of block level elements have margins on top and/or bottom by default to make sure they don't touch.

If you install something like Firebug for Firefox, you could inspect an element and see if that is what the problem is. If you provide us with a link to the website, we can check that ourselves.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[Geates]

I figured the line break may be <pre> margins. By that rational, I could eliminate that line break by putting the <pre> outside of the <span>.

As for the website, it's local. I'll keep you posted when it goes live.

-Geates

"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live."
- Martin Golding

"There are seldom good technological solutions to behavioral problems."
- Ed Crowley, Exchange guru and technology curmudgeon

 

[Geates]

Yeah, it got rid of the line break. But it killed the overflow.

-Geates

"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live."
- Martin Golding

"There are seldom good technological solutions to behavioral problems."
- Ed Crowley, Exchange guru and technology curmudgeon

 

[Vragabond]

Wrapping a block level element (<pre>) in an inline element (<span>) does not solve the margins on top and bottom. It simply makes for an illegal code. Why don't you get rid of the margin the normal way -- by nullifying it via CSS:

pre {
  margin-bottom: 0;
}

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[Geates]

I'm not too familiar with the structurings (element levels) of web markup languages. I wouldn't have observed that a <pre> outside a <span> would produce illegal code. However, I can now see how it would.

Eliminating the <pre> margin is an excellent idea.

-Geates

"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live."
- Martin Golding

"There are seldom good technological solutions to behavioral problems."
- Ed Crowley, Exchange guru and technology curmudgeon

 

[vacunita]

Better yet is to eliminate the span, and simply apply the formatting to the <pre> tag itself.

<pre class="code">

Additionally for the scrolling, you can specify directional scrolling with the overflow-x and overflow-y properties.

If you only want horizontal scrolling, use overflow-y.

overflow-y:auto; or overflow-y:scroll;

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[Geates]

Eliminating the span and implementing the .code css into the pre tag caused a whole bunch of wackiness (it's technical term...). Instead, I kept the span and added overflow-x:auto;. I then got rid of the <pre> and everything displayed quit well. Beside, the <pre> tabs are 8 chars, I want 4 chars.

Thanks you to all for the input

-Geates

"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live."
- Martin Golding

"There are seldom good technological solutions to behavioral problems."
- Ed Crowley, Exchange guru and technology curmudgeon