SOLVED Sidebar Widget Overlaps Page
-
-
- Phil Luhn
- Jr. Rocketeer
- Posts: 20
- Thanks: 0
-
Hi,
I'm having an issue with my sidebar widget on a few of my pages overlapping everything on the page from below the navigation to above the footer. I have posted examples of pages where the issue is occurring and the pages where everything is correct.
I have the Home page set to an override page and everything shows up correctly. The other pages, where the examples are from, are all on the same 'Default Settings' override page. All these pages share, in the sidebar location, the same Rok Ajax Search and Text widget (seen in the examples as the 'Contact Us' widget), as well as another, page specific, text widget.
On the Municipal page, everything works correctly, just like the Home page. On the other 2 pages, the top widget overlaps everything. It also pushes the other widgets in the sidebar which are below it to the bottom of the page, below the 'Content Top' widgets. (let me know if you'd like an example for this as well as the home page as I'm limited to three for this post).
As you can see in the examples, I have a text widget as my top widget on the Residential page (same as the Municipal Page where everything works correctly). The search widget and the other text widget (Contact Us) is pushed to the bottom of the page. On the Commercial page, I don't have the page specific text widget set up, but the search widget is doing the same thing, overlapping the page and pushing my text, Contact Us, widget to the bottom of the page.
I've tried removing the widgets and re-creating them and the same issue happens.
Thanks for the help! - Last Edit: 11 years 11 months ago by Phil Luhn.
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
- Hi, can you provide a link to your site. I cannot debug your code simply from looking at screenshots unfortunately.
- The difficult we do immediately, the impossible takes a little longer.
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
- Hi, you'll need to put it online in order for me to see the codes. I see the problem in your screen shot, but without being able to use a web inspector and view the source codes, it's impossible to offer a solution.
- The difficult we do immediately, the impossible takes a little longer.
-
-
-
- Phil Luhn
- Jr. Rocketeer
- Posts: 20
- Thanks: 0
-
Hi,
The site is online now, located here: www.metropolitanind.com/temp/
In addition to the overlaps, the RokStories widgets aren't showing up on the site on any of the pages (Home, Municipal, Commercial, or Residential). Do you know why this is happening as well?
Thank you!
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Hi, you've got a number of HTML validation errors, including several missing closing div </div> tags - this can destroy the layout of your site. I would check all of the HTML code for your posts and page content to make sure your divs are closed properly - you're either missing some or have too many. See the validator results here:
validator.w3.org/check?uri=http%3A%2F%2F...ctype=Inline&group=0
If the widgets are working on your local site, but not on the live site, it's most likely due to the database not being updated properly when you moved it. Or it could be related to overrides you have in place or the aforementioned HTML errors. - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- Phil Luhn
- Jr. Rocketeer
- Posts: 20
- Thanks: 0
-
Hi Cliff,
Thanks for the tips, however, I am confused because when I look at the source listing results for the pages, I see the extra divs but when I look at the HTML in my pages & posts as well as when I review my text widgets, the div tags aren't there. For example, lines 334-341 in the source listing section (here: validator.w3.org/check?uri=http%3A%2F%2F...dator%2F1.3#line-320 ) is for my 'Contact Us' text widget. (I copied & pasted those lines below if you don't want to click the link & search for the lines). I see all the extra divs, but in my widget, I don't have even 1 div tag written.
Lines 334-341:</form><div class="clear"></div></div></div></div></div><div class=" box6 title6"><div id="text-11" class="widget widget_text rt-block"><div class="module-title"><h2 class="title">Contact Us</h2></div><div class="rt-module-inner"><div class="module-content"> <div class="textwidget"><img class="size-thumbnail wp-image-3665 alignleft" style="border-style: initial; border-color: initial; border-image: initial; margin-top: 5px; margin-bottom: 10px; margin-left: 0px; margin-right: 10px;" title="rokstories1_thumb" src="http://192.168.2.6/wordpress/wp-content/uploads/2012/06/rokstories1_thumb.jpg" alt="" width="220" height="125" /> <p>Contact our website news team via our <em>Online Customer Support Service</em>.</p> <div class="clear"></div></div> <div class="clear"></div></div></div></div></div></div></div> <div class="clear"></div> </div> </div> </div> </div>
What I have written in my 'Contact Us' text widget:<img class="size-thumbnail wp-image-3665 alignleft" style="border-style: initial; border-color: initial; border-image: initial; margin-top: 5px; margin-bottom: 10px; margin-left: 0px; margin-right: 10px;" title="rokstories1_thumb" src="http://192.168.2.6/wordpress/wp-content/uploads/2012/06/rokstories1_thumb.jpg" alt="" width="220" height="125" /> <p>Contact our website news team via our <em>Online Customer Support Service</em>.</p>
So, I suppose my new question is how do I find & delete these div tags when I don't see them in the backend?
Thanks
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Hi, all the divs you are seeing in the source code are coming from the template files. Every widget position is wrapped in and contains multiple divs - that is how the layout is created.
This accounts for all of the divs except one - there is an extra </div> somewhere, hence the validation error. This incorrectly closes a div that should not be closed and destroys the layout as a result. It's nearly impossible to tell where the extra tag is coming from by looking at the validation results, as it only detects that there is an extra one. And since there is no corresponding opening tag - there is nothing to match it to.
On your commercial page is where I see the issue. You have widgets in the content-top position. It appears to me that something in there is causing the issue, as the code that follows looks pretty messed up. I would try removing those pieces of content one at a time to see if you can find the one that's giving you a problem.
The only possibilities other than a content coding error are a third party plugin that is causing issues, or that you have incorrectly modified the core theme files in some way. I don't suspect either of those, otherwise every page on your site would have the same issue. - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- Phil Luhn
- Jr. Rocketeer
- Posts: 20
- Thanks: 0
-
Hi Cliff,
After scouring my site for my extra </div> and not finding one for the up-tenth time, I decided to start de-activating my third party plugins. The culprit was a super handy plugin called 'Display Widgets' which added checkboxes to show or hide each widget on site pages.
Maybe RocketTheme can create a compatible plugin?
Thank you again for all of your time & help with this issue of mine!
-
Time to create page: 0.064 seconds