Recent Topics
  1. b2evolution CMS Support Forums
  2. Archives
  3. Obsolete Forum Threads
  4. stinking horizontal scroll bar!

stinking horizontal scroll bar!

1 May 26, 2004 19:27    

I hope someone can help with this CSS formatting issue.

I am displaying my blog in a frame and I only want it to scroll vertically.
Yet in Windows IE6 I can't for the life of me get rid of the freaking horizontal scroll.
Even though there is nothing horizontally off the page....Explorer insists on sticking an ugly horizontal scroller on there.

MAC IE5.2 displays fine BTW, as does Safari. NO horizontal scrolling.

I've tried adding the tag "overflow-x:hidden; " which did exactly nothing.

Any ideas?

Back to top

2 May 26, 2004 19:39

Where's your site? I'd be happy to take a look. Here are some ideas:

If you're using percentage widths, try setting it up so that they only add up to 99% or 98%, not 100%. I've noticed that trying to hit the 100% mark too precisely can cause a horizontal scrollbar, especially if you're using borders/padding/margins. Percentages are by their nature imprecise, so if you're using padding and whatnot, you'll have to allow for some calculation irregularities across browsers, or just don't put padding/borders/margins in the same selectors as your percentage widths. I.e.:

#leftcol { width:50%; left:0; }
#leftcol div { width:auto; /* padding/borders/margin/etc. */ }

instead of:

#leftcol { width:50%; left:0; /* padding/borders/margin/etc. */ }

And then in your (X)HTML, do this:

<div id="leftcol"><div>content content content</div></div>

Yeah, it's an extraneous DIV, but it might solve your problem.

Also, I don't think that IE supports "overflow-x" and "overflow-y." So, you'd probably want to just use:

body { overflow:hidden; }

Back to top

3 Jul 08, 2004 19:04

This is driving me nuts. I want the horizontal scroll bar to GO AWAY!

But, I'm new at CSS and PHP and so editing the templates makes me nervous. I like to know that I'm changing the right thing and that it will produce the right result.

In any event, I cannot find out why this horizontal scroll bar appears on my site. See it here: http://www.sharealike.org

I thought it might be because I made a little table within the sidebar near the bottom for b2evo, Debian and Apache images. But even after adjusting that a little the scrollbar remains.

I also tried to find the right thing to edit in the .css file and any 'width' adjustments I made there just changed the size of the thin blue border around the posts and sidebar text, but didn't budge the horizontal scroll bar at all! Aaack! Please help!

Brian

Back to top

4 Jul 09, 2004 00:46

Brian,

Get firefox, and get teh web developer toolbar. It'll make this much much much easier to figure out. (Outlining block-level elements can show you right away what's the culprit.)

You have several elements with "width:100%" and side-margins.
Think about that.

The width of the element is 100%. Then, on top of that, let's add a 5px margin on the right and left. What's 100% of the screen width + 10px? Answer: wider than the screen's width!

You might want to try using width:auto instead. Also, this is a client-side stuff thread, so it's gettin moved over there.

Back to top

5 Jul 09, 2004 03:38

Isaac,

I got the web developer toolbar (here: http://webdeveloper.mozdev.org/ ). It's got some very cool features. It works with both mozilla and firefox. Thanks for the tip.

It's allowed me to see that the blocks that are too big are the page title and subtitle at the very top of the page. I can also see in _main.php the code that calls those titles here:

<body>
<div class="pageHeader">

<?php // --------------------------- BLOG LIST INCLUDED HERE -----------------------------
	require( dirname(__FILE__).'/_bloglist.php' );
	// ---------------------------------- END OF BLOG LIST --------------------------------- ?>

<h1 id="pageTitle"><?php $Blog->disp( 'name', 'htmlbody' ) ?></h1>

<div class="pageSubTitle"><?php $Blog->disp( 'tagline', 'htmlbody' ) ?></div>

</div>


Unfortunately, even after tinkering with things (and breaking things and then backtracking) I cannot figure out why these blocks are so darn wide or how to make them smaller. No width elements in my page are set to 100%, in fact, the only occurence of width that isn't an image width is for the totally unrelated table in the sidebar.

I tried making the code above part of a table, but then the two divs were spanning table rows and it wouldn't produce the subtitle at all. Why is the pageSubTitle div nested inside the pageHeader div anyway?

Also my /blogs/skins/custom/custom.css has the following:

h1#pageTitle {
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 270%;
	font-weight: bold;
	margin-top: .5ex;
	margin-bottom: .1ex;


.pageSubTitle {
	color: #FFFFFF;
	letter-spacing: 4px;
	text-align: center;
	vertical-align: middle;
	border: 0px;
	padding-top: 6px;
	padding-bottom: 4px;
	font: 100% Arial, Helvetica, sans-serif;


And that's even after removing all references to left or right padding.

If I can make these two blocks less wide that scrollbar will finally go away! Any ideas? Thanks.

Back to top

6 Jul 09, 2004 08:09

So I got rid of the scroll bar by doing this in custom.css

div.pageHeader {
	width: 98%;


That used to say 100%. It leaves a tiny white space at the top right corner of the page (that isn't on the top left corner) I assume because the pageHeader is left-aligned, but being rid of the horizontal scroll bar is such an improvement that I'm willing to live with this solution until I can figure out a better one.

There are clearly some little pixels in the pageHeader that I don't know about because I should be able to make it 100% and not have a horizontal scroll bar. Ahh well...

Brian

Back to top


Form is loading...