...

View Full Version : Pictures appear as an empty box in IE9



justintime
06-17-2012, 11:56 AM
Hi All,

I am having a problem getting pictures to show up in IE9. They appear fine in Chrome, Firefox etc but not in IE? Can anyone see where I have gone wrong please?


<!DOCTYPE HTML><html>
<head>
<meta content="revealTrans(Duration=1.0,Transition=12)" http-equiv="Page-Enter">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/timothy.js"></script>
<script src="js/media-gallery.js" type="text/javascript" charset="utf-8"></script>

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'>

<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/print.css" rel="stylesheet" type="text/css" media="print">

<link rel="stylesheet" href="css/media-gallery.css" type="text/css" media="screen">

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='gallery']").prettyPhoto({ overlay_gallery: false, });

});
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="cache" />

<META name="robots" content="NOINDEX, NOFOLLOW, NOYDIR, NOODP, NOARCHIVE" />
<META name="googlebot" content="NOARCHIVE, NOODP, NOSNIPPET" />
<META name="slurp" content="NOARCHIVE, NOYDIR, NOSNIPPET" />

<meta name="robots" content="noimageindex">
<title>Timothy Framework - Learning Tutorials and Video Courses</title>
<meta name="keywords" content="Framework HTML CSS JavaScript dreamweaver expression web" />
<meta name="description" content="A Professional Easy To Use Web Design Framework For Learning To Build Websites" />

<!-- Google Analytics Code Goes Below Here -->
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-5475445-22']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>
<!-- End Google Analytics Code -->

<link rel="stylesheet" href="css/olive.css" type="text/css" media="screen">
<style type="text/css">
.auto-style2 {
margin-left: 24px;

margin-right: 0;
}
.auto-style3 {
margin-bottom: 12px;
}
.auto-style8 {
text-align: justify;
}
</style>
</head>

<body>

<div id="wrapper">





<div id="banner" style="width:900px;">

<h3>
<img alt="banner1" height="120" src="Banner%20900_120-psd.png" width="900"></h3>

</div>



<div id="bottom">

<div id="topnav" style="width: 900px">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Members</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Meetings</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Scams</a></li>
<li><a href="#">Trades</a></li>


</ul>
</div>


<div id="rightside" style="width: 225px" class="auto-style2">
<h3>Council Information</h3>
<ul>
<li>Hot Topics</li>
<li>Recycling</li>
<li>Standing Orders</li>
<li>012 Agenda</li>
<li>2012 Minutes</li>
<li>2011 Minutes</li>
<li>Useful Information</li>
</ul>

<p class="auto-style8">Click any of the above links to see that
information in a new window.</p>
<h3>&nbsp;</h3>
<h3>Our Team Members</h3>

<ul>
<li>Kay </li>
<li>David </li>
<li>Ro </li>
<li>Tom</li>
<li>Michael </li>
<li>Trevor </li>
<li>Liam </li>
<li>June </li>
<li>John </li>
<li>Ian </li>
</ul>


<h3>&nbsp;</h3>
<h3>Our Location </h3>
<p class="auto-style8">We usually meet at the local School but this is subject to change from time to time due to unforeseen circumstances.
To keep up to date with meetings; place and time, please see the Meetings page which can be found on the menu above.
This will be kept up to date and as accurate as possible.
</p>
<p>&nbsp;</p>
</div>

</div>

<div id="content" style="width: 630px">
<h3>&nbsp;</h3>
<h3>The Parish</h3>
<p style="height: 38px">The Outwoods parish is a somewhat disjointed Parish within the Borough
of East Staffordshire with some 1805 electors (figure correct as at
1-12-2010)</p>

<p class="auto-style3" style="height: 16px"><strong>The Parish covers the following areas:</strong></p>
<p class="auto-style3" style="height: 3px">&nbsp;</p>
<p><strong>Outwoods South:</strong></p>

<ul>
<li>Lower Outwoods Road</li>
<li>St Georges Road</li>
<li>St Margarets</li>
</ul>


<p><strong>Outwoods North:</strong></p>

<ul>

<li>Beam Close</li>
<li>Beamhill Road</li>
<li>Fields Lane</li>
<li>Forest Edge Way</li>
<li>Furrows Drive</li>
<li>Green Valley Drive</li>
<li>Harehedge Lane</li>
<li>Kitling Greaves Lane</li>
<li>Outwoods Lane</li>
<li>Rolleston Road</li>
<li>Tutbury Road</li>
<li>Forest Road</li>
<li>Henhurt Hill</li>

</ul>

<p>&nbsp;</p>
<p>The Parish Council welcomes the input of its Parishioners and is willing to offer its assistance in an attempt to resolve any relevant issues that require attention/resolution.</p>
<p>Please contact the Clerk in the first instance to report your concerns.</p>
<p>&nbsp;</p>
<p>We currently have 4 vacancies on the Parish Council in the Outwoods North division. Further information is available by contacting the Clerk if you have an interest in contributing to the work of Outwoods Parish Council.</p>
<p>&nbsp;</p>

<ul>
<li><a href="mailto:%20%20%20anyone@btinternet.com">Please Click Here
to Contact The Outwoods Parish Clerk</a></li>
</ul>
<p>&nbsp;</p>
<p>If you would like to contribute to the web site or make any comments</p>
<p>&nbsp;</p>

<ul>
<li><a href="mailto:admin@outwoodsparishcouncil.co.uk">Please Click Here to send your message</a></li>
</ul>


<h3>&nbsp;</h3>
<h3>Any Other Business</h3>
<p>&nbsp;</p>
<p>A place for any other information to be placed.</p>

<p>&nbsp;</p>
</div>

<div id="footer">
<p class="footer-text">ęCopyright 2012 Outwoods Parish Council &amp; IMW54 Web Design<a href="license.html"> | License</a></p>
</div>

</div>

</body>
</html>

<!-- Timothy Framework - www.timothyframework.com -->

<!-- This work is licensed under the MIT License - http://www.opensource.org/licenses/mit-license.php -->



/* Timothy Framework - www.timothyframework.com */
/* This work is licensed under the MIT License - http://www.opensource.org/licenses/mit-license.php */


/* Color Legend */


/* Reset */

html, body { border-style: none;
border-color: inherit;
border-width: 0;
margin: 0;
padding: 0;
background-image:url('../images/bg/olive-bg.jpg');
font-size:10px; }

div, span, article, aside, footer, header, hgroup, nav, section,
h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li,
table, tr, th, td, tbody, tfoot, thead {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
background: transparent;
}

img { margin:0; padding:0; border:0; }

table, tr, th, td, tbody, tfoot, thead {
margin: 0; padding: 0; border: 0;
vertical-align: baseline;
background: transparent;
}

table { border-collapse: collapse; border-spacing: 0; }

input, select, textarea, form, fieldset {
margin: 0; padding: 0; border: 0;
}

article, aside, dialog, figure, footer, header, hgroup, nav, section {
display:block; }

h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike {
font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif;
font-size:100%;
font-weight: normal;
font-style: normal;
line-height: 100%;
text-indent: 0;
text-decoration: none;
text-align: left;
color: #000;
}


/* Global */

html { }
body { }



/* Headings */

h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #000;
font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif; }

h1 { font-size:24px; }
h2 { font-size:20px; }
h3 { font-size:16px; }
h4 { font-size:14px; }
h5 { font-size:14px; }
h6 { font-size:14px; }

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }



/* Text Elements */

p { color:#000; font-size:12px; line-height:150%; }
p .left { margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p .right { margin: 1.5em 0 1.5em 1.5em; padding: 0; }

a { }
a:link { color: #56562C; }
a:visited { color: #56562C; }
a:active { color: #56562C; }
a:focus { color: #AEAE5E; text-decoration:underline; }
a:hover { color: #AEAE5E; text-decoration:underline; }

blockquote { color:#000; font-size:12px; }

strong { font-weight: bold; }
em { font-style: italic; }

/* Images */



/* Lists */

ul { }
ol { list-style-type:decimal; }

ul li { color:#000; font-size:12px; font-family:Arial, Helvetica, sans-serif; }
ol li { color:#000; font-size:12px; font-family:Arial, Helvetica, sans-serif; }

dl { }
dt { }
dd { }



/* Tables */

table { width:100%; }

tr { }
.odd { background-color:#eee; }
.even { background-color:#fff; }

th { font-weight: bold; }
thead, th { background: #ccc; }

tbody { }

th,td,caption { }
caption { }

tfoot { }
.tfooter { background-color:#ccc; text-align:center; font-style:italic; }

caption { background: #efefef; }



/* Miscellaneous */

sup, sub { line-height: 0; }

abbr, acronym { border-bottom: 1px dotted #666; }
address { }
del { background:#FFCECE; color:#f00; }

code, pre { background-color:#FF9; padding:2px 0px; margin:4px 25px;
font-family:"Courier New", Courier, monospace; font-size:12px; font-weight:normal; line-height:150%; }


/* Containers */

#wrapper { width:900px; margin:0px auto; padding:20px 40px;
background-color:#F0F0E1; border-top:2px #666666 solid; }

#topnav { width:900px; margin:5px 0px 5px 0px; text-align:center; background-color:#f0f0e1; }
#topnav ul { width:100%; background-color:#999999; padding:10px 0 10px 0; border-bottom:1px black solid; border-top:1px black solid; }
#topnav ul li { display:inline; }
#topnav ul li a { padding: 9px 20px 9px 20px;
font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif;
font-size:14px; font-weight:normal; }

#topnav a:link { color:#FFFFFF }
#topnav a:visited { color:#FFFFFF; }
#topnav a:active { color:#FFFFFF; }
#topnav a:hover { color:#FFFFFF; background-color:#770000; }
#topnav a:focus { color:#FFFFFF; }

#social-media { float:left; width:135px; margin-top:0px; }
#social-media ul li { display:inline; }
#social-media img { width:24px; height:32px; margin-left:10px; }

#top { padding:10px 0px; border-bottom:3px #444 solid; margin:10px 0px; }


#banner { margin-top:0px; float:left; width:auto; white-space:nowrap; }
#banner h1 {font-weight:normal;margin-top:4px;}
#banner h2 {float:left;font-weight:normal;font-size:16px;margin-top:6px;}
#banner h3 {text-align:right;margin-right:0px;margin-top:10px;font-size:12px;}

#top-banner-text { font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif;
font-size:26px; font-weight:bold;
line-height:120%; }

#top-banner {display:inline}


#btm-banner-text { font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif;
font-size:24px; font-weight:bold; }

#btm-banner { }

#subbanner { width:900px; float:right; }
#subbanner h2 { font-size:22px; line-height:150%; margin-top:20px; }

#bottom { padding:0px 0px 0px 0px; width:100%; height:2px;
border-top:1px #aaa solid; margin:60px 0px 0px 0px; }

#rightside { width:340px; float:right; padding:0 0 0 20px; border-left: 1px #C0C0C0 solid; }
#rightside h2 { font-size:28px; font-weight:bold;
margin:0px 0px 25px 0px; }
#rightside h3 { font-size:16px; font-weight:bold;
margin:20px 0px 10px 0px; }
#rightside p { font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight:normal;
line-height:150%; margin-bottom:12px; }



#rightside li { margin:10px 0 10px 30px; Padding:0 0 0 3px; font-size:13px; }
#rightside img { margin:10px 0px; border:10px #fff solid; padding:1px; }

#content { width:510px; float:left; }
#content h2 { font-size:36px; font-weight:bold;
margin:40px 0px 20px 0px; }
#content li { margin-left:30px; margin-bottom:5px;
list-style-type:square; line-height:120%; font-size:14px; }

#content p { line-height:120%; margin:5px 0px; font-size:14px; font-weight:normal;
font-family:Arial, Helvetica, sans-serif; }
#content strong { font-family:Arial, Helvetica, sans-serif; }

#content ul li a { line-height:120%; margin:5px 0px; font-size:14px; font-weight:normal;
font-family:Arial, Helvetica, sans-serif; }

#content a:link { color:#000000; }
#content a:visited { color:#000000; }
#content a:active { color:#000000; }
#content a:hover { color:#FFFFFF; background-color:#770000; }
#content a:focus { color:#000000; }


#footer { clear:both; margin-top:20px; border-top:1px #555 solid; padding-top:20px; } }


#box1 { }

#box2 { }

#box3 { }

#box4 { }

#box5 { }

#box6 { }


/* Layout Extra */




/* Navigation Extra */



/* Forms */

form ol { list-style-type:none; }

form { text-align:left; margin:20px; }

label {
float: left; width: 150px; margin-top:5px;
text-align:right; display:block; background:none; font-weight:bold;
}

submit { background:none; }

input {
width: 280px; margin:0 0 16px 10px;
border:1px #bbb solid; padding:5px; background:none;
}

input:focus, textarea:focus { background-color:#BFEBFF; }

textarea {
width: 280px; height: 150px; margin:0 0 16px 10px;
border:1px #bbb solid; padding:5px; background:none;
}

select { margin-bottom:20px; }

.month { margin-left:155px; }

.submit {
width:90px; height:25px;
margin-left:160px;
font-size:12px;
}

br { clear: left; }

.clear { clear:both; }


/* Miscellaneous */

.copyright-text { font-size:80%; font-style:italic; color:#333; }
.footer-text { font-size:12px; font-style:normal; color:#333; text-align:center; }

.title { font-size:18px; font-weight:bold; color:#333; }
.subtitle { font-size:14px; font-style:italic; color:#333; }

.artist { font-size:16px; font-weight:bold; color:#333; }
.author { font-size:14px font-weight:bold; color:#555; }
.editor { font-size:14px font-style:italic; color:#555; }

.pub-date { font-size:10px font-style:italic; color:#555; }
.article-date { font-size:10px font-style:italic; color:#555; }
.location { font-size:10px font-style:italic; color:#555; }

.float-right { float:right; }
.float-left { float:left; }
.clear { clear:both; }

.hide { display:none; }
.block { display:block; }
.inline { display:inline; }

.first { font-weight:bold; }
.last { font-weight:bold; }
.left { font-weight:bold; text-align:left; }
.right { font-weight:bold; text-align:right; }

.added { background:#D7D7FF; }
.removed { background:#FFCECE; color:#f00; }
.changed { background:#FFB; }


/* Success, info, notice and error/alert boxes - from Blueprint CSS Framework */

.error, .alert, .notice, .success, .info {
padding: 0.8em; margin-bottom: 1em; border: 2px solid #ddd; }

.error, .alert { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }

.notice { background: #fff6bf; color: #514721; border-color: #ffd324; }

.success { background: #e6efc2; color: #264409; border-color: #c6d880; }

.info { background: #d5edf8; color: #205791; border-color: #92cae4; }

.error a { color: #8a1f11; }
.alert a { color: #8a1f11; }

.notice a { color: #514721; }
.success a { color: #264409; }
.info a { color: #205791; }

sunfighter
06-17-2012, 04:15 PM
Does this help? http://support.microsoft.com/kb/283807

justintime
06-17-2012, 04:26 PM
Does this help? http://support.microsoft.com/kb/283807

Hi and thanks for the reply. I have gone through that and still have the problem. Its been driving me mad for 2 days now:eek:

tracknut
06-17-2012, 08:03 PM
We need to see the web site...

Dave

justintime
06-17-2012, 09:52 PM
We need to see the web site...

Dave

Hi Dave, thank you for your reply. I have now uploaded the site to www.outwoodsparishcouncil.co.uk and the main banner pic appears fine. It looks like my problem is with Expression Web 4?:eek:

Regards, Ian.

Major Payne
06-18-2012, 09:06 AM
CSS errors (http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.outwoodsparishcouncil.co.uk%2F)

HTML errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.outwoodsparishcouncil.co.uk%2F)

Not sure what images you are referring to since you gave link to home page and not the problem page(s). Page looks just fine in my IE 9. Remember, not all browsers are fully complient with HTML 5 since it hasn't been released yet.

justintime
06-18-2012, 09:15 AM
CSS errors (http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.outwoodsparishcouncil.co.uk%2F)

HTML errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.outwoodsparishcouncil.co.uk%2F)

Not sure what images you are referring to since you gave link to home page and not the problem page(s). Page looks just fine in my IE 9. Remember, not all browsers are fully complient with HTML 5 since it hasn't been released yet.

Hi Ron, Thanks for your reply. Now I have uploaded the site the banner picture shows up fine. The problem would appear to be with Expression Web 4 as when I try to preview in EW4 I just get the empty box with a red cross, but when uploaded the picture is there? :eek:

tracknut
06-18-2012, 03:10 PM
The problem would appear to be with Expression Web 4 as when I try to preview in EW4 I just get the empty box with a red cross, but when uploaded the picture is there? :eek:

If you haven't done a "refresh" in EW4 of your local site, you might do that. But I wouldn't worry much, it's doubtful that many of your users will be browsing your site with EW4 :)

Dave

justintime
06-18-2012, 03:14 PM
If you haven't done a "refresh" in EW4 of your local site, you might do that. But I wouldn't worry much, it's doubtful that many of your users will be browsing your site with EW4 :)

Dave

Your right there Dave :thumbsup: Its just annoying, but then again EW4 does't present things in very good order, even on a good day! But its all I'm used too at the moment as I am a complete beginner.

Major Payne
06-19-2012, 05:02 AM
I imagine EW4 doesn't write proper code like Dreamweaver in Visual Mode. Dreamweaver does suggest making a projects folder and setting options to check for dependent files. Maybe EW4 needs the same options set although I would suggest always setting up a projects folder to mirror the onsite directory structure. Then all link paths can be checked locally before uploading.

Might try one or more of these:

Web Editors (PC):

Notepad++ (Free source code editor and Notepad replacement that supports several languages):
WebPlus Starter Edition – A Free & Powerful Website Builder For Beginners [Windows]: http://www.makeuseof.com/tag/webplus-starter-edition-free-powerful-website-builder-beginners-windows/
PageBreeze (Free visual (WYSIWYG) and HTML tag/source modes): http://www.pagebreeze.com/
http://notepad-plus-plus.org/ or http://notepad-plus.sourceforge.net/uk/site.htm

Komodo Edit: http://www.activestate.com/komodo-edit
Aptana Studio: http://www.aptana.org/products/studio2
PSPad: http://www.pspad.com/
jEdit: http://www.jedit.org/
TextWrangler: http://www.barebones.com/products/textwrangler/

There is also Crimson Red, HTML-Kit and more.

justintime
06-19-2012, 08:57 AM
Thank you Major. I will take your advice onboard. Would you suggest I move over to Dreamweaver? I can get an older version(4) for a reasonable price or should I really invest in a newer version? I only want to build small web sites, maybe 10 to 20 pages and nothing too fancy.

Major Payne
06-19-2012, 04:19 PM
I have an old version of Dreamweaver, but quit using it years ago in favor of CoffeeCup's HTML Editor 12.7. All editors in the Visual Mode write bad code. Even if you switch to Code View, correct your code, then return to Visual Mode, it will re-write the code many times in ways you wouldn't expect. CoffeeCup removed the visual mode from their editor and added new features to last revision. Their free version still has both code.visual modes.

If you plan to write your own code (html, css, etc.), then there are many, many very good free ones you can use. Dreamweaver would be just fine as long as you never used the visual mode and always previewed in an external browser. :P

If you're interested in other paid versions:

CoffeeCup's HTML Editor (Paid Version): http://www.coffeecup.com/html-editor/
CC's Visual Site Designer: http://www.coffeecup.com/designer/
Lot's of good, free stuff, too: http://www.coffeecup.com/freestuff/
Xara's Designer Pro 7: http://www.xara.com/us/
Xara Web Designer 7: http://www.xara.com/us/products/webdesigner/

Xara Web Designer 7 Premium: http://www.xara.com/us/products/webdesigner/

Just be sure to validate and get what code correctable corrected:

Validating:

Why Validate?: http://validator.w3.org/docs/why.html
CSS Validator: http://jigsaw.w3.org/css-validator/
HTML Validator: http://validator.w3.org/#validate_by_uri+with_options
W3C mobileOK Checker by URI (Also File Upload or Direct Input: http://validator.w3.org/mobile/check?docAddr=http%3A%2F%2FPayneLessDesigns.com%2F&async=true
How to Validate and Test for the Mobile Web:
http://designfestival.com/how-to-validate-test-your-designs-for-the-mobile-web/?utm_medium=email&utm_campaign=DesignFestival+3&utm_content=DesignFestival+3+CID_0601c8ff9e899af662a0fb6356bbaa2b&utm_source=Newsletter&utm_term=More

There is just so much good stuff out there. Lot of it free.

justintime
06-19-2012, 04:56 PM
Thank you for the advice Major and taking the time and trouble to give such good information, it really is appreciated.

I am a complete beginner so its all a bit over my head at the moment but I'll get there eventually.

Major Payne
06-19-2012, 09:41 PM
You're very welcome. Don't hesitate to ask when you need help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum