I installed the most popular browsers (IE, FF, Chrome, Opera, and Safari) on my computer to see how my website, http://www.strongfamilies.us, appears. My site appears correctly on all browsers except for Opera. For some reason, the text links located in the navigational bar to the left of each page are scrunched together without spaces in between leaving too much space between the live help button near the bottom and the end of the bar. Out of all 5 browsers, this problem only occurs in Opera. This isn’t a huge issue but it would be nice to have the site view consistently in each browser. Does anyone have any recommendations as to how I could fix this issue? Thanks.
If you remove display: inline from the LIs, Opera will display more like the other browsers, and I wouldn’t be using that on block elements anyway.
The other browsers will change a bit too, but this gives a better basis for styleing the list the way you want.
Perhaps give a line ehight to the LIs to space them out a bit.
#main_nav ul li {
[COLOR="Red"]display: inline;[/COLOR] /* remove */
list-style: none outside none;
margin: 5px;
padding: 3px;
width: 220px;
}
Hi Ralph,
Thank you so much for your reply. Can you please tell me which file and folder this code can be located? I can’t seem to find it. Thanks.
Yes, it’s in the nav.css file, line 21 (or close to that). I recommend you get the Firebug addon for Firefox, as it lets you look under the hood like this in powerful ways. To answer your question, I just right-clicked on a list item and chose Inspect Element. The in the right panel at the bottom is shows the styles applying to that element, which file they are in and on what line.
Mind you, Safari, Chrome and Opera have similar tools built into them as well.
Thank you so much Ralph. I changed the code as you recommended and now the site in Opera is identical to the site viewed in the other browsers. I also installed Firebug on FF.
While there are no specific things I’m seeing wrong that would be isolated to just Opera (and as a Opera user I’m sensitive to this stuff), top to bottom the page is filled with issues I’d be addressing LONG before worrying about putting a layout/CSS on the markup.
Specifically, the total lack of semantics and some outright “what the” stuff in the code.
For example… the total lack of heading tags and DIV’s with classes being used for headings.
<div class=“title”>Building Strong Families National Seminars</div>
Should probably be a h2 without a class.
<div class=“title”>Our Mission Statement</div>
Should probably be an h3 without a class. If you are using something like class=“title” or class=“heading”, you probably need to throw away some code and practice some semantics.
DIV’s for appearance that should be applied at the CSS level… for example:
<div class=“seperator”>
<div class=“icon”></div>
<div class=“title”>Our Mission Statement</div>
</div>
You don’t actually HAVE a separator (or even clearing) being applied, and if you did that could be border-top on the actual content element. The “icon” is just a little dot, you could/should be applying that as a background-image on the content element. So in addition to axing the “title” there is no reason for that to be more than
<h3>Our Mission Statement</h3>
EVERYTHING else you are doing there CSS can/should handle.
Line breaks for spacing – that’s padding’s job. This:
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Is bad coding practice.
Presentation in the markup – for example this:
style="position: absolute;
top: 155px;
left: 50px;
color: #663;
font-size: 16px;
padding-left: 10px;
letter-spacing:4px;
font-weight: 500;"
has no business being in the html, I would also avoid using numbered font-weights since they are unreliable cross-browser.
Invalid table/form - First off it’s a form, NOT a table, so there’s no reason for it to be in a table. Furthermore, you are using spans for what should be labels, table for what should be a single fieldset, table to create a layout that frankly is a single line built with nothing but inline-level elements, so what do you need the column/table code for in the first place?!? You also have a mess of DIV and span before it doing what should probably be a LEGEND inside the FIELDSET.
If you use the PROPER form elements in the proper order – FORM, FIELDSET, LEGEND, LABEL… it’s a lot easier to deal with forms and often less code.
Table for nothing – here’s a tip, if a table only has one TD per TR, there is ZERO reason to even be using a table in the first place.
From there we have zero graceful degradation when images are disabled, slew of useless meta tags that do nothing but waste bandwidth (anything more than keywords and description should go in the trash), vague/meaningless classnames on elements that shouldn’t NEED classes in the first place (like “style9”), and this is a new website, right? If so what’s up with the tranny doctype? Transitional is for supporting old/outdated/half-assed coding techniques, NOT for building new websites.
I say this a lot – CSS and a layout is only as good as the markup it’s applied to, and this markup has problems! It’s not semantic, doesn’t follow the rules of building HTML, and frankly looks typical of the output I’d expect from some WYSIWYG like Dreamweaver… which again the only thing you can learn from Dreamweaver is how NOT to build a website.
Though HTML tidy? Odd, thought that was a flat editor and auto-reformatter, guess not. Good rule of thumb anything that makes a GENERATOR meta is probably rubbish.
You also seem to have nofollow on a bunch of internal links that are follow elsewhere on the page – what exactly is that supposed to accomplish? (guess that goes with the robots META that’s just redeclaring the defaults?)
Design-wise dynamic fonts wouldn’t hurt since it’s effectively illegible without diving for the zoom (px + fonts on content == /FAIL/), you’ve got fixed width for no really good reason (not that there ever is one, though switching to fluid or semi-fluid means trashing the header – which is OK IMHO as it’s too ‘busy’.) though I will say at least you don’t have any color contrasts that are hard to read.
I’d also strip out the ‘powered by’ thing as nobody cares, likewise lose the hidden stats counter, that’s what server logs and server software like webalizer or analog are for… ESPECIALLY since you appear to have two… three? different ones running… If you’re going to use one, pick one, not three. (NOT that you should need any – biggest scam on the planet)
All this adds up to 10k of markup doing 7k’s job… To be fair, I’ve seen far, FAR, FAR worse – even with all the above problems this isn’t too bad… but really there’s no reason for the markup 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="keywords"
content="children,parenting,behavioral,discipline,problems,bullying,seminars,teaching,classes,education"
/>
<meta
name="description"
content="Building Strong Families National Seminars facilitates powerful educational conferences, parenting webinars, and family-related products with topics geared toward strengthening, empowering, and enhancing the family, schools, and the community."
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Building Strong Families National Seminars - Online parenting classes, Bullying conference
</title>
</head><body>
<div id="pageWrapper">
<h1>
<span><span>
Building
<span>Strong
<span>Families
</span>
</span>
</span>
National Seminars
</span>
<small>Strengthening, Enhancing, and Empowering Families, Schools and the Community</small>
<b><!-- image replacement --></b>
</h1>
<div id="contactInfo">
Toll Free: 866-544-4075
Email: <a href="mailto:Info@StrongFamilies.us">Info@StrongFamilies.us</a>
<!-- #contactInfo --></div>
<form method="post" action="#" id="newsletter">
<fieldset>
<legend><span>Newsletter Sign up</span></legend>
<label for="newsletterName">Name:</label>
<input name="name" type="text" id="newsletterName" />
<label for="newsletterEmail">Email</label>
<input name="email" type="text" id="newsletterEmail" />
<input name="submit" type="submit" id="newsletterSubmit" value="Sign Up" />
<input type="hidden" name="Form" value="Newsletter Submission"/>
</fieldset>
<p>
If you would like to sign up to receive updates, product, and seminar information.
<p>
</form>
<div id="sideBar">
<div class="borderTop"></div>
<ul id="mainMenu">
<li><a href="/index.php" class="active">Home</a></li>
<li><a href="/sitemap.php">Site Map</a></li>
<li><a href="/contact.php">Contact Us</a></li>
<li><a href="/seminars.php">Webinars</a></li>
<li><a href="/spreadtheword.php">Having Seminars presented at your organization</a></li>
<li><a href="/biography.php">About the Trainer</a></li>
<li><a href="/participantreg.php">The Standing Up to<br />Bullying Conference</a></li>
<li><a href="/suddencomp.php">Sudden Compliance<br />Program</a></li>
<li><a href="/links.php">Links</a></li>
<li><a href="/games.php">Games</a></li>
<li><a href="/news/">News</a></li>
<li class="feed">
<a href="http://feeds.feedburner.com/BuildingStrongFamiliesNationalSeminars">
Subscribe to our Feed
</a>
</li>
<li><a href="#">Come follow us!</a></li>
</ul>
<div id="socialbar">
<a href="http://www.facebook.com/pages/Building-Strong-Families-National-Seminars/343158610842?v=wall">
<img src="/fb_icon.png" alt="FaceBook"/>
</a>
<a href="http://twitter.com/FamilySeminars">
<img src="/twitter_icon.png" alt="Twitter" />
</a>
<!-- #socialBar --></div>
<div id="volusionLiveChat">
<a href="http://www.volusion.com/livechat_software.asp">
Free Live Chat Software
</a>
<!-- #volusionLiveChat --></div>
<script type="text/javascript" src="https://livechat.volusion.com/script.aspx?id=117906"></script>
<div class="borderBottom"></div>
<!-- #sideBar --></div>
<div id="content">
<div class="flashPlate">
<script
src="http://h1.flashvortex.com/display.php?id=3_1276286447_2882_330_0_468_60_9_95"
type="text/javascript"
></script>
<!-- .flashPlate --></div>
<h2>Building Strong Families National Seminars</h2>
<img
src="images/Family15.jpg"
width="280" height="230"
alt="A Family Together"
class="trailingPlate"
/>
<h3>Our Mission Statement:</h3>
<p>
Serving families, individuals, parents, couples, and professionals, Building Strong Families National Seminars facilitates powerful educational conferences, seminars, parenting webinars, and offers family-related products with topics geared toward strengthening, empowering, and enhancing the family, schools, and the community.
</p>
<img
src="images/Family3.jpg"
width="280" height="230"
alt="A Mother's Love"
class="leadingPlate"
/>
<h3>What we do:</h3>
<p>
We facilitate presentations and offer family-related products that are enlightening, inspiring, encouraging, motivating, educational, and aids in helping individuals overcome personal obstacles in their life.
</p><p>
All presentations feature a powerful multi-media presentation involving lecture, discussion, question and answer, slides, video clips, and outlines/handouts of relevant topic information. <a href="seminars.php">More on parenting webinars and strengthening families.</a>
</p><p>
Presently, our focus is on topics such as child misbehavior, child discipline, responsible parenting, parenting resources, bullying prevention, school violence prevention, and child bullying.
</p>
<img
src="images/Family11.jpg"
width="200" height="230"
alt="Father and Son"
/>
<p>
In addition to our prepared presentations, we can also customize or prepare a presentation according to your specifications.
<p><p>
We also accept presentation requests in the event that a presentation is scheduled at an inconvenient date/time.
<p><p>
We provide seminars/conferences onsite or as a web conference (Webinar).
</p><p>
For a list of available Webinars, onsite seminars/conferences or products, please click on any of the appropriate links to the left of this page.
</p>
<!-- #content --></div>
<div id="footer">
<div>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="seminars.php">Webinars</a></li>
<li><a href="biography.php">About</a></li>
<li><a href="otherpages.php">Other Pages</a></li>
<li class="last"><a href="sitemap.php">Site Map</a></li>
</ul>
Call Us Toll Free: 1-866-544-4075<br />
<a href="mailto:info@strongfamilies.us">info@strongfamilies.us</a>
</div>
© 2008, Building Strong Families National Seminars<br />
All rights reserved.
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
… and I’d even consider taking an axe to the silly flash banner nonsense. Waste of bandwidth, look hideous, get rid of it.
EVERYTHING else you are doing on that page belongs in an external stylesheet, preferably with a “media” attribute targeting “screen, projection, tv” so you aren’t sending screen formatting to things like Print where it’s more headache than it’s worse. Thankfully on those devices that don’t use that media target the semantic markup gives you a fairly attractive (and ink/bandwidth/mememory saving) output.
If I have time later I’ll put together the CSS to show exactly what I mean.