I used "320andup" in order to make my first real responsive website. I managed to have a perfect adaptive environment except only one thing. The background image in Chrome and Safari is pushed down 18px. I can't explain why. Only thing I know is that when i add in the body tag "background-attachment: fixed;" the problem is solved but when I scroll I get an ugly experience that I don't want to have. I also tried this
#media screen and (-webkit-min-device-pixel-ratio:0) {
body {
background-image: url(../img/chrome-safari-img.gif);
}
}
with IE to completely break.
Firefox, Opera and IE8 are ok. Only problem is Chrome and Safari.
You can see exactly whats the problem and investigate the code in my localhost website -> http://www.demo.lollypop.gr/ffloor
I would like to avoid detecting chrome with PHP.
Just add position:absolute; in your body tag.
Related
I am currently working on a reponsive css webdesign and have a few sprites for different button states.
In this case I've tested the webdesign in Firefox, Opera, IE (compatibilty starting from IE8), Chrome and Safari and everything is displayed correctly. The website has been tested under different cell phones and tablets with different browsers without any problems.
I'm in the final testing stages and having co-workers see how the website looks in different resolutions... A friend who owns a macbook pro is the only one who encounters this problem and only under safari which makes it difficult for me to target and solve. I have tried to reproduce the problem using his screen size and switching safari's mode to that of a mac user without success.
The code is the following :
.buttons-menu .btn .rules, .buttons-menu .btn .contact , .buttons-menu .btn .tickets , .buttons-menu .btn .profile { display: block; width: 143px;height: 32.5px;padding-top: 37.5px; background-size: 100% 300%;}
.buttons-menu .btn .rules {background: url(../images/sprite-button-03.png); background-position: 0 -100%;}
The problem is that this tester sees about 2 pixels of the second part of the sprite when he shouldn't and this only in safari.
Thank you for reading this.
EDIT : SOLUTION : As ralph.m thought, the problem came from the rounding of the decimals in safari that didn't always behave the same as in other browsers.
Avoid using values like .5px. The browser will have to round that up or down to a whole number, and you don't know which way it will go.
I want to fix some errors on CSS displayed on Google Chrome and Safari, however Firefox and Opera mobil are showing correct. Few years ago a find that writting some code for example inside ie7.css the Internet Explorer 7 read the lines and the bug can be solved.
Now I have an issue with chrome and androind navigator, So I think if the bug can be solved on Chrome the bug will be fixed on andriod tablets.
for example I have a line:
.logo-social { position:relative; padding: 10px 0; margin-top:-10px; z-index:500; }
On Firefox my social bars appears -10px above the menu and Slider, buy On chrome appears 20px below the menu and slider, So I set z-index:500; to display over slider and not behind.
If I set margin-top:-25px the social bar will be displayed correctly on Chrome buy looks out of place under firefox. :/
If there are something to fix like IE7 or IE8 will be great!
use the media query technique
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* webkit specific rules here */
Body {}
}
this will target the webkit browsers, or you can use javascript
CSS Solution
#media screen and (-webkit-min-device-pixel-ratio:0) {
// your css here for .logo-social
}
Note: But that will include opera also as it also uses webkit now.
Javascript solution
if (navigator.appVersion.indexOf("Chrome/") != -1 || navigator.appVersion.indexOf("Safari/") != -1) {
// modify
}
Make sure you run the command on specific browser to cross check the appVersion returned
My website appears different in firefox compared to chrome or safari, the logo image at the top of the page is placed higher towards the top of the page.
I have tried using vertical-align but had no luck. Any suggestions? (page is institute101.com)
header .logo img.standard {
display: none;
vertical-align: middle;
}
The page is even more messed up in IE, is there a general rule I should keep in mind when making a page compatible for all browsers?
The difference in layout is because Firefox is not honouring the 30px padding on your body element. Firefox seems to be ignoring that.
The problem is highly likely to be the dreaded Quirks Mode.
Many browsers will put the page into quirks mode if the site does not begin with a valid Doctype. The problem with quirks mode is that it works differently in different browsers.
Your page does have a doctype, but importantly, it is not the first thing in the page, and that is why it is going into quirks mode -- you have some rogue CSS and javascript tags before it; these need to be moved into the <head> section of your page.
Fixing this will definitely solve the problem as far as IE is concerned. It will probably solve the problem for Firefox.
Hope that helps.
The problem comes from this css file:
Last row of this file is:
body { margin:0; padding:30px 0 0; }
if you delete the padding you'll have the same appearance with Firefox.
I'm having a problem in Google Chrome. I'm using a simple hover state on a display:block; link to change only the background:url(); property on the hover.
Google Chrome shows the actual hover change ok, but when I mouse out of the area, the background goes transparent/disappears.
Here's my CSS:
#branding #logo a {
width: 259px;
height: 201px;
border:none;
display: block;
background:url(images/logo.png) top left;
}
#branding #logo a:hover {
background:url(images/logo_hover.png) top left;
}
The actual site is here: http://beerblestudy.org. Again this is only happening for me in Chrome. Any thoughts?
It's working for me an all browsers. Try deleting your cache because it's working normally. I recomment you to delete the lines top left since they aren't necessary
Your background is disappearing in chrome here too.
I know I shouldn't "me too" on here, but this is odd and what brought me here was the same problem I'm having on a site I built recently: http://macvillain.com - the right hand column image blocks.
I tested thoroughly on most browsers (not ie6 or 7 - I've banished them) and has been fine in chrome for the past two weeks until today. Sometimes clearing cache etc works for a little while then it comes back. I don't get it...
UPDATE:
Hi I got an answer on the Google Chrome forum which said:
"Chrome uses strictly HTML5. Validate HTML code http://validator.w3.org/"
I had forgotten to do this and there were a couple of invalid things which I fixed and now all is fine and dandy.
I suggest you do the same.
Try this technique: I saw a JQuery plugin that automatically download images specified in CSS style sheets.
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
Here are my styles:
Parent container:
div.musicContainer {
width:820px;
height:54px;
margin-bottom:20px;
}
Child containers:
div.hardcorePlayer {
width:400px;
float:left;
border:none;
background-color:#996600;
}
div.feedbackPlayer {
width:340px;
float:right;
border:none;
background-color:#996600;
}
The issue is: i installed IE9 yesterday and while IE8 was displaying fine well now the feedbackPlayer div is not lined up to the right boundary any longer. it displays fine in other browsers as before.
is this a IE9 bug?
IE9 image:
other browser image:
thank you very much for your thoughts on this.
website url: www.guygar.com/guygar.html
NOTE: here is the new CSS with the reset data. Have i done something wrong?
Maybe you should try to reset the css so that all browsers start out with the same defaults (like padding, margin ect.)
You can find a css-reset and more information here: http://meyerweb.com/eric/tools/css/reset/
Edit:
Related question: https://stackoverflow.com/questions/116754/best-css-reset
This line is in flash.
Change body background to white, and .musicContainer to red. You will see that html is not failing. In my opinion it is a flash like bug.
Try zooming in FF ( I tested in 5.0) on few zooms there is also same gap.
I couldn't find a css reset being used on the site you provided. It may just be a difference in how IE9 displays different elements (margins, padding etc). I tried out the provided website in IE9 and didn't see the problem so it's a bit difficult to diagnose, though.
I'm using this approach for my websites I created prior to IE9.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
Let it be the very first meta tag in your head tag, and IE9 will act as it was IE8, hopefully in the same identical way.
It solved all my problems in all my websites until now.
Enjoy
It's related to flash redrawing. It behaves the same in ie8. Try resizing the browser window width and you will see that it doesn't update correctly.
Why dont you try a html5 player like http://www.jplayer.org/ instead?
Maybe try using js to check the browser and alter the size or position with js in an if statement.
w3 schools has a nice tutorial on browser checking.
http://www.w3schools.com/js/js_browser.asp