Hi everyone!
My site: StreetSmartIR.com has a bizarre issue in Safari. And by bizarre I mean I CANNOT recreate it on my machine, yet the fellow sitting next to me sees it every single time the page loads! WTF? :mad:
The specific page is Why Street Smart Investor Relations?. The issue is this weird blue line:
I DON’T GET this line on my screen! Any ideas?
… the fellow sitting next to me sees it every single time the page loads!
I DON’T GET this line on my screen! Any ideas?
The fellow sitting next to you probably has his font-size set smaller than yours in his browser settings.
I get the line when I reset my default font-size to 14px or when I zoom out. I also get the line when I disable the 140px height on #masthead.
The Problem is that Shadow Image in the html that comes after the #masthead ul. It is picking up vertical-align:baseline; from your reset css. That leaves space below the image since it is an inline element, that space is for text descenders such as the stem of a “p”.
The color of the line is the BG color from the parent div #masthead.
If you change the image to vertical-align:bottom; it will fix your issue.
Honestly though, that shadow image does not belong in the html, it is for presentation only so it should be a BG image.
I would set a 15px bottom padding (same height as the image) on the #masthead ul and then set it as a BG image there and position it to the bottom. 
That IMG doesn’t even BELONG in the markup, and rayzur is quite correct that’s why you are having problems. IT doesn’t belong there!
Though with all the rendering issues I’m seeing in IE and Opera on my large fonts rig, you’ve got problems page-wide and I can immediately see the cause…
That stupid malfing “grid” nonsense. Do yourself a favor, throw away… eh, I’d say about 60% of your DIV, most all the classes, and start over.
CSS frameworks – gah, how to make more work for yourself AND a bloated page all in the name of making it “easier” – RIGHT.
Further things that should NOT be in the markup:
The P after the first H1 being hidden – that’s content cloaking, welcome to getting blacklisted by search engines.
The vertical breaks as your ‘dividers’ – that’s BORDER’s job.
That jquery for NOTHING crap. 40k of bloat for WHAT?
Multiple H1’s
You also should have media types on your CSS embeds, lose the pointless author meta, stop putting paragraph around non-paragraph elements, work towards graceful degradation when images are disabled and CSS is left on…
To that end, ALL you should have for markup on that page is this really:
<!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="investor, relations, board, investment, group, corporate, social, responsibility"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Why Street Smart Investor Relations?
</title>
</head><body>
<div id="pageWrapper">
<h1>
<a href="index.html">
StreetSmart Investor Relations
<span><!-- image replacement --></span>
</a>
</h1>
<ul id="mainMenu">
<li><a href="whoweare.html">Who We Are</a></li>
<li><a href="whatwedo.html">What We Do</a></li>
<li><a href="whoweworkwith.html">Who We Work With</a></li>
<li><a href="whystreetsmart.html" class="current">Why StreetSmart</a></li>
<li><a href="whentocontact.html">When To Contact</a></li>
<li class="last"><a href="whotocontact.html">Who To Contact</a></li>
</ul>
<div id="content">
<h2>Why StreetSmart?</h2>
<p>
Companies that invest the time and resources in building firm visibility with Wall Street have significant increases in trading activity, institutional investor ownership, analyst following, and market valuation compared with those firms that do no additional investor relations outreach (Bushee and Miller, 2005).
</p><p>
With a combination of buy and sell-side Wall Street experience, experience managing in-house IR organizations, and significant and established relationships within the investment community, public and private companies choose StreetSmart to help improve firm visibility and maximize shareholder value.
</p>
<h3>Expert Counsel</h3>
<ul>
<li>Partners lead every account and work directly with management on key decisions</li>
<li>StreetSmart’s third-party perspective provides the most candid feedback to management, enabling effective decisions </li>
<li>Deep understanding of business fundamentals through regular participation in key strategic meetings</li>
<li>Lasting relationships built from 20 years in the financial community</li>
</ul>
<h3>Proactive Approach</h3>
<ul>
<li>Design long-term IR plan with short & long term actions that support strategic goals</li>
<li>Collaborate with management, BOD, department heads to agree on business goals and strategies</li>
<li>Align corporate and financial messages across all materials</li>
</ul>
</div>
<div id="footer">
<ul>
<li><a href="index.html">Overview</a></li>
<li><a href="whoweare.html">Who We Are</a></li>
<li><a href="whatwedo.html">What We Do</a></li>
<li><a href="whoweworkwith.html">Who We Work With</a></li>
<li><a href="whystreetsmart.html" >Why StreetSmart</a></li>
<li><a href="whentocontact.html">When To Contact</a></li>
<li class="last"><a href="whotocontact.html">Who To Contact</a></li>
</ul>
© 2011 StreetSmart Investor Relations
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
If I have time later I’ll toss together the CSS to illustrate what I mean.
I mean, when you see this in the CSS:
/* Global Classes*/
.clear { clear:both; }
.float-left { float:left; display: inline; }
.float-right { float:right; display: inline; }
.text-left { text-align:left; }
.text-right { text-align:right; }
.text-center { text-align:center; }
.text-justify { text-align:justify; }
.bold { font-weight:bold; }
.italic { font-style:italic; }
.underline { border-bottom:1px solid; }
.highlight { color: #f06601; }
.hidden {text-indent: -9000px;}
.uppercase {text-transform: uppercase;}
.img-left { float:left; display: inline; margin:0px 10px 5px 0; }
.img-right { float:right;display: inline; margin:4px 0 4px 10px; }
.img-center { margin-left: auto; margin-right: auto; padding: 5px; display: block; }
.nopadding { padding:0; }
.noindent { margin-left:0;padding-left:0; }
.nobullet { list-style:none;list-style-image:none; }
.nowrap {white-space: nowrap;}
SOMEONE failed to grasp the POINT of separation of presentation from content… You might as well go back to using HTML 3.2 at that point.
Here’s what I came up with:
Why Street Smart Investor Relations?
as with all my examples the directory:
Index of /for_others/biklops
is wide open for easy access to it’s bits and pieces.
Valid XHTML 1.0 Strict, Valid CSS 2.1, tested working in IE 5.5, 6, 7, 8 & 9, FF 3.5 and 4, and the latest flavors each of Safari, Chrome and Opera. It’s even usable in IE 5.0 though the menu formatting is a bit off (no padding or dividers – big deal!). It also gracefully degrades when CSS is disabled, and when images are disabled but CSS remains on.
I took some liberties by redesigning the background so it didn’t look like a resizing error, getting rid of the jpeg induced striping on the logo background, sharpened the subtext, and got rid of the images for text on the menus and headings.
On that last one, that wasn’t just a waste of bandwidth, the image replacement method used means images off/CSS on users just got fed one giant blank page. That’s a bad thing. The ‘current’ background effect is now part of the tiled background, allowing it to be dynamic width and build on the fly – just be sure the ‘current’ one also gets that extra SPAN inside it to draw the right side of the background.
Where possible I REALLY recommend avoiding using images for text – for a handful of things like logo’s or for really complex menu effects, sure… but you weren’t doing anything that warranted it unless you REALLY have your heart set on that particular font. (take my advice, stuff the perfect font matching if that was the only reason! You’re designing for web, not print)
That divider image was moved out of the markup and onto Content, though I’d be tempted to make that part of the menu I left it separate for now.
Drops the page total size from an unbelievable 111k in 16 files down to a more reasonable 13k in 6 files… The HTML and CSS changes ALONE illustrate why CSS frameworks like “grid 960” are total rubbish and do nothing but make you form bad habits. When you have 8k of CSS before you even start coding your own ‘custom’ stuff there’s something REALLY wrong… but that’s “frameworks” for you.
Oh, and see how I darkened up the h2? I did that because that very light grey on white was WAY below accessibility norms; that low a contrast it’s effectively invisible to many people.
Hope this helps.
Thanks Rayzur! That’ll do it!