Hello,
I have strange situation going on with a site. It looks right on all the browsers on my computer (Firefox, Safari, IE) but on some other computers, it looks messed up. These people are using the same browsers. I used the HTML5 boilerplate. Could that have anything to do with it? The site is:
http://a3autoimmunity.org
http://a3autoimmunity.org/css/style.css
Thanks so much.
P.S. I even had one person saying the content was showing up, but not the styles. I’m stumped.
[FONT=Verdana]It’s looking pretty broken in Opera, with the horizontal menu not going horizontal but disappearing down vertically, and the text The A3 alliance is committed to raising awareness, educating and advocating on behalf of patients, healthcare all scrunched up and overlaid.
It looks similar (although subtly different) in Chrome, Safari and Firefox – but total and utter disaster in IE8 (all browsers except IE8 are latest versions).
I’m not sure exactly what the problem is, but your CSS is a bit buggy: see validator report. You can ignore the warnings about -webkit- and -moz- properties, because they will not be causing problems for other browsers. I’m concerned about the use of * in property names – looks like an IE7 hack but I don’t know if that’s causing other browsers to choke. I would check those out first.
Another point is that the logo looks fine on some browsers but awful on others. You really shouldn’t be resizing images in the browser, especially not when scaling by a factor like 9.3 (powers of 2 you’re probably OK, anything else you should avoid). You’ve done well to get the full size image down to 37k so you’re not wasting masses of bandwidth, but browsers are notoriously mediocre at resizing large images – much better to do it in a proper graphics package so you get nice smooth anti-aliasing done well, and then just use that smaller image instead.[/FONT]
Stevie,
I implemented your suggestions, and it worked. I knew it wasn’t the best practice to resize images in the browser, but this site needed to get up and running very quickly. I didn’t realize it could be that devastating. Lesson learned.
Thank you so much for your help. I really appreciate you taking a look and giving suggestions.
Have a good one.
-Kevin
It’s still broken here, but that’s because I’m a large fonts/120 dpi user. The auto-enlarge of the fonts is resulting in your manually inserted line-breaks combined with not redeclaring your line-heights breaking the layout. A lot of the HTML 5 concepts used to build the page are NOT real world deployable like wrapping block-level tags in inline-ones (your anchors around paragraphs and div), and on the whole you’re suffering from jumping the gun on a specification not ready for real world deployment – no matter how much the ‘gee ain’t it neat’ crows might be pimping the bloated idiotic nonsense called HTML 5.
The fixed width layout is naturally causing issues, as is your basically throwing classes at just about everything. (those three desc paragraphs being the most broken part of the content – especially since there’s no reason for them to be separate para’s). The code from that form generator is a ungodly mess and should probably be pitched and rewritten from scratch, getting the static style out of the markup in the process. The goofy “ie sniffing” HTML tag crap, HTML 5 crap, and bunch of other broken methodologies really all need to go if you actually care about it working cross browser. Really given how simple the page is there’s no excuse for bloating it out with unnecessary garbage; you could make it smaller, more functional AND work all the way back to IE 5.x without it.
Even as HTML 5 a lot of it just doesn’t make sense – like what makes that paragraph an ‘article’?!? Just because it’s ‘on the side’ doesn’t make a sidebar an ASIDE; since semantics is about what it is, NOT how it looks, you want the grammatical and literary meaning of aside; meaning that 99% of the time people are using ASIDE they’re using it wrong. Also kind of fishy some of the characters that are in there as entities, like exclamation points… Or the h1/h2 pairings that have no content… if there’s no content after the headings, WHAT MAKES THEM HEADINGS?!? Even if they were the start of sections it would be inappropriate for both a h1 and h2 to even be there – looks like choosing the tag based on what they look like; and if you choose your tags based on appearance, you’re choosing the wrong tags.
Even that image – that’s content I’d think you’d want indexed, so why is the text an image? I’d really look at making that into a section of text instead of a static image; that way search engines, screen readers for people with disabilities, people browsing with images off to save bandwidth, etc, etc, actually have something to read there.
… and did I mention that generated form? Display:none around non-display elements?!? Endless pointless DIV for christmas only knows what? It doesn’t even TRY to leverage the existing elements… about half it’s markup should go in the trash, much less the serious whiskey tango foxtrot script after it. Form generators – ALWAYS a train wreck.
If I were to write that same page the markup would probably go something 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
name="viewport"
content="width=device-width"
/>
<meta
name="description"
content="The Autoimmune Advocacy Alliance (A3)"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Autoimmune Advocacy Alliance
</title>
</head><body>
<div id="pageWrapper">
<h1>
Autoimmune Advocacy Alliance
<span> - </span>
together...more &amp; better
</h1>
<ul id="mainnav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="join.html">Join</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<hr />
<p class="intro">
The A3 alliance is committed to raising awareness, educating and advocating on behalf of patients, healthcareprofessionals, and others focused on solving the mysteries of autoimmunity. We actively seek to elevate connections and reduce barriers that will speed research, diagnosis and treatment.
</p>
<hr />
<div class="columnWrapper">
<div class="contentWrapper"><div class="content">
<h2>
Please join us!
</h2>
<div id="flyer">
<p class="leadIn">
One in five people live with autoimmune disease
</p>
<h3>
Living with Autoimmunity<br />
<small>A Community Dialog</small>
<span></span>
</h3>
<p class="presented">
Presented by the <b>Autoimmune Advocacy Alliance</b>
<span>
Saturday 19 May 2012
<span>10:00 AM -- 2:00 PM</span>
</span>
</p><p>
An event for those living with autoimmunity: patients, family, friends and healthcare support. Type 1 diabetes, RA, MS, Lupus, Chrons, Psoriasis, ITP, Graves, Celiac and more.
</p>
<a href="events.html" class="join">
Click here to learn more and register!
</a>
<!-- #flyer --></div>
<!-- .content, .contentWrapper --></div></div>
<hr />
<div class="sideBar">
<ul id="socialLinks">
<li>
<a href="http://www.facebook.com/pages/Autoimmune-Advocacy-Alliance/166614763447630">
<img
src="img/facebook.png"
width="30" height="30"
alt="join us on facebook"
/>
</a>
</li><li>
<a href="https://twitter.com/#!/A3Autoimmunity">
<img
src="img/twitter.png"
width="30" height="30"
alt="follow us on twitter"
/>
</a>
</li>
</ul>
<form
method="post"
id="newsLetterSignup"
action="http://www.aweber.com/scripts/addlead.pl"
>
<h2>
Stay up to date with A3 by signing up to our newsletter!
</h2>
<fieldset>
<label for="newsLetterName">Name:</label>
<input
type="text"
id="newsLetterName"
name="name"
value=""
/><br />
<label for="newsLetterEmail">Email: </label>
<input
id="newsLetterEmail"
type="text"
name="email"
value=""
/>
</fieldset>
<div id="submitsAndHiddens">
<input
type="submit"
value="Submit"
/>
<input
type="hidden"
name="meta_web_form_id"
value="1047119114"
/>
<input
type="hidden"
name="meta_split_id"
value=""
/>
<input
type="hidden"
name="listname"
value="a3-autoimmunity"
/>
<input
type="hidden"
name="redirect"
value="http://a3autoimmunity.org/thanks.html"
id="redirect_65d9f8459f4529ebcc00a7f252f4d60a"
/>
<input
type="hidden"
name="meta_adtracking"
value="A3_Main"
/>
<input
type="hidden"
name="meta_message"
value="1"
/>
<input
type="hidden"
name="meta_required"
value="name,email"
/>
<input
type="hidden"
name="meta_tooltip"
value=""
/>
<a href="http://www.aweber.com/permission.htm">
We respect your email privacy
</a>
<!-- .submitsAndHiddens --></div>
</form>
<h2>Launching Sponsor</h2>
<a href="http://www.benaroyaresearch.org/">
<img
src="img/brilogo.gif"
width="150" height="67"
alt="bri logo"
/>
</a>
<!-- .sideBar --></div>
<!-- .columnWrapper --></div>
<hr />
<ul id="callToActions">
<li>
<a href="autoimmune.html">
<strong>Autoimmune <span> - </span></strong>
What is it?
</a>
</li><li>
<a href="advocacy.html">
<strong>Advocacy <span> - </span></strong>
What Do We Do?
</a>
</li><li>
<a href="alliance.html">
<strong>Alliance <span> - </span></strong>
Who Are We?
</a>
</li>
</ul>
<div class="video">
<h2>A3 Video Tells the Story</h2>
<!-- [if IE]>
<object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
width="560" height="315"
>
<![endif]-->
<!-- [if !IE]>-->
<object width="560" height="315">
<!--<![endif]-->
<param
name="movie"
value="http://www.youtube.com/v/g0-CeVF3x-E?fs=1&amp;hl=en_US&amp;rel=0;&start=38"
/>
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
</object>
<!-- .video --></div>
<hr />
<div id="footer">
© 2012 Autoimmune Advocacy Alliance
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
I’m dealing with some hosting issues right now, but once that’s resolved if I have the time I’ll toss together the CSS I’d be using with that. Pay attention to the proper heading orders, valid video embed, overall reduction in code size despite adding content (even if you discount the google analytics nonsense, inlined CSS and extra script for nothing) and reversion to a current recommendation document type.