Internet Explorer 7 and below is not displaying my Borders and if so, it is not displaying them correctly?
http://www.noxinnovations.com/portfolio/nue/
Any ideas? There should be a border placed at the bottom of the whole HEADER TAG and one above the FOOTER TAG.
Take off the border-top-color rule (on the header) and border-top-color on the footer; that appears to fix the issue. It may be that the color is not dark enough; you could try a darker color (I can barely see it on IE7 on the bottom). You can use a conditional comment or the hack *bottom-border-color: none to target IE7 and below.
Related
So I've got a page on a site that displays exactly like it should in both IE and Chrome, but not Firefox. The link is http://www.jakerevans.com/?page_id=61. In both IE and Chrome, the spinning animation (written with D3.js) displays fully through the padding-left and padding-top, but not in Firefox. Anyone have any idea how I can make this padding in Firefox transparent? Any other possible solutions? I'd really like to resolve this through CSS if possible, and not go back to the drawing board with the D3 code. Obviously I will if I have to though.
Thanks a lot for the help!!!
You need to explicitly set overflow: visible on your <svg> element.
The SVG specifications state that all SVG elements that create viewports should have overflow: hidden in the browser's default stylesheet. However, browsers disagree over whether this should include the padding area or not: if you follow the description in the SVG specs, as Firefox does, padding would not be included. However, general CSS/HTML layout does not consider content in the padding to be overflow, so Webkit/Blink/IE browsers do not clip it with overflow:hidden.
it doesn't seem to be the issue of the padding, it's like to be the firefox transform origin thing, see this Setting transform-origin on SVG group not working in FireFox
The header on my website appears to have a mysterious 1px black border in chrome that does not appear in other browsers like IE. Is there a CSS change I can make that will remove it when displayed in Chrome?
Link: http://tinyurl.com/stwcfe
You've got an empty img tag in your header element.
Remove that and it disappears.
I designed a page and was testing in chrome. After completing it, when I checked in firefox, I noticed few inconsistencies. For example, one thing that surprised me was the popup I made. I was doing like :
$('#login-pop-up').css('top','3200px');
It showed fine in chrome, but in firefox it showed way below. I do not know what does that mean ? When I set a property of top to 3200px, why it doesn't remain the same in firefox when the testing-machine is same.
Does each browser render css differently ? top for firefox won't be same as chrome or opera?
It depends on the relative elements on your document. CSS is a stylesheet and almost all browsers target basic CSS properties same way. For eg: position:absolute with top and left margin specified (with width of the element and height also specified) should return same results on different browsers.
There are some CSS properties which are inbuilt, that the color of the font should be black, there should be a 1px border on input boxes, bla bla..
Source: ME
See this link:
http://lsp2.tpdserver2.co.uk/test.htm
Displays fine in IE/Chrome but in Firefox (6.0.1) there is a 1px border around the blue header.
If I add a background color to the #header-content, the 1px white border dissapears. This seems crazy.
I cannot work out what is going on with this and the related page I am trying to build depends on not having a background colour for the 2nd fixed container.
Here is an image of the problem I see:
Link to Image
It is layout rendering bug in Firefox. This bug was already reported and as I know it is fixed in next release. Only solution I know is to use opacity:0.9999999. It would render correctly as opacity:1, but fix this annoying bug.
Try #header { opacity:0.9999999; }
Bugzilla : Bug 677095
EDIT: Firefox 8 is not affected with this bug and setting opacity to 0.9999999 will result in weird border around the element, so I prefer not to use it anymore
Browsers add different defaults if you don't "reset" the CSS, that may be what is going on here.
If the z-index value of your #header-content is not greater than 10, then the bug is fixed. If it's 11 or greater then I can see the mysterious gap too.
Really weird.
I cannot reproduce in FF 6.0.1; however, you can probably work around this with
background-color: transparent;
on the #header-content, or white if you don't want it being see through.
This should still give the fix you mentioned while remaining a blank div as required.
Update:
Ok thanks for the screenshot, still cannot reproduce, this time with ff 6.0.2 - I had a look around after noticing I can reproduce a similar issue on different zoom levels.
Blog post explaining the zoom border bug, which includes this test page. I am not sure if this is involved, seems similar but not the same thing, zoom bug will take off a slice of the whole page including the border of #header-content.
As for your comments around transparent, you can use it and still supply a background image, does this not work for you?
When this page is viewed in IE6, you will see extra left and right white borders on the button:
http://pastehtml.com/view/1aycieg.html
They don't appear in other browsers (e.g. IE7, IE8, Chrome, Firefox).
I have been trying hard to fix it by changing the margin and padding values of the <li> and <a> tags but still no success.
I would like to avoid changing the HTML markups if possible.
Anyone got some ideas on this?
Many thanks to you all.
Ie6 does not support png transparency. What should be transparent is white and you are seeing that.
You could try pngfix