HTML Coding issues with Firefox
Hi!
Im currently doing a website for one of my clients, but ive stumbled upon a problem Im hoping you guys help me solve.
The website im creating is being done from scratch in semantic html for html5 and css3 validation. Sizes of all boxes are being stablished in "em" (16px=1em) as it´ll be a responsive website. The width for my website is of 1060px or 66.25em, in other browsers i see it working ok (Chrome, IE), but in Firefox when the value is stated in "em", all boxes appear to be smaller, like 5% or 8% total. When I replace the value to the one in pixels it displays them still smaller but now moved to the left, like 5% or 8% to the left. I'm not using any type of kits for this website as it is being done from zero to accomodate our customer's needs.
My question regarding that is to know if the "em" value has been modified in recent versions of the browser or if I need some type of mozkit to have the values recognized as they should in standard sizes.
All Replies (6)
I believe 1em = 16px holds on a 100% zoom display (96ppi).
If you open the web console on your page (Ctrl+Shift+k), paste the following next to the caret (>) and press Enter, you can learn the zoom level as a percentage of 96ppi:
window.devicePixelRatio
Does that reveal anything useful?
To be sure that you aren't zooming this page:
Reset the page zoom on pages that cause problems.
- View > Zoom > Reset (Ctrl+0 (zero); Command+0 on Mac)
Thanks for the prompt response guys! I really appreciate it.
@cor-el I did reset the zoom size of my browser as I tend to work with less zoom to appreciate errors in the design or the programming; i did forget to mention it.
@jscher200 I entered that in the console window and i've been working with 100% size. While playing with the code though, I did find out that if I enter a smaller value than the total one to the father container Firefox would display everything ok against other browsers and to the template I did in Photoshop. (f.e. instead of working with 100%, i forced the father to a 95% and Firefox displays everything fine now).
It's odd that making the parent element a smaller percentage solves the problem with everything being too small. ?? It's probably a good idea to check on a number of other systems before releasing to your client just in case it turns out to be an oddity of your configuration.
I know, it's been really odd. Whenever I'm creating a site I always take into account how it behaves in Firefox since Chrome and IE let too many things go unnoticed or let them pass without a single error in the console.
Funny thing is this is a first Ive encountered, and my browser had just updated itself to the version 24, so I thought maybe they changed something in it that may be conflicting with my site. In my desperation (the deadline for the site), Ive tried many things and the last one I thought might work was changing the percentage; but i recalled a problem I had several months ago with another site where Firefox and IE respected the margin: 0 and padding: 0 but Chrome kept getting heritage from somewhere we couldnt pinpoint since there were no errors but everything was scrambled.
It was a site we were asked to update, so it wasnt ours from the beginning, hence the difficulty pinpointing the heritage but no consoles showed it. Finally someone thought of changing the percentage of the parent one and it solved it, to be honest with you I still dont know what happened to tht one, but I thought maybe it could apply in this scenario, apparently it did.
Look up front end development http://www.theguardian.com/help/insideguardian/2009/sep/28/blogpost The link above should help explain that every browser displays things differently, i know its a pain trust my i statred a site from scratch and did not know till 3 months later that it looked bad on chrom and safari but perfect for fire fox thats beacause i created the site for firfox with out knowing it:( Hope that link helps