Webkit browser display problems - css

I finally finished my website and low and behold, there are some inconsistencies in webkit based browsers.
My site has issues with certain link images on hover... the Southern University logo near the bottom of the art page, the hotmail, myspace and facebook links on the contact page, and only the images in the "Drawings/Paintings" vertical scrollable move when hovered over (yet all other images don't move on hover, including the images in the other vertical scrollables on the art page).
What could be the cause of this? I'm thinking some kind of CSS deal with webkit, but I'm not totally sure.
Thanks in advance,
Aaron Chauvin
Edit: Sorry, forgot to mention I'm testing in Windows Vista Home prem. and Windows 7 Home prem. with the latest builds of Chrome and Safari

Nowhere in the provided CSS directory are you using .SU:hover, are you using javascript for the hover or css?
You can simply add something like:
.SU link:hover { //change image }

Related

Firefox div parent width head-ache

I am making a site. I am using Drupal 7 with HTML5 strater kit of Omega theme. I have poped up two regions. Each one contains an image and some text (image on the top and text in the bottom). Now the display for the IE9 and chrome is OK but for firefox is not understandable for my brain. the address is http://cakes.apakistanichristian.co.uk/. the reason i am giving out the web address is because i have no idea what css or html code i should post. Just open it in firefox, IE and chrome you will see the difference.
Thanks in advance.

IE Website content only show on Browser Visible Area Only

found this great site and this is my first question here.
Currently i m working on a site, it looks good on most of the browser but 2 problems found on some of the browsers.
Here is the page:
http://www.linkmen.com.hk/web2013/20130426/contact.htm
and here is the problem:
http://www.linkmen.com.hk/web2013/20130426/problem.png
problem 1: On some safari machine will display the background like this. it also happened when open firebug on browser or so.
problem 2: I tested on couple window vista with ie 9(new machines), seems the site's content only show on Browser Visible Area Only, when scroll down everything below are gone.
thank you~
move orange background .orange class from body, that has height:100% to .container_contact that has min-height 100%

Tumblr site divs not looking right in ie8 or 9 but right in ie7. Fix?

Here is the site I am referring to (the css is built in)
freebirdbooks.com/tagged/about
I am having a problem getting my site to preview correctly in ie8 and ie9 only. It looks fine in any other browser. I should mention I am coding the HTML and CSS myself, but using Tumblr as the content management system for a client. (This is until I can learn how to code my own back end for clients which I know is ideal.)
This site looks fine in most browsers. But in ie8 and ie9 only, my container and sidebar divs "underlap." I uploaded some preview images to my hosting site for you because since I am a new user they won't let me.
Is there any way to fix this? This site has been very helpful in the past, and I thank anyone who can help in advance.
http://images.freebirdbooks.com/rightway.jpg
http://images.freebirdbooks.com/uglyway.jpg
Leah
That works for me on IE8 (I don't have IE 9):
Add
#sidebar{clear:both;}
and remove
#wrapper #sidebar{min-height:1100px}
Make sure to close all of your anchor tags inside the headerimage div.

Background image glitch

I'm banging my head against a wall with a coding problem. I've developed a website with a large background image to allow scrollable content.
The page appears fine on most browsers, but on the ipad/safari, this browser presents the full background image in the viewable area, not just the native resoltion of the background image as per the ther main borwsers.
It's important I keep the image background and allow it to scroll down as some pages on this site will be lengthy. Any ideas would be much apporeicated!
Thanks in advance!
Preview of layout page: http://websiteworkpreview.com/test/index_test.html
The homepage is index.html (for reference) - Homepage uses different bg image. No problems there...!
Error screnshot of background in Safari on iPad: http://websiteworkpreview.com/test/2.JPG
Mobile Safari has had some issues with image filesize, and some known limitations. Take a look at the discussion in the link below. It shows an example that looks very similar to yours, where the image is being cropped vertically, and some specs as to the limitations. Even though it is referencing using an iPhone, it would, of course, affect an iPad as well, as both use Mobile Safari.
http://www.defusion.org.uk/archives/2010/02/19/shrinking-large-background-image-bug-in-iphone-safari/

css - alternatives or hacks for mobile browsers that don't support "background-position"

I am trying to make my mobile site accessible to as many browsers as possible, and I noticed when using the opera mini simulator (http://www.opera.com/mobile/demo/) that it doesn't support css background position - which I'm using to display a sprite for all of my site images. Are there any workarounds for this?
There has to be something else that keeps your code from working, because Opera Mini 6 does actually support background position.
Th website of the company that I am working for uses background position in some places, for example to change the color of the active menu button, and that works just fine. On the other hand there is some other rendering problem that makes it only show part of the button, but that part is the right color...

Resources