Internet Explorer CSS Issue - css

So I'm attempting to figure out where my cross-compatibility issue is - From what I can tell, Firefox and Safari have been working great, however Internet Explorer (surprise?) has been giving me tons of issues. Take a look at the site below:
https://secure.promptpass.com/index.php?clinic=1
For some reason, the background image is over-extending itself on the top and bottom (if you open the website, you will immediately understand what I mean).
Beyond that, in the Select box next to the "Select a Time" label, to the right there is always a box filled with ":45 pm".
The last remaining issue is that the entire content of this on many versions of Internet Explorer, all of the content is shifted to the left - based on the CSS, everything should be centered
Again, I've poured over this (and I'm sure these are simple things that I have overlooked) however at this point, I'm at a loss as to what this issue would be.
Thanks for any and all help.

First, move this elsewhere:
<!-- Google Website Optimizer Control Script -->
<script>
function utmx_section(){}function utmx(){}
(function(){var k='2883663228',d=document,l=d.location,c=d.cookie;function f(n){
if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.indexOf(';',i);return c.substring(i+n.
length+1,j<0?c.length:j)}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;
d.write('<sc'+'ript src="'+
'http'+(l.protocol=='https:'?'s://ssl':'://www')+'.google-analytics.com'
+'/siteopt.js?v=1&utmxkey='+k+'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='
+new Date().valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
'" type="text/javascript" charset="utf-8"></sc'+'ript>')})();
</script>
<!-- End of Google Website Optimizer Control Script -->
It makes the page render in quirks mode as opposed to standards mode so IE is rendering it in super-retarded mode and in this, margin:0 auto doesn't work in IE quirks. The doctype will make it render in standards mode.

Related

can't get css 'content' property to work in ie8

So, I've tried everything I can think of, or have found regarding how to make sure that IE 8 will work with the 'content' property in my page.
No matter what I try though, when viewing in IE9 using F12 dev tools to view in IE8 standards mode, the page simply won't load AT ALL. I get a "page error" when viewing in Adobe's browser tester as well.
As soon as I remove my "content" property line from my css, then it works fine, but of course, then I lose my cool drop-shadows that I'm wanting to use in all the other browsers.
here's the page: http://saks-jewelers.com (the featured product section towards the bottom).
Any thoughts on what I'm missing? (this site is run using magento CE 1.7)
The content property will not work in IE8 unless you specify a doctype. This is according to W3C.
Put this at the top of your code and let us know if it works:
<!DOCTYPE html>
Both people on IE8 are going to be disappointed! Did you try checking the inspect element in ie8 to see if the error is more specific?
Is your drop-shadow defined in the last CSS loaded?

Website looks different on a Mac

I have just created a website which looks fine on firefox PC but looks totally different on Firefox Mac.
On Mac I don't see a div background image.
On mac in the footer, an item that is floated to the left appears on the right and an item that is floated to the right appears on the left.
A facebook div that I have commented with <!-- appears on Mac but not on PC.
The site is: http://www.ruthrudin.co.il
Can anyone help with these problems?
I only briefly had a chance to look at the source, but did notice that on line 66 you illegally nest an HTML comment <!-- </div><!--. Your usage of <SCRIPT LANGUAGE="JavaScript"> is invalid and should match how you did the jquery <script type="text/javascript">your code here</script>.
Run your code through a validator. The browsers do differ in how they handle invalid markup across operating systems, even from the same vendor.

Flicker of unstyled content in Firefox

I built this site a couple of years back and but am now in the process of moving it to a new server.
However. I've noticed there is a split second of unstyled content show on page load when viewed in Firefox (3.5.7)?
And on checking in IE8, a less frequent and slightly more raggged effect also happens but only prior to caching?
The url is: http://www.rhubarbrentals.co.uk
If anyone can suggest how to fix this I would be grateful.
you can use jQuery for this
$(document).ready(function() {
$('#flash').hide();
});
where #flash is the div that contains your unstyled content. check this link for more details
putting the
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
at the bottom of the page (right above </body>) might help some.

Dropdown menu not working in IE6 or IE7 works fine in Firefox

I'm stuck with a menu on a site I develop.
http://charlienutting.com
If you hover over the gallery at the top menu bar it should show you a drop down menu.
It works fine in Firefox but sucks in IE6 and IE7.
Really thankful if someone can help.
been about week now to fix this..
edit-
however if you can see there are drop down links which you can click, but those are not visible.
What happened when you debugged into it in IE? What error messages did you see and what have you tried?
I'm happy to help, but really, you haven't described a problem yet.
I guess transparency issue.
perhaps the line in js/dropdown.js that looks like
c.style.filter = 'alpha(opacity=' + ( 100 / c.maxh) + ')';
fire up the script debugger and see what the value of c.maxh is.
First let me say that you have talent as a designer :)
However, there are a few issues with the site's code as it is. I would recommend dropping that drop down code and implement your own using JQuery's effect library (I say this because you are already loading JQuery in your page). That is browser compatible so you wont have these issues with IE.
http://docs.jquery.com/Effects
Next, your header changes size between Gallery, resume and contact. You will probably want to get that fixed. Also, the resume page's links are positioned odd in FF 3.4... It would be best to make them without using absolute positioning. You can accomplish that by a mix of "float : right" and "position : absolute" (but not setting the "left" or "top" properties) :)
Your page is using a doctype, but doesn't validate.
Oh - and it's 2009 now, BTW :D (see copyright)
hint:
(C) 2008 - <?php echo date("Y"); ?>
Try setting a doctype. I know I've had issues in the past with hover events without a correct doctype. Your current page sets Internet Explorer to Quirks Mode.
Currently if, in IE9 I set my mode to IE7 and then switch the "Document Mode" from "Quirks Mode" to "Internet Explorer 7" mode, they show up correctly.
Put this at the top of your HTML files and see if setting your doctype will fix the issue:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Inspect in IFrame in IE8 Developer Tools?

I really enjoyed using the Developer Toolbar with IE7, and recently upgraded to IE8 to take advantage of (what appeared to be) more full-featured developer tools.
The IE8 tool is really excellent (finally rivals FireBug), but I can't seem to inspect inside an iframe, which I could with the IE7 toolbar.
I'd prefer not to downgrade to IE7 because I like some of the other features of the IE8 tools, but the ability to inspect inside an iframe is a deal breaker.
Also, firebug is of limited utility to me because our site is an internally-deployed intranet app, which means "browser compatibility" is a very low priority, major functionality is often broken in FireFox.
Here's what the IE8 tools look like around the iframe
In firebug, I can see an <html> element under the iframe, which I can expand just like the rest of the page
The <iframe> in question has its src attribute set server-side (in the ASP.NET code-behind)
UPDATE:
I get the same result on this Iframe example page. If anyone can use the IE8 developer tools to inspect inside that iframe then I'd like to hear about it.
Install the final release of IE8 and you will easily walk through any element including iFrame and other container controls.
Unhelpful answer: it works for me here.
Inside the <iframe> I see an <html> inside of which is the normal content.
(This is RC1 under Win2k8.)
Does FireBug show the iframe having any content? Is the iframe being populated dynamically? If so try JavaScript debugging with a breakpoint on the point at which the iframe is populated.
Answering the question in the comment re. the iframe from http://www.htmlcodetutorial.com/frames/_IFRAME.html:
I see the content document in FireBug
I do not see it in IE8.
The one thing (compared to an internal example here) is that the iframe you pointed to contains default content... but since this is not shown in IE8's dev tools I can only think this is a defect and should be reported to MS.
this seems to be a bug with IE8 developer tools.
remove the <!DOCTYPE from the document referenced by the iframe and you are good to go.

Resources