Website rendering properly in all browsers except IE

whatchama

02-25-2011, 01:18 AM

Hey all.

I am trying to make a website formatted for the iPhone. For that I am using a combination of HTML and CSS. The website is located here:

www.abdultaiyeb.com/phone

The website loads fine in Chrome, Firefox, Opera etc. but refuses to work properly with Internet Explorer 8 or Internet Explorer 9 RC.

Is there anything I can change to make it work better?

The code for the website is below:

<html><head>
<title>Home · Shabbir</title>
<link rel="stylesheet" type="text/css" href="http://cache.cydia.saurik.com/menes/style.css"/>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="format-detection" content="telephone=no" />

<body bgcolor="#fffff">

<panel>

<fieldset style="background-color: #95ef83">
<a href="madeh.html"><label>Madeh</label></a>
<a href="noha.html"><label>Noha</label></a>
</fieldset>

<fieldset style="background-color: #95ef83">
<a href="qaseeda_by_date.html"><label>Qaseeda by date</label></a>
</fieldset>

</panel>

</body></html>

The CSS file I am using can be found at the link below. It is the iPhone Interface Cascading Style Sheet:

www.abdultaiyeb.com/phone/style1.css

Any and all help would be appreciated. I have learnt CSS and HTML on my own so I'm not as good as most of the users of this forum.

abduraooft

02-25-2011, 09:11 AM

To expect cross browser compatibility, you need to have a valid markup first. For that, a complete DOCTYPE (http://www.alistapart.com/articles/doctype/) is required at the top.

See the errors in your page at http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.abdultaiyeb.com%2Fphone%2F

whatchama

02-26-2011, 01:02 AM

Thanks for the tip. I did as suggested and added this doctype to the top of the HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

But I see the corners are not rounded in IE. Is this because IE does not support it, or because I'm doing something wrong?

lankanmon

02-26-2011, 02:38 AM

The link for the Style Sheet does not appear to work (404 Error)

But i can tell you with 95% confidence that IE does not support it.

Is it CSS3?

Also check out this site: http://www.w3schools.com/css3/default.asp

You can navigate different types of CSS3 in the sidebar and on top of every example it shows compatibility.

In your case, I think you are looking for this: http://www.w3schools.com/css3/css3_borders.asp

And as you can see in the compatibility, None of that is supported by IE.

Hope that Helps!

Let Me know if you have any further problems.

whatchama

02-27-2011, 09:07 PM

Thanks for the reply. Sorry for the dead stylesheet link. It can actually be accessed here:

www.abdultaiyeb.com/phone/style.css

I have managed to get the CSS working on IE 9 RC1 (except for the rounded corners which isn't all that important). But it still refuses to work on IE 8. Anyone know of an easy fix for this?

This is the screenshot of it working on IE 9 RC1:
www.abdultaiyeb.com/phone/screenshot.jpg

whatchama

03-01-2011, 07:34 AM

Anyone have any ideas as to what I'm doing wrong that isn't letting it work with IE 8?