Here is the link for our wordpress site http://www.dotmappersdesign.com/caramaintaince/.
We have a compatibility issue with internet explorer and mozilla firefox. We tried few methods to solve, like
1) Creating a separate css file ie.css.
2) Writing version code in header.php ( )
But the issue is not fixed.
All your answers are appreciated.
Please changes the css line in logo class width 150px issue solved in mozilla firefox and IE.
On the insurance-repairs page that is happening because of the span8 class, remove it from the <div class="span8 right" id="content" data-motopress-type="loop" data-motopress-loop-file="loop/loop-page.php"> div and it should display fine.
The issue on the authorized-repairs page is happening because of right: 250px; on the <ul> that, remove it and it should fix it.
Related
Having a small issue getting my site to behave in safari.
Some specifics.
I am using safari for windows v5.1.7 but the issue is also present on ipad.
The issue i am having is the positioning of 1 element, which is only happening in safari, it is a small drop down so users can select currency, this is placed in my WP theme via the header.php.
The code i am using is
<div class="currencytop" style="right: 85px; top: 6px; width: 9%;"><?php echo do_shortcode('[woocs]'); ?></div>
I have had to style the code to get it to a position i was happy with and it looks OK in all browsers except safari.
You can see the offending element on my homepage here (top right on chrome but shifts under the social icons in safari) http://escapeandco.com/
Any help on correcting it would be greatly appreciated
Thanks
you can detect browser and run different css for safari ,check out that link how to detect browserenter link description here.
I'm having browser compatibility issue in my UI. In Firefox I'm facing some UI breakage issues, In chrome i don't have any issues.So my team said to try some CSS properties with don't dependent on browser that could be a solution for this.So anyone may know about this?
<li align="center" ng-show="showLoadingIcon">
<img src="app-vrm/img/loader.gif"/>
</li>
This is what the code for that loading mask. If change align from center to right,left or justify .That is working fine in chrome but in Firefox the loading mask is loading always in left side. It should be displayed in the center of the screen
A good starting point is to make sure you're starting from the same point by creating a reset.css file. This file makes sure that for each browser e.g. the margin-top for a P-tag is always 5px. There are plenty of resources on the web
Furthermore, you should have a look at W3Schools table for browser compatibility here.
Last but not least, be aware that some CSS3 tags are not implemented at all yet because they are 'too modern'. Or your browser is too old.
And a good CSS-validator might help. In Google Chrome (or Iron Browser, or Chromium) you can enable the developer tools and look at the console for errors, or install an extension (Web Developer for Firefox together with Firebug). Or if your site is online validate it with W3 CSS validator
Good luck!
I have created a cross-browser centre alignment of image. Main useful thing is img having margin and display property. Please see working solution at this link:
URL: http://codepen.io/krunalv/pen/gborwo
.loadingImage-wrapper li img{
height: 50px;
width: 50px;
display: block;
margin: 0 auto;
}
I fixed this issue........ i changed the code instead of
align="center"
i added
style="text-align:center;"
So this property is working in Firefox as well.
I really want to thank the people who help me to find out the solution.I got many new things from you whenever you are giving some answers.
Bootstrap IMG-RESPONSIVE not working in navbar on Firefox and IE. It was working couple of days ago just fine until I did something (unintentionally) and now it only works on google chrome...
here is the link to the page i'm working on:
http://streatham.trustedlocallocksmith.co.uk/
ps. SORRY for not pasting the code in here! wasn't aware of the actual "mission" of the entire site! will not do the same mistake again! PROMISE!
The current .img-responsive class is set to max-width: 100%. You should be able to add a line to override this in your myextras.css, so that you have .img-responsive {width: 100%;}.
I've been designing and building a portfolio site and updated everything to be valid HTML5, but a friend just told me that all links in my header/footer are broken in Firefox.
The header and footer are position:fixed in my CSS — and I know there have historically been a lot of issues with rendering positioned elements in Firefox — but does anyone have any ideas for a quick fix?
The links are present but there seems to be some issue when you are setting html to position relative this is in both about.css and default.css (line 3)
Remove those properties and your hyperlinks become actionable.
html {
position:relative;
}
I have a simple CSS dropdown menu with an iframe inside it. When I hover my mouse over the dropdown menu, the menu drops down. But when my mouse hovers the iframe inside the menu, the menu goes back. Here's a simplified version of my code:
<div id="comments">
View comments
<div id="comment-wrap">
<iframe src="http://www.facebook.com/plugins/comments.php?..."></iframe>
</div>
</div>
<style type="text/css">
#comment-wrap{display:none;z-index:5;position:absolute;padding:10px;background-color:#fff;}
#comments:hover #comment-wrap{display:block;}
</style>
This works in the latest versions of FF, Chrome, and Opera.
P.S. The dropdown menu remain dropped down when my mouse is hovering the padding of #comment-wrap.
I have faced similar problems while working with the :hover psuedo class. It started working fine when I changed the Document mode of the browser to IE 9 and the Browser mode also set to IE9. IE 9 has the document mode set to IE8 by default.
Additionally, you can add the following meta info in the head tag:
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
Hope this helps.
I found to have the same problem and i know this is already an old post but i felt like i had to publish my solution. Basicly IE does not accept the :hover event for any tags other than <a> with specified href (wont work on early ie versions), unless you add <!DOCTYPE HTML> at the top. And that was it! Problem solved :).
Unfortunately, this seems to be a browser bug, going back many IE versions. You can use a JS solution as a backup to IE. I've created a jsFiddle example, adapting code from another solution addressing this issue.
Hope that helps!
Edit: further testing in IE9 shows that though the iframe is displayed, hovering over the scrollbars hides it immediately. There is likely a more involved JS fix for this, but it's up to you if you'd like to implement it.
I recently had a hover issue in IE10 (not sure about lower versions) that was driving me crazy. I had my css hover set properly and it was for a div that contained an iframe. The issue was that when you hovered the div it would show the iframe but as soon as you tried to move the mouse into the iframe it would disappear again. I searched everywhere and found nothing for an acceptable answer for me except to use javascript or jquery. After days of trying to sort it out I found a very simple solution that worked for me. I simply removed the iframe from the div and used the object such as
<div class='showme'>links<div style='float:left;' class='showme_1'>
<object type='text/html' data='http://www.google.com' style='width:100%; height:100%' border='0'>
</object>
</div>
I hope this helps folks save a lot of research time.