Firefox div parent width head-ache - css

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.

Related

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%

CSS Menu Not working with XML rotating Banner

I tested Nvidea css drop down menu on a site with XML Flash rotating banner , it works find on opera but doent work on internet explorer and google chrome, it actually goes behind.
menu from : http://www.lwis.net/free-css-drop-down-menu/
see link here: http://sonymax.co.uk
thx
Seems there is a problem with the menu actually, I removed the banner in IE and the drop-down menu still doesn't show up. Also note, that if you change your compatibility mode from IE7 to IE8 or 9 the menu and banner are way off. You should revise your code a bit.
It works in my Chrome, not sure why it doesn't in yours, only IE has the problem as far as I tested.

Cross Browser Compatibility - website content not displaying correctly

I created a website in Wordpress but I seem to be experiencing cross browser compatibility issues in Internet Explorer, most notably Internet Explorer 7 & 8
http://www.vokins.co.uk/
There is an issue with overlapping on the home page (logo and contact number) and none of the properties appear to display on property search (The page appears blank)
The year dates on the News page appear to be sitting to the right of the image rather than in the grey box
How can I rectify this to ensure consistency across all browsing platforms?
I've tested your website (using the tool BrowseEmAll) in IE7, IE8 and IE9.
It works nice in IE8 and IE9 but in IE7 the overlapping is clearly visible:
I would suggest changing the margin of the element "site-title" to padding.

Internet Explorer-> <DIV> & width

I have a page which appears just fine in FireFox / Chrome / Opera / Safari, but appears incorrectly in Internet Explorer. A quick search reveals many issues with DIVs in IE, but none of the items appeared to address this issue.
The issue is that DIV appear to expand to the entire width of the browser, in Internet Explorer; this behavior is not replicated in any of the others.
Code is here: http://pastebin.com/c46uB7GP
CSS is here: http://pastebin.com/TXWWM2Qu
IE rendered image is here: http://imgur.com/Pciv5
Chrome rendered image is here: http://imgur.com/8kwd4
Any help would be welcome in resolving this discrepancy.
Thanks,
R
You have no layout width/height specification in your current code.
Put the content inside an enclosing div that has a width specified in pixels.
It's also better practice to identify your divs with classes (or IDs, if there is only one of them) and define the actual CSS in the CSS file and not in the HTML. This way you can separate presentation from markup, so that you could send the same HTML to, say, a mobile device, but with a different CSS file for that device.

Webkit browser display problems

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 }

Resources