I designed this basic web page which appears perfectly fine in IE and Firefox but not in Chrome.
URL to the demo web page
You should not see the yellow color on top of the navigation. If you check the web page in different browsers, you will see what I am referring to.
Thank you,
Your problems lies with a#NavigationMenu_SkipLink, which contains a 1x1 image.
floating the anchor solves the problem for me and has no side-effects on your layout in Firefox.
Related
I have built a Meteor App/Website and I am trying to have a responsive fullscreen background image at the top of this page (https://www.conducate.com).
It works as expected in the Chrome Developer tools as well as in the Safari Responsive Design mode, but when I deploy the page and look at it on my mobile, it seems to zoom into the top part of the image, and does not resize it as expected from the dev-tools. As a result, there is just a grey blur to see.
Has any of you come across this problem before? It is hard to debug, since it works correctly in all the developer tools, but not at all when actually viewed on a mobile device.
Below is a link to an image with screenshots, one from my mobile (iPhone 6s, safari browser) and the other from the safari responsive design mode on my mac. Unfortunately, I am unable to post an image due to lack of reputation, so I can just post the link - I am still a newbie here...
https://s3.eu-central-1.amazonaws.com/conducate-images/stackoverflow/example_screenshots.png
Any help is much appreciated!
After some searching for iOS specific issues, I finally came across the solution to the problem by looking at some other examples.
It turns out, that most browsers understand the css line
.container{
background: url(http://www.link-to-image.jpg)
...
}
This is not the case for iOS, here you need to specifically state that it is an image, that is used for a background.
.container{
background-image: url(http://www.link-to-image.jpg)
...
}
I have a site that works fine in android browser, FF, Chrome, Safari IE9+ but in IE8 the upper half of an elements background disapears as well as the background color on a couple of input elements.
I have run through IE debugging tools and also W3C and there is nothing that is coming up that would make this occur.
The site in question is http://ukritic.com if anyone can check it in FF then IE8 and maybe suggest what could be causing the problem it would be greatly appreciated.
If you need anything from me let me know and I will post it up for you.
ADDITION:
The problem that is occurring is that in IE8 the white background containing the content is only visible 1/2 way down the page but is hidden on the upper half of the page and also hidden where the facebook like box is located.
In all other browsers the entire content container shows the #FFF background from the top of the page to the bottom of the page.
We have tested in IE compatibility and normal mode but the problem persists.
What I do notice is that while the page is loading the content container is white but as soon as the page loads completely it disappears on the top half and the facebook container.
Thanks
~M
The problem was in the border-radius.htc file as soon as I removed that call the page rendered perfectly.
There really is no effective way of rendering round corners on ie8 as the .htc file needs a relative path to the page that is rendered which does not really work well with dynamic depth address bars (shortUrls).
Guess I will have to settle for rounded corners only in IE9+ and all other browsers.
Thanks for the input
I am having a real hard time developing for Internet Explorer.
Below is a snapshot of a project as it appears in IE9 and below that in Google Chrome it looks the same in Firefox as well.
Some of the things not working correctly in IE9 on this page...
The navigation bar, the links are stuck at the top in IE instead of vertically centered
The navigation bar does not have the box shadow applied in IE
The sidebar and content boxes do not have either the shadow or beveled corners in IE
The Tag boxes do not have the round edges in IE
In the content section, notice the 2 tags "CSS" and "FONTS" on the right side of page are pushed down, in the Chrome version they are aligned.
The project is not online so I can't show it but I have put the header section into a JSSFiddle page here http://jsfiddle.net/kenLs/3/embedded/result/ you can see that this JSFiddle of the header DOES work correctly in IE9.
That really has me confused, it works on JSFiddle but not on my site. I have looked at everything I can think of to make it work correctly. I even added <meta http-equiv="X-UA-Compatible" content="IE=9" /> to my header. I had some HTLM5 elements on my page but I replaced all them with regular div's just to test with IE, nothing I do seems to change any of these problems.
IE9 snapshot
Chrome snapshot
I know this is hard to debug since the project is not online but if you have any ideas why this may be happening I would really love to know.
UPDATE
I just realized that on that JSFiddle, if I turn off Compatibility view then even the header will look like the one in my image
I also added another simple JSFiddle test that just has the code for my tags, even this little code does not work correctly in IE, I have to hit the compatibility mode for it to work otherwise the corners are square http://jsfiddle.net/j9Qe3/1/
If it works in jsfiddle but not on your site, I wonder if you are using a doctype or if there is anything placed before the doctype which would put IE into quirks mode.
I am trying to make a website with a video background using HTML5's video tag. I also tried using a jQuery plugin (http://plugins.jquery.com/project/videoBG). I got the video to load and work properly, but every time it makes other content appear grainy/pixelated. Is there anyway to place items on top of the video background and not have them appear grainy / pixelated?
You can see the pages I've created. The code is fairly simple, so I won't include it here.
With Video: http://createinform.com/test4.html
Without Video: http://createinform.com/test3.html
You'll notice that the logo and text look different from page to page, but they are using the save CSS rules. Thank you in advance!
Cheers,
Evan
This seems to be a known issue with Chrome. I tried the same two pages in Firefox (5.0), IE (9), and Opera (10), and I couldn't tell the difference in the rendering.
EDIT: I also tried the two pages in Safari (5.0.1/Windows), and the rendering looks even worse there. So, perhaps it's a webkit issue.
A part the Chrome bug, your logo image is bigger than it appears, and is scaled down via CSS.
Using a correctly sized image would remove any logo issue.
The text below renders fine in both version BTW (chrome 14.0.797.0 m)
I'm in the process of creating a website.
This website works great in Chrome (10), FF (3.6.13), however only half of it works in IE (8). Now, I'm aware of some of the issues between browsers, but this one has me stumped. Because half of the script is working (displaying properly) -- the other half does not.
A live version of the website may be found here
Additional information:
I am using the html5 doctype, <!DOCTYPE html>
I have validated my site with HTML5 as well as HTML4.01 STRICT
EDIT
At the request of Zabba, here is what SHOULD be happening:
I am externally loading content from other sources into my website.
My menu(s) and the text. In Chrome, and FF the menus, and the content are loaded and displayed. In IE, the menus are NOT loaded bu the content is. Funny enough, the logo also stops loading in IE.
EDIT
The problem has been narrowed down to a CSS issue, thank you!
The issue is in your CSS, not your JavaScript. Try these suggestions:
Remove your filter:alpha(opacity=80) from the #body block in your CSS.
Set z-index values of >5 on the missing items, since you have z-index:5 on #body. Or remove the z-index from #body.