3 replies [Last post]
firstexact
Offline
newbie
Last seen: 14 years 7 weeks ago
Joined: 2007-11-29
Posts: 3
Points: 0

2 x 2 div grid in Firefox going wrong
--------------------------------------------------------------------------------

Hi guys,

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
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.firstexact.co.uk

Hampshire Southampton Portsmouth Online Internet Marketing | Search Engine Optimisation | PPC Campaign Management | Affiliate Marketing


Onsite Online Marketing :: PPC Management :: Search Engine Optimisation :: Lead Generation :: Affiliate Marketing :: Email Marketing :: Website Photography :: Website Copywriting :: E-Marketing Plans












Cost effective Internet Marketing for your web site & for your business.


Everyone doing business online today realises that without good Internet marketing, your web site may as well not exist.



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.



First Exact was established to provide a alternative to costly SEO companies, offering a complete Internet Marketing service under one roof including:



PPC strategy and management

SEO (on and off page), Link Building

Lead Generation & ROI Tracking

Affiliate Marketing

Assertiveness Training & Team Building

Copywriting

Project Management + E-Marketing Plans

Web site Copywriting / Web site Photography














Onsite Online Search Engine Marketing


We believe in offering you transparency, plain English explanations of our methods and full justification of our fees.



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.



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.







Please note this site is best viewed in Internet Explorer.


We apologise for the formatting in Mozilla Firefox.



To find out more about any of FirstExact’s services, our rates or contracts, please get in touch via the form below.

Name:

Company:

Location:

Email:

Contact Tel:

Mobile Tel:

Requirements: ** Please select the most appropiate option in this list ** ************************************************** **** Our web site is live, we need to start getting enquiries. We want to try Pay per Click. How de we get started? We don't know about Pay per Click. Tell us more! We want to find more online sites that send us more enquires. ************************************************** **** Our site has some SE rankings, but we need a lot more! We want to try Affiliate Marketing. How do we get started? We don't know about Affiliate Marketing. Tell us more! Our web site is live, and needs to be found on Google. ************************************************** **** Improve communication with prospects and existing customers. We don't have an online marketing strategy or clear objectives. We need to measure cost of each online enquiry/conversion. Our staff need the confidence to convert the inbound leads. ************************************************** **** Our staff need to work better. We need a team day out! Make what we say on/off line, easier to read by our customers. Our site could benefit from inexpensive commercial photography. None of the above apply, we need something else for our site! ************************************************** ****


CSS

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...

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 27 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

First thing i noticed

First thing i noticed was

throws IE6 into quirks mode.
Doctype should be the very first thing rendered.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

firstexact
Offline
newbie
Last seen: 14 years 7 weeks ago
Joined: 2007-11-29
Posts: 3
Points: 0

Doctype

Thanks Deuce,

I had noticed that, but I have never known what it is or where is came from. Dreamweaver 8 seemed to just put it there..I'll try taking it out..

I have tried CSS/Html validators but there were only warnings about colour, and thebr tag seems to be moaned out for NEtscape. What I think has happened is that I have got my margins and padding wrong..
I am just trying to match the structure of my logo at firstexact, by getting

header
nav
1 2
3 4
nav
footer

firstexact
Offline
newbie
Last seen: 14 years 7 weeks ago
Joined: 2007-11-29
Posts: 3
Points: 0

ok by removing that

ok by removing that line,

in IE7

i get

header
nav
12
3
4
nav
footer

and in FF

head
nav
1
2
3
4
nav
footer