Ok, what we have here is a PERFECT example of what I mean when I talk about DIV and classes for NOTHING. What makes me say this? Simple, if every single LI inside a classed UL is getting the same class, they don’t need classes on them! if every single anchor inside a classed ul is getting the same class, they don’t need classes on them!!!
It’s called inheritance.
Likewise looking at the layout on the page the Div.navbar serves absolutely no good purpose; or at least does nothing that couldn’t be done to the UL directly.
Finally, constantly dropping in/out of php parsing mode just results in slow, bloated, hard to follow code, so that should be gutted as well… even sillier is dropping out to an IF to do an echo… You should REALLY stop using double quotes in your php so the code runs faster, you can make the server side code AND markup clearer to read/easier to maintain since you can get white space preservation in your output, and so you can put double quotes in the markup. Also, this isn’t HTML 3.2, you should have quotes around ALL values, not just some.
Oh, and there’s also NO reason to be bothering to say UTF-8 on your CSS since valid CSS is inherently ASCII7 only… meaning the character encoding doesn’t matter since EVERYTHING other than UTF-16 has ASCII7 as a subset.
echo '
<ul class="mainMenu">
<li><a href="',(
isset($linkclaimpage) ? $linkclaimpage : '#'
),'">Start A Claim</li>
<li><a href="',(
isset($linkclaimpage) ? $linkclaimpage : '#'
),'">Our Services</li>
<li><a href="',(
isset($linkclaimpage) ? $linkclaimpage : '#'
),'">Compensation</li>
<li><a href="',(
isset($linkclaimpage) ? $linkclaimpage : '#'
),'">FAQ</li>
<li><a href="',(
isset($linkclaimpage) ? $linkclaimpage : '#'
),'">Blog</li>
<li><a href="',(
isset($linkclaimpage) ? $linkclaimpage : '#'
),'">Contact</li>
</ul>';
Should be all you need to be doing in your php for markup.
Now, MOST of your problem likely comes from putting the float on the LI – this is NEVER reliable and should generally be avoided unless doing cascading menus. It’s a lot simpler to just set them to display:inline to remove them from block-level flow, and then just deal with the anchors for positioning – NOT that I’d be trying to use relative positioning on them which is ALSO part of what’s causing your headaches - text-align:center and inline-block would likely be much better behaved… and there should be no reason to be saying :link and :visited when the parent property will set those.
Also, condensing your properties down to one line is likely why you keep re-declaring the same values over and over again for no good reason in your CSS file. NEVER understood the obsession with doing that. I would also advise restating the face and line-height so that you are 100% sure it’s set properly – thankfully condensed properties make that take no more code than the separated ones you are using – Id’ ALSO avoid declaring a height and let padding and line-height add up to the desired size… and if you set just “A” instead of “:link” and “:visited” you won’t have to restate the white color on the hover states… or the font-size, or the height you shouldn’t be declaring in the first place.
#mainMenu {
list-style:none;
text-align:center;
background:#6499c1;
}
#mainMenu li {
display:inline;
}
#mainMenu a {
display:-moz-inline-block;
display:-moz-inline-box;
display:inline-block;
padding:8px 30px;
text-decoration:none;
text-transform:uppercase;
font:bold 14px/16px arial,helvetica,sans-serif;
color:#FFF;
background:#69C;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
background:#58A;
}
Might have to play with the side padding to compensate for the extra space between the inline-level elements.
Looking at the full page – it’s riddled with bloated code that’s bound to cause headaches cross browser. I’m actually a little shocked it renders consistently between Opera and FF. I mean simple things like:
<div class=“contentleftheader”><p class=“contentheader”>no win no fee solicitors</p></div>
Inner class for nothing, that’s NOT a paragraph so why is it marked up as a paragraph and not as a numbered heading tag?!??
<!-- START HEADER –>
<div class=“header”>
<div class=“logo”><a href=“index.php”><img src=“images/logo8.png” alt=“cash4aCLAIM.com”></a></div>
The comment placements in your document are probably tripping IE6 rendering bugs, given the layout there is NO reason for that DIV#header to even exist, DIV#logo should probably be the parent H1 tag (since no other heading on the page would make a good master) with TEXT inside it and a image replacement technique on it, since that image is PRESENTATIONAL in nature and as such has no place in the markup… Then there’s the broken form after (no block level internal wrapper, ‘for’ needs to point at an ID, the stuffed keywords meta that’s likely being ignored by search engines (should be 8-9 words in 80 characters or LESS!), pointless TITLE meta, IE conditional nonsense with no media types on the CSS, static scripting in the markup, paragraphs around non-paragraph elements, double breaks doing paragraph’s job, total lack of logical document structure/headings, etc, etc…
This is a NEW site, right? If so, why is it a tranny? Transitional is for supporting old/outdated/half-assed coding techniques where you’re basically writing HTML 3.2 and slapping a doctype on it – it is NOT for building new pages.
Bottom line, CSS is only as good as the markup it is applied to, and this markup is, well… It needs to be thrown away and started over using semantic markup, separation of presentation from content, and a whole lot less classes.
Apart from the scripting, there’s not a whole lot of reason for the markup you have for that page to be much more than:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<meta
name="description"
content="Cash4aClaim are legal representatives who aim to secure you financial compensation for injuries that were not your fault and you keep 100% of the compensation!"
/>
<meta
name="keywords"
content="injury,solicitor,personal,claim,work,accident,whiplash,free"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Accident Claims - Cash4aCLAIM.com
</title>
</head><body>
<div id="pageWrapper">
<div class="borderTop"></div>
<h1>
Cash4aClaim
<span></span>
</h1>
<form method="post"
action="callbackthankyou.php"
id="callbackform"
>
<fieldset>
<label for="callbackname">Name:</label>
<input
type="text"
name="callbackname"
id="callbackname"
maxlength="25"
/><br />
<label for="callbackno">Contact Number:</label>
<input
type="text"
name="callbackno"
id="callbackno"
maxlength="11"
/><br />
<input type="submit"
name="callbacksubmitted"
value="Call Me Back"
class="submit"
/>
</fieldset>
</form>
<ul id="mainMenu">
<li><a href=claim.php>Start A Claim</a></li>
<li><a href=services.php>Our Services</a></li>
<li><a href=compensation.php >Compensation</a></li>
<li><a href=faq.php>Frequently Asked Questions</a></li>
<li><a href=blog.php>Blog</a></li>
<li><a href=contact.php>Contact</a></li>
</ul>
<div id="columnWrapper">
<div id="content">
<img
src="images/homeBanner.png"
alt="Make a Claim Today and Recieve Up to £200 Cash!*"
class="banner"
/>
<h2>no win no fee solicitors</h2>
<p>
Have you been the victim of an accident and left with no support or compensation? That's where Cash4aClaim comes in! We are a dedicated and trained team of legal specialists, based in the North West, who want to provide you with the support and help you need to get the compensation you deserve on a <strong>No Win, No Fee</strong> basis where you keep <strong>100% of the compensation!</strong>
</p><p>
Cash4aClaim are experienced representatives in matters of personal injury from road and traffic accidents, slips, trips, falls and injuries and accidents in the workplace meaning you are always getting the best support in your case. In fact we are so certain that we can get you suitable compensation that we guarantee you 100% of the compensation with Cash4aClaim recovering all costs from the other side. You keep <strong>ALL THE COMPENSATION</strong> plus we at Cash4aClaim give you an extra <strong>£200</strong> just for using us in your case! So that's...
</p>
<ul class="arrowheads">
<li>
100% of your compensation, <strong>GUARANTEED</strong>.
</li><li>
<strong>£200* BONUS CASH</strong> on top of any compensation paid, just for using us!
</li><li>
All costs recovered from the other side!
</li>
</ul>
<h2>Maximum Payout</h2>
<p>
Cash4aClaim strive to get you the maximum payout for your injury whatever it may be with compensation ranging from £800 to <strong>£250,000!</strong>. The total amount payable ultimately depends on the type and severity of your injury and the circumstances of your accident but we always aim to get you a <strong>Maximum Payout</strong> for your peace of mind.
</p><p>
It's our duty to make sure the compensation you receive covers the cost not only of your physical injury but the discomfort and inconvenience it has caused you and any financial damages you have incurred.<br/> <br/>We deal with your case promptly every time and make sure you always stay informed on our progress.
</p>
<h2>Start your claim today</h2>
<p>
So are you a victim of an accident that wasn't your fault? Are you currently suffering from an injury or have you suffered an injury in the past and do you believe you deserve compensation? Then take the first step to getting compensation you deserve and justice you need by simply completing our <a href=claim.php >free, no obligation form</a>. It takes less than a minute and we will aim to get in contact with you as soon as possible! It really is that easy to get on the ladder to getting significant compensation for your pain!
</p><p>
We won't force you to pursue a case if you change your mind, the case is all about you and we are here to make sure the process is as simple and straight-forward as possible so get in touch today.
</p>
<h2>Latest Compensation News</h2>
<p>
Some legal news can go here
</p>
<!-- #content --></div>
<div class="sideBar">
</h2>
<table class="claimWorth">
<caption>What is my claim worth?</caption>
<thead>
<tr>
<th>Injury</th>
<th>Up To</th>
</tr>
</thead>
<tbody>
<tr>
<th>Ankle</th>
<td>£999</td>
</tr><tr class="even">
<th>Knee</th>
<td>£999</td>
</tr><tr>
<th>Ankle</th>
<td>£999</td>
</tr><tr class="even">
<th>Ankle</th>
<td>£999</td>
</tr><tr>
<th>Ankle</th>
<td>£999</td>
</tr><tr class="even">
<th>Ankle</th>
<td>£999</td>
</tr><tr>
<th>Ankle</th>
<td>£999</td>
</tr>
</tbody>
</table>
<p class="disclaimer">
Compensation amounts extracted from JSB version 9. Total amount depends on severity of injury.
</p>
<a href="claim.php" title="Start Your Claim Now" class="startAClaim">
Start Your Claim Now<span></span>
</a>
<h2>What our clients say...</h2>
<blockquote>
<p>
"I fell into an unmarked hole that some council workmen had dug, slamming my chest and arm against concrete and trapping my leg. Cash4aClaim managed to secure £36,000 in compensation which I was fairly chuffed at. Would definitely do business with them again."
</p>
<img src="images/test4.png" class="trailingPlate" />
<p>
<cite>Public Works Injury (2010)<br/>Mr R, Ashton</cite>
</p>
</blockquote>
<!-- #sideBar --></div>
<!-- #columnWrapper --></div>
<div id="footer">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href=claim.php class="footer">Claim Now</a></li>
<li><a href=faq.php class="footer">F.A.Q.</a></li>
<li><a href=about.php class="footer">About</a></li>
<li><a href=contact.php class="footer">Contact</a></li>
<li><a href=legal.php class="footer">Legal Notice</a></li>
<li><a href="http://www.webexposure.co.uk"class="footer">SEO Design</a></li>
</ul>
© cash4aCLAIM.com 2010 | Web Exposure Design
<!-- #footer --></div>
<div class="borderBottom"></div>
<!-- #pageWrapper --></div>
<p class="footerDisclaimer">
*Payment made only upon successful conclusion of your claim following the verification and commencement of action against a third party insurer/organisation/individual leading to payment of compensation. We will then pay you up to an additional £200 for using cash4aclaim as your legal representative.
</p>
</body></html>
If I have time later I’ll toss together the CSS for that to show you what I mean.
