Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

Weird behavior


  #1  
Old Oct 23, 2012, 10:37 PM
flyboy's Avatar
flyboy
 
115 posts · Sep 2010
I'm experiencing a strange behavior that I can't attribute to anything other than perhaps a glitch with a new version?

I'm setting up a site that uses a widget above the main content area. I have done this a million times, only this time the text widget's margins don't push out its containing div as they should

The best way to explain this is to show you (look for a widget containing text "Rather strange behavior...")

Basically, the margins of this div don't push out the containing div outwards, but the adjacent ones do get bumped, so there is weird transparent empty space that should be filled with a background color instead

EDIT: Just realized I shoudl have posted this in the widgets forum. My bad! I'd repost it there, but I don't think the forum has a delete button to get rid of this one

Last edited by flyboy; Oct 23, 2012 at 10:52 PM.
  #2  
Old Oct 24, 2012, 05:06 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
there are several div's involved. Add the following to your CSS to see
HTML Code:
#horizontal_custom_widget_area {border: solid 1px red;}
#horizontal_widget {border: solid 1px blue;}
#text-3 {border: solid 1px green;}
then go into FireBug and play with your settings.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Oct 24, 2012, 11:31 AM
flyboy's Avatar
flyboy
 
115 posts · Sep 2010
Thanks JD, that's how I started out, but I wasn't able to find anything wrong with it

I did fail to mention one thing in my original post - when I add the border to the div tag, the widget "wakes up" and reveals its full size (hence my suspicion something is up with the new release - earlier version didn't do that).

Remove the border and the fill goes AWOL

The last resort will be to add a white border, so at least I have a workaround. It's just that a puzzle like this is something that really tingles my OCD senses and I just can't leave it alone 'till I figure it out :-P

You can even test turning the three borders off in firebug - I left them in there for anyone that likes their OCD senses scratched too


Last edited by flyboy; Oct 24, 2012 at 11:38 AM.
  #4  
Old Oct 24, 2012, 01:20 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
When I looked at the original post it appeared that adding a white background to the header element would fix the issue.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #5  
Old Oct 24, 2012, 01:23 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
I just re-read the post and margins on a child will not make it's parent div any larger. It may expand beyond the boundarys of the parent but never make the parent bigger.

create a post with the following
HTML Code:
<div id="A">
  <div id="B">
    foo
  </div
</div>
tehn add this CSS insert
HTML Code:
#A {height: 100px; width: 100px; border: solid 1px red;}
#B {border: solid 1px blue; margin: 20px;}
now go to the single post page in FireFox and use Firebug to increase the margin of #B and see what happens. It will get bigger, but A stays the same size.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Oct 25, 2012, 09:59 AM
flyboy's Avatar
flyboy
 
115 posts · Sep 2010
@Larry, thanks for your input bro. I tried that, but nada.

@Juggledad, the parent div doesn't have its height set in stone like that example does, so it should resize. In fact, id does resize when a border is applied on a child element (as it currently is).

The worst thing is that I have used this exact same method on a bunch of sites in the past and it worked every time. I'm totally baffled
  #7  
Old Oct 25, 2012, 01:37 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
the parent element width doesn't resize, but the height will. can you show me an example where the width has been resized?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Oct 26, 2012, 12:59 AM
flyboy's Avatar
flyboy
 
115 posts · Sep 2010
Height was exactly what I was talking about, the width was never an issue.
Basically, with the border off, the div pushes away the divs above and below away, but it doesn't expand the div that contains it. Hence the empty space between it. Turn the border on, and suddenly the containing div's "walls" get pushed to fill that space (tip of the arrows in the image above is right on the area I'm talking about)

Last edited by flyboy; Oct 26, 2012 at 01:01 AM.
  #9  
Old Oct 26, 2012, 03:42 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Quote:
Height was exactly what I was talking about, the width was never an issue.
Ah, you said
Quote:
the margins of this div don't push out...
I took 'out' to mean wider not taller.

When I go to the site and use FireBug in FireFox, if I change the magrin, the height changes. Now the reason you see white behind it is because you have this code
HTML Code:
<div id="horizontal_custom_widget_area">
  <div id="horizontal_widget" class="bfa_widget_area">
    <div id="text-3" class="widget widget_text">
      <div class="textwidget">
        <span style="font-size: 20px; color: #000;">
          Rather strange behavior...looking transparent :-(
          <br>
          <br>
          No overflow has been s...ly work, shouldn't it?
        </span>
      </div>
    </div>
  </div>
</div>
now remember that margins have no background color and are transparent so you are seeing what is behind it. The white is because of the CSS from
HTML Code:
div#horizontal_custom_widget_area {
    background: none repeat scroll 0 0 #FFFFFF;
}
does that help?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #10  
Old Oct 26, 2012, 11:09 AM
flyboy's Avatar
flyboy
 
115 posts · Sep 2010
I'm probably not explaining the problem properly
Here is a quick video clip that will illustrate what the funky stuff is :-P http://1ot.us/juggledad
  #11  
Old Oct 26, 2012, 11:47 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
I understand your issue and the way I would have done what you want without putting a border in is use something like the following. Margins won't "push out" the borders of an element. They just move them away from an adjoining element.
HTML Code:
#text-3 .textwidget {
    background: #f7f7f7;
    padding: 10px;
}
#text-3 {
    padding: 20px;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #12  
Old Oct 26, 2012, 12:07 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
I see it now, and here is what I would do, set the border for horizontal_custom_widget_area to s
HTML Code:
#horizontal_custom_widget_area {
    border: 1px solid #FFFFFF;
}
there is some interaction between all the divs and it would take too much time to figure it out
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #13  
Old Oct 26, 2012, 07:45 PM
flyboy's Avatar
flyboy
 
115 posts · Sep 2010
Quote:
Originally Posted by juggledad
there is some interaction between all the divs and it would take too much time to figure it out
Thanks for the help JD, I figured white border is fast becoming the most likely workaround

Quote:
Originally Posted by lmilesw
Margins won't "push out" the borders of an element. They just move them away from an adjoining element.
Thx Larry, I was saying that the div that contains another div will get pushed my the inner div's margins. So if one box is inside another, and the inner box starts pushing on the inner walls of the outer box by applying margins, the outer box will accommodate it. I probably didn't express myself clearly.

Great solution, by the way. Unfortunately there is no way to target that div except by its #text-3 css address, which changes every time the client inserts a different text widget. Good ide though!

Thanks!
  #14  
Old Oct 27, 2012, 07:22 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
You could try setting overflow:auto on the containing div. In my tests margin on an inner div does not, by default, affect the the outer div
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #15  
Old Oct 27, 2012, 07:09 PM
flyboy's Avatar
flyboy
 
115 posts · Sep 2010
No luck again. Tried it on all divs - nada. It's puzzling to say the least
I'm sure one day I'll figure it out, but I capitulate this time. I'm simply gonna go with the white border
Thanks for your help though.

Bookmarks

Tags
custom widgets

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Strange behavior... JulesG Excerpts, Read more, Pagination 7 Oct 23, 2012 10:58 PM
After 3.6.7, odd Page behavior paulae New Versions, & Updating 3 May 13, 2011 03:59 PM
Strange behavior Karin Atahualpa 3 Wordpress theme 1 Feb 16, 2011 11:04 AM
[SOLVED] Weird Header image behavior Cheers Header configuration & styling 7 Jan 31, 2011 07:52 AM
Special navigation bar behavior gasserol Page & Category Menu Bars 0 Sep 29, 2010 03:26 AM


All times are GMT -6. The time now is 07:32 PM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.