Forum Moderators: not2easy

Message Too Old, No Replies

Extra space around div; can't track it down

         

kidreapertonV

6:55 pm on Feb 9, 2010 (gmt 0)

10+ Year Member



Hello all!

I've installed Drupal 6 on my server and am developing a theme for it (a sub-theme of zen, if that's helpful), but I've run into a problem. It's more of a css problem than a drupal problem, but drupal includes a LOT of pre-prepared css to wade through...

My problem is that there is extra width added to something on my page causing a seemingly invisible element to push past the window, and the bottom scrollbar to appear. When I use firebug to track it down, it highlights the content div, but I can't see anything in my css that could be causing it.

I've been troubleshooting it for a couple of hours, but I'm hoping someone with a better eye for catching css errors can see what I just can't.

The site is at uptest3.info. The code that seems to be responsible for the content div is below, but my guess is that something else is causing it:


#content,
.no-sidebars #content
{
float: left;
width: 960px;
margin-left: 0;
margin-right: -960px; /* Negative value of #content's width + left margin. */
padding: 0; /* DO NOT CHANGE. Add padding or margin to #content-inner. */
}

.two-sidebars #content
{
width: 460px;
margin-left: 180px; /* The width of #sidebar-left */
margin-right: -640px; /* Negative value of #content's width + left margin. */
}



The negative margins thing is a tactic employed by drupal's zen theme; i'm not sure I completely understand why it's used, but I'm trusting it anyway.

Thanks for any help!

rocknbil

8:14 pm on Feb 9, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome aboard kidreapertonV, I can't derive "a problem" from that bit of code. To hunt down errant elements, put borders on them temporarily. I am **guessing** the padding of a paragraph inside the content may be doing this, but don't know. Borders will tell.

kidreapertonV

9:42 pm on Feb 9, 2010 (gmt 0)

10+ Year Member



Thanks for the reply! Borders are how I've been troubleshooting so far, but I probably just haven't been putting them around the right elements. And I just realized that if padding is causing the problem, borders wouldn't be able to identify that since padding is calculated outside of the border, right?

You gave me a great idea with the paragraph thing, so I loaded a "Page not found" page, which actually doesn't contain paragraphs, and the problem wasn't there. I'm not sure if it's specifically paragraphs, or one of the other many generated elements, but you gave me a good place to start.

Thank you! If I find anything useful going through this process, I'll be sure to post it, and mark this as solved.

rocknbil

12:55 am on Feb 10, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



p { border:1px solid #000; }

Will reveal it if it's the problem. The border will ride outside the padding, but not outside the margin. Let's not even talk about IE . . . .