I am using an iframe right now.
This is not my first choice and I generally try to avoid them, but the problem is the client has different versions of their middleware on different boxes and is reluctant to upgrade one of them.
Anyway, now that I've made my excuses. :)
I am trying to display a pretty sizable page and there is scrolling involved. But for some reason, sometimes there are double scrollbars. One on the page, the other in the iframe.
Does anyone have a workaround for this? I would like to have just one scrollbar.
I think I figured it out, just eliminate all the margins in the enclosing file.
Related
We are instituting a new responsive web template design on our website, this design has worked perfectly in all but one place (We are on the Convio CMS if that helps). Here is what it is supposed to look like (menu and contact info in right column):
http://www.ucc.org/feed-your-spirit/practices/prayer-flags.html
On this page however:
http://www.ucc.org/find/find-a-ucc-church.html
that info appears below here. However after you use the find feature, the information then DOES appear on the right side as it should. This really has me stumped.
The find a church service is a component that can be placed on any page.
Secondary issue - the map is not visible on the results page in Firefox, though on the current page - www.ucc.org/find - it is visible.
Any solutions, ideas, etc. are welcome!
Two problems, both CSS. The left div, ef-inner3 does not have float:left nor width specified. This causes it to be too wide, pushing the topics area down.
You need to add those CSS values in. How you do that with your particular CMS system I am not sure.
The reason behind it moving down is thus: When you float two elements, their combined widths cannot be greater than the width of their parent. If they are greater then there is not enough room and the second floated item moves below the first.
Tricky one! But I'm thinking this might not be CSS.
My first reaction was that maybe a DIV isn't properly closed somewhere.
Based on the Find function fixing it, maybe you have a </div> that's set to display with the Find results, so it's not showing up before the Find function brings it up?
Hope that makes sense! If possible, try searching for any closing tags that are inside any kind of if/else statement.
EDIT - just noticed - A lot of the content in your Find a Church page seems to be after the 'three fourth' DIV, and after a 'clear' DIV. If you can edit the source, try placing all of that back inside the 'three fourth' DIV and see what happens.
I'm trying to get familiar with CSS but some of things that are happening seem rather arbitrary.
For example:
http://jsfiddle.net/stapiagutierrez/48yGU/24/
Why is only the first and second divs displayed (playerinformation and centerad), but not the third one? I thought divs were stacked vertically unless told otherwise via floats or what have you.
Any suggestions?.
I just want three div, organized horizontally within the middle vertical div called middle.
My guess is #rightad is being removed by Adblock, or an equivalent. That's what's happening for me. If you disable your adblocked, I bet it will show up.
All worked for me (in Firefox), then installed AdBlock and the #rightad disappeared. Disabled adblock for the page and it reappeared again.
Alternative quick test would be to try your jsfiddle in a different browser and see if its all there.
Ok, I've been dealing with IE bugs for a long time now, but this one is beyond me. IE 7 and even 8 does it for sure, I've not seen it on FF or Chrome.
So here's a live URL which produces it: http://mog.com/music/America/Holiday
Reproducing isn't easy, it can take a few times to make it happen. Watch your scrollbar to see it change size so you know the page length was suddenly dropped quite a bit.
Here's how you do it:
Hover over any sub-nav link (Main, Albums, Songs, Photos, News, etc.)
Try them until you see the scrollbar change size. Once it does, scroll all the way down and notice the footer has jumped up on top of much of the page content.
Be careful scrolling down that you don't roll over a few other page elements that will suddenly fix this. So far I can see that any of the Play buttons will somehow fix this.
It's just beyond weird. How could a rollover state cause this kind of behavior?
I've tried:
Removing the a:hover style - THIS FIXES IT... WTF? Of course we ideally would keep some hover state, so hoping to avoid this fix.
Reproducing the hover functionality using jQuery hover(). - THIS DOESN'T FIX IT.
I figure the clues are in the elements that somehow magically fix it...and possibly in where the page jumps to, what elements suddenly get obscured by the footer.
Lastly, I didn't produce this site from scratch and it uses a lot of absolute and relative positioning for certain things and I know that is partly what causes these weird bugs. I rarely, rarely use esp absolute positioning to avoid these kinds of bugs, but it's a bit too late now.
Thanks for anyone willing to check it out!!
Well, I figured it out. It was an odd case of the "Guillotine" bug. One I luckily haven't come across before. Turns out the "special" CSS rules on those nav links' hover state (particularly it seemed the border and bg image) were enough to trip this bug. One way around was to drop those styles, but not ideal. The real fix, however, was an unsemantic clearing div placed in just the right spot. More info found here:
http://www.positioniseverything.net/explorer/guillotine.html
Hi just a short note: When did you validate your html the last time?
As you probably know, but might have forgotten, fixing your html can sometimes solve a lot of problems. There are 72 errors seen by http://validator.w3.org
Hey guys, I'm using GWT for a data-driven web application, and I'm having issues with a CellTable embedded in a TabLayoutPanel. As you can see from the screenshot, the scroll bar for the table does not appear inside the bounds of the TabLayoutPanel. (You can see just a couple pixels of it on the right.) If I mouse over the TabLayoutPanel in the inspector, it properly shows the boundary ending at that black border on the right.
For some reason I haven't been able to determine, the TabLayoutPanelContent object is extending outside the bounds of its parent, the TabLayoutPanel. Has anyone run into an issue like this before? Or does anyone see an issue in the HTML/CSS that might suggest a solution? I'm sure it's something minor, but it's frustratingly difficult to find.
TIA!
The trick to finding a solution always seems to be just asking the question. :)
I had apparently set the width of one-too-many widgets to 100%. (Between the TabLayoutPanel, ScrollPanel, CellTable, etc.) I just removed all the width constraints, then slowly added them as needed until the UI was as desired.
Okay, this is REALLY starting to bug me...
This page works fine in both Chrome and Firefox. www.bloggan.tk
But if it's opened in internet-explorer it always expands beyond the page and introduces the scrollbar no matter what the resolution of the browser is.
I have NO idea what change in the html it was that cause this...
Here's the blogger-template-html-source
I'd REALLY appreciate if someone could help me with this.
Thanks in advance!
Edit:
I've "solved" it for IE using javascript, but that's only temporary (i hope). The version without javascript can be seen here, so that you still will be able to know what I'm talking about. Still trying to solve it, and still hoping for someone to help me.
Before you ask a question here, you'll need to do some basic research yourself.
Strip out everything from that HTML file you reference until you have the simplest possible document that reproduces the error. Don't expect people to dig through a 40k HTML file to find the thing that's causing you grief.
Isolate it before you ask about it.
Incidentally, however, there is no CSS width or height specifier for "the rest of the page". You need to meticulously keep track of your percentage widths to make them add up to 100%, or use tables. If your sample is using percentages, then I'd look for borders and padding, since those are the things that cause discrepancies in box size between old IE versions and modern browsers.