Affiliate Marketing
Forum Search

Reply
 
LinkBack Thread Tools Display Modes

  #1 (permalink)  
Old 19-09-07
Registered User
  
Join Date: Sep 2007
Posts: 582
Thanks: 0
Thanked 0 Times in 0 Posts
cyates is an unknown quantity at this point
  CSS guy needed
Hi Guys,

need a bit of help with CSS...

West Midlands Finance - Birmingham Secured Loans, Coventry Commercial Mortgages, Wolverhampton IVA looks fine in all versions of IE but in firefox it looks totally messed up

have included my CSS code & the div locations on 1 of my pages below if anyone could take a quick peek that would be great

Chris

CSS :
PHP Code:
body {
    background-color: #999999;
    margin: 0px;
    text-align: center;
}
.site {
    height: auto;
    width: 700px;
    margin: 0 auto;
    background-color:#FFFFFF;
    border: 1px solid #333333;
}
.header {
    height: 102px;
    width: 700px;
    margin: auto;
    background-color: #2E2E2E;
}
.headermenu {
    height: 20px;
    width: 700px;
    margin: auto;
    vertical-align: middle;
    padding: 0px 0px 0px 0px;
/*    background-image: url('topmenubg.jpg');*/
}
.headermenutxt {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
    font-family: Verdana;
    font-size: 13px;
}
/* Middle Column*/
.middlecolumn {
    height: auto;
    width: 520px;
    border: 1px dashed #333333;
    background-color: #FFFFFF;
    margin-top: 3px;
    margin-right: 1px;
    float: left;
    padding: 3px;
    margin-left: 10px;
}
.middlecolumntxt {
    font-family: Verdana;
    font-size: 12px;
    color: #000000;
    text-decoration: none;
    /*text-align: center;*/
    }
/* End Middle Column*/

/* Left Column*/
.leftcolumn {
    height: auto;
    width: 165px;
    /*border: 1px solid #666666;*/
    background-color: #FFFFFF;
    margin-top: 3px;
    margin-left: 1px;
    float: left;
}
.menubuttons {
    /*padding: 3px;*/
    padding-top: 3px;
    height: 15px;
    width: 160px;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-right: 1px;
    margin-left: 1px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #000000;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}
/* End Left Column*/

/* Right Column*/
.rightcolumn {
    float: right;
    height: auto;
    width: 144px;
    border: 1px dashed #333333;
    margin-top: 6px;
    padding: 3px 1px 3px 1px;
}
/* End Right Column*/
/* Footer */
.footer {
    /*float:left;*/
    height: 30px;
    width: 700px;
    /*margin: auto;*/
    margin-top: 30px;
    clear: both;
}
.footertxt {
font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
    text-decoration: none;
    text-align: center;
    vertical-align: top;
    }
/* End Footer */
/* Footer Link Block */
.footerLB {
    /*float:left;*/
    height: 25px;
    width: 700px;
    /*border: 1px dashed #999999;*/
    /*margin: auto;*/
    margin-top: 15px;
    clear: both;
}
.footerLBtxt {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #999999;
    text-decoration: none;
    text-align: center;
    }
/* End Footer Link Block */

/* FORM Formatting */
.formtxtfield {
font-size: 9px;
font-family: verdana;
}
.formmenu {
font-size: 10px;
font-family: verdana;
}
/* FONT FORMATTING */
h1 {
font-family: Verdana;
font-size: 12px;
color: #333333;
font-weight: bold;
text-decoration: none;
}
h2 {
font:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
font-weight: bold;
text-decoration: none;
} 
DIV Layout
PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="site">
<div class="header"><img src="headerjpg.jpg" height="225" width="700" alt="West Midlands Finance"><br>
  <div class="headermenu">
  <?php include('headermenu.php');?>
  </div>
</div>

<!-- End Of Header Div -->
<div class="leftcolumn">
<?php include('sidemenu.php');?>
</div>

<div class="middlecolumn">
<?php include('indexcontent.php');?></div>

<div class="footer"><span class="footertxt">&copy;
Copyright</span> <a href="http://www.westmidlandsfinance.co.uk" class="footertxt">West
Midlands Finance .co.uk</a> </div>

<!-- End Site Box Div Below--></div>
</body>
</html>
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Sponsored Links
  #2 (permalink)  
Old 19-09-07
Registered User
  
Join Date: Aug 2006
Location: Hadleigh, Suffolk, UK
Posts: 953
Thanks: 0
Thanked 0 Times in 0 Posts
axod is an unknown quantity at this point
  Re: CSS guy needed
Probably to do with the 'float's, but I can't help past that yet

I'd suggest always developing with a standards compliant browser first though. *much* easier doing it that way around.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #3 (permalink)  
Old 19-09-07
Registered User
  
Join Date: Sep 2007
Posts: 582
Thanks: 0
Thanked 0 Times in 0 Posts
cyates is an unknown quantity at this point
  Re: CSS guy needed
yeah thats what i thought but my BG image for the header menu isnt showing either :S
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #4 (permalink)  
Old 19-09-07
Registered User
  
Join Date: Jul 2007
Posts: 296
Thanks: 0
Thanked 0 Times in 0 Posts
mainlime is an unknown quantity at this point
  Re: CSS guy needed
uncomment background-image in .headermenu and add float:left;

remove the width setting from .middlecolumn

Looks OK with that on FF 2.0.0.6 on my Mac

If you haven't already got them add these Firefox add-ons. They're a Godsend for situations like this :

https://addons.mozilla.org/en-US/firefox/addon/1843
https://addons.mozilla.org/en-US/firefox/addon/60
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Sponsored Links
  #5 (permalink)  
Old 19-09-07
Registered User
  
Join Date: Sep 2007
Posts: 582
Thanks: 0
Thanked 0 Times in 0 Posts
cyates is an unknown quantity at this point
  Re: CSS guy needed
ahh sorry .. my mistake...

there isnt a background image.. remembered i changed it to
.header {
height: 102px;
width: 700px;
margin: auto;
background-color: #2E2E2E;
}

also .. remove teh width ? there is a menu on the left which isnt showing
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #6 (permalink)  
Old 19-09-07
Registered User
  
Join Date: Jul 2007
Posts: 296
Thanks: 0
Thanked 0 Times in 0 Posts
mainlime is an unknown quantity at this point
  Re: CSS guy needed
Quote:
Originally Posted by cyates View Post
also .. remove teh width ? there is a menu on the left which isnt showing
Did you try it? Works for me.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #7 (permalink)  
Old 19-09-07
Registered User
  
Join Date: Sep 2007
Posts: 582
Thanks: 0
Thanked 0 Times in 0 Posts
cyates is an unknown quantity at this point
  Re: CSS guy needed
yeah still doesnt work .. have a look at http://www.westmidlandsfinance.co.uk/sc.bmp
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Sponsored Links
  #8 (permalink)  
Old 19-09-07
Registered User
  
Join Date: Sep 2007
Posts: 582
Thanks: 0
Thanked 0 Times in 0 Posts
cyates is an unknown quantity at this point
  Re: CSS guy needed
some pages worked others were too wide .. so put width back in and changed the float on middle column ( as well as a float left on header )

works fine now

many thanks
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #9 (permalink) &