http://www.handheldtesting.com/
When either checking "disable comments" in the back end, or adding 'display:none:'
<div id="respond" class="comment-respond" style="display:none;">
in the code.
1/2 of the content on the page disappears, as the footer moves up.
Any ideas?
Thanks so much,
Ken
This piece of CSS seems to be causing the problem:
body.responsive.layout-full #page-wrapper .full-container {
height: 172px;
}
I'm not sure why that height is explicitly set, seems odd. You should probably test the affects before totally deleting it...
Related
This is my first time posting here and I'm entirely self-taught, so bear with me please if I misspeak or say some dumb things.
I have a Wordpress blog. For quite some time, I have had my blog post format set up so that a "header image" displays across the width of the content space. Across the bottom of that image, I list the title of the post and the date.
To do this, I created what I believe is called a class -- I named it "container" and the only defining trait of this class is that it has "position: relative;" inside it's brackets. (It also has a "shadow" border. I tried taking this out and it had no effect.) This was done in the "additional CSS" section of the wordpress site.
.container {
position: relative;
box-shadow: 1px -1px 7px rgba(0,0,0,0.8);
}
I also made a class called "text-block" that is defined as follows:
.text-block {
position: absolute;
bottom: 0px;
right: 0px;
left: 0px;
background-color: rgba(128,128,128,0.6);
color: white;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;
}
Each post begins with opening a container. Then, immediately inside of the container is the image, with the width set to 100%. Then, still in the container, I put the text-block in, which is oriented across the bottom. The background color is opaque so that you still see the image behind the text, slightly greyed out.
Here is the code that begins the post of which I've attached a screenshot:
<div class="container"><img class="aligncenter wp-image-8056 size-full" style="width: 100%;" src="https://*mysite*/wp-content/uploads/thx-1138-film-confession.png" alt="Robert Duvall as THX 1138" width="831" height="364">
<div class="text-block">
<h2 style="color: white;"><em>THX 1138</em></h2>
<h6 style="color: white;">Review by *me* | November 6, 2020</h6>
</div>
</div>
The crucial part that I need to ask some advice on is the bottom edge of the container. Until recently, the bottom edges of the image, the text-block, and the container all coincided. Now, instead, a small amount of excess "padding" was added to the bottom of the container. So now, the text-block overlaps the image and some un-filled space beneath it, as you can see in the image. I can't seem to attach a second image of what it should look like, but I think it is clear what I'm trying to achieve.
I don't know where this excess "padding" came from. I didn't change anything -- no CSS was changed. I was just writing individual posts, copy-pasting the format from an old post to a new one to get the correct formatting. I was previewing a single new post when I realized the change, and I thought that I had messed something up on that individual post. But then I started clicking through my site and realized every single post now showed the error.
In the past, some other weird formatting things have happened that stemmed from a plug-in. I've deactivated all plug-ins and the issue remained. I've taken the text-block out entirely and the excess "padding" remains.
Like I said, I'm self-taught. I've really only learned things as I needed to know them. So it's possible I'm missing something simple or committing some grave error without knowing it. But it seems to me that my container lacks the definition that would cause it to be larger than an exact fit to what I put inside of it. Further, the fact that I did not change any of the underlying definitions seems to indicate it's some other kind of issue. But I don't know where it could be stemming from.
I would appreciate any help to figure this out!
UPDATE:
First, Akhilesh, thank you for the reply. Your suggestions did not directly lead to a solution but they at least got me into the spirit of trial and error.
I have found two "solutions" to this problem.
The first is to set "line-height: 0px;" inside of the container in "Additional CSS." This isn't ideal because it means that I can't type regular text in this container anymore. Not very elegant.
The second kind of seems like a fluke. As I showed above, my posts begin with:
<div class="container">**here**<img class="aligncenter wp-image-8056 size-full" style="width: 100%;" src="https://*mysite*/wp-content/uploads/thx-1138-film-confession.png" alt="Robert Duvall as THX 1138" width="831" height="364">
That is a single, unbroken line of code. By starting a new line where I indicate above, it solves the issue. As I stated in my initial description, I have not changed anything. All my posts have been like this since I decided on the format. And as Akhilesh stated, it works in the fiddler (which was a new tool for me, so thanks again).
So, problem solved, but what changed to cause the issue? Something in the way that Wordpress interprets HTML code?
Try adding this to the img element : display:block;
Also, try to find whether there's any padding/margin set for the h2 and h6 elements.
Because I don't see any issues when I tried. Here's the fiddle: https://jsfiddle.net/vL80u1a2/
If that didn't helped, try using the Developer Tools in your browser. Just right click on the element and choose Inspect Element. Then when you select an element on the left side, all CSS would appear on the right pane. You can try trouble shooting for the padding using that Developer Tools.
Have a look at this for more details on how to use the Developer Tools: https://developers.google.com/web/tools/chrome-devtools/css
I encountered a strange problem in IE 8/7 and I have gone through hell (and back) to reach a minimal test-case that demonstrates the issue...
Consider the following bit of HTML:
<form id="hover-test">
<fieldset>
<div id="hover">
<p>always visible</p>
<p class="hidden">Visble only on hover</p>
</div>
</fieldset>
<fieldset>
Please jump
</fieldset>
</form>
And this bit of CSS:
form { background-color:#f5f5f5; }
.hidden { display:none; }
#hover:hover .hidden { display:block; }
#link { position:relative; }
What it should do: On hover an additional paragraph becomes visible, pushing the next fieldset and all its contents down. (works fine in FF/Chrome/Safari/Opera)
What it does in IE 7/8: The paragraph becomes visible, pushing down the following fieldset. The link however stays fixed in place for reasons I can't fathom.
In the frustrating chase for a minimal mark-up that reproduces the problem (the effect vanished when I removed single lines of CSS from the original code, but my testcase could have them and still be fine... O_o) I identified at least three players working together here:
the fieldset: If I put everything in divs or in a form without fieldsets, all is well
the position:relative: Uncomment that line and voilá - link jumps.
the background color: This makes no sense whatsoever to me, but without this it works.
So, here's the question (apart from the implied "WTF?"):
Has anybody any clue on what is causing this behavior? And how to solve it? Or at least a hint into which of the many known IE issues I could look into to further test stuff?
Maybe I could come up with a way to bend the structure and...say... have the background-color on some additional wrapper div or something, but this seems... somewhat silly, and anyway, I feel as if not understanding this now will make things possibly very complicated down the road.
It was your comment about the position: relative that helped me solve it. That flagged me to think hasLayout! The issue seems resolved if you make sure both form and fieldset have layout set also (just giving it to the #link created the issue). One (among many) ways:
form, fieldset {zoom: 1}
See the working fiddle.
BTW: You should not have two #hover id's in your code. That should be set to a class (maybe it is just an error in your example, but I wanted to note it).
I've recently added a facebook like button to my site and it's causing a horizontal scrollbar to appear when it's not needed. It doesn't appear in Chrome but is there in Firefox and IE.
I've checked the created code in Firebug and can't see what's going wrong.
Here's a link to the site so you can see: http://www.swiftfurniture.com/
As you can see, on Firefox and IE (possibly other browsers too), there's a horizontal scrollbar when it isn't needed. It's definitely the Facebook like button causing it, because when I comment that out, they disappear.
I've added a fixed width div around the button with overflow: hidden applied, but it seems to ignore that.
I know there's plenty of other questions similar to this, but with using PrestaShop I don't really want to mess around with the core code too much just to get a Facebook Like button working (if at all possible). I was hoping for a solution to keep all the code contained to the "social module" I've created... i.e - just one file rather than messing around with header files etc of PrestaShop.
I've looked into your problem a bit with Firebug and can share some observations that might be helpful.
There is code that is being injected into your <div id="fb-root"></div> and within that is an iframe with an inline style width of 575px.
That is what is causing the scrollbars.
You can add to the "fb-like" attribute data-width="100px"
The mark-up Facebook inserts into your page is liable to change so you want to use a solution that is not dependent on it.
You can resolve this issue by placing the fb-root div as the first child of your body element
<body>
<div id="fb-root"></div>
The script tag and fb-like div can remain in their original place.
Ref: Facebook documentation and bug report
I had the same issue... there is a width in the code (I think the default is 450). If you change that to something like 150, I think you'll be in good shape. Of course, it depends on the preferences you select on the facebook plugin.
Good Luck, hope that helps.
There is a DIV just after
<div id="fb-root" class=" fb_reset">
<div style="position: absolute; top: -10000px; height: 0pt; width: 0pt;">
Remove position absolute from this and that horizontal scroll will disappear
after that it will show some content saying
Given URL is not permitted by the application configuration.
so either just remove this DIV or apply
display:none; to get this working perfectly
See this screenshot
having Problem see there is a horizontal scroll
having solution see there is no horizontal scroll but unwanted
content in circle.
applying display none; to this div or by removing this div
completely from the code, will lead you to the solution
None of the answers here worked for me so I tried it myself. I found a solution:
Put following CSS in your site head:
#fb-like-wrapper iframe {
width:100px!important
}
Put following HTML where you want to show your like button:
<div id="fb-like-wrapper">
<div id="fb-root"></div>
<div class="fb-like" data-href="http://www.facebook.com/yourAwesomesSite"
data-layout="button_count" data-action="like"
data-show-faces="false" data-share="false"></div
</div>
There you go :)
Add this to your css
.fb-like{height:20px}
Add attributes data-width and data-height to
<div class="fb-like" data-width="124px" data-height="20px"></div>
This also prevents the vertical scrollbar from appearing if it is not needed.
I've added this twitter widged to one of the site's i manage and for some reason, in every browser but firefox it looks good but in firefox this happens
bam it jump to the side for no reason i solved this by putting overflow:hidden; to the class textwidget
but then everything is gone in the rest of the browsers?
could anyone help me find a solution for this.
All help is very much appreciated
p.s. the site can be found here
Popdrommen
After successfully defeating your popup window, I have come to a conclusion that something like this should help you:
.textwidget {
clear: both;
}
Best thing to do in my opinion, is create a div, set its size, and then apply the overflow:hidden attribute to it, (remember to position it relativly)
Then inside that div put the twitter stuff.
<div style="width:200px; height:500px; position:relative; overflow:hidden">
<!-- Twitter stuff here //-->
</div>
Here is a link to my problematic page:
http://www.studioteknik.com/lamouvance/programmation.php
I'm trying to have a box be as big as the content injected into it (with PHP). It works on IE6 but not in Firefox... maybe I have done too many tricks, that the world is now upside down...
Please, help! I'm sure it a one line solution... Thanks in advance!
Note that the foot at the to should be in fact a full background picture (ok it's ugly, but the client ask for it), you can click on service, the image is just fine !
I hijack my own question.... IE6 is playing me mad, the mission (first in the menu) there is a calendar, the aout 2009 is supposed to be ON ONE LINE.... why its on two line in ie6 ?
I think I see the issue, try:
.content {
overflow: auto;
}
If you don't set a height, a box will stretch to fit content in it. If the box only contains floating elements, either add this just before the end:
<div class="clear"></div>
With this CSS:
.clear {
height: 0;
clear: both;
}
Or, a simpler solution is to add the style overflow: auto to the box. (Note this will show scroll bars if you have set an explicit height on said box.)