I got a project to fix image issues for a client and this one has bugged me for days now. The site is http://www.fonolive.com. Some of the small icons that display on the front page show white space below image.
I have tried the following on
img{
}
display:block;
vertical-align:bottom;
vertical-align:top;
vertical-align:middle;
vertical-align:sub;
font-size:0px;
display:inline;
line-height:0px;
and more.
The only thing that seems to work is if I set the image height to say 130%, but the problem is recurrent on several pages across the site and this is an absolute no no.
The other solution I have worked on is resizing the images in php or using javscript etc, but that only works if javascript is enabled and seems too complex of a solution.
Please, try it in firebug and let me know what is wrong. Thanx and appreciate every input
Related
I would be very grateful for some help with a Safari image resizing issue as I have spent three days on this one problem.
I am building a responsive store with Woo Commerce using the Canvas template.
The problem is with the Safari browser...it won't enlarge the images to fit their container div and be evenly spaced and sized.
Here is a category page for your reference: http://omshivaloka.x-gr.net/product-category/shop/men-2/men-malas/
Here is a single product page, with the issue at the bottom beneath: "Products you may like": http://omshivaloka.x-gr.net/shop/hanuman/
I researched extensively all over the internet to find a solution and keep hearing to change the height and width in my CSS to:
ul.products li.product a img {
height: 100%!important;
width: 100%!important;
}
It's making them stretch, and is therefore not a solution.
In my Woo Commerce configuration, I have set the size of that picture to be 210*300px - Safari is not recognizing that...or maybe it is and is not outputting it immediately?
Perhaps you are having the same experience as I am in seeing the image expand when you mouse over it. Strange indeed...
I appreciate any help...thank you!
Cassandra
I've been working on making my website compatible with not only chrome, but firefox as well, and it's not turning out so well as I hoped it to be. Even with Firefox 9 (that i downloaded today), advertised by themselves to be the "best" browser that is compatible with more css---css3 in specific, however there were unexplainable errors, probably on my part, with some non-working css.
My first problem is with gradients. I had two gray-gradient dividers that uses the same gradient code, but produces very different results.
background-image: -moz-linear-gradient(bottom, rgb(58,58,58) 0%, rgb(85,85,85) 100%);
was the one that really worked.
background-image: -moz-linear-gradient(bottom, rgb(42,42,42) 100%, rgb(25,25,25) 0%); however, did not. In fact it showed nothing at all. I put the first one in this one to test if it works, and it did, but this one specifically would not.
Using Firebug, it changed my line of code into: background-image: -moz-linear-gradient(center bottom , #2A2A2A 100%, #191919 0%);
So was there a mistake I made somewhere? Because I can't see the difference between example 1 and 2.
My second error is not CSS3, but it is adding padding:20px; in the tags in a table. it works very well in chrome, but no padding showed up in firefox. Is there an alternative for this other than border properties, because I'm also using borders in the tags.
Thanks again for helping me! I appreciate it a lot, because this bug has been bugging me for the past hour or two, and I still haven't figured anything out.
As you found out yourself, you cannot make a gradient from 100% to %0, so the gradient steps must be ordered with the percentage rising. (even though some browsers seem to display it, you should always keep to the standards!)
Regarding the <tr>, this tag does not take a padding attribute, see https://developer.mozilla.org/en/HTML/Element/tr
Try to achieve what you want using the cellpadding and cellspacing html attributes on the <table> or CSS padding on the <td>s.
This is a bit weird. When I apply -webkit-transform: translate3d(0px, 0px, 0px); to images on a site I am building, they look fine initially. But when I start scrolling or resize the browser window to above a certain size (roughly past 1200x1024) the images get all glitched up, containing parts of other images, or of the site. All stretched, cut up. Sometimes even change color and whatnot. This also applies to the #font-face text that is floating above the images. I assume this is very isolated case in combination with Win7x64/ATI Firepro v5800/Chrome version. But its a bit annoying to build a site this way :)
Anyone came across a similar issue and knows how to solve it, or should i just notify google of this?
I seem to be having two problems:
My top nav bar links don't work in Firefox
The design breaks in IE7.
Any help would be much appreciated! I have validated it, and I know the slider and video don't validate, but I still have these problems even when I take those out. Thanks so much for any help you can provide!
http://www.christthesavioracademy.org
You can fix the IE7 problem by making the following changes:
On #content, add position: relative; padding-top:1px.
On #logo, remove the margin and add position:absolute; top:0; left:9px.
On #bottomnav, remove clear: both.
I can't reproduce your Firefox issue. If there is still a problem, hopefully the steps above will have helped.
I am having a problem with Safari v5 on mac. When my Google Map Api is loaded into the page it hides some of my other divs (which are absolutely positioned). The page renders correctly until the map loads. If i have a page without a map the problem does not happen.
example: www.morecambe-lodge.co.uk
it also seems to interfere with the loading of jquery ui. Is there a better way to lazy load google maps or a solution. i have tried document ready and window.onload methods but it still persists with the problem.
I have tested in firefox, ie, chrome and safari v4 and this problem is not replicated only seems to happen in safari v5.
Any advice would be greeatly apreciated, Thanks.
The z-index has nothing to do with this bug.
After I read through the following article:
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190
I was able to fix my issue by doing two things. The first was modifying every entry in my CSS that had "text-indent" to have a value of 9999px or under. I use text-indent for all my icon buttons, whether it comes from jQuery UI css or from my css. Having it set over 9999px created issues for me.
The second problem, after the text-indent was fixed, was having blurry fonts. The following helped solve this issue:
* {
-webkit-font-smoothing: subpixel-antialiased !important;
-webkit-transform: none !important;
}
Both of these are mentioned in the article, but I found that the text indent needed to be smaller than what was suggested.
this work for me :
* {
-webkit-font-smoothing: subpixel-antialiased !important;
-webkit-transform: none !important;
}
The bug posted at Google (http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190) mentions changing "text-indent: -999999px;" to "text-indent: -99999px;" on elements. Dropping one 9 fixed the problem for me.
The z-index fixes made no noticeable changes. The webkit-transform fixes rendered the page correctly but left the map unusable. It wasn't possible to drag.
yeah looks like the same problem. i have also posted the question on google. hopefully will get to the bottom of it.
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190
A clue: it seems to be caused by the stacking of elements with -webkit-transform: translateZ(0px); Once you disable/remove them, backgrounds reappear.