For a veeery long time I've had this problem but always I managed to avoid it somehow (by removing elements or changing order) and now here it is again and I have no idea how to get rid of it. First, it appeared in my admin panel, but only few users acces that so it's not big problem (nobody uses IE6), but now this problem is appearing on my index page of portal and I must get rid of it because 15% of portal visitors are IE6 visitors.
Here's LINK to test version of portal:
If you open this page in IE6 you can see that second news (titled: Test one) doesn't have any text, only image. Well, if you make mouseover on that image you will see that there is some text. This problem occurs only when I enter paragraf whose height isn't bigger that image's height. If I enter same image but with some more text this show/hide problem disappears. I hope someone knows why is this happening because this problem has been torturing me for few years but I never figured out what is the main cause of this problem and how to avoid it.
Any help is welcome!
Ile
EDIT:
Here is solution for this problem:
http://www.positioniseverything.net/explorer/peekaboo.html
Well, It's easiest to make copy paste from page where it's detailed explained:
HTML code:
<!--********** Start of demo ***********-->
<div id="floatholder">
<div id="float">
<br />
<span> Float
<br /><br />
test link
</span>
</div>
This is bare text. Test link
<div style="border: 3px solid #f00; background: #dde;">This is text inside a div.
Test link</div>
This is bare text. Test link
<div style="border: 3px solid #0c0; background: #dde;">This is text inside a div.
Test link</div>
This is bare text. Test link
<div style="border: 3px solid #00f; background: #dde;">This is text inside a div.
Test link</div>
This is bare text. Test link
<div id="clear">Clearing div</div> <!--******* Note: a cleared <br> will not prevent bug *******-->
<div style="border: 3px solid #00f; background: #dde;">This div is after the cleared div. (purple box) If cleared div
does not touch float, bug is not triggered. Test link</div>
</div>
<!--********** End of demo ***********-->
And here is screenshoot from IE6
Fixes:
The fixes:
Finally, this bug will be triggered
even if div#float preceeds
div#floatholder, provided that this
external float actually touches the
clearing div within div#floatholder!
There are three ways we know to
prevent this bug.
Keep the clearing div from touching the float, or avoid using a
background on div#floatholder. Not
exactly ideal.
Give both div#floatholder and div#float 'position: relative'. Be
sure to fully test this method.
Give div#floatholder hasLayout (now the preferred method)
We suggest using a conditional comment
to feed a hasLayout fix to IE6 and
below only. Further details helpful to
this method may be found in the Zoom
Fix page.
Thanks to Simon Willison for the
timely screenshot.
This bug is called Peekaboo, and here is detail explanation of everything:
http://www.positioniseverything.net/explorer/peekaboo.html
Although, I have to admit that for me it worked when I set all these 3 steps. After first two it didn't work, but after I added display: inline to floating div it worked.
Can you please post (the bare minimum example) the code here, so that we can reference it long after your server's copy goes away (... just like now)? Otherwise, this question will serve no one as a reference or learning tool.
Related
I wanted to use a span element to style some text, but for some reason when I enter that code it will on the right side of the page show that scroll bar. It's not like that default scroll bar you will find on Google Chrome; it's really short, and when I move it it moves my text up and down for some reason.
I don't know how to fix that. I have tried reducing the padding, adding <br> at the end, etc.
This is the code:
<p>And that's it! You can play around a bit more with CSS and then move to <span style="background-color: orange; color: #fff; padding: 2px;">Day 4 - Text Areas & Input Fields</span> for further lessons!</p>
I have restricted my text to a border on the page, so it looks better, but it can't have anything to do with my problem since I haven't had it before and I've been using this border tactic for a while now. And as well I know the button "My other articles" isn't linked to anything--I'll add the link later. I just need help with this one problem.
Thanks to whomever helps me out with this in advance.
It seems to be rendering correctly for me (Chrome on Linux):
I'd suggest you update your answer with a screenshot of what's happening.
The best thing to try in this scenario is to add the following CSS to your code if it's not working for you:
span {
overflow: visible;
}
Since you're doing inline CSS (you don't appear to have a linked stylesheet), you probably want something like this as your full code:
<p>And that's it! You can play around a bit more with CSS and then move to <span style="background-color: orange; color: #fff; padding: 2px; overflow: visible;">Day 4 - Text Areas & Input Fields</span> for further lessons!</p>
overflow: visible; ensures that the element doesn't show scrollbars. In most cases (such as if this rule is applied to a <div>), then text inside the element will visually overflow if the element is a fixed size. The <span> isn't a fixed size (it grows as text is added), and so text won't appear as overflowing. Hopefully, though, it should solve the scrollbar problem.
Alternatively, you could try using overflow: hidden; which will hide the overflow entirely. Try experimenting with either visible or hidden and see if your code works!
More info about overflow: overflow - CSS: Cascading Style Sheets | MDN
It's not like that default scroll bar you will find on Google Chrome; it's really short, and when I move it it moves my text up and down for some reason.
Try also applying the CSS to the <p> element as well/instead, or even the <body>. The <span> may or may not be the element that's experiencing the overflow issue, after all. Your question is admittedly worded quite vaguely for us to tell how the problem manifests.
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
Didn't see anyone else having this issue in similar questions. Basically I have a plugin shortcode which I wrap in a simple div to try to work on styling (it shows simple text so I want it to look nicer around the edges).
I enter:
<div style="border: 1px solid; border-color:#999;">
[stdailytip group="Tip" date="show" title="show"]
</div>
Then everything on the page is hidden except for the table with images at the top and the wordpress (Edit) function inside my 1px box. I'm completely confused by this as I don't have any other messed up divs on the page. All text simply vanishes. I'm using the daily tip plugin. I assume the problem might be plugin specific.
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 have a problem,no matter what browser I use(after tests,I found this problem only exists in IE6, and I guess it may be related to the iframe), a black vertical bar always show up when I open the page at first time,but the problem just occur on some PCs and notebooks,and when I move the browser, the black bar changes or disappears at the meantime.I snaped two screenshots:
http://vilence.host152.ftp18.cn/pics/p1.jpg http://vilence.host152.ftp18.cn/pics/p1.jpg
http://vilence.host152.ftp18.cn/pics/p2.jpg http://vilence.host152.ftp18.cn/pics/p2.jpg
Check for the hardware problem first and then check for the borders and border colors sometimes we fail to manage the div and their alignments specially with complex structure of the position:abosule or relative or fixed, I frames does i have some kind of things. But divs does lots of same type mistakes..
do to give wrapper for every div like
<div id="content-wrapper" class="outer-cls wrapper">
<div id="content" class="inner-cls inner">CONTENT HERE</div>
</div>
this technique make debugging and themeing easy . I was having same type of problem lot of time. ;)