First post, hope you can help, I have done two sites www.trisant.co.uk and my own www.firstexact.co.uk. The 2 x 2 grid I originally envisaged goes haywire in Firefox as I get a 4 high by 1 wide grid. think it's something to do with my floats and clear both with a <br> in CSS..I have tried everything I can think of, the sites are fine in IE 6/7..Some of the text formatting and the navigation fonts are in different places..
Here's the code for the index and the associated CSS. Sorry the order in my CSS is a bit awry...this is my first attempt at a css based site..I did all of the artwork and design myself..This is the code for www.firsteact.co.uk
HTML
Expand|Select|Wrap|Line Numbers
- <!-- saved from url=(0022)http://internet.e-mail -->
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
- <title>Hampshire Southampton Portsmouth Online Internet Marketing | Search Engine Optimisation | PPC Campaign Management | Affiliate Marketing</title>
- <meta name="verify-v1" content="urutTKXswHcxMaZuhyZk7/tALy3WrnP3mWZ9zJz4SLg=" />
- <meta name="description" content="Onsite Online Marketing from First Exact. Comprehensive E-Marketing Plans and Training." />
- <meta name="keywords" content="hampshire, portsmouth, southampton, internet marketing, online marketing, ppc management, affiliate marketing, seo, search engine marketing, email marketing, website photography, assertiveness training, team building">
- <link href="css/first_exact.css" rel="stylesheet" type="text/css" />
- </head>
- <body>
- <div id="outer">
- <div class="header_footer" id="top_header">
- <div id="top_header_left">
- </div>
- <div id="top_header_right">
- <div id="header_content"><!-- #BeginLibraryItem "/Web/Library/H1 HEADER.lbi" -->
- <link href="css/first_exact.css" rel="stylesheet" type="text/css" />
- <h1 class="centre">Onsite Online Marketing :: PPC Management :: Search Engine Optimisation :: Lead Generation :: Affiliate Marketing :: Email Marketing :: Website Photography :: Website Copywriting :: E-Marketing Plans </h1>
- <!-- #EndLibraryItem --></div>
- </div>
- </div>
- <br class="clearboth" />
- <!-- START NAVIGATION -->
- <div class="nav" id="top_nav"><!-- #BeginLibraryItem "/Web/Library/HOME_NAVIGATION.lbi" -->
- <link href="css/first_exact.css" rel="stylesheet" type="text/css" />
- <ul id="navlist">
- <li><a href="index.htm">HOME</a></li>
- <li><a href="online-marketing/search-engine-marketing/specialist.html" id="current">Onsite Online Marketing</a></li>
- <li><a href="online-marketing/pay-per-click-specialist/ppc-management.html">Pay-Per-Click</a></li>
- <li><a href="online-marketing/on-page-off-page-seo/search-engine-optimisation.html">On & Off Page SEO</a></li>
- <li><a href="online-marketing/lead-generation/online-sales-leads.html">Lead Generation</a></li>
- <li><a href="online-marketing/roi-tracking/return-on-investment.html">ROI Tracking</a></li>
- <li><a href="online-marketing/email-marketing/email-marketing-campaigns.html" id="current">Email Marketing</a></li>
- <li><a href="online-marketing/affiliate-marketing/affiliate-program-network.html">Affiliate Marketing</a></li>
- </ul><!-- #EndLibraryItem --></div>
- <!-- END NAVIGATION -->
- <div class="SQUARE" id="TL_DARK_RED">
- <h2 class="centre"><br />
- <br />
- Cost effective Internet Marketing for your web site & for your business.
- </h2>
- <p class="centre">Everyone doing business online today realises that without good Internet marketing, your web site may as well not exist. <br />
- <br />
- More and more people are using search engines to look for exactly what they want – and if you know how to use them, your business can benefit from highly focused enquiries from customers who already want to buy your product before they visit your web site. <br />
- <br />
- First Exact was established to provide a alternative to costly SEO companies, offering a complete Internet Marketing service under one roof including: <br />
- <br />
- PPC strategy and management<br />
- SEO (on and off page), Link Building <br />
- Lead Generation & ROI Tracking <br />
- Affiliate Marketing<br />
- Assertiveness Training & Team Building <br />
- Copywriting<br />
- Project Management + E-Marketing Plans<br />
- Web site Copywriting / Web site Photography</p>
- </div>
- <div class="SQUARE_RIGHT" id="TR_HOME"></div>
- <div class="SQUARE" id="BL_ORANGE">
- <h2 class="centre"><br />
- <br />
- Onsite Online Search Engine Marketing </h2>
- <p class="centre"> We believe in offering you transparency, plain English explanations of our methods and full justification of our fees. <br />
- <br />
- We work with most of our clients onsite – a practice virtually unheard of in most SEO agencies - so you’ll be in complete control at all times. It also helps us understand your business better – and train your staff so you can develop your own Internet marketing strategy without the need for external contractors.<span class="centre"><br />
- <br />
- Apart from being highly cost-effective, First Exact is different because we’re thorough – we get deep inside your company and give you the online publicity your business deserves.<br />
- <br /><br />
- <br />
- Please note this site is best viewed in Internet Explorer.
- <br />
- We apologise for the formatting in Mozilla Firefox.
- </p>
- </div>
- <!-- #BeginLibraryItem "/Web/Library/FORM.lbi" -->
- <link href="css/first_exact.css" rel="stylesheet" type="text/css" />
- <div class="SQUARE_RIGHT" id="BR_DARK_RED">
- <form method="post" action="http://www.firstexact.co.uk/home_page.php">
- <p class="centre">To find out more about any of FirstExact’s services, our rates or contracts, please get in touch via the form below. </p>
- <p>
- <label for="Name">Name:</label>
- <input name="Name" type="text" id="Name" size="30" input="input" />
- </p>
- <p>
- <label for="Company">Company:</label>
- <input name="Company" type="text" id="Company" size="30" input="input" />
- </p>
- <p>
- <label for="Location">Location:</label>
- <input name="Location" type="text" id="Location" size="30" input="input" />
- </p>
- <p>
- <label for="EmailFrom">Email:</label>
- <input name="EmailFrom" type="text" id="EmailFrom" size="30" />
- </p>
- <p>
- <label for="Contact_Tel">Contact Tel:</label>
- <input name="Contact_Tel" type="text" id="Contact_Tel" size="30" input="input" />
- </p>
- <p>
- <label for="Mobile_Tel">Mobile Tel:</label>
- <input name="Mobile_Tel" type="text" id="Mobile_Tel" size="30" input="input" />
- </p>
- <p>
- <label for="Requirements">Requirements:</label>
- <select name="Requirements" class="smalltext">
- <option selected="selected">** Please select the most appropiate option in this list **</option>
- <option>******************************************************</option>
- <option>Our web site is live, we need to start getting enquiries.</option>
- <option>We want to try Pay per Click. How de we get started?</option>
- <option>We don't know about Pay per Click. Tell us more!</option>
- <option>We want to find more online sites that send us more enquires.</option>
- <option>******************************************************</option>
- <option>Our site has some SE rankings, but we need a lot more!</option>
- <option>We want to try Affiliate Marketing. How do we get started?</option>
- <option>We don't know about Affiliate Marketing. Tell us more!</option>
- <option>Our web site is live, and needs to be found on Google.</option>
- <option>******************************************************</option>
- <option>Improve communication with prospects and existing customers.</option>
- <option>We don't have an online marketing strategy or clear objectives.</option>
- <option>We need to measure cost of each online enquiry/conversion.</option>
- <option>Our staff need the confidence to convert the inbound leads.</option>
- <option>******************************************************</option>
- <option>Our staff need to work better. We need a team day out!</option>
- <option>Make what we say on/off line, easier to read by our customers.</option>
- <option>Our site could benefit from inexpensive commercial photography.</option>
- <option>None of the above apply, we need something else for our site!</option>
- <option>******************************************************</option>
- </select>
- </label>
- <br /><br />
- <input name="submit" type="submit" class="submit" value="Submit" />
- </p>
- </form>
- </div><!-- #EndLibraryItem --><br class="clearboth" />
- <div class="nav" id="bottom_nav"><!-- #BeginLibraryItem "/Web/Library/FOOTER_NAVIGATION.lbi" -->
- <link href="css/first_exact.css" rel="stylesheet" type="text/css" />
- <ul id="navlist">
- <li><a href="index.htm">HOME</a></li>
- <li><a href="online-marketing/project-management/e-marketing-plans.html">Project Management</a></li>
- <li><a href="online-marketing/website-photography/commercial-photography-hampshire.html">Web Site Photography</a></li>
- <li><a href="online-marketing/freelance-web-copywriting/online-copywriter.html">Web Site Copywriting</a></li>
- <li><a href="online-marketing/assertiveness-training/course-in-how-to-be-more-assertive.html">Assertiveness Training</a></li>
- <li><a href="online-marketing/team-building/leadership-training.html">Team Building & Leadership Training</a></li>
- <li><a href="sitemap.html">Sitemap</a></li>
- </ul><!-- #EndLibraryItem --></div>
- <div class="header_footer_II" id="bottom_header">
- <h2 class="centre"></h2>
- <!-- #BeginLibraryItem "/Web/Library/H2 FOOTER.lbi" -->
- <link href="css/first_exact.css" rel="stylesheet" type="text/css" />
- <h3 class="centre">First Exact:
- Onsite Online Marketing :: PPC Management :: Search Engine Optimisation :: Lead Generation :: Affiliate Marketing :: Email Marketing :: Website Photography :: Website Copywriting :: Team Building :: Southampton :: Portsmouth :: Hampshire :: Site Design by FirstExact </h3>
- <!-- #EndLibraryItem --></div>
- </div>
- </body>
- </html>
CSS
Expand|Select|Wrap|Line Numbers
- body
- {
- font-family: "Trebuchet MS", Verdana, serif;
- font-size: 10px;
- background-color: #FFFFFF;
- text-align: center;
- }
- div
- {
- padding: 5px;
- background-color: #FFFFFF;
- }
- div#outer
- {
- text-align: left;
- margin-right: auto;
- margin-left: auto;
- background-color: #FFFFFF;
- height: 1200px;
- width: 900px;
- }
- div#top_header_left
- {
- background-color: #FFFFFF;
- text-align: left;
- width: 550px;
- height: 150px;
- float: left;
- background-repeat: no-repeat;
- background-position: center top;
- background-image: url(../Web/images/HEADER/FIRST-EXACT_LOGO.jpg);
- }
- div#top_header_right {
- text-align: left;
- width: 300px;
- height: 150px;
- float: right;
- background-repeat: no-repeat;
- background-position: center top;
- background-image: url(../Web/images/HEADER/FIRST-EXACT_TEL.jpg);
- }
- /* HEADER & FOOTER */
- .header_footer {
- font-family: Verdana, Arial, Helvetica, sans-serif;
- text-align: left;
- height: 150px;
- width: auto;
- background-color: #FFFFFF;
- }
- .header_footer_II {
- font-family: "Trebuchet MS", Verdana, serif;
- text-align: center;
- height: 100px;
- width: auto;
- background-image: url(../Web/images/FOOTER/footer.gif);
- background-repeat: no-repeat;
- background-position: center top;
- font-size: 12px;
- color: #FFFFFF;
- }
- #header_content {
- width: 290px;
- height: 100px;
- position: relative;
- padding: 0px;
- top: 40px;
- left: -10px;
- }
- .clearboth {
- clear: both;
- line-height: 50%;
- }
- /* CSS FOR BOXES - SIZE AND POSITIONING */
- .SQUARE {
- height: 435px;
- width: 435px;
- text-align: left;
- float: left;
- margin-left: 5px;
- margin-bottom: 10px;
- }
- .SQUARE_RIGHT {
- height: 435px;
- width: 435px;
- text-align: left;
- float: left;
- margin-left: 10px;
- margin-bottom: 10px;
- vertical-align: middle;
- }
- /* COLOUR SCHEMES / BACKGROUNDS & PHOTOS FOR BOXES */
- #TL_DARK_RED {
- overflow: auto;
- background-repeat: no-repeat;
- background-position: center center;
- color: #FFFFFF;
- background-image: url(../Web/images/TOP_LEFT/onsite-internet-marketing.jpg);
- }
- #TR_HOME
- {
- background-repeat: no-repeat;
- background-position: center center;
- background-image: url(../Web/images/PHOTOS/internet-marketing.jpg);
- text-align: center;
- }
- #TR_ABOUT
- {
- background-repeat: no-repeat;
- background-position: center center;
- background-image: url(../Web/images/ME/FirstExact_Shoot_Sept02-001.jpg);
- text-align: center;
- }
- #BL_ORANGE {
- overflow: auto;
- background-repeat: no-repeat;
- background-position: center center;
- color: #FFFFFF;
- background-image: url(../Web/images/BOTTOM_LEFT/assertiveness-training.gif);
- text-align: center;
- }
- #BR_DARK_RED {
- color: #FFFFFF;
- text-align: left;
- font-family: "Trebuchet MS", Verdana, serif;
- font-size: 11px;
- background-repeat: no-repeat;
- background-position: center center;
- padding: 15px;
- background-image: url(../Web/images/FORM/crosshairs.jpg);
- }
- /* NAVIGATION */
- .nav {
- text-align: center;
- height: 40px;
- z-index: 10;
- margin-left: 10px;
- margin-right: 5px;
- background-repeat: no-repeat;
- font-family: "Trebuchet MS", Verdana, serif;
- font-size: 9px;
- line-height: 30px;
- background-image: url(../Web/images/NAVIGATION/navigation.gif);
- }
- ul#navlist
- {
- margin-left: 0;
- padding-left: 0;
- white-space: nowrap;
- }
- #navlist li
- {
- display: inline;
- list-style-type: none;
- }
- #navlist a { padding: 3px 5px; }
- #navlist a:link, #navlist a:visited
- {
- color: #fff;
- background-color: ff3300;
- text-decoration: none;
- }
- #navlist a:hover
- {
- color: #fff;
- background-color: 990000;
- text-decoration: none;
- }
- /* TEXT FORMATTING */
- p.centre
- {
- text-align: center;
- font-family: "Trebuchet MS", Verdana, serif;
- font-size: 11px;
- padding: 10px;
- }
- p.left {
- text-align: left;
- font-family: "Trebuchet MS", Verdana, serif;
- font-size: 12px;
- padding: 10px;
- }
- h1.centre {
- text-align: center;
- font-family: "Trebuchet MS", Verdana, serif;
- font-size: 12px;
- padding: 0px;
- margin-top: 0px;
- margin-bottom: -10px;
- font-style: normal;
- }
- h2.centre {
- text-align: center;
- font-family: "Trebuchet MS", Verdana, serif;
- font-size: 12px;
- padding: 5px;
- margin-bottom: -20px;
- margin-top: -20px;
- }
- ul {
- list-style-position: outside;
- font-family: "Trebuchet MS", Verdana, serif;
- font-size: 12px;
- }
- .smalltext
- {
- font-family: "Trebuchet MS", Verdana, serif;
- font-size: 9px;
- }
- label
- {
- width: 8em;
- float: left;
- text-align: right;
- margin-right: 0.5em;
- display: block
- }
- .submit input
- {
- margin-left: 10.5em;
- }
- select {
- background-color: #FFFFFF;
- color: #000000;
- width: 32em;
- }
- #TR_AFFILIATE {
- background-repeat: no-repeat;
- background-position: center center;
- background-image: url(../Web/images/PHOTOS/affiliate-marketing.jpg);
- text-align: center;
- }
- p.centre12 {
- text-align: center;
- font-family: "Trebuchet MS", Verdana, serif;
- font-size: 12px;
- padding: 10px;
- }
- #TR_SEO {
- background-repeat: no-repeat;
- background-position: center center;
- background-image: url(../Web/images/PHOTOS/off-page-seo.jpg);
- text-align: center;
- }
- #TR_LINKS {
- background-repeat: no-repeat;
- background-position: center center;
- background-image: url(../Web/images/PHOTOS/linking.jpg);
- text-align: center;
- }
- #TR_ROI {
- background-repeat: no-repeat;
- background-position: center center;
- background-image: url(../Web/images/PHOTOS/return-on-investment.jpg);
- text-align: center;
- }
- A:link {
- text-decoration: none;
- color: #FFFFFF;
- }
- A:visited {
- text-decoration: none;
- color: #FFFFFF;
- }
- A:active {text-decoration: none}
- A:hover {text-decoration: underline; color: #000000;}
- p.centre10 {
- text-align: center;
- font-family: "Trebuchet MS", Verdana, serif;
- font-size: 10px;
- padding: 10px;
- }
- #TR_LEAD_GEN {
- background-repeat: no-repeat;
- background-position: center center;
- background-image: url(../Web/images/PHOTOS/lead-generation.jpg);
- text-align: center;
- }
- h3.centre {
- text-align: center;
- font-family: "Trebuchet MS", Verdana, serif;
- font-size: 12px;
- padding: 5px;
- margin-top: 30px;
- }
- #TR_PPC {
- background-repeat: no-repeat;
- background-position: center center;
- background-image: url(../Web/images/PHOTOS/ppc.jpg);
- text-align: center;
- }
- #TR_EMAIL {
- background-repeat: no-repeat;
- background-position: center center;
- background-image: url(../Web/images/PHOTOS/email-marketing.jpg);
- text-align: center;
- }
- p.centre_black {
- text-align: center;
- font-family: "Trebuchet MS", Verdana, serif;
- font-size: 11px;
- padding: 20px;
- color: #000000;
- font-weight: bold;
- }
- #TR_ASSERTIVENESS {
- background-repeat: no-repeat;
- background-position: center center;
- background-image: url(../Web/images/PHOTOS/assertiveness-training.jpg);
- text-align: center;
- }
- div#top_header_left_FF {
- background-color: #FFFFFF;
- text-align: left;
- width: 550px;
- height: 150px;
- float: left;
- background-repeat: no-repeat;
- background-position: center top;
- background-image: url(../Web/images/HEADER/FIRST-EXACT_LOGO_FF.jpg);
- }
- #TR_FF {
- background-repeat: no-repeat;
- background-position: center center;
- background-image: url(../Web/images/PHOTOS/team_building.jpg);
- text-align: center;
- }
- #TR_COPY {
- background-repeat: no-repeat;
- background-position: center center;
- background-image: url(../Web/images/PHOTOS/freelance-copywriting.jpg);
- text-align: center;
- }
- #TR_WEB_PHOTO {
- background-repeat: no-repeat;
- background-position: center center;
- background-image: url(../Web/images/PHOTOS/web-photography.jpg);
- text-align: center;
- }
- h4.centre {
- text-align: center;
- font-family: "Trebuchet MS", Verdana, serif;
- font-size: 12px;
- padding: 5px;
- margin-bottom: 0px;
- margin-top: 0px;
- }
Thanks...