Padding Issue

[shadowayex]

So I have a <div> with a border and 10px of padding. The width is set to 100% but with the extra 20px of padding(10 from the left and 10 from the right) the <div> actually ends 20px of the screen to the right. I tried setting it to padding: 10px 0px 10px 10px; but it's still 10px of screen. Is there a way I can bring it in 10px?

[jeffman]

Why set your div width to 100%? Not only is that the default, but NOT setting the width allows padding and stuff to adjust automatically, so that the TOTAL width is always 100%.In any case, mixing percentages with pixels is always a dicey proposition, best avoided unless you also have some fluid space for the extras to slop into, and always to be avoided if you're playing with 100%.

[shadowayex]

It doesn't work out that way. You should probably know that the way I've got it working is the divs are hidden and shown when certain things are clicked and the borders fit only around the content, it doesn't span the whole page. Do you need a screen shot for clarification?Edit: I have discovered the bug is only the case for all browsers but IE. IE evidently ignores the extra padding when setting the width to 100%. IE finally did something helpful.

[shadowayex]

Ok, so no answers on this bug? Maybe I should explain a little more in depth.I have divs built with PHP. These are shown and hidden with JavaScript. When the divs are shown, for some reason they don't maintain their usual 100% width. They just tapir around the inside content.The divs have a 10px padding on each side. I added a 100% width to make them span the whole page. Worked out in IE, but in FF it's 20px too wide, due to the padding. I know it's bad to mix px and % in formatting but it was the only solution. my question is how do I get the extra 20px in Firefox to go away?

[jeffman]

EXACTLY how are you hiding the divs and showing them?FYI, if IE adds things "correctly" and Firefox doesn't, then you must be using a transitional doctype, which you know better than to do. The other possibility is that there are errors in your HTML that cause IE to revert to quirksmode, which has the same effect as a transitional doctype.But for now let's stick with my first question.

[shadowayex]

I have a class called div.hidden and a class called div.visible, and there's a JavaScript function that switches which divs have the class of hidden and which ones have the class of visible.Actually, I might have come across a possible solution. Give me your opinion anyway though because I could easily be wrong.Edit: Ok, after my edit, it displays the same in FF and IE, with the bug >_<, but it's consistant so that's a plus.

[jeffman]

Sorry. I was trying to ask for the details.What I really want to know is if you are toggling visibility by changing the display property. If you are, when you make the div visible, are you setting it to display:block or something else? The result sounds like it's getting set to something else, like display:inline

[jeffman]

I have a class called div.hidden and a class called div.visible, and there's a JavaScript function that switches which divs have the class of hidden and which ones have the class of visible.Actually, I might have come across a possible solution. Give me your opinion anyway though because I could easily be wrong.Edit: Ok, after my edit, it displays the same in FF and IE, with the bug >_<, but it's consistant so that's a plus.

What bug? The original bug?

[shadowayex]

Yes the original bug. And here's what the classes look like:Sorry for any redunancy or stupid mistakes:div.hidden {height: 0px; display: none; overflow: hidden; visibility: hidden; width: 0px;}div.visible {border-left: 2px solid #000000; border-bottom: 2px solid #000000; border-right: 2px solid #000000; float: left; height: auto; margin-top: 2px; overflow: visible; padding: 10px; visibility: visible; width: 100%;}

[jeffman]

Okay. Because you're using the visibility attribute, the div is invisible when you set it to hidden, but the space it occupies is now just a big empty spot. That's why you set the width to 0. So when you set visibility to visible, you need to reset the width to 100%.It's the wrong technique.Don't mess with visibility in most cases. Use the display property. An invisible div is set to display:none . Make it visible by resetting the display property to its default, which in the case of a div is display:block . When you toggle the display property, the element is invisible, and the space it takes up also goes away, so other elements can fill it.So you won't have to change the width at all, and your problem will go away.

[Jerry62704]

Yes the original bug. And here's what the classes look like:Sorry for any redunancy or stupid mistakes:

div.hidden	{height: 0px;		 display: none;		 overflow: hidden;		 visibility: hidden;		 width: 0px;}div.visible	{border-left: 2px solid #000000;		 border-bottom: 2px solid #000000;		 border-right: 2px solid #000000;		 float: left;		 height: auto;		 margin-top: 2px;		 overflow: visible;		 padding: 10px;		 visibility: visible;		 width: 100%;}

Here is how I hide and reveal things:

<div id="hideDetails"><ul><li><div class="underDash" onmouseover="document.getElementById('details_desc').style.display='block'; document.getElementById('summary_desc').style.display='none'; document.getElementById('history_desc').style.display='none'; document.getElementById('inactive_desc').style.display='none';"> Detail description</div></li>...<p id="details_desc" class="hide" style="display: none;">Bush polls are averaged between the top national non-partisan polls. The ones used are listed in the<a href="#details">detail</a>section below. They are averaged to eliminate spikes or valleys by one poll from distorting the national feeling....</p>

So if you pass over (onmouseover...) a menu item, you display one paragraph and hide the rest. If you don't care, no space is taken on the page (a last option is in the list to hide everything).

[shadowayex]

Okay. Because you're using the visibility attribute, the div is invisible when you set it to hidden, but the space it occupies is now just a big empty spot. That's why you set the width to 0. So when you set visibility to visible, you need to reset the width to 100%.It's the wrong technique.Don't mess with visibility in most cases. Use the display property. An invisible div is set to display:none . Make it visible by resetting the display property to its default, which in the case of a div is display:block . When you toggle the display property, the element is invisible, and the space it takes up also goes away, so other elements can fill it.So you won't have to change the width at all, and your problem will go away.

I see what you're saying now. Thanks.But a new problem comes with your way.I have the <div> floated left, so the normal width is screwed up. It's floated left because things inside of it are floated left and if I didn't float it, the border doesn't go around the content.