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. ;)
Related
This is a continuation of a small project I started on over the weekend (I raised a query re H1 header size). I've got this as far as I want to take it at this stage (simple to-do list - non-functional at the moment). I added a navbar and designed an imported my own logo (in the menu bar and at the bottom of the screen). I've included the code from a codepen but for some reason (not sure at the moment) it hasn't pulled through the background colour and logo PNG hence why I've included a screenshot too.
However, the issue is that I cannot locate where I'm going wrong with regard to the containers not lining up: you can see the first two containers (with one row each - with the ADD rect which I'm going to change to a box and the 'You have '3' complete tasks:" rect box) then the five containers/rows below that are offset from those above.
The code for the "container-row-col" is (as far as I can tell) the same, but would placing all these rows in one container (containing all the 7 rows plus their columns) make a difference?
Maybe the media queries need to be looked at?
<div class="row">
<div class="col-8 col-md-6 white-rect mr-4 mb-2 ">|.............................................
</div>
<div class="col-6 col-md-4 white-rect center-block">ADD</div>
</div>
</div>
Here's a snippet of the container-row-col code with a codepen link below. I can only apologise for the amount of commenting out I've done...part of my learning process I guess.
Many thanks.
Codepen
Screen Shot of Full Page as it appears in my browser
You have too many nested containers. Just put all your .rows into one parent .container or add some style to the nested .containers witch will remove the extra padding. Something like this:
.container .container {
padding: 0;
}
I have a weird issue with a site
The text inside the article is cut off and whatever i try it will not show correctly. It gets cut off in the middle
Obviously i want to use the full size of that box (div)
The part in question is
<div class="text_blue">
<div class="text_blue_header">It takes a virtual village.</div>
<div class="text_blue_main">You. Us. Our partners in the know. We are a forward-
thinking creative agency with big ideas. All we want is for you to look good, be
successful and outsmart your competition. This is our site.</div>
</div>
The site has been build in Joomla with the T3 Framework
Anyone has an idea how to get that fixed?
Remove
height: 80px;
of the rule
.fixel-grid .items.text .article_content .article-intro
in the template.css line 5243
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 would like to create an indeterminate HTML+CSS progress bar so it looks like the one on Vista:
(source: microsoft.com)
I would like to:
horizontally adjust it to progress bar width (minimum and maximum width may be defined)
don't use Javascript but rather just animated GIF
having only one moving indicator on the whole width
Any suggestions how to do this?
NO, NO, NO! It is possible
Using CSS overflow: hidden and keyframe, it can be possible.
For the keyframe, I used from left:-120px(width of the glowing object) to left:100%
The structure I used:
<div class="loader">
<div class="loader-bg left"></div>
<div class="loader-bg right"></div>
<div class="greenlight"></div>
<div class="gloss"></div>
<div class="glow"></div>
</div>
The updated, compact structure using :before and :after:
<div class="loader7">
<span></span>
<div class="greenlight"></div>
</div>
The gradient, masking, glowing and all the effects cost an expensive structure. If anyone has a better idea, please let me know.
At this date, webkit only solution(the ellipse mask for the glow):
Added SVG mask for Firefox and other browsers that do not support -webkit-mask-image: http://jsfiddle.net/danvim/8M24k/
css - width:100%
no Javascript means you will have to do it with html5 which is a bit trickier. An animated GIF would work only if you decide to make the bar fixed-width (otherwise the gif will be skewed)
to move it: javascript or html5
The easiest way: javascript (like it or not... ;) )
GIF-only solution
Vista's indeterminate progress bar doesn't loop right after it goes off on the right...
So I could create a wide enough GIF image and when progress bar would be narrow it would take longer for it to loop and when it'd be wider it loops again sonner. :)
Time of each repeat is the same in both cases but in narrow bar it takes less to get to the end than on the wider ones.
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.