Days of Internet research and worsening frustration lead me here. I cannot figure this out. Perhaps a wiser person can help.
Using web developer tools, every site page displays fine in every tested browser. However, when I check on an actual iPad and iPhone, no page displays correctly. What's wrong is that none of the CSS in style.css is executing on the iPad / iPhone.
I am using bootstrap, which it sees, but it does not see my style sheet (css/style.css). I have tested too many things to list, including absolute versus relative URLs, and rearranging the link tags in the header.
I tested inline and head-embedded styles and both work. But this is unacceptable to me.
I removed all code from the footer, leaving one div with a class from the external stylesheet, and that did not work. The iPad is blind to it.
I cannot debug the iPad from the iPad (I know Safari has instructions for this), but I have other bootstrap sites I coded that work fine and comparing them I cannot see what I am doing differently now.
I re-booted my iPad many times in case it was a cache issue.
I left out code in this question because I do not know what code to show. I can provide code or URLs or anything else if that helps. The pages are published.
I appreciate any assistance. Thank you.
Related
After spending a while creating an online portfolio, then uploading it, I noticed an issue with one of my sections. On the "Advertisement" section, I noticed it was not displaying the information, just the title. So, I kept on re-pushing the stylesheet.css, even editing it, and it would still look the same. The HTML, CSS, and JS is working how I wrote it. But it is just the section that is not showing. After browsing online and on stackoverflow for an answer, I believe it has to do with Firefox. When using Firebug, I noticed the section's background has been removed, causing the entire section to "disappear." It works just fine on Chrome. I'm not worried about IE, I know that browser has some issues in itself. Anyway, would anyone on here have an idea to resolve this issue, if I can? Or even, what could be causing this issue?
Here is my website to see for yourselves. www.voelkerdesigner.com
Cheers!
It is the opposite for me your entire site works in firefox for me but not in chrome, looking through your code, its being caused by your naming conventions. Namely #advertise
I use the adguard extension in chrome and below is the css it plugs into my html pages to hide ads, so im guessing your using an adblocker in firefox
#adsense_top, #adsensewide, #adspace, #adspace_top, #adspot-300x250-pos-1, #adspot-300x250-pos-2, #adswidget1-quick-adsense, #adswidget2-quick-adsense, #adtext, #adtop, #adv-masthead, #adv-top, #advert1, #advert2, #advertbox3, #advertise, #advertisement1, #advertisetop, #advertising-container, #advertising_wrapper {
display: none!important;
}
Might as well post a random answer on this... As i wont visit posted links by new users.. i'm just gonna guess that your background image might not be 100%...
In general i use background-image instead of background.. Short hand can be a little pain and breaks in some browsers if not perfect.
so i would compare against the following example
background-image:url('images/mybg.jpg');
background-image:url('http://somesite.com/images/mybg.jpg');
Basically alot of people do not use the url and just go straight for a file name or dont quote it.. And have seen that be the problem in the past, so do use the url('') method.
Otherwise if it still fails to work and you know the image is absolute, you would then have some other css that is either over riding your elements background or is preventing it from loading.
Another trick is using your console / inspect element to manually inject the background-image and see if that works... So once the page has loaded in chrome, inspect the element as normal.. And double click on your css property listing as you can add your own styles this way and if it fails, then its not the markup but something else.
I'm having some trouble with our precious Internet Explorer 8. We are working on a CMS for hotels and everything was just fine until awhile back, when IE8 stopped rendering the frontend properly. This is the public website demo and the top navigation as well as the menustrip are messed up in IE8. Same with the "Payment methods" in the right side of the footer, where small icons for accepted payment methods should have been shown.
The thing is, we do have a special CSS file dealing with IE issues and it's loaded on the website, but it's not being applied to elements by IE. Also, on my local machine other CSS files (not conditional) are being loaded in IE, but the browser doesn't apply the styles.
It's like this:
the CSS file is loaded
the classes are applied to the tags
but the styles are not applied to those classes (!)
Now this behaviour happens on some pages and doesn't happen on others (very few). For example, on this page the menustrip is ok. I read about similar issues in IE isn't rendering the CSS and js dom injected elements don't pick up CSS styling in IE. The thing is this behaviour has been reproduced on other PC's in the office, as well as at home. I'm quite baffled by this.
Has anyone else experienced similar issues? If so, did you fix it? How did you manage to fix it? Thanks to all!
I'm doing a website for a client and for some strange reason when loading the page in IE/Firefox/Opera, the stylesheet doesn't load properly.
When loading the site in WebKit (Chrome, Safari, Mobile Chrome, Mobile Safari) the page loads fine.
I've check that the doctype is fine, the links don't have any typos, they all link up correctly in the source.
I cant for the life of me figure out why it doesn't work!
Please help!
http://almostinspired.net
and
http://almostinspired.net/wp-content/themes/almostinspired/style.css
What's happening is that your CSS file is, in fact, being loaded by every browser, but is only being partially processed by some browsers. This might be because of an improperly formatted stylesheet.
I've determined that these browsers reach line 115, but don't quite make it to 161. I'd try removing selectors in between there until you determine which one is causing problems.
And this is what I did to figure this out:
I opened up your site in Firefox and went to 'Inspect Element.' It was clear to me that the most obvious thing that was getting messed up was your #wrapper div. This thing was styled at around line 160 in your stylesheet, which gave me a line number that it wasn't getting to. I looked around on different elements to find the lowest number it was getting to, and the lowest I found was 115. And that's what I used to infer this solution.
I saw some of the sections related to IE issues in our stackoverflow website but still my question awaits.
In my local server I am running an application which is loading JS and CSS files perfectly and working fine in IE7+ and Firefox. The problem is with IE6.
If running in IE6, able to load small amount of data but not if large data.
Able to find that the complete problem causes with CSS but don't know where I am going wrong in CSS.
I tested my application with w3c validator, it shows some minor errors which can be ignored and everything looks good.
Even using IE Fixes CSS.
Could any one please provide me some ideas, like is there any css debug for IE6.
Thanks in advance...
The Internet explorer developer toolbar may go somewhere to help you. It's extremely useful, although not as good as other browser alternatives. It can be installed on IE6. To access it once installed it's in the "convenient" place of view-->toolbars
Are you are generating a <style> element for every data row? This is common (although I don't like it) when you don't have access to the <head> element or cannot concatenate rules into a single <style> element.
If so, do you have more than 31 <style> elements? IE has a limit on the number of stylesheets, so you might be seeing that problem.
There are a lot of blog posts (and SO question) on this. Here are some of the better ones I could find:
Does IE 8 have a limit on number of stylesheets per page?, Stylesheets Not Loading? 31 Reasons to Hate Internet Explorer and Internet Explorer CSS limits.
I suggest FirebugLite (for IE6), and installing Fiddler.
I was working on the print CSS for a webpage of mine, and for some impossible reason, my website's CSS (as presented to a computer screen) became very odd. Firebug says that a user agent stylesheet is causing portions of my page to have enormous margins in random places for no reason. I have no idea how this could have possibly been caused.
Anyway, to begin, how can I get rid of user agent stylesheets?
Try using a reset CSS sheet. This will reset all browsers to have the same styles to begin with, and should fix it.
Already tried to empty your cache?
Ctrl + F5 works wonders sometimes