I have one image and that is getting showed as per below CSS
#imaged{
display:inline;left:-220px;position:relative;bottom:-40px;
}
In Chrome, it is displaying as per bottom and left position.
But in IE, the image is getting displayed '-40px' downwards. Buy if i do css as
#imaged{
display:inline;left:-220px;position:relative;bottom:0px;
}
then it works in IE but not in Chrome then..
Any suggestions?
Related
I'm using the latest Font Awesome to place SVG images as icons in my navigation bar. They are supposed to remain hidden until you hover on the navigation item, at which point the text slides over and the SVG fades in.
This works fine in Chrome.
In both Internet Explorer 11 (on Windows 7) and Edge (on Windows 10) I am getting this weird effect where the SVG appears at the top of the viewport and waits there until the text sliding animation finishes, at which point it plops into place next to the text.
I've tried all sorts of troubleshooting, but I just can't lay a finger on what this is doing, and why. How can I work around this rendering issue?
My site
Remove position: relative from the class .link-container.
It's not needed tested it with IE 11 with the dev toolbar.
Then it works fine position: relative is messing up the position.
I have a webite where i position some events in a calendar with position relative. But the problem is that in Chrome the layout it pixel perfect, but in firefox and IE it does not work at all.
The events get positon about 10px wrong downwards. And my tooltip that also uses relative positoning gets stuck at its "orginial" position.
I have a live demo at: http://jonasolaussen.se/dev3/?page_id=6
You can see the black box positions different in Chrome and Firefox. And when you click on a tooltip it turns up at the date in Chrome but in the bottom left corner in Firefox.
I cannot understand why!?
Please! Help Me!
One way of doing this would be to use css hack so that you can style it dependant on the browser.
Here is a demo:
#media screen and (min--moz-device-pixel-ratio:0) {
.firefox {
background: red;
}
}
Fiddle example:
http://jsfiddle.net/Hive7/3HYmZ/1/
Here are my references:
http://browserhacks.com/
http://css-tricks.com/snippets/css/browser-specific-hacks/
I know this is an old post and because of your lack of detail I can't be sure, but quite often the reason for this is that different browsers will render their box models differently when widths, padding, margins etc are not explicitly set. setting widths for the elements you wish to position around will usually solve this problem.
The following HTML/JS video gallery works fine on Safari, Firefox and Chrome, but fails to render properly in IE (who would have guessed)
http://vimeography.com/themes/journey/
The thumbnails have an absolutely positioned a element that should appear on mouseover
The video poster frame image has a span title that should be appearing over the top of the poster frame, but instead, the title appears to the right of the image.
How can I properly adjust this CSS for compatibility in IE8 and 9?
I have a search box using a mixture of floats of form/select elements.
The search is rendering fine in firefox, chrome, safari etc however IE8 is ignoring the margin and padding rules (tried both).
see here: http://property.begbies-traynor.com
The section in question is immediately below the slider, the search area.
When viewed in chrome for example, the Search submit button is correctly sitting just inside the main container whereas IE has it right up against the side.
Similarly, the Select elements are sat on top of each other despite there being adequate margin rules to separate them from each other.
Any help on this is appreciated.
It is also not working in any other browser not using the Webkit-engine (I've tested it in Opera and Firefox), as you are only including the padding- and margin-styles for Webkit:
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* … */
}
If you want to see your CSS properties working in any browser, you should define them for any browser.
I'm having an issue with my navigation, the first list item appears to have a huge gap on the right.
I have a list of links inside an UL each have their own class so I could set a background icon to them. The first link has a background to give it the rounded effect.
I used relative to push to left so it would have that rounded effect for the hover and active states on the homepage and hover for when i'm on other pages.
Now it all works fine in new browsers apart from IE7 and probably older versions.
I've put it on JSFiddle to make it easier to view.
http://jsfiddle.net/datastream/Gta3h/2/
and http://eminemforum.net/navtest/nav2.html
Thanks
Live Demo (edit)
I got rid of <div id="navHold">.
I removed right: 40px from #topNav2 .home-icon.
I changed the width of #Navigation-Holder from 750px to 830px to make it appear the same width it was before I changed anything.
I've tested that this looks consistent in: IE7, IE8, Firefox, Chrome.