Below are some images of the form which I want to show a dialogue over, and want to blur the background. This works fine on other browsers but in Chrome Version 62.0.3202.94 (Official Build) (64-bit) It is creating problems
Here is the layout and the checkbox,
Its a toggle button to change size input fields
Here is the css for the checkbox
opacity: 0;
padding: 0;
position: absolute;
margin-top: -999999999px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
After applying the blur filter my form is emptied.
Just writing here for the question, I found that the margin-top: -99999999px is quite a big number and when I changed it to margin-top: -999999px it worked.
I was about to ask why my elements are not visible on the page, but as I already have fix it, I want to know the reason for it and to put this question here for other developers.
For me, the issue was with a checkbox positioned absolute and having very high negative margin top. Lowered the number and it is fixed.
Related
I am trying to make my design mobile friendly. What I have is that everything fits nicely when I look at the design on http://ipadpeek.com/ (Great Tool!) although when I actually view it through my iPhone 4 the content only takes up around 80% of the page, whereas the remaining 20% is a white background.
There is only one element which appears to fit the whole width and this has the following style:
<div class="text-elements">
<h2>Your website can achieve...</h2>
</div>
.text-elements {
float: none;
margin: 0;
padding: 75px 10px;
h2 {
font-size: 4em;
width: 100%;
}
}
Any ideas why this is happening?
FYI most of the online iPad style tools such as http://ipadpeek.com/ don't tend to pick up any of these overflow issues anyways.
In the end I found that the issue was at least one or more divs which had explicit widths set, but which were quite hard to find as culprits!
Tips for anyone else with this problem:
If you know any design will be responsive, use max-width: Xpx, width: 100%, in your main stylesheets on any explicit width divs to avoid them becoming a culprit in later course.
When using width: 100% on items, make sure you add any additional padding to the inner div (especially if it is in pixels), or account for it such as width: 95%, padding: 2.5%.
Try overflow: hidden on some of the main wrappers which hold your content to see where issues are coming from.
I installed the Ubermenu plugin on my site here:
aep.gov.tr
The widths of the menu items are too wide. Therefore the menu does not fit into its container as shown here:
How can I make the width of the menu items narrower?
This is more of a CSS question / issue than related to Wordpress. Your main problem is this right here on line 36 of your style.css:
.navigation ul li a{display:block; float:left; color:#666; text-decoration:none; padding:15px 0 0 0; height:28px; width:130px;}
You need to remove the width property of your <li> tag here. This will bring your menu up on one line.
So what you will have is this instead:
.navigation ul li a{display:block; float:left; color:#666; text-decoration:none; padding:15px 0 0 0; height:28px;}
I would suggest playing around with your width properties and your height properties to force the menu to look right. Another suggestion is to use Firebug for Firefox or for Google Chrome to help debug CSS issues. It helps you find them fast.
Go to admin.css file and note that you may loose your warranty, change the following:
#megaMenu.megaFullWidth
{
width:100%;
}
to
#megaMenu.megaFullWidth
{
width:auto;
}
Hope it will help.
Just finished installing G+, Facebook Like and Tweet buttons onto my site (www.biginjapan.co) on each individual post. My issue though is that when you press the FB Like button the popup box opens up so you can share the article if desired, but part of it appears behind the sidebar. It looks like this:
Picture showing my problem
Am not sure if you'll need any code to advise me here, but if you do please let me know. All I want to do is make the Facebook popup appear above the sidebar so you can view it properly.
In your content div
#content {
overflow: hidden;
float: left;
width: 619px;
padding: 0pt 15px;
}
Remove overflow hidden.
Remove the line overflow: hidden for #content. it's on line 247.
It is layer issue. It can be handle by z-index. For the slider layer (content), use lower z-index means
.slider{ z-index: -1; }
For the popup layer (content ) use higher z-index than slider
.popup{ z-index: 123; }
Safari renders black lines in between divs on my website at some scales. It is particularly bad when it breaks apart an image that is chopped in two different divs for a button or something. I can't put a BG in the parent of the two divs because they are transparent .pngs. Any solution or just deal with it?
capture of the problem, http://i.stack.imgur.com/pTLki.png
TravisO also has the same problem, and I changed how the page was laid out, originally it was a simple table with 5 rows, I removed the rows and just went with images and br, still happens. I've tried to remove all padding and margins via CSS but it was pretty obvious the problem isn't the browser rendering, but with the resampling the browser does to convert the page into a size that fits on the screen. You can see my broken page at:
http://www.apinkdoor.com/show/
TravisO, you should get rid of the img styling in your css!
If you use only this:
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
body
{
background-color: #f00;
text-align: center;
}
</style>
it should render properly on your iPhone!
This issue is a result of a rounding error produced in mobile safari when it rescales background images for display (it's a bug: http://openradar.appspot.com/8684766).
The solution is to increase the width of your right-button edge on its left side by 1 or 2px. Then adjust your CSS accordingly so the 1 or 2 pixels you added are not displayed by default.
The following CSS, added to the problematic div with a specified background-image, is what fixed it for me. Anything less than 3px would still show light artifacts at some Safari zoom levels.
margin-top: -3px; /* for Mobile Safari dark line artifact */
padding-top: 3px; /* for Mobile Safari dark line artifact */
I found changing the background colour of the element with the 'grey border' around it worked for me.
Adding an initial-scale value to the viewport metatag resolved this issue for me.
<meta name="viewport" content="initial-scale=1.0">
I had a similar problem when displaying a .png-image in a div-tag. A thin (1 px I think) black line was rendered on the side of the image. To fix it, I had to add the following CSS style: box-shadow: none;
I'm working on a web app and I need to get a div to stick to the bottom of the viewport. Always viewable and always on the bottom of the viewport. There's an example of what I want here: footer. Unfortunately, this doesn't work on the iPhone. I can think of some ways to do this using javascript but I would rather not. Any ideas on how to get this effect on the iPhone using only css?
This situation has changed with iOS 5. Now you can use overflow:scroll or position:fixed and it will do what is expected. For example, this type of code:
<header style="
position: fixed; top: 0; left: 0;
width: 100%; height: 20px; font-size: 20px">
Heading
</header>
<article style="margin: 20px 0">
Your page here
</article>
<footer style="
position: fixed; bottom: 0; left: 0;
width: 100%; height: 20px; font-size: 20px">
Footer
</footer>
...should work without problems.
Though there are still many devices running older iOS versions, so you might want to lazy-load Scrollability on older devices, which you can test with this javascript:
var isios = navigator.appVersion.match(/CPU( iPhone)? OS ([0-9]+)_([0-9]+)(_([0-9]+))? like/i);
// if that succeeds, it usually returns ["CPU OS X_Y_Z like",undefined,X,Y,Z]
if (isios && isios[2] < 5){
// load scrollability here. jquery example:
$.getScript("/js/scrollability.min.js", function() {
// code to run when scrollability's loaded
}
}
You can't. At least not the way you think.
You have to fake the entire thing is javascript. Use something like iScroll
It sort of sucks but Mobile Safari does not support any kind of fixed positioning at all. So you have to make the page size equal to the screen size and then use javascript to handle touches and set scroll offsets and animate scrollbars and what not manually.
This script I linked does a lot of that for you, but it's not as robust as a native solution would be.
Here is an example on how to combine CSS3, HTML, and JavaScript to create a navbar for the iPhone.
http://www.mindovercode.com/2010/09/12/iphone-navbar-using-xui/
ps: It does work in landscape mode.
Here is a working example, with code. It is not for the faint of heart:
http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
There is a new JavaScript for this that works much easier: http://joehewitt.github.com/scrollability/
Therefore in iOS 5 there will be fixed position and overflow scroll available!