Hi recently I faced a problem in which left pop that is (add of related searches) on my website is spoiling the layout specially in internet explorer 11 when I inspect the element I found it is modifying my client side code like css as follows
<body style="margin-left: 160px !important;">
Is it possible to sniff internet explorer and then write some css or js code so pop will not be able to destroy my layout?
The best resolution would be to pay for web hosting and not use free services that put ads on your site! - Shop around! Hosting can be very cheap. There isn't really a way around stopping the margin-left. You could potentially try a small amount of jQuery/javascript to change the css onload of the page. So quickly it would be something like in jQuery
$(body).css("margin-left","0px");
I hope this helps but it is not a guaranteed fix!
Related
So, here's a weird issue I've come across with Safari on Mobile—I suspect there's one root cause for all of it, but have not been able to figure it out:
Links wrapping images don't cover the full width and height (as they should screenshot below), just the upper left corner
Linked Buttons only work on the left half
Links with: hover will hang on the hover and you have to press through
To make things worse, development tools that are supposed to simulate iPhones don't show anything funky—the whole image/button should be linked, etc.—but when you use the site with an actual device, the above happens.
I know, I know, this feels like such a basic question, but I've been banging my head against it for two days now.
Here's my testing page, but you'll see it intermittently across the site: https://redcowmn.com/testing-safari-ios-issue/
Is there a stray line of code that tells Safari to misbehave?
Even an ultra simple <p>Hi</p> acts unreliably.
I'm building on the X Theme framework on Wordpress (where I've got 20+ other sites), Yoast SEO, Wordfence, Gravity Forms, WP Rocket (in Safe Mode), WooCommerce, and Stripe for WooCommerce.
Thanks, folks.
Modal screen!
I had a modal screen acting like some sort ghost element, screwing with the z-index, etc., etc. That's why only parts of the image were active.
Very strange that only Safari had an issue with it, but anyways, that was the issue.
I guess that's what I get for trying to hiding a required ugly embed off screen... :)
I'm trying to hide the header when scrolling down and show it again when scrolling up in mobile. Anyone know how this can be done in Intel XDK app framework 2.x using html + cordova?
I know there is examples like this https://medium.com/#mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c but it wont work inside intel xdk for me.
Question, has anyone been able to accomplish this inside the intel xdk + cordova framework, in that case how? Any help or input highly appreciated, thanks!
Yes, it works fine for me, both in the Emulator and in the Debug tab on a usb connected Android device, but I had to include jquery explicitly. I basically copied the code from the link you provided and it worked. If you're using AppFramework, there might be a possible priority issue in the CSS rules, which you should be able to fix by making the scrolling related rules more specific (class scroll or specific ids if necessary). There also could be a conflict between AppFramework and jQuery, but I'd have to see more details to address that queston.
It looks like AppFramework does interfere with header and footer, so you could also try using divs with custom classes or names in place of header and footer elements.
I did have a few bugs, which I tracked down using the Debug tab and the emulator's debugger. The thing to look for is to make sure the class on the header element changes when you scroll up and down. If that is working, then you can check the CSS rules and see if maybe something is taking priority.
I am trying to put together a simple portfolio site, and have implemented a basic responsive design into the CSS as well (at the very bottom of it), and it behaves just fine - shrinks the 5 columns down to a single column and hides a few elements when I resize the computer browser. But on iPhone/Android browser it doesn't make any difference.
Here is the page in question -> Sample Page
And I can't figure out what the issue is... as in, this should be fairly simple to do, but apparently it's not, and now I'm losing sleep over it... so might as well ask here.
Have you [also] consider the use of viewport meta-tag? Just check This.
I tried loading the site but it seems like your custom js file is not found(404 error).
I have a site with a header div and an iframe used to display a map in the rest of the page, resizing to the maximum space it can under the header div.
I can get the method working on Firefox and Chome, but the iframe won't fill the div on IE9. Anyone know what the issue is? Rather than post html, here's a few links to the problem page and the old page I'm re-designing that does work in the same way in IE9.
New problem page (doesn't resize div in IE9):
http://permitmap.paydirt.co.nz/devtest/permitmap.html
Old page using the same technique that does work in IE9:
http://permitmap.paydirt.co.nz/
It might be my abuse of Twitter's Bootstrap? I use bootstrap it as it's meant to be used on normal content pages, but this page is a one-off that needs to display a map in as much of the page as possible while still following the styling for the header as the rest of the site.
And my use of tables for layout is also bad practice I know, but it's the only method I've found to achieve the desired effect with the iframe (believe me, I've tried a lot of ideas out that don't use tables!).
Thanks in advance any CSS / HTML gurus out there that can help!
How much time is lost making IE behave like other browsers!? Microsoft must cost the planet an incredible amount in lost man hours and extra expense supporting IE.
Ah, just noticed I had to solve this issue with the original page.
Removing the DOCTYPE element from the top of the page resolves the issue in IE9!
I'm very new to web design and just made a simple one page website for my iOS app here. I now want to make it so that when this page is opened on an iPhone, the whole thing is zoomed out enough because right now the right half of the page doesnt show. From my understanding and research so far, I need to use media queries and create a separate CSS stylesheet for mobile. However I feel like for such a simple page there should be an easier solution with some plug-and-play code. Something consisting of a simple conditional-type statement checking if the user is on mobile, and if so, gives the new dimensions of the page. I don't really know anything except for the very basics of html, css, and javascript when it comes to web development, so simple explanations would be highly appreciated.
I think you have to go for http://www.jquerymobile.com it is very good framework for mobile web.
Instead of creating a mobile-specific page you might want to experiment with the viewport meta-tag. The tag isn't used by desktop browsers, but it scales the size of what you see on a mobile device's screen. You can also check out Apple's guidelines for more information.