2 Replies - 541 Views - Last Post: 07 December 2012 - 04:23 AM

#1 DaveBromley  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 6
  • Joined: 04-December 12

EKM newletter template cross browser issue

Posted 07 December 2012 - 03:46 AM

Hi Guys

I'm looking at sending out a newsletter for my business, and have tweaked the html and css to where i want it. the issue is the delivery service that i'm using needs all of the code inline.

Again overcame this and ended up with the code below, the issue is that whilst it works and looks perfect on firefox, there are issues with the other major browsers.

Can anyone tell me where i'm going wrong whilst i still have at least some hair left

Thanks in advance

Dave

<!DOCTYPE html>
<html>
	<head>
		<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
		<style type="text/css">
                /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

</style>

<style type="text/css">
html{
background: #6688aa;
background:-moz-linear-gradient(top, #6688aa 0%, #ffffff 100%);
}

body{
	font-family:Tahoma,Arial;
		
}

#wrapper{
	
	width: 960px;
	margin:auto;
	margin-top:10px;
	
}
#wrapper h1{
	font-weight:bold;
	text-align: center;
	text-shadow: rgb(120,120,120) 3px 3px 3px;
	font-size: 18px;
	padding:10px;
}
#wrapper h2{
	font-weight: bold;
	text-align: center;
	font-size: 12px;
	padding-bottom:10px;
}
#wrapper a{
	color: black;
}

#header{
	height:80px;
	text-shadow: rgb(120,120,120) 5px 5px 3px;
	background-color:#99ccdd;
	background:-moz-linear-gradient(top, #99ccdd 0%, #ffffff 100%);
	margin-top: 10px;
	padding-top:20px;
	border-bottom:1px solid #6688aa;
}
#top{
	width:960px;
	text-align: center;
}
#header h1{
	font-weight: bold;
	font-size: 48px;
	text-align: center;
}

#image_left{

	float:left;
	margin-left:25px;
}

#image_right{

	float:right;
	margin-right:25px;
}

#main_img{
	width:350px;
	margin:15px;
	border-radius:5px;
	float:left;
	box-shadow:rgb(120,120,120) 5px 5px 3px;
}

nav{
	background-color: #FF913D;
	background:-moz-linear-gradient(top, #ffffff 0%, #ff913d 100%);
	box-shadow: rgb(120,120,120) 0 3px 3px;
	text-shadow: rgb(120,120,120) 3px 3px 3px;
	border-bottom: 1px solid #6688aa;	
	text-align:center;
	
}
nav li{
	display:inline-block;
	margin: 5px 40px 5px;	
}

nav li a{
	color:black;
	text-decoration: none;
}

#main_section{
	width:690px;
	border-radius:5px;
	border-top:1px solid #6688aa;
	box-shadow: rgb(120,120,120) 3px 3px 3px;
	background-color:#99ccdd;
	background:-moz-linear-gradient(top, #99ccdd 0%, #6688aa 100%);
	margin-right:5px;
	padding:10px;
	float:left;
}

.main-article{
	padding:10px 20px 10px;
}

#side_news{
	width:225px;
	border-radius:5px;
	border-top:1px solid #6688aa;
	box-shadow: rgb(120,120,120) 3px 3px 3px;
	background:-moz-linear-gradient(top, #99ccdd 0%, #6688aa 100%);
	background-color:#99ccdd;
	margin-right:0px;
	padding:10px;
	float:right;
}

.side_article{
	padding:10px 20px 10px;
	margin-bottom:3px;
}
.side_article li{
	list-style-type: square;
}
#courses{
	width:714px;
	border-radius:5px;
	margin-top:5px;	
	float:left;
	
}

.course-info{
	height:415px;
	margin-right:5px;
	border-radius:5px;
	box-shadow: rgb(120,120,120) 3px 3px 3px;
	width:213px;
	float: left;
	padding:10px;
	background-color: #99ccdd;
	background:-moz-linear-gradient(top, #99ccdd 0%, #6688aa 100%);
}

.course-info h1{
	padding: 10px;
	font-weight:bold;
	font-size:14px;
}

.course-info a{
	text-align: right;
	color:black;	
}

footer{
	margin:50px;
}

.foot{
	width:100%;
	height:30px;
	margin-top:30px;
	text-align:center;
	font-weight:bold;
	font-size: 18px;
	background-color:#99ccdd;
	background:-moz-linear-gradient(top, #ffffff 0%, #ff7000 100%);
	float:left;
	padding:10px;
}
.foot li{
	text-align:center;
	display:inline-block;
	margin: 0 40px 0;
}

.foot a{
	text-decoration: none;
	color:black;	
}

#footer_text{
	width:960px
	text-align: center;
}
</style>

<meta charset="UTF-8" />
		<title id="main-title">Erudite Training News</title>
	</head>
	
	<body>
		<img id="image_left" src="http://i996.photobucket.com/albums/af82/Bromd123/Work/logo.gif" alt="Erudite Logo" title="Erudite Training Ltd."/>
		<img id="image_right" src="http://i996.photobucket.com/albums/af82/Bromd123/Work/logo.gif" alt="Erudite Logo" title="Erudite Training Ltd."/>
		
		<header id="header">
				<div id="top">
		
				<h1>Erudite Training News</h1>
			</div>	
		</header>
						
		<nav class="page_navigation">
				<ul class="list">
					<li><a href="http://eruditetrainingltd.co.uk/Home.html">Erudite Home</a></li>
					<li><a href="http://eruditetrainingltd.co.uk/Electrical-Courses.html">Electrical Courses</a></li>
					<li><a href="http://eruditetrainingltd.co.uk/Articles.html">Previous Articles</a></li>
				</ul>
		</nav>
		
		<div id="wrapper">

			
			<section id="main_section">
				<img id="main_img" src="http://i996.photobucket.com/albums/af82/Bromd123/Work/Simon_board.jpg" alt="Design Calculations" title="Designing an Installation"/>
				<article class="main-article">
					<h1>Who is Designing YOUR Installations?</h1>
					<p>
						As an electrician you will probably have issued, 
						hundreds of electrical installation certificates.  
						Each one bearing your signature, and each one a legal
						document, which is just as official as your birth 
						certificate.  On some forms there will be multiple 
						signatories, each responsible for a specific portion 
						of the installation, whether that be the Design, 
						Installation, or Inspection and Test. 
						<br>
						<br> 
						On most Domestic Electrical Installation Certificate
						s however there is usually one signature, 
						making the person that signs the paperwork responsible 
						for not just the installation and testing of the work, 
						but also the design.
						<br>
						<br>
						The question is, if you were 
						asked to justify your design, why you used one type 
						of cable over another, why you chose a certain protective 
						device… Could you?
						<br>
						<br>
						The Electricity at Work Regs states that you must be 
						“competent” to design, install and test your installation.  
						But proving competence is harder then it seems.  
						For instance you could argue that you had been doing it 
						that way for 20 years, however this doesn’t prove that you 
						have been doing it correctly for the last 20 years, does it?
						<br>
						<br>
						The easiest way to prove competence is to show a certificate 
						from an awarding body that says you meet their standards 
						regarding minimum levels of competence.  As long as you 
						have remained within the scope of that qualification 
						and make no departures from the accepted methods you 
						were shown, you shouldn’t have any issues.
						<br>
						<br>
						Problems start arising however when standards that
						are set in place to protect both you and the customer, 
						are ignored, or where people take on more than they are 
						capable of.
						<br>
						<br>
						On top of all of this being able to competently design 
						an installation can also result in new and innovative ways to 
						bring down your materials bill, without it affecting the end product.
						<br>
						<br>
						<span class="more_info">why not check out or courses below</span>
					</p>
				</article>
			</section>
			
			<aside id="side_news">
				<article class="side_article">
					<h1>City & Guilds announce Final re-sit for 2391</h1>
						<h2>Last chance to get booked in for resit</h2>
						
							<p>
								2391-301 Technical Knowledge of the Inspection, Testing 
								and Certification of Electrical Installations.
								<br>
								<br>
								Due to centre demand and the need for potential re-sits, 
								we have now created an additional date for the dated entry 
								written paper. The date for this final exam will be March 14th 2013.
								Centres should note there will not be a February exam series 
								in 2013 and that there will be no further exam dates beyond 
								March 14th 2013.
								<br>
								<br>
								There are now replacement qualifications for 2391 
								
							</p>
				</article>			
				<article class="side_article">
					<h1>Christmas Electrical Safety</h1>
						<h2>make sure christmas goes without a BANG!</h2>
							<p>
								Light plugged into every socket, daisy-chained extension leads?.
								<br>
								Here are a couple of handy hints 
								on how to enjoy your Xmas without worry
							</p>	
							<br>	
									<ul>
										
    									<li>Make sure there are no broken bulbs and no visible loose wires</li>
   										<br>
   										<li>Replace any bulbs which may have blown</li>
    									<br>
    									<li>Check you are using the right size fuse for the lights by checking 
    										the packaging and looking at the fuse</li>
    									<br>
    									<li>Do not overload any sockets</li>
    									<br>
    									<li>Switch off the Christmas lights when leaving the house or going to 
    										bed to avoid over heating</li>
    									<br>
    									<li>Make sure over Christmas decorations which may easily burn such as paper, are kept away from the bulbs</li>
    								</ul>
    								
							
						
						
				</article>
			</aside>
			
			<aside id="courses">
				<article class="course-info">
					<h1><a href="http://eruditetrainingltd.co.uk/Electrical-Courses/Fundamental-Inspection-and-Test.html">2392 Fundamental Inspection and Test</a></h1>
						<br>
						<p> Fundamental Inspection and Testing is aimed at people who 
							have done little or no testing, or those who havent picked
							up a meter for years.
							<br>
							<br>
							There are no formal requiremens for this course, although we
							do advise a sound knowledge of basic electrical principles.
							<br>
							<br>
							<a href="http://eruditetrainingltd.co.uk/Electrical-Courses/Fundamental-Inspection-and-Test.html">Read More</a>
						</p>
				</article>
				
				<article class="course-info">
					<h1><a href="http://eruditetrainingltd.co.uk/Electrical-Courses/Periodic-Inspection-Testing-and-Reporting-Electrical-Installations.html">2395 Periodic Inspection and Test</a></h1>
						<p>  This course is aimed at those that wish to be able to undertake 
							Periodic Electrical Inspection and Testing on existing installations. 
							It is also the next level of progression from the 2392 Fundamental 
							Inspection and Test qualification and 2394 Initial Verification of 
							Electrical Installations.
							<br>
							<br>
							The course will go through the tests that are required to complete 
							the new Electrical Installation Condition Report (EICR) and using 
							relevant 17 th Edition Regulations, going through the testing procedure 
							with you step by step. 
						<br>
						<br>
						<a href="http://eruditetrainingltd.co.uk/Electrical-Courses/Periodic-Inspection-Testing-and-Reporting-Electrical-Installations.html">Read More</a>
						</p>
					
				</article>
				
				<article class="course-info">
					<h1><a href="2396">2396 Design, Erection and Verification</a></h1>
						<p> The 2396 Design, Erection and Verification Course is aimed 
							at those that want to take their knowledge a little further, 
							it has applications across the board from domestic to industrial.
							<br>
							<br>
							The designing process will also give you a more complete 
							understanding of other installations, which will come in very handy 
							when testing installations.
							<br>
							<br>
						<a href="2396">Read More</a>						
						</p>
						
				</article>
			</aside>
		</div>
		<br>
		<br>
		<br id="space-footer">
			
			<footer class="foot">
				<div id="footer_text">
					<ul>
						<li><a href="http://eruditetrainingltd.co.uk">www.eruditetrainingltd.co.uk</a></li>
						<li>62 Turner Lane, Ashton U Lyne, OL6 8LP</li>
						<li>0161 425 7996</li>
					</ul>
				</div>
			</footer>
		
	</body>
	
</html>
	




BTW sorry if the code is a little scrappy (or a lot scrappy). I only started learning HTML 3 weeks ago, and have hit a wall with this.

Thanks again

Dave

Is This A Good Question/Topic? 0
  • +

Replies To: EKM newletter template cross browser issue

#2 raghav.naganathan  Icon User is offline

  • Perfectly Squared ;)
  • member icon

Reputation: 408
  • View blog
  • Posts: 1,440
  • Joined: 14-September 12

Re: EKM newletter template cross browser issue

Posted 07 December 2012 - 04:05 AM

Well, this may not be related to your question but I noticed this error.

In the contact number text box, I typed alphabets and the form got accepted. Also I left name blank and the form submitted.

You might want to look into that issue and give required field validators and regular expressions for them.

regards,
Raghav
Was This Post Helpful? 0
  • +
  • -

#3 DaveBromley  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 6
  • Joined: 04-December 12

Re: EKM newletter template cross browser issue

Posted 07 December 2012 - 04:23 AM

View Postraghav.naganathan, on 07 December 2012 - 04:05 AM, said:

Well, this may not be related to your question but I noticed this error.

In the contact number text box, I typed alphabets and the form got accepted. Also I left name blank and the form submitted.

You might want to look into that issue and give required field validators and regular expressions for them.

regards,
Raghav



Thanks Raghav

I'm not responsible for the website personally (i didnt write it), but rest assured the guy who did will be getting a call today

Thanks for pointing that out

Anyone got any answers to my other query?

Dave
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1