Amazingly, the title basically explains it. We have a page that our client made which we are in the process of recreating.
The pages height just keeps going until (I am assuming this) the browser hits it's limit. I have tried firebug and W3 validator and they have both not helped.
Could this be down to unclosed tags? Or maybe the fact that this generator that she has used has stuck ID's on script tags, THE HORROR!.
Any suggestions would be great, I need to try everything here. Thanks.
In your page source at line 193 there's this:
<div id="txt_2179" style="position:absolute; left:13150228px; top:1239624px; width:-832166px; height:-1239624px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box; overflow:hidden;">
<p class="Body-P"><span class="Body-C">LINKS</span></p>
</div>
Don't know what's setting that style to that position, but this is what's causing the problem. If you look in the very bottom right of your page you'll see LINKS
Is there any reason for this div to exist? You could just remove it or remove the absolute position elements of the style.
<div style="position: absolute; left: 1.31502e+7px; top: 1239620px; -moz-box-sizing: border-box; overflow: hidden;" id="txt_2179">
<p class="Body-P"><span class="Body-C">LINKS</span></p>
</div>
This. Is insane!!
Is just like the whole rest of the Position Absolute's that are throughout the html.
Even when there's overflow hidden, the declaration says: top 1 million 239 thousand 620 pixels HEIGHT and the declaration for Left is as obscure as a Medieval Manuscript.
If you delete that sentence the html fits in the body. Hope you fix the rest of crazy declarations as well.
I don't know. Maybe it's the 3 after the </html> tag (well, probably not). Try fixing the errors reported by the W3C validator.
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
I'm putting a floating picture on my friends blog real quick, but changing the margin values doesn't do anything.
#pic{
z-index:9999999999999999;
position:fixed;
width:200px;
background-color: transparent;}
And the structure:
<div style="margin-bottom:0px;" id="pic" ><img src="{image:Sidepicture}" style="width:200px;"</a></div>
When I change the margin values, the picture stays at the top left hand corner no matter what I do.
The culprit is likely position: fixed;
#pic{
z-index:9999999999999999;
position:fixed;
width:200px;
background-color: transparent;}
Is this all the code there is for pic? It seems that #pic is stuck to top: 0, left: 0
Try just removing the position: fixed line entirely and see what happens
If doesn't work out, also try adding position:relative;
Because you should be putting the margin on the <img />, not on the <div> surrounding the image (#pic).
#pic img { margin: 20px; }
... will do what you want it to.
The very least you should have done is validate that your HTML and CSS are actually valid. There are many errors in the code and style that you supplied. Unclosed Tags, Closed tags, Unmatched elements, styles without contents, invalid styles, Incorrect declarations and so on.
Its also a bit of a jumbled mess, with interwoven styles and script and parts of reset scripts towards the end, all sprinkled through with optional block and cycle contents, making helping you very difficult. Keeping your style separate from your code and grouping it into one block would help you narrow it down a bit as right now styles are all over the file, making it easy for anyone to miss the offending line.
I can only suggest that one of the later styles in your CSS after the style for img you are trying to apply. (somewhere after line 152) is overriding the margin that you are setting at 152. You can use the developer tools built into the browser and look at which styles are being applied to your element and which line in the file they come from. If your pix style is not applied then you will at least have an idea what other styles are and this will allow you to narrow down your investigation.
another way to find the offending line would be to to comment out the styles after line 152 and then comment them back in a few at a time, until you find the class causing the issue.
The quick and dirty fix is of course to put !important after your margin
You can also run your page through the CSS Validation and HTML validation to help you find any of the errors that may also be having an effect.
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.
You can view the issue on:
http://www.caterinaligato.com/
We can't reproduce the issue on IE7 or any of the Firefox versions. Using the DeveloperTool on IE8 its showing that the padding is inside the <div id="bannerArea">, however, we have tried #bannerArea * { padding:0; margin:0; display:block; } and that hasn't helped.
Please note that the 'Compatibility View' is off.
If anyone has any advise that would be great!
Start by adding overflow: hidden; to your BannerArea class. I'm not convinced that the star hack is necessarily the best option either. I would suggest removing that until it's proven that you absolutely need it.
Finally, make sure your <a> tag has its content all on one line. IE has historically had a degree of difficulty with the correct layout when anchor tags have line-breaks in the markup, displaying whitespace where there shouldn't be any.
Your line of markup:
<div id="bannerArea"><span class="bannerContainer first"><a href="#" class='banner-95 bannerImage' title='' rel='nofollow'><img src="/media/pics/site/imagecache/683C6A596432B154340F913300D76915.jpg" width="958" height="346" alt=''/></a> </span></div>
...splits the tag across three lines, which may be contributing to the issue.
use float:left for "bannerArea" it will reduce the white space in IE8, But the position will move right, need to reset the position.
I'm pretty sure this is happening because of your drop-down menu. If you add overflow:hidden to you "bannerArea" div, then the white space vanishes, but the placement is ruined. When added overflow:hidden to "nv" div, the image came back to it's place. So you have take care of the drop-down menu. Perhaps you can use scrip drop-down instead of pure css?