PDA

View Full Version : All styling gone in Internet Explorer AND Safari


WotNow
11-10-2009, 09:48 AM
Hi everyone .. well I have had my fair share of internet explorer hell but this one is really weird. When I view site http://kimberleywebdesign.com.au/Links.html in firefox .. the site looks how its supposed to look but when I view it in Internet Explorer or Safari, it looks like its lost its style sheet.

If anyone has had this problem and more importantly knows how to fix it, HELP!!:lol:

gentleone
11-10-2009, 10:23 AM
In Safari on the Mac also no styles. It might be the order of your <head>

Yours:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--<script type="text/javascript" src="swfobject.js"></script>-->
<script type="text/javascript">
<!-- swfobject.registerObject("slideshow", "9.0.0", "expressInstall.swf");
</script>
<title>Links</title>
<link href="Links.css" rel="stylesheet" type="text/css" />
<link rel="Shortcut Icon" href="/KWDFavicon.ico" />
<meta name="Keywords" content="Kimberley Web Design, Broome, links, website design, web designers, web design, portfolio, photo gallery, web hosting, search engine optimisation, seo, photoshop tutorials, domain name registration, ecommerce, templates, faq, flip book, broome web design " />
<meta name="Description" content="Link page to some great sites including those of our clients." />

<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

Try it like this:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Links</title>
<meta name="Keywords" content="Kimberley Web Design, Broome, links, website design, web designers, web design, portfolio, photo gallery, web hosting, search engine optimisation, seo, photoshop tutorials, domain name registration, ecommerce, templates, faq, flip book, broome web design " />
<meta name="Description" content="Link page to some great sites including those of our clients." />
<link href="Links.css" rel="stylesheet" type="text/css" />
<link rel="Shortcut Icon" href="/KWDFavicon.ico" />
<!--<script type="text/javascript" src="swfobject.js"></script>-->
<script type="text/javascript">
<!-- swfobject.registerObject("slideshow", "9.0.0", "expressInstall.swf");
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

WotNow
11-10-2009, 11:47 AM
Thanks for that .. it did fix up the styling but the flashplayer and header are not displaying at all.

gentleone
11-10-2009, 01:43 PM
I'm not sure, but the javascript calls don't look healthy to me.

<!--<script type="text/javascript" src="swfobject.js"></script>-->
<script type="text/javascript">
<!-- swfobject.registerObject("slideshow", "9.0.0", "expressInstall.swf");
</script>

I think you misplaced the second <!-- and forgot to close it with -->

domedia
11-10-2009, 02:21 PM
The order of how things are linked in your HEAD area should not matter.
gentleone is right in that you opened a comment tag and never closed it.

WotNow
11-10-2009, 09:33 PM
I have fixed comments tags, I was trying for ages to use the swf object but couldnt get it to work. Page displays well in safari and firefox now but in internet explorer the left hand side of the page is over too far to the left. I am not sure how to correct this, as if I correct it for ie then it will display incorrectly for other browsers. Thanks for your help.

gentleone
11-11-2009, 12:06 PM
If you can't find a solution that's cross browser, then you can use a conditional comment which you put in the HEAD and that only applies to IE or a specific version of IE. Put that IE fix in a separate stylesheet and call it IE.css. See the example below with an conditional comment which target only IE6.

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/IE6.css"/>
<![endif]-->

For all the variations and further explanation you can visit this page:
http://www.quirksmode.org/css/condcom.html

gentleone
11-11-2009, 12:25 PM
The order of how things are linked in your HEAD area should not matter.

I was not sure about that with CSS links in the HEAD, Domedia. Now I know. Thanks for that! :) Sometimes with a lot of javascript calls in the HEAD a particular order of them can make a difference in letting them work properly. Especially if you use more javascript frameworks on the same page, but that is why it's not recommended to do so :)

WotNow
11-13-2009, 05:28 AM
Thanks gentleone going to the site now

WotNow
11-13-2009, 06:13 AM
Hi I have read the quirks mode site, thanks for that. I am still unsure what to do as all the margins in the divs underneath the slideshow have 0 padding and 0 margins. So do I make an external style sheet called ie6 and put left margins on all the tags?
Thanks!

gentleone
11-13-2009, 08:30 AM
Internet Explorer 6 has been known to double a floated elementís margin. So, what you originally specified as a 5-pixel margin becomes 10 pixels in IE6.

A simple trick to get around this bug is to add display: inline to your floated element, like so:

.floated_element {
float: left;
width: 200px;
margin: 5px;
display: inline; /*--IE6 workaround--*/
}

However if this is not the case for your issue now, then you can make a seperate stylesheet called IE of if it is only for IE6 call it IE6. In here you can ad the left-margins and they will only have effect on IE and not the other browsers.