I am having a strange issue while implying a transform effect at firebox browser.
Demo Link
"http://codepen.io/uzess/pen/zvOgmd"
Issue Explanation
1) The code works fine for chrome and safari, but the transform effect is not showing properly at Mozilla Firebox
2) The code also works fine for three images in all the browsers, but it didn't work properly at Firebox for four and more images.
Any help will be highly appreciated :)
Regards,
Biplab
It seems like when you add more than 3 items, there occurs errors ( irregularity ).
It is due to the css display properties.
Use
<div class="col-md-2" style="display: list-item">
or
<div class="mane1 contact" style="display: list-item">
Main thing here is display: list-item.
Please see fixed version here http://codepen.io/codersantosh/pen/yYLOvP
Related
I have following code in my WordPress website:
<div class="col-xs-12 col-md-5"><img class="img-fluid m-b-2" src="https://bwt.phpag.com/pimData/Images/hc/21/4245243.png"><img class="img-fluid m-b-2" src="http://localhost:8080/geha-printing/wp-content/themes/geha-printing-wordpress/images/geha-logo.png"></div>
My page: http://www.geha-printing.com/products/?Article_Number=4245243
First picture from external source (https) is not shown, second is shown without any problem. Do you have any idea why, or what can I do?
Issue is only in Microsoft Edge. IE, Firefor, Opera, GoogleChrome, Safari are OK.
This must be an issue with your browser. I just checked, and everything looks perfect in Edge, Chrome and Firefox.
You might try to clear cache or re-install Edge
This is a weird "bug", I cant reproduce it always, but on the fiddle test case seems to fail more often. This is ONLY showing in chrome/windows, I couldn't reproduce it in IE at least and someone confirmed it doesn't happen in chrome/Linux.
The fiddle: http://jsfiddle.net/u25zr/2/
As you can see, text is not horinzontally aligned.
A weird thing: if you right-click on the text, click "inspector tools" and untick/tick again the font-family property, it magically fixes.
I attach an image so you can see what should happen:
Since I used a jsfiddle link, I need to add a code block also, so ill just add the markup, which is not related at all...
<div class="recipe">
<div class="recipe-top">
<div class="category">Text</div>
<h2>Test Recipe 1</h2>
<div class="date">12 Jan 2013</div>
</div>
</div>
EDIT: Moving the SVG font to the bottom so Chrome uses the woff instead of the svg fixes the problem. So it looks like the problem its in the SVG rendering.
Well, after some wasted hours this seems to be a (another) chrome bug.
https://code.google.com/p/chromium/issues/detail?id=95102
And i also found a solution here:
Chrome svg-Font-Rendering breaks Layout
Which is good, but doesnt validate CSS. Anyway nothing else we can do.
I have a layout issue in my web page where I have (for example:)
<div style="position:relative;width:500px;min-height:300px;background:red">
<input type="text" style="position:absolute;top:20px;">
<input type="buttton" style="position:absolute;bottom:2px;right:2px">
</div>
The positioning is slightly different in different browsers (say about 2-4 pixels). For example, the above button is a few pixels apart from the border in chrome or safari than firefox, seamonkey and opera. Is there a solution to this problem so that the layout looks almost same in different browsers?
Reset and unify your CSS first.
Checkout http://html5boilerplate.com/ for a good start on this.
The links on a site I'm working with are working in opera, chrome, and ie, but not in firefox or safari. www.dovetailrecords.com (click on "artists"). I've searched the forum and some other forums and tried some of the suggestions, but none seem to be working. It seems clear that I've got a css problem and some sort of problem with overlapping, but for the life of me, I can't figure it out.
I'm relatively new to this game, so I'm sure in the end the problem will be a simple one that I probably should have seen. In any case, any help is really really appreciated!!
Thanks,
Jack
The problem is that the <a> tags are not closed properly and not wrapping the <img> tags.
<a href="sads/bioback.html" target="back"</a><img src="sads/thesadslogo2.jpg" width="315" height="115" class="artimg2">
Close the <a and move the </a> to after the <img>. Like this:
<img src="sads/thesadslogo2.jpg" width="315" height="115" class="artimg2">
This doesn't make a lot of sense. Safari and Chrome use the same engine but you say this only works in Chrome so this is starting out weird. You aren't using a doctype and are in quirks mode. Add this to your very first line and see where we stand:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Also validate your html and css for those lists of errors.
Take a look at this page in FireFox. Feel free to navigate to any of the top six product categories to see more of the same type of code.
If you are [un]lucky enough to see the glitch, you will see at least one product box expand it's height to epic proportions.
Here is the code:
<div class="product_category">
<a href="../products/dht_1500.php" style="height: 340px;">
<h3>DHT 1500</h3>
(superfluous HTML omitted here)
</a>
</div>
Here is what Firebug reveals:
<div class="product_category">
<a style="height: 340px;" href="../products/dht_1500.php"> </a>
<h3><a _moz-rs-heading="" style="height: 340px;" href="../products/dht_1500.php">DHT 1500</a></h3>
(superfluous HTML omitted here)
<a style="height: 340px;" href="../products/dht_1500.php"> </a>
</div>
You can see FireFox is definitely closing my tags and re-opening them again, and pulling the custom CSS height style along with it, which is resulting in each product box height skyrocketing. Also note that strange _moz-rs-heading="" bit.
I suspect my problem has to do with my using block HTML elements within an inline tag, but I thought I solved that problem by converting the tags to block formatting in my stylesheet:
.product_category a {
display: block;
}
FireFox is playing favorites to my tags. It usually renders the page like I want it, but then every once-in-a-while, it will blow one of my product boxes sky-high, and seemingly at random.
The pages work properly in Internet Explorer and Safari. I have been testing it with FireFox 3.6 on Mac, but have seen the same problem on FireFox for PC.
Having block level elements (h3) inside an inline element (a) is not valid HTML.
Change your block elements to a span and use CSS to style it how you wish.
A similar question with the exact same symptoms was asked a few days back. The solution there was in fact taking the native block elements out of the natively inline ones. Seems changing display doesn't help in this case.