I am trying to override the default page setup margins for my users. The document that I need them to print needs to have the margins gone. After TONS of looking, I found the following, and IT WORKS IN GOOGLE CHROME:
#page{
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
When I print this to PDF in Chrome, it prints a document with virtually no margins around the side. However, when I do the exact same thing in FF4 and IE9, it prints a document with large default margins.
Any ideas on how to make this work for IE9 and FF too? Supposedly the #page CSS stuff was part of the CSS2.1 spec, which all browsers IE8 and later support. So, I am not sure why it isn't working for these pieces, and why Chrome is the only browser that has it.
dont use the px
The page context has no notion of fonts, so 'em' and 'ex' units are not allowed. Percentage values on the margin properties are relative to the dimensions of the page box; for left and right margins, they refer to the width of the page box while for top and bottom margins, they refer to the height of the page box. All other units associated with the respective CSS 2.1 properties are allowed.
Specs
Related
I am making a simple web page, but on google chrome it looks perfectly fine, just how I want, but when I open the page in IE or Edge the nav-pill tabs are at the top of the screen instead of near the middle like they are in chrome.
Images:
I have the 'top' property of the div that they are in is set to 30%.
I have a lot more code, but I don't want to flood this with it, If you need more info let me know! Thanks in advance!
#bodyArea
{
width: 425px;
position: relative;
top: 30%;
left: 44.3%;
}
After testing the code you showed us i noticed as well that it didn't work in IE. From here i would conclude the percentage from top for position:relative is incompatible with IE (judging from this: https://msdn.microsoft.com/en-us/library/ms531177(v=vs.85).aspx IE takes a percentage of the parent container and it might not know the height of the container of your div). I am afraid i can't be of more help without knowing more of the code around your div.
My problem is an Internet Explorer issue. I have an element, basically just a block, with the css:
md-card{
min-width: 80%;
background-color: #fff;
}
And this element is full of data elements consisting of an icon and text.
Each one is either a file or folder, and clicking a folder just navigates to that folder's contents.
These elements are using data binding and are dynamically updated when you click a folder (so it removes the current contents and replaces the data with the opened folders new contents) and for some reason this causes a problem in IE
The md-card element despite having min-width set to 80% will sometimes squash down to like an inch big on the screen when a folder is opened. Sometimes this happens only for an instant, and it resizes, and sometimes it sticks. But resizing the page will cause it to resize back to the intentded width.
I was thinking it was some weird interaction between angularjs and IE but I'm wondering if this is an issue anyone has encountered or and ideas on why this is happening.
Edit: On further inspection it seems to involve the min-width: 80% attribute.
Changing it to min-width: 600pxeliminates the problem.
The problem with Internet Explorer is always bugging but I figured out the solution please add this line to md-card CSS sheet . As you mentioned that it is basically a block , consider this .
md-card{
display: block ; /*Add this line*/
min-width: 80%;
background-color: #fff;
}
Internet Explorer is not as intelligent as chrome or Firefox , so the default is always display:inline ;
Therefore the layout problem occurs .
My button looks fine in all browsers(Firefox, Safari, Chrome) except IE 10 (I tested on two different computers with windows 8.1). The image appears to be a bit lower in IE while other browsers have it right in the middle.
IE:
Firefox:
CSS:
#checkout {
background-image: url(../img/checkout.jpg);
border: 1px solid #D6D6D6;
float: right;
width: 184px;
height: 29px;
}
HTML:
<input type='submit' id='checkout' class='jcart-button' value='' />
I have tried using:
line-height: 29px;
Also, I noticed it works fine when I use input type='image' but the problem with that is, I need the ability to have a different image on hover. onMouseClick does the trick but doesn't work without javascript. I need something that works without javascript as well.
Edit:
Removed all my css except the #checkout part but I am still encountering the problem. So I think it is a problem with the #checkout css or the HTML part.
demo: link
Found my answer after hours of debugging :)
All I had to do was remove the border from the image and use:
border: none;
I hope that helps others!
That's probably because all browsers have quite different user agent settings for input element.
Those differences are found in margins, padding, border and god knows what else.
Open DevTools (F12) and you can see all the rules involved with the input and input[type="submit"] element.
To be absolutely cross-browser-sure you have to set all those rules manually for #checkout in the CSS.
UPDATE:
Could also be that you didn't set the width and height of the button correct.
The way you have it now it's actually not perfectly in the middle. As you can also see in your screenshots, the left/top of the button has a white edge, the right/bottom doesn't.
If I change it to width:186px; and height:31px;, it is perfect.
(With any luck that also fixes your problem in Win8.1/IE10, or at least makes it less obvious)
I am using the jAlbum program with the Lightflow Skin to create a gallery. Works well but when I attempt to navigate the gallery on my laptop and the images will slowly creep up and the titles will disappear. I cannot replicate this issue on my desktop, however, my screen size is large enough that the max image size does not override the screen size. This happens in Firefox (multiple versions) only. In Chrome and IE it displays correctly. Also the Close X is off to the left a bit too much (In all browsers on laptop only).
It would appear that the script is calculating the top property incorrectly.
Here is a bit of code:
<div id="lightwindow_container" style="height: 469px; width: 532px; left: -266px; top: -235px; display: block; visibility: visible;">
For the photos that go off the page if I change the top property I can make it fit the page without issue. (By changing it in Firebug when looking at the page.)
Here is a screenshot showing the issue:
Here are the page(s) in question.
How do I check and see if this is a script error or simply a local browser issue and how do I fix it if it is a script error?
Note: I would add the code but there is so much code it will reach the max limit allowed here in SO.
So take a look at www.qualificationcheck.com under both Chrome and Firefox. Alt-tab rapidly back and forth between them focusing on that little green 'help & feedback' side tab.
It appears to move position! Whys this?
Its included by a 3rd party Javascript file. I've looked into it to figure out how it calculates its position.
First it sets top: 50% to get it roughly 50% of the way down the viewport.
Then it sets
margin-top: [ "-",Math.round(tab.dimensions.height / 2), "px" ].join("")
ie minus half the height of the tab so it shifts back upwards slightly so the 'middle' of it is actually 50% of the way down the viewport (rather than the 'top').
Using Chrome dev tools and then firebug in Firefox I can see that in Chrome margin-top ends up being -33px while in Firefox it ends up being -87px.
Why the difference?
Its annoying because I want to add my own tab above or below it but I can't determine where to put my own tab if I can't rely on the 3rd-party one to be in the same position all the time!
Sorry guys, neither of the other answers helped.
I resolved this by basically copying the 3rd party js and then tweaking it so I could position it and my new tab together as one.
So basically just a work around rather than an answer to the issue.
Try adding padding-top: ?px and it should be the same for both Firefox and Chrome. Some people on the net are reporting a similar issue with margin-collapse (not a bug, apparently):
http://www.sitepoint.com/forums/showthread.php?829681-CSS-margins-displaying-differently-on-Firefox-Ie-Chrome
Margin Discrepancies between Firefox and Chrome/Safari
Firefox (and Chrome since recently) interpret margin and padding differently. Margin and padding values are added to the div height/width. You can fix this (at least for FF) by adding this to your css (put it at the top):
DIV {
-moz-box-sizing:border-box;
box-sizing:border-box;
}