I am having cross browser issue in joomla website i.e http://great.server279.com/greatofficiants.
Website is working all fine in firefox and in rest browsers its not appearing the same.
Problem is when we go into EXCLUSIVE VIDEOS block whole images of videos are appearing on chrome,safari,ie but it is appearing all well in firefox.
div id="vtab-1" class="vcase" style="display: block;
div id="vtab-2" class="vcase" style="display: none;
The problem is with stepCarousel.js file. the Js file is conflict in the cross browser. can you explain me that which JS are you using. So that I can help you more
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.
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'm replacing all Fireworks-generated table-based rollovers on my site with CSS rollovers; I've so far had luck with my menu bar, which works properly on each page on the site.
Today I tried to update my main page's marquee (div id="titlemain" on theapplenewsreel.com), and while the rollovers seem to work fine on the staging page where I designed and tested said element (theapplenewsreel.com/titlemain.html), the code refuses to work when I integrate it into the page where I intend to use it. I've checked the link to the stylesheet; it points to the exact same CSS file. Can anyone suggest a reason why the marquee's share links don't update on the index.html file?
Try updating the CSS to include px in the background position numbers:
#titlesharefb:hover {
background-position: 0 -80px;
}
I have a website that will be loaded in a web frame of an iPad app, so I have created a separate CSS file for the iPad, which is automatically loaded by a user agent call. Nothing too difficult here.
The problem is that 2 divs are not responding to the display:none CSS. The sidebar and the footer are still showing, despite being specifically called in the CSS just the same as all of the other elements, which are hidden correctly in Safari on the iPad.
www.themonitorgroup.com/disclaimer.html is a good page to illustrate this issue.
www.themonitorgroup.com/css/ipad.css is the specific CSS file for the ipad.
I assume there is something stupid simple I am missing. Please let me know if you can find anything. Thanks so much in advance.
Validators are your friend. You're missing a closing brace here:
#mainnav {
display: none;
And you have #sidebar rather than .sidebar in the style sheet.