New Topic/Question
Reply
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
MultiQuote
| 