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>
Related
Hi I have a cordova app and I need to build a chat.
http://jsfiddle.net/jGLvk/1355/
I put the divs with position absolute to when the keyboard on the phone appears all the content move to up too.
So, when I did that the content doesn't show the scroll. How Can I resolve this?
<div class="page-content messages-content" style="position:absolute; width:100%; bottom:48px; top:auto;">
<div class="messages" style="position:absolute; width:100%; bottom:10px; top:auto; overflow-y:auto;">
Pay attention on this lines, where all the new messages will
be inserted.
Thanks.
I was able to solve it with overriding inline styles. Not sure if you should use it (I'm actually sure that you shouldn't)
.messages-auto-layout {
position: static !important;
}
I'm not sure if this is helpful because those styles are most probably applied via JS so there must be a way how to solve it in a more smarter way. Maybe stripping off all JS styles and use only css? I have never build an App using Cordova so I might be missing some context here.
Here is the link --> http://jsfiddle.net/9rsgdrw5/1/
Umm...hi!
I'm new here and am a self-taught amateur (read:google-searching-experiment-dude).
I created a fairly basic webpage but when I scroll down, the content overlaps the header. I don't really know how to explain this,so I'll link everything:
https://youtu.be/R05oISKKaXE
Oh, another thing:I'm sure I have a lot of redundant stuff.
Thanks.
Hello and welcome to stackoverflow!
When posting questions related to html/css/javascript you can use a tool like jsfiddle to create a demo of the problem and post it here, so it is easier for others to help you!
You could try removing the relative position in your .body class and the fixed position on your .header class, that alone might solve your problem.
You have to change the z-index of your elements to make them display on top of each other in a defined order.
Considering a piece of HTML that looks like this,
<div id="header"></div>
<div id="content"></div>
You can set the z-index of each element like so:
#header {
position:fixed;
z-index:1;
}
#content {
position:relative;
z-index:2;
}
http://www.artwars.net
Please take a look at the footer with logos two of the logos links bedpr and stormtrooper aren't working.
It is better to view the code through the browser than me paste it.
Appreciate the help.
Ant
Your markup is messy:
<div id="logo118" <a href="http://www.bedpr.com/"><img src="http://www.artwars.net/wp-content/themes/artwars2/images/bedpr.jpg" width="145" height="40"></div>
That's no valid HTML. You should close the starting div tag. I think you forgot the ">".
edit:
Take a look at the div's: The swarowski logo's div is missing
float:left; //So just add it there.
Also it has a
margin-left:360px;
instead of
left:360px; //This should not force design problems, just to improve your layout
Now, you have to adjust logo113 and logo115. Just like this:
top:-20px; //instead of -50px
Should work now.
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.
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.)