Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jun 2012
    Location
    Burton on Trent, England
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts

    html/css text overflows in ie9

    Hello all, I am trying to make a simple banner. . If I space the paragraph out to fit ie9 it falls short in other browsers. If I get it to look ok in chrome it looks like example 2 in ie9. I am a total newbie and would appreciate any help if possible please? Thanks, Ian. Example below.

    http://imageshack.us/photo/my-images/857/ex2au.jpg/]
    Last edited by justintime; 06-17-2012 at 12:50 PM.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by justintime View Post
    Hello all, I am trying to make a simple banner. . If I space the paragraph out to fit ie9 it falls short in other browsers. If I get it to look ok in chrome it looks like example 2 in ie9. I am a total newbie and would appreciate any help if possible please? Thanks, Ian. Example below.

    http://imageshack.us/photo/my-images/857/ex2au.jpg/]
    Welcome to the forum!

    While a picture may paint a thousand words, it unfortunately does not divluge code structure. Without seeing your HTML markup (as a start) we won't be able to diagnose the issue. A link to a live test page would be best for us in order to help you. Failing that, you should at least provide us with your complete HTML, CSS, and javascript so that those of us who care to reconstruct your web page can work with the "real deal."

    As for general web page creation advice, my recommendation is this:

    Hand write your code (avoid Dreamweaver and their ilk as you would a moving train). Build the HTML structure first, using W3C-compliant code and never anything less than HTML5, HTML 4.01 Strict, or XHTML 1.1 Strict. There is no excuse to use a transitional or lower doctype. Don't use table elements to build page structure. Tables are meant for tabular data and they are extremely unfriendly to visually impaired users and, eventually, to you when you want to make changes to your page. Use the "div" element along with margins, padding, and ONLY VERY OCCASIONALLY the position style. Validate your HTML code OFTEN as you go while you're learning and fix errors and warnings as they appear. This keeps things from getting out of hand by the time your HTML is finished. Learn from those validation mistakes and watch for them in future. Then, when it's time for CSS I recommend that you design and debug in Firefox using the Firebug plugin and the Web Developer plugin to help out. Keep your CSS in an external file and avoid inline CSS style like the plague (you should be separating content from style). When the page looks right in Firefox, go validate your CSS and check it in Firefox again. Fix anything that needs to be fixed for Firefox. Then check the page in the other popular current version browsers (the latest version of Chrome, Opera, IE, etc.). Then check it in older versions of IE (7 and up, these days) and other browsers as needed. If everything looks right across the board (hey, it could happen!) then you're good to go. If not, then find adjustments that appease all of the browsers you wish to support. Over time you will learn the pet peeves of certain browsers and you will more readily be able to identify when a case of that error is messing up your layout. With the structure and style in place make sure EVERYTHING in your page is functional at this stage, without javascript. Links should go to actual URLs, forms should submit normally, and menus should be usable. Then, add javascript to your page to enhance existing features where and as desired. Be certain that no core functionality is dependent upon a user having javascript enabled in their browser. Look into the concepts behind "unobtrusive javascript" practices, which is another separation layer (separating content from action).

    That's my 2 bits-worth.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    justintime (06-15-2012)

  • #3
    New Coder
    Join Date
    Jun 2012
    Location
    Burton on Trent, England
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks for the advice, I'm not sure if this is whats needed but here goes

    This is my style.css Code:

    Code:
    /* 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; }
    
    #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;    }
    #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:12px; font-weight:normal;
    					line-height:180%; margin-bottom:12px; }
    #rightside li		{ margin:10px 0 0 30px; Padding:0 0 0 3px; font-size:14px; }
    #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:bold;
    					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; }
    This is my Index 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: 24;
    		
    		margin-right: 0;
    	}
    	.auto-style3 {
    		margin-bottom: 12px;
    	}
    	.auto-style4 {
    		font-size: large;
    		font-family: Arial;
    		letter-spacing: 1px;
    	}
    	.auto-style5 {
    		font-size: medium;
    	}
    	.auto-style6 {
    		font-family: Arial;
    	}
    	.auto-style7 {
    		letter-spacing: 1px;
    	}
    	</style>
    </head>
    
    <body>
    
    <div id="wrapper">
    	
      
         
         
             <div id="banner" style="width: 900px" >
             
             <p class="auto-style4">OUTWOODS</p>
             <p><span class="auto-style5"><span class="auto-style6">
    		 <span class="auto-style7">Parish Council<strong>&nbsp; </strong></span>
    		 </span><strong>&nbsp;</strong></span><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; working for the community</strong></p></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: 250px" class="auto-style2">
    			 <h3>Council Information</h3>
    			 <ul>
    				 <li>Hot Topics</li>
    				 <li>Recycling</li>
    				 <li>Standing Orders</li>
    				 <li>2012 Agenda</li>
    				 <li>2012 Minutes</li>
    				 <li>2011 Minutes</li>
    				 <li>Useful Information</li>
    			 </ul>
    			 <p>&nbsp;</p>
    			 <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p>
    			 <h3>Our Team Members</h3>
    			 <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. 
    			 </p>
    			 <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit.</p>
    			 <h3>Our Location </h3>
    			 <p>&nbsp;</p>
    			 <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. 
    			 </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 <a href="mailto:%20%20%20kay.lear21@btinternet.com">contact the Clerk</a> in the first instance to report your concern.</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%20kay.lear21@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>
    		 
    		 <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>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
           
              <p>&nbsp;</p>
    </div>
         
         <div id="footer">
         <p class="footer-text">&copy;Copyright 2012 Outwoods Parish Council - Web Design by IMW54<a href="license.html">  |  License</a></p>
         </div>
            
       </div>
    
    </body>
    </html>
    
    
    
    <!-- This work is licensed under the MIT License - http://www.opensource.org/licenses/mit-license.php -->

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Are you referring to the "Parish Council" and "working for the community" items?

    If so, what you will want to use in this case will be a left float on the "Parish Council" element and text-align:right; on the "working for the community" element.

    This is a fine time to mention that those items should really be in "block level" elements rather than "inline" elements. You would probably want to use a heading tag (one of h1, h2, h3, h4, h5, h6) or paragraph (p) tags for those pieces.

    This is your current #banner element:

    Code:
             <div id="banner" style="width: 900px" >
             
             <p class="auto-style4">OUTWOODS</p>
             <p><span class="auto-style5"><span class="auto-style6">
    		 <span class="auto-style7">Parish Council<strong>&nbsp; </strong></span>
    		 </span><strong>&nbsp;</strong></span><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; working for the community</strong></p></div>
    I would recommend you delete all of those &nbsp; characters and update your element types to be more semantic (indicative of their purpose within the document). Try this instead:

    Code:
      <div id="banner" style="width:900px;">
        <h1 class="auto-style4">OUTWOODS</h1>
        <h2 class="auto-style7">Parish Council</h2>
        <h3>working for the community</h3>
      </div>
    And add this to your CSS file:

    Code:
    #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:63px;margin-top:10px;font-size:12px;}
    This little snippet will get things sorted for now in at least FF7.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    justintime (06-15-2012)

  • #5
    New Coder
    Join Date
    Jun 2012
    Location
    Burton on Trent, England
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thank you Rowsdower!

    That worked perfect thank you kind sir. I did change the #banner3 margin to 0; and it lines up at each side nice and snug now and in all browsers.

    The one other problem I seem to have is my images not showing in ie9? They do in other browsers and with the original code, can you see any reason why? Thanks again, Ian.

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I'm not seeing any image elements in the page.

    Are they being added dynamically (via javascript)? Or are you talking about a background image somewhere?

    I can say that the new code no longer uses classes of "auto-style5" or "auto-style6" so any background images related to those items would be gone but that would introduce the issue to all browsers and not just IE9.

    Which element(s) were suppose to have an image?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    New Coder
    Join Date
    Jun 2012
    Location
    Burton on Trent, England
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I was trying to place a small jpeg of a tree in the centre of the banner.

    using: <div id="top" style="height:1054px; width: 100%;">
    <div id="logo"><img src="images/opc logo.jpg" /></div>

    Inside wrapper
    Last edited by justintime; 06-15-2012 at 09:37 PM.

  • #8
    New Coder
    Join Date
    Jun 2012
    Location
    Burton on Trent, England
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts
    What I am trying to achieve is the png picture below, sitting slap bang in the centre of my banner. I have corrected the code as advised and the wording layout is now spot on.
    How can I get this logo pic in the centre between the h1+h2 and the h3 if its possible? Please. The pic is 66px wide and 50px high.

    Plus add a btm-banner containing a jpg or png at 900px x 120px

    http://imageshack.us/photo/my-images...ee002copy.png/

    HTML Code:

    Code:
    <div id="banner" style="width:900px;">
    
       	        <h1 class="auto-style4">OUTWOODS</h1>
      		<h2 class="auto-style7">Parish Council</h2>
      		<h3>working for the community</h3>
      			
    </div>

    CSS:

    Code:
    #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;}
    Using this HTML code in the page and css gives me the correct image in firefox, chrome etc. but just an empty box with a red x in IE9?

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

    <img src="images/media-gallery/Capture.gif" >


    </div>



    CSS:
    #btm-banner { background: transparent; img src:images/Capture.JPG; }
    Last edited by justintime; 06-16-2012 at 11:24 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •