Some observations:
-
You’re not turning off bullets
-
You’ve got a DIV around the UL for no good reason.
-
floats are inherently display:block, you don’t need to say that.
-
floating LI is often filled with problems… and should be avoided if you’re not going to have dropdowns…
-
declaring height and padding at the same time is ASKING for it to break. 12px top padding + 36 px height == 48 px, which doesn’t fit the 32px container!
-
You don’t have a line-height, and line-heights don’t default the same across browsers or inherit the same by default when you set font-size.
-
Transitional? So it’s in transition from 1997 to 1998? You’ve got attributes like bgcolor in there which have no business on a website that’s being written with CSS.
-
even when developing, I suggest putting your style in an external file. IF you are using an editor that’s worth a damn, you can open up two separate windows to edit side-by-side markup and CSS, making life WAY easier.
-
Got enough inlined presentation? What WYSIWYG saddled you with that, as no human being would write code like that.
-
I’m not 100% sure your heading orders make any sense…
-
Your form is gibberish lacking a hefty chunk of the elements forms are supposed to have…
SO… basically you’ve got a lot of issues on that page. Much of it is just over-thinking things, failing to exploit CSS in a proper manner, and outdated coding techniques. You’re knee deep in presentational HTML – using paragraphs and strong for what should be headings, inlining the same values over and over again inside STYLE attributes you should be declaring just ONCE in your external sheet…
When was this written? It smells of being written sometime between '98 and '03 – specifically because it seems like it was build at the time where the only thing people cared about was “does it work in IE6” – the padding same time as height is a giveaway for that, though that would only be if it lacked the proper doctype… It’s an usual hodge-podge of the old and the new… and not really the best of either. There’s HTML in your XHTML… endless spans and oddball font declarations… it’s… very unusual.
For what you have, the HTML should look something more like this:
<!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"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Mobile Website Design
</title>
</head><body>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Why Go Mobile ? - Video</a></li>
<li><a href="#">F.A.Q.</a></li>
<li><a href="#">Resellers</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Site Map</a></li>
</ul>
<h1>
Mobile Website Network : The Design & Hosting Solution.<br />
<small>Our feature list continues to grow ...</small>
</h1>
<div id="content">
<h2>We Offer You the Most Useful and Flexible Options.</h2>
<p>
Below is an explanation of <em>some</em> of the features we use. It gives you a good idea of what can be achieved. We constantly improve our mobile website design services by adding new features regularly. As a client, you will always be able to have our new features added to your mobile website and they will be professionally merged into your design.
</p>
<img
src="http://mobi6.net/wp-content/uploads/2012/02/feat_nav.png"
alt="Phone showing Affordable Storage Options"
width="265" height="475"
class="trailingPlate"
/>
<h3>Navigation</h3>
<h4>Icon Format:</h4>
<p>
We can arrange your navigation to use either horizontal bars or icons. Here we have used icons.
</p><p>
Below is an example using the horizontal bars.
</p><p>
We have a selection of over 1000 icons in 5 four color versions so we should find something to suit your needs.
</p><p>
In this case we have used icons supplied by our client. They prepared the image using a basic image editor and we re-sized the image to the recommended size of 64px x 64px.
</p><p>
If you would like to have unique icons designed in harmony with your overall website design, we can do that as well.
</p>
<img
src="http://mobi6.net/wp-content/uploads/2012/02/feat_hor_nav.png"
alt="Phone Showing Design Website"
width="251" height="466"
class="trailingPlate"
/>
<h4>Horizontal Bar Format:</h4>
<p>
This is an example of the horizontal bar navigation.
</p><p>
With this method there are a range of possibilities including the use of small icons on the bars.
</p><p>
In this case the client requested straight forward red and black bars to harmonize with the header logo and overall theme of the website.
</p><p>
All of the examples on this page are taken from live websites which we have prepared for our clients.
</p>
<h3>Page Content</h3>
<p>
When creating a mobile website you need a lot less data than your normal webpage holds.
</p>
<img
src="http://mobi6.net/wp-content/uploads/2012/02/feat_txt.png"
alt="Phone Showing Language Choices"
width="260" height="465"
class="trailingPlate"
/>
<p>
Usually just one or two sentences on each page to give the meaning and a call to action.
</p><p>
Of course some sites or particular pages may have longer content, but it is usually much less than the desktop website.
</p><p>
In order to make the process of creating the website as streamlined as possible, we first select the text that we feel is the most important. This is part of the first draft.
</p><p>
In most cases we select what you want but if you desire to select more or less text or different text entirely, you just need to let us know.
</p><p>
Here you see we have summarized the service into three short lines which emphasize the translation company's most important attributes.
</p>
<img
src="http://mobi6.net/wp-content/uploads/2012/02/feat_tables.png"
alt="Phone Showing a Demo List"
width="259" height="472"
class="trailingPlate"
/>
<h3>Tabled Data</h3>
<p>
We will format your data to produce nicely aligned tables or lists.
</p><p>
This can be for price tables, opening times, event calendars, product lists and many other data types.
</p><p>
In this case you see a simple but effective list of translation services which our client offers.
</p>
<img
src="http://mobi6.net/wp-content/uploads/2012/02/feat_tap.png"
alt="Phone Showing Tap To Call"
width="253" height="470"
class="trailingPlate"
/>
<h3>Tap To Call</h3>
<p>
The "Tap-to-Call" feature can be adapted for different trades and professions. Different call to actions make your mobile website more specialized and more client oriented.
</p><p>
The "Tap-to-Call" feature is placed on many pages in order to encourage interaction and make the placing of orders as easy as possible.
</p><p>
The "Tap-to-Call" feature means that your customer does not need to read the phone number to contact you but simply taps on the icon to initiate the call.
</p><p>
In this website the feature is used to encourage visitors to phone in for a quotation.
</p>
<h3>Tap To Text</h3>
<p>
A similar feature is used to to initiate a sms text message.
</p>
<img
src="http://mobi6.net/wp-content/uploads/2012/02/feat_slide2.png"
alt="Phone Showing Slideshow Feature"
width="258" height="466"
class="trailingPlate"
/>
<h3>"Slideshow" Feature</h3>
<p>
We can add slideshows to any page of your mobile site.
</p><p>
This is a great feature as it lets us mix text and images to produce a dynamic show that draws interest.
</p><p>
This is one we did for the New Orleans "Rock 'n' Bowl" Club.
</p><p>
The slideshow displays ten artists together with a description of their performances. It gives prospective visitors to the club a taste of what is available.
</p><p>
The slideshow can be set to rotate every couple of seconds like this one or at a slower pace. Whatever the rate the client just needs to touch the screen to stop the show an read the text.
</p>
<img
src="http://mobi6.net/wp-content/uploads/2012/02/feat_accord.png"
alt="Phone Showing Accordion Feature"
width="254" height="471"
class="trailingPlate"
/>
<h3>"Accordion" Feature</h3>
<p>
With this feature we can place a lot of information on a page in a small space.
</p><p>
This is a another great feature letting us mix text, images, audio and video to create an interactive part of your mobile web site.
</p><p>
How does it work? When you touch one of the title bands, the section opens up like a concertina or accordion. Then when you touch another heading, the first one closes up and the one touched opens out.
</p><p>
Its a great feature and we used it here to display the newest, coolest sports footwear together with the release date.
</p>
<img
src="http://mobi6.net/wp-content/uploads/2012/02/feat_map1.png"
alt="Phone Showing Direction Finder"
width="259" height="480"
class="trailingPlate"
/>
<h3>"Direction Finder" Feature</h3>
<p>
This is a "must have" for all brick-n-mortar businesses as this plugin allows your customers to enter their current address and have their own cell phone tell them how to find you.
</p><p>
As you can see, on a location page we set out your address. This generates the map shown below.
</p><p>
If someone needs directions, they enter their current location, or press the button to take the gps location from their phone.
</p><p>
Then and a list of directions is displayed together with a new map showing the route overlaid.
</p>
<img
src="http://mobi6.net/wp-content/uploads/2012/02/feat_social.png"
alt="Phone Showing Social Widget"
width="257" height="473"
class="trailingPlate"
/>
<h3>"Social Widget" Feature</h3>
<p>
We can add special icons which link to social media sites at Facebook, Twitter, Google+, YouTube, and LinkedIn.
</p><p>
This feature helps us place all your social icons in one place. This is usually at the bottom of your first page or on your contact page.
</p><p>
Nowadays it's important to let your own customers spread the word about your business.
</p><p>
Good news travels fast - especially when you help it flow!
</p>
<h3>"Contact Forms" Feature</h3>
<p>
Contact forms allow anyone to send you an email via their cell phone. This is a huge advantage as it means that you can collect interested peoples email addresses who voluntarily give them. Enables you to build an e-mailing list.
</p>
<h2>Marketing Features</h2>
<img
src="http://mobi6.net/wp-content/uploads/2012/02/feat_coupon1.png"
alt="Phone Showing Coupons"
width="260" height="466"
class="trailingPlate"
/>
<h3>"Coupons" Feature</h3>
<p>
Coupons allow you to boost sales in a controlled way. By selecting times that are otherwise low in sales you make fuller use of resources that you are already paying for.
</p><p>
A restaurant could offer a 20% discount on Wednesday evenings. A Gardening service provider could offer coupons in return for recommending a friend. There are many methods.
</p><p>
As you see here, you can group your coupons by month. This encourages more interaction with your mobile website.
</p><p>
Our coupons have controllable open and expire dates. This gives you peace of mind, knowing that coupons will expire on a certain date.
</p><p>
Expire dates also keep your customers coming back to your site to check what your latest offers are available. In addition it gives you a subject to discuss when you are marketing to them.
</p><p>
Notice how we use the coupon in conjunction with the "Tap-to-Call" feature.
</p>
<img
src="http://mobi6.net/wp-content/uploads/2012/02/feat_coupon2.png"
alt="Phone showing more coupons"
width="251" height="454"
class="trailingPlate"
/>
<p>
Coupons can be placed on a "hidden" page. This may seem strange at first, but it is a great way to build club membership.
</p><p>
You simply only give access to the coupon page to people who sign up to your elite members club. Members get emailed emailed or "sms" ed every couple of weeks with special discounts that appear on the private "hidden" pages.
</p><p>
A QRcode could be printed on your menus so that clients can easily open the membership join up page.
</p>
<img
src="http://mobi6.net/images/hidden.jpg"
alt="Hidden Pages"
width="251" height="454"
class="trailingPlate"
/>
<h3>Hidden Pages</h3>
<p>
"Hidden Pages" allow you to have pages that are only available by direct-linking. These pages are hidden from both the navigation menus and the site search.
</p><p>
For example, a "Hidden Page" could be a coupon/discount page that can only be accessed by scanning a QR Code, or an access page after entering an email address - ideal for a building up a marketing list.
</p>
<img
src="http://mobi6.net/images/qrcode.jpg"
alt="QR Codes"
width="251" height="454"
class="trailingPlate"
/>
<h3>"QR Codes" Feature</h3>
<p>
As part of the Marketing Package we will provide you with the QRCode for your website and also special QRCodes for any internal mobile website that you need.
</p><p>
We can specify any individual page as the landing page - this gives you the ability to target specific groups of people and direct them to a mobile web page containing an offer tailored to them.
</p><p>
Combining the QRcode system with the "hidden pages", the coupons and mobile auto responders creates a power set of mobile marketing tools.
</p><p>
Customers just need to point their cellphone camera at the image to be taken instantly to the specific website page your are promoting.
</p>
<img
src="http://mobi6.net/wp-content/uploads/2012/02/feat_seo.png"
alt="Mobile SEO"
width="257" height="469"
class="trailingPlate"
/>
<h2>SEO Enhancement Package</h2>
<p>
Each page of your mobile site can be tuned up for the big Search Engines. It takes a little, but the results are worth the effort.
</p><p>
For each page we will add SEO enhancements that increase your website search engine rankings. These are all on-page improvements and enhancements with META tags, titles, headings and keywords which polish up your presentation for the search engines.
<img src="http://mobi6.net/images/seo.jpg" alt="SEO Enhancer" />
</p>
<h3>Mobile Sitemaps</h3>
<p>
Most people don't even know that there are such things as "Mobile Sitemaps", let alone how to create them. Google are using them to locate your mobile site and add the pages of your mobile site to their mobile search listings. As part of the SEO enhancements we will create the mobile sitemap for your mobile website.
<img src="http://mobi6.net/images/sitemap.jpg" alt="Sitemaps" />
</p>
<hr />
<p>
<strong>We would like to prepare a draft mobile website for you, No commitment on your part.</strong> Simply complete the contact form below and we will provide you with a working mobile website for you to consider.
</p>
<form action="http://mobi6.net/contact.php" method="POST" name="main_fm">
<fieldset>
<label for="x_contact">Your Name:</label><br />
<input type="text" id="x_contact" name="x_contact" value="" size="25" /><br />
<label for="x_email">Your Email Address:</label><br />
<input type="text" id="x_email" name="x_email" value="" size="25" /><br />
<label for="x_website">Your Website url:</label><br />
<input type="text" id="x_website" name="x_website" value="" size="25" /><br />
<label for="x_mess">Message:</label><br />
<textarea id="x_mess" name="x_mess" rows="4" cols="30"></textarea>
</fieldset>
<div class="submitsAndHiddens">
<input class="button2" type="submit" value="Send Message." />
<input type="hidden" name="talk" value="yes" />
<input type="hidden" name="x_check" value = "5" />
<input type="hidden" name="x_agent" value = "mobi6" />
</div>
</form>
<p class="specialOffer">
<em>Take advantage of this special <u>free</u> offer:<br />
We will prepare a draft mobile website for you.</em>
<strong>No commitment on your part.</strong><br />
Simply complete this contact form above and we will provide you with a working mobile website for you to consider.
</p>
<!-- #content --></div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Why Go Mobile ? - Video</a></li>
<li><a href="#">F.A.Q.</a></li>
<li><a href="#">Resellers</a></li>
<li><a href="#">Resources</a></li>
</ul>
<div id="subContent">
<h2>Introducing Mobile Websites</h2>
<p>
The majority of websites are not at all mobile friendly. Its not surprising because they were built for the pc monitor environment which means that when viewed on a mobile device the site has tiny unreadable writing and meaningless slow loading graphics.
</p><p>
According to Google, 61% of website visitors will not return if they had issues viewing it on their phone and 40% will immediately leave if your site if is not properly formatted for mobile devices.
</p><p>
In March 2011, Compuware came up with similar results: 63% are unlikely to return to your mobile site if they had trouble or if your site was too hard to use. 42% said they would visit a competitor's site instead, and 19% said they would have a negative overall perception of your business if they had a bad mobile experience with your site.
</p>
<h2>Compare These Websites</h2>
<img
src="http://mobi6.net/images/mob_vs_norm2.jpg"
alt="Comparison Chart"
width="674" height="459"
class="plate"
/>
<h2>
Our goal is to turn your mobile visitor's frustration into a satisfying and fulfilling experience.
</h2>
<p>
A good mobile site has less data to load and you no longer have to scroll back and forth while reading a line of text. It adjusts images so they fit your screen and simplifies the layout. Navigation is easy to understand and <strong>fast</strong> to execute.
</p>
<h2>Our Custom Build Service</h2>
<p>
We take your existing website design with your individual brand and extend your brand, your marketing into the mobile arena. Your mobile site therefore harmonizes with and completes and your existing online investment.
</p><p>
We work in an affordable budget and provide you the best Mobile Friendly Website that can help your business. Below are the mobile website packages we offer which are fully compatible with all the latest smart phones as well as the non-smart phones.
</p><p>
Your new mobile website hosted on our servers and directly linked to your main website will ensure that you don't miss out on the huge increase in traffic and purchasing that is now taking place in the mobile arena. Our work is fast, depending on the features and packages you choose, your mobile site is usually ready with in 3-5 days.
</p>
<!-- #subContent --></div>
</body></html>
Though I’m guessing wildly as to the proper heading orders and placements of the images. EVERYTHING else you are doing belongs in an external stylesheet.
For just the menu, lose the div, move the class to the UL, and try this for the CSS:
.menu{
list-style:none;
height:36px;
text-transform:uppercase;
font:bold 12px/16px arial,helvetica,sans-serif;
background:url(images/mainMenu.png) 0 0 repeat-x;
border-bottom:4px solid #004c99;
border-top:1px solid #74b0c6;
}
.menu li {
display:inline;
}
.menu li a {
float:left;
color:#6d7078;
text-decoration:none;
font-weight:bold;
padding:12px 20px 8px; /* 12 top + 8 bottom + 16 line-height == 36 */
background:url(images/mainMenu.png) 0 -36px no-repeat;
}
.menu li a:active,
.menu li a:focus,
.menu li a:hover{
/* active and focus so keyboard navigators aren't left out in the cold */
background-position:0 -72px;
}
Again, that assumes this for the markup:
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Why Go Mobile ? - Video</a></li>
<li><a href="#">F.A.Q.</a></li>
<li><a href="#">Resellers</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Site Map</a></li>
</ul>
Doesn’t need a div.
Oh, and the image would be a single file instead of three – just make a 1x108 image, put ‘off.gif’ in the top third, ‘divider.gif’ in the middle and ‘hover.gif’ on the bottom. Two less handshakes, and probably a smaller overall filesize too.
