Associate
Sorted please close -
Hi Folks,
I am trying to learn HTML/CSS and so far so good other than a picture problem which I just cannot figure out. I dont have any pics on at the moment but if I try to add a jpeg or png etc they show up fine in Chrome, Firefox etc but not in IE9. Can anyone tell me what I am doing wrong please?
HTML Code:
CSS Code:
Hi Folks,
I am trying to learn HTML/CSS and so far so good other than a picture problem which I just cannot figure out. I dont have any pics on at the moment but if I try to add a jpeg or png etc they show up fine in Chrome, Firefox etc but not in IE9. Can anyone tell me what I am doing wrong please?
HTML Code:
Code:
<!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> </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> </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> </p>
</div>
</div>
<div id="content" style="width: 630px">
<h3> </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"> </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> </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> </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> </p>
<ul>
<li><a href="mailto:%20%20%[email protected]">Please Click Here
to Contact The Outwoods Parish Clerk</a></li>
</ul>
<p> </p>
<p>If you would like to contribute to the web site or make any comments</p>
<p> </p>
<ul>
<li><a href="mailto:[email protected]">Please Click Here to send your message</a></li>
</ul>
<h3> </h3>
<h3>Any Other Business</h3>
<p> </p>
<p>A place for any other information to be placed.</p>
<p> </p>
</div>
<div id="footer">
<p class="footer-text">©Copyright 2012 Outwoods Parish Council & 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 -->CSS Code:
Code:
/* 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; }
Last edited: