I am developing an application with movable charts within a dashboard. Each chart has a set of options in the top right of the element that allows full screening, closing that chart etc. Due to image differences (of which I can't change), I have had to use zoom values. This performs exactly as intended in all major browsers, including IE7, but weirdly, not IE9.
http://jsfiddle.net/YkTjp/7/
If you open the fiddle in Chrome and IE9 side by side, you will see the .icons element isn't absolutely positioned to right: 0;, infact it is twice as far left as it should be. As seen below if you can't recreate it.
Image here. If someone could edit my post and embed rather than this link I would appreciate it (don't have 10 rep)
The bottom picture is what it looks like if i remove zoom: 0.5;, and it seems to have the right position correct here. So I can only assume its calculating where to place .icons BEFORE taking the zoom into account.
However, knowing that doesn't put me any closer to a fix. Any ideas?
Unfortunately, since zoom is not a standard CSS component, there is no standard for its application.
Basically, the zoom:0.5 causes the elements to be cut in half, but IE is doing this respective of the space it would have occupied, and aligning them top left of that phantom space, rather than aligning just to the parent. It appears much farther from the right, but it actually lines up on the top, and aligns to the left edge of the zoom:1 components.
Unfortunately, I can't think of a fix for it that isn't Javascript-based, but that is why the problem occurs.
Related
I'm having an odd problem with some floated divs on this page that I'm working on. There are 3 of them across the page, with 1em margins between. In Chrome they line up perfectly, but in IE and FF, the right hand one drops a little - but not all the way below. I thought this might be best described with a picture, please see below:
I can't work out which bit of the CSS is causing this - I've been through the new FF code inspector and highlighted all block level objects with the webdev toolbar but can't see anything that would cause such a drop.
I did wonder if it was something within the JS twitter feed causing it, but I've swapped round the Twitter and "Update" boxes and it's always the right-hand one. I've also tried removing additional elements from the page - everything between the menu and these three boxes.
I must admit, I'm at my wit's end! Can anyone spot something obvious I've missed? The CSS is fairly large, and I'm not sure which bit to show, so I haven't copied it in in, but will do if anyone desires. Otherwise everything can be viewed at http://www.woodexperts.com
Change width: 15.25em in div#main div.tricolumn to width: 15.24em
That should take care of the issue.
I understand that this is a hack, but if IE is the only browser causing problems, you might want to consider IE conditional comments that restrict certain styles only for IE:
http://msdn.microsoft.com/en-us/library/ie/ms537512(v=vs.85).aspx
I am doing a project which requires to have a 20mm white area around a print page, with a 10mm border within that.
I have these set up using <div>s and everything looks fine on the HTML page - but when I go to print, I get the extra 4-5mm margin which I cannot print on (as it is defined by each printer) added to the left and the top pushing everything over to the right, and partly onto a second page. I imagine it is just taken off the right side and the bottom part is pushed onto a second page.
What I want to do is get the exact mm that are being added onto the left right top and bottom of the page and take that away from my 20mm. As I cannot guarantee which printer will be used with the page, I cannot guarantee that all the margins will be the same size as mine.
I cannot use shrink to fit on IE, because I need the measurements to be precise on where things are placed and the size, and as it is not supported by IE6 - which could be used, as it is a requirement of my application that the client is IE (don't ask me why it just has to be that way).
Printing from browsers is hellishly ugly, and you have essentially no way to affect the output except HOPE that the browser will honor a #print css styling. There's also no way to query for printer capabilities so you can't find out what its "dead zones" are on the page edges.
If you need to generate a pixel-perfect layout on paper, then use a PDF.
I recently made a new WordPress theme for a local travel company and they are now getting reports that two elements in my design are not in the correct positions in Firefox (seems specific to version 3.6) and Chrome for Mac.
A page where both issues are visible: http://www.totemtravel.com/blog
Issues:
The white flag with the logo on it at the top of every page jumps
several inches to the right to cover the area code of the first
phone number.
The search button at the bottom of the blog categories widget in the sidebar jumps to the right, out of the widget, and off the page content wrapper.
I think the issue has to do with where those browser assume the item should be before the relative positioning, but I need a way to make these all look the same across all modern-ish browsers.
I wont paste the pages of source code behind the theme since it can be easily viewed with Firebug or the Chrome inspector, but please let me know if any additional info would help.
1: The img for the white flag must have left:0. Not all browsers default to left 0. Firefox for example, is defaulted to left:50%. Another problem is your trying to relatively position a td element for the title "Totem Travel", this is invalid and I would recommend using divs here instead of tables.
2: This is due to the native CSS styling differences of the browsers. That is why people use CSS Reset style sheets, to zero everything out so you know for sure the "default" css is the same. Here's an example: http://meyerweb.com/eric/tools/css/reset/. The effect this is having on your css now is that, the submit button is falling down to under the input as it doesn't have enough space - so when you are relatively positioning it it is off in the browsers.
3: Relatively/absolutely positioning everything isn't quite the best way to go about styling a website. You will find many inconsistencies like you are experiencing and there are better ways. I would recommend visiting some example themes on sites such as themeforest.com or elegantthemes.com and seeing how they do their CSS and HTML
I put together a site that generally works well on FF, Chrome and IE8 (yes, I'm new to this):
I heard from our office in Japan who all use IE6 that various pages are not displaying properly, in short they stop scrolling when the page should scroll further - the scroll allowance is too short. I have confirmed this for myself.
Its not that I can't find a million suggestions for IE6 workarounds, but how to diagnose this problem? Is there a bug name for this?
A good diagnosis would be immensely appreciated - have spent hours on this now, to no avail, at tearing-out-hair stage.
When you use 'float:xxx', browsers can not calculate the height/width of element properly, you have to use 'clear:both' an element that resides after floating box.
Don't forget that when you position the element absolutely, then other elements doesn't look at it while positioning themselves.
Example on jsfiddle:
http://jsfiddle.net/tWJYJ/
In first example green and orange boxes doesn't see the red box while calculating positions, because it's positioned absolutely.
I do all my css work with firebug, using the up and down arrow keys to adjust top and left values.
Anyone come across a firefox addon that lets me drag stuff around and then copy and paste the top and left values?
edit: I have changed the question slightly from 'easier' to faster. Sorry for any confusion, I am not a beginner looking for tools to help me write css, simply to speed up my positioning slightly!
I use the MeasureIt addon for Firefox, which gives you a ruler. Drag from where you want the element to the top left of the screen and it'll give you the absolute position. You might need to adjust for scrolling but it shouldn't be too hard.
I do the measurement part in Fireworks, Photoshop or any drawing program (Photofiltre, Paint.NET, etc or The Gimp), based on a template I was given. Not in the browser. And I certainly don't use absolute positioning for layout!
That said, here are some tools I found useful:
MeasureIt
Pixel Perfect overlays a PNG over the page
many plugins for Firebug exist, they can be found here: http://getfirebug.com/wiki/index.php/Firebug_Extensions . XRefresh and a dual screen for example. Firediff could match your needs
https://chrome.google.com/webstore/detail/hjpdnlklajjpbihamlcpllppegpekicg
I made this because I agree with this question. It allows you to inspect and drag an element. Your new coordinates, calculated by Firebug will be updated when dragging ends.
Use dreamviewer, when you set css to absolute, in the preview mode you can drag and drop your element where ever you please two and CSS is generated automatically with the positions top, left where you placed your element