I bought a new widescreen monitor recently. Why is my header looking all funny: http://nkdogwalking.com
Does it to you? Hopefully not. No one here ever pointed out a problem before. I just wanted to check here in case there’s any problems. I’m using a 16:9. I will post a picture if needed. The “Serving the North Kingstown…” bit is on the next line and underneath “Insured…”
I hope someone can help me out.
I’m using a PC running Windows XPPro with a 4:3 monitor and Firefox 16.0.2. Your page doesn’t look “funny”. It would be helpful if you could post a screenshot showing what you see and a description of what it is supposed to look like. Include a description of your computer, operating system and browser version.
The text “Serving the North Kingston…” is over the image of the dog holding his leash. The alternate text for this dog’s image could use a space between the closing quote mark and the width attribute. You could try adding the space and see if that helps.
Looks fine to me on a wide screen. But if I view it in Firefox (with text zoom set to “text only”) and bump up the text size one notch, that text does drop down. You could help to prevent it by giving the contact div a set width. E.g.
#contact {
width: 300px;
}
Thanks ronpat and ralph. I’m using XP and Chrome. ronpat, I tried your suggestion but it didn’t do anything. I’m supposed to put a space after the quote in the alternate text before the forward slash?
ralph, I made your changes, however, now it is messed up in the tabs. Also, the tops of all feature images the border went missing. I’m also wondering now if my site looks a bit squeezed in on a widescreen. I think I need to do widen the entire width. What is the percentage of users who now use a WS monitor? Do you know?
I appreciate your help, and sorry for not getting back to you sooner.
My suggestion was just a “shot in the dark”, so to speak, because Firefox flags this string:
happy and well-behaved pet."width="250" height="293" />
It expects a space between the double quote and the word ‘width’ like this:
happy and well-behaved pet." width="250" height="293" />
The validator does NOT complain.
I see the problem as Ralph described it. ie: the site displays correctly when the zooms are reset to zero and “breaks” when the text is zoomed larger. (Regardless of monitor dimensions!)
You realize that using tiny font size anywhere on a page encourages users to zoom their text to a large size. You might want to reconsider the size of the text in the header. Some of it mighty small.
Yes, the specs say there should be a space before closing forward slashes of empty tags.
Quick followup… Looks like you can extend the width of the page easily enough, but that will not stop the tabs from deteriorating. Using ems for the padding causes them to spread too fast, especially on the bottom. Margins and padding around buttons/tabs is better handled with px. You may want to reconsider those areas that should extend as text size changes, vs those areas that would be better served by a fixed space.
Where in the spec does it say that? I have read the spec several times over the years and never came across anything that said that.
A space before the / was necessary with Netscape 4 in order that it not invalidate whatever immediately preceded it but that browser has been dead for over six years.
Where in the spec does it say that?
Thank you for chiming in, Mr. felgall. That may well be a long time misunderstanding. Normative vs. informative maybe? Since we wrote HTML back then, and the browser of the day was indeed Netscape, the following guidelines were relevent. - After a few quick tests, they don’t seem to apply today. Progress.
http://www.w3.org/TR/xhtml1/#guidelines
C. HTML Compatibility Guidelines
C.2. Empty Elements
Include a space before the trailing / and > of empty elements, e.g. <br />, <hr /> and <img src=“karen.jpg” alt=“Karen” />. Also, use the minimized tag syntax for empty elements, e.g. <br />, as the alternative syntax <br></br> allowed by XML gives uncertain results in many existing user agents.
Hey ralph.
I forgot to verify after making the changes. Can you or someone verify that everything is looking fine now? Did my changes fix the problem? It looks fine now in Google Chrome except for the squished tabs and the top border on feature image. Firefox no problems at all. No problems with tabs/picture border.
Was hard to get an agreeable text size to suit both Chrome and Firefox. Ended up using .7em for font size. Too much of a space between the list and contact in Firefox, and too close in Chrome.
Looks good to me in Firefox and Chrome!
Okay, thanks ralph. I’ll take your word for it. Your word is golden. I still don’t see the black top border on the image. The other three borders yes, but not the top in Chrome.
Here’s what it looks like to my eyes. Perhaps it’s my Chrome settings. I could never get them perfect. I kept altering it… it will look fine on one website but then not the next. Is this what to expect with a widescreen?
Error when uploading .gif. 404 bubbles=false
Bah. via Link instead:
Hm, appears fine for me in all my Mac browsers.
[ot]
Have you ever heard of “fool’s gold”? 
[/ot]
Humor me, please. Over which image do you not see the black border? How much is the text being zoomed on your widescreen monitor? Have your changes been posted on your original link? Are you open to suggestions?
In the screen shot in post 11, you’ll see that the dog pic on the right lacks the 1px black border on top—though I can’t replicate that in my browsers.
[ot]
Hopefully you found my answer funny. 
[/ot]
[ot]Thanks, Ralph. It should have been obvious, but I missed it time and again. Preoccupied, I guess by the side discussion about font-size plus the menu buttons. Time to let it go.
Your answer was cute 
Spread the sanity.
Cheers
Ron
[/ot]
Back in message number 2, I mentioned:
The alternate text for this dog’s image could use a space between the closing quote mark and the width attribute. You could try adding the space and see if that helps.
The flaw is still there. Apparently not considered worthwhile. It IS associated with that particular image, though. Shouldn’t matter, but who knows.
Snipped from Line 78:
... happy and well-behaved pet."width="250" height="293" /></p>
try:
... happy and well-behaved pet." width="250" height="293" /></p>
What’s to lose?
eLePHANT, I was in the mood to tinker and this is where it went. As a ‘fluid’ layout, it is very friendly with Wide Screen Monitors and users who like to Zoom text and pages.
Tested in FF 17.0.1 and IE 8 on a Windows XPP PC.
The nav tabs work as is; a new bg image (attached) adds the gradient. The tabs resize nicely, too! IE8 tabs have square corners.
I gave the page a {max-width:1400px} and {min-width:720px} for no particular reason. Change or delete to suit.
NOTE: for my convenience, I changed the paths to the images to network paths so they are read from the host site. (The exception is the new bg image for the nav tabs, of course.) You will probably want to change them back to relative paths.
The HTML has been rearranged a little to permit this layout.
The stylesheet should be given a unique name and the link to the style sheet should be renamed to point to it.
I believe the other pages on your site would work with this type of layout.
If you try it, critical feedback is solicited.
A new background gradient image for the nav tabs:
navGrad5.png
/*
CSS for NKDogWalking website
*/
body {
background:#b0c0f3 url(http://nkdogwalking.com/blue-gradient.jpg) repeat-x;
font-size:1em;
line-height:1.3;
font-family:Verdana, Helvetica, Arial, sans-serif;
padding:0;
margin:40px 3%;
}
h1 {
float:left;
font-family: "Britannic Bold","Trebuchet MS",Helvetica,Arial,sans-serif;
font-size: 195%;
line-height:1;
padding-left: 0.5em;
padding-top: 0.3em;
margin: 12px 0 0 0;
}
h2, h3 {
border-bottom:2px black solid;
background:url(http://nkdogwalking.com/dogwalker-h2.jpg) no-repeat;
color:#3059c3;
font-weight:normal;
font-size:140%;
font-family:"Palatino Linotype", Baskerville, serif;
padding:8px 0 6px 80px;
}
h2.fetch {
background:url(http://nkdogwalking.com/fetch.jpg) no-repeat;
}
h3.petsit {
background:url(http://nkdogwalking.com/pet-sitting.jpg) no-repeat;
}
img {border:0;}
#wrapper {
max-width:1400px; /* set a max page width here, if desired */
min-width:720px; /* set a min page width here, if desired */
margin:0px auto;
}
#navigation {
position:relative;
}
#navigation ul {
list-style:none;
overflow:hidden;
padding:0px 120px 0px 1%;
margin:0px;
}
#navigation li {
float:left;
padding:0px;
margin:0px 0px 1px 5px;
}
#navigation ul a {
display:block;
border-top:1px solid #333;
border-right:1px solid #333;
border-left:1px solid #333;
-khtml-border-radius:11px 11px 0px 0px;
-webkit-border-radius:11px 11px 0px 0px;
-moz-border-radius:11px 11px 0px 0px;
border-radius:11px 11px 0px 0px;
background-color:#333;
background-image:url(navGrad5.png); /* the NAV TABS gradient image */
background-repeat:repeat-x;
background-position:center center;
color:#fff;
font-weight:bold;
font-size:1.2em;
text-align:center;
text-decoration:none;
padding:0.20em .8em 0.32em;
margin:0px;
}
#navigation a:hover {
color:#f90;
}
#header {
border:1px solid black;
border-top:2px solid white;
border-left:1px solid white;
background:#ead9b8;
overflow:hidden;
padding-bottom:15px;
margin-bottom:2em;
}
#header ul {
list-style:none;
float:left;
padding:20px 0 0 45px;
margin:0px;
}
#header li {
background:url(http://nkdogwalking.com/check.gif) no-repeat scroll 0 50%;
font-size:.8em;
padding-left:30px;
margin:4px 0;
}
#contact {
float:right;
padding-top:15px;
}
#contact p {
font-size:0.8em;
line-height:1;
padding:0 1.5em 0 1em;
margin:.5em 0;
}
#main {
overflow:hidden;
padding-right:272px;
}
#main a:link {
color: #6B8E23;
text-decoration: none;
font-weight: bold;
border-bottom: 2px solid #F60;
}
#main a:visited {
color:#900;
}
#main a:hover {
color:#F33;
background-color: #CAE1FF;
border-bottom-color: #6E97BF;
}
#main a:active {
color:#B2F511;
}
#wrapper .email {
color:#777;
border:none;
background:url(http://nkdogwalking.com/email.gif) no-repeat left center;
padding-left:20px;
}
#content {
border:1px solid black;
background-color:white;
padding:0.1em 1em 0;
float:left;
}
#content li {
list-style:none;
background-image:url(http://nkdogwalking.com/bullet.png);
background-repeat:no-repeat;
background-position:0 4px;
padding-left:25px;
margin-bottom:10px;
}
#sidebar {
width:252px;
float:right;
margin-right:-272px;
}
#sidebar p {
margin:0 0 1em;
}
.walks {
background-color:#faebc7;
border-color:#fc6512;
border-style:solid dotted dotted;
border-width:20px 1px 1px;
padding:10px 20px;
margin-top:60px;
}
.walks h3 {
border:none;
background: none repeat scroll 0% 0% transparent;
color:black;
font-weight:bold;
font-size:15px;
font-family:verdana, sans-serif;
padding:0;
margin:0;
}
.walks ol {
list-style:decimal inside; /* decimal or disc */
padding:0;
margin:20px 0;
}
.walks li {
margin-bottom: 20px;
}
#sidebar img.twitter {
border:0;
vertical-align:bottom;
padding:0;
}
p.twit {
position:absolute;
right:0;
bottom:1px;
padding:0 1em 0 0;
margin:0;
}
p.twit img {
vertical-align:bottom;
}
p.caption {
font: bold .7em/normal Verdana, Arial, Helvetica, sans-serif;
color: #333 !important;
text-align: center;
background-color: #BCD2EE;
border: 1px dashed #666;
}
.featureimage {
border: 1px solid black;
margin-bottom: -.7em;
}
#caption li {
display: inline;
}
.important {
font-weight: bold;
background-color: #DCE3F9;
color: black;
}
#footer {
width: 100%;
border: 1px solid #F4EBDC;
background-color: black;
clear: both;
margin-top: 30px;
}
#footer p {
font-size: 90%;
color: white;
text-align:center;
padding: 0.2em 0 0.2em 1em;
margin: 0;
}
.note {
color: #333;
border: 2px dashed #6378DF;
background-color: #B0E0E6;
padding: 20px;
margin-top: 25px;
margin-bottom: 35px;
}
.note strong {
color: #6378DF;
}
.intro p:first-letter {
font-weight: bold;
color: #999;
font-size: 1.5em;
}
/*
TABLE CSS
*/
.datatable {
border: 1px solid #D6DDE6;
border-collapse: collapse;
width: 80%;
margin: 2em;
}
.datatable col.odd {
background-color: #BCD2EE;
color: #000000;
}
.datatable col.even {
background-color: #6495ED;
color: #000000;
}
.datatable td {
border: 2px solid #ffffff;
padding: 0.3em;
}
.datatable th {
border: 2px solid #ffffff;
background-color: black;
color: #FFFFFF;
font-weight: bold;
text-align: left;
padding: 0.3em;
}
/*
FORM CSS
*/
form.contact fieldset {
border: 2px solid #4876FF;
padding: 10px;
}
form.contact legend {
font-weight: bold;
font-size: small;
color: #27408B;
padding: 5px;
}
form.contact {
padding: 0;
margin: 0;
margin-top: -15px;
line-height: 150%;
}
form.contact label {
font-weight: bold;
font-size: small;
color: black;
clear: left;
}
form.contact input.txt {
color: #00008B;
background-color: #E3F2F7;
border: 1px inset #00008B;
}
form.contact label.fixedwidth {
display: block;
width: 240px;
float: left;
clear: left;
text-align: right;
margin-right: 10px;
margin-left: -25px;
font-family: "Century Gothic", "Gill Sans", Arial, sans-serif;
}
form.contact .buttonarea input {
background: #4876FF;
color: white;
font-weight: bold;
border: 1px outset solid white;
padding: 2px 4px 2px 4px;
font-size: 110%;
}
form.contact .buttonarea {
text-align: center;
padding: 4px;
background-color: black;
}
#name, #field-30049a367c7807c, #email, #field-3837c89ad243250,
#field-5a0d6dc2d69fbda, #field-546fc8889432069 {
background-color: #FBEF99;
font-family: "Lucida Console", Monaco, monospace;
font-size: .9em;
}
/* Drop Down Menu */
#field-6c24a4bf07a7180 {
font-family: "Century Gothic", "Gill Sans", Arial, sans-serif;
}
#name:focus,
#field-30049a367c7807c:focus,
#email:focus,
#field-3837c89ad243250:focus,
#field-5a0d6dc2d69fbda:focus,
#field-6c24a4bf07a7180:focus,
#field-546fc8889432069:focus
{
background-color: #FDD041;
}
<!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">
<!--
http://www.sitepoint.com/forums/showthread.php?911107-Header-Issue-On-Widescreen-16-9
Thread: Header Issue - On Widescreen 16:9
Nov 13, 2012 20:45
eLePHANT
-->
<head>
<title>Professional Dog Walker Pet Sitter North Kingstown, RI. NK Dog Walking</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="dog walking ri, dog walker ri, pet sitting ri, pet sitter ri, dog walking rhode island, dog walker rhode island, pet siting rhode island, pet sitter rhode island, dog services ri, pet service ri" />
<meta name="description" content="Hire a dog-walker in North Kingstown, RI for daily walks and care. NK Dog Walking professional dog walking and petsitting in the North Kingstown, RI area" />
<link href="style23.css" rel="stylesheet" type="text/css"/>
</head>
<body class="gradient">
<div id="wrapper">
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Me</a></li>
<li><a href="rates.html">Services & Rates</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<p class="twit">
<a href="http://twitter.com/nkdogwalking"><img class="twitter" src="http://nkdogwalking.com/nk-twitter.png" alt="Follow me" width="100" height="36" /></a>
</p>
</div> <!-- end of navigation div -->
<div id="header">
<h1><img src="http://nkdogwalking.com/nkdogwalking-logo.gif" width="254" height="68" alt="NK Dog Walking: A good dog is a tired dog"/></h1>
<ul>
<li>Insured and Bonded</li>
<li>References</li>
<li>Pet First Aid Certified</li>
</ul>
<div id="contact">
<p>Serving the North Kingstown, RI area</p>
<p>Phone: 556-5187</p>
<p>E-mail: <a href="mailto:mike@nkdogwalking.com" class="email">mike@nkdogwalking.com</a></p>
</div> <!-- end of contact div -->
</div> <!-- end of header div -->
<div id="main">
<div id="content">
<h2 class="fetch">Looking for reliable dog-walking and pet-sitting services in the North Kingstown, Rhode Island area?</h2>
<p>If you're concerned about your dog's well being while you're managing a hectic schedule --- I can help you with that. My name is Mike Hatch, and I'm currently accepting new clients who need their dogs(s) walked 3-5 times a week on a regular basis.</p>
<p><strong>I offer professional dog walker and pet-sitter services in the Rhode Island communities of <span class="important">North Kingstown, Wickford, Saunderstown, East Greenwich, Narragansett (Bonnet Shores), Exeter (NK border), and Warwick (EG border).</span></strong></p>
<h3>DOG WALKING:</h3>
<ul>
<li>Your dog's daily walks will promote the healthy lifestyle your pet deserves.</li>
<li>Plus, upon request, I can reinforce your dog's learned cues and teach him door and leash manners.</li>
<li>There's no risk on your part because I'm insured and bonded, and I come with excellent references. <a href="http://www.nkdogwalking.com/about.html">Review my dog-walking credentials.</a></li>
</ul>
<h3 class="petsit">PET SITTING:</h3>
<ul>
<li>If you prefer Lassie not to go for a walk, I also offer pet sitting services in your home.</li>
<li>You can take comfort in <a href="http://www.nkdogwalking.com/about.html">my credentials as a professional pet-sitter.</a></li>
<li>For example, I'm a volunteer dog trainer with strong skills in dog obedience, and will ensure that your dog is safe, happy and well behaved.</li>
</ul>
<p>Visit my <a href="http://www.nkdogwalking.com/rates.html">dog-walking and pet-sitter services page</a> for schedule and pricing options.</p>
<p>Or <a href="http://www.nkdogwalking.com/contact.html">contact me now</a> to discuss your needs. <br />I look forward to talking with you. Mike</p>
</div> <!--end of content div -->
<div id="sidebar">
<p><img src="http://nkdogwalking.com/golden-with-leash.jpg" class="featureimage" alt="Dog walking tip from NK Dog Walking of North Kingstown, RI: exercise your dog daily for a fit, happy and well-behaved pet." width="250" height="293" /></p>
<div class="walks">
<h3>How do YOU benefit?</h3>
<ol>
<li>Not having to rush home from work to let big Rex out to do his thing.</li>
<li>A sense of relief knowing that your dog is in good hands and letting go of the guilt.</li>
</ol>
<p><a href="http://www.nkdogwalking.com/contact.html">Contact me about my dog-walking services</a>.</p>
</div> <!-- end walks div -->
</div> <!-- end sidebar div -->
</div> <!-- end main div -->
<div id="footer">
<p>Copyright 2010, 2011 NKDogWalking.com. All rights reserved.<br />
Dog walking and pet-sitting services in the North Kingstown, Rhode Island area<br />
For information, call 556-5187 or email <a href="mailto:mike@nkdogwalking.com" class="email">mike@nkdogwalking.com</a>
</p>
</div> <!-- end of footer div -->
</div> <!-- end of wrapper div -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-15153667-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>
em font sizes are based on the browser’s default font size. When comparing a page in different browsers, it is necessary for the default font-size be the same in the browsers, otherwise the size of the text may be different in the different browsers.
Sounds like you are asking if a wide screen monitor can be responsible for things that have nothing to do with any monitor, regardless of size or shape. Except for bugs in graphics cards, a monitor is a monitor is a monitor… they don’t cause the problems that you are describing. Widescreen monitors just contain more viewing area (usually).
If a monitor has small, densely packed pixels, as many newer montors do, then users are inclined to Zoom text or the whole page larger so it will be large enough to read. Zooming is very device and browser dependent. Peculiar behaviors can happen, although they are more often found on “pixel perfect” page designs where no margin for device or browser differences was allowed.
I don’t “zoom” things very much, so I’m not familiar with the zooming features of different browsers. I understand that some browsers remember settings for each tab and others remember settings for each site. Dunno for sure, though.
PS: Two questions, please:
(1) If you try this layout, is that pesky black border visible in Chrome?
(2) Did adding the space mentioned in my previous post have any effect on that border in Chrome?
Cheers
We learn much through the experiences of others. Please share
I regularly zoom pages, because I don’t like small print. In the past, browsers tended to be set to zoom text only, but these days I think they are all set to zoom the whole page. This is kinder on layouts, but it’s behavior I hate, personally. I’d rather the text just got bigger and not the design. A good layout won’t break in this situation, but many do, which is probably why browsers now just zoom the whole damned page (which means that fixed width designs—with no max-width—quickly get too wide for the browser window 
). I have Firefox set to zoom text only, which used to be the default. But I now use Chrome for most stuff, and it doesn’t seem to have the option to zoom text only, which sucks, IMHO.
I agree completely. I’ve rarely had a need to zoom the whole page; tweaking the text alone was usually satisfactory.
I don’t think the absence of a max-width has anything to do with the page size exceeding the browser window size. I think it’s the inability of the page to be compressed into a narrower viewing screen… ie, the absence of “fluidness” to a sufficiently narrow width. I noticed that IE 8 generated a horizontal scroll bar when the zoom scaled min-width proportions were reached and I continued to zoom the page larger (like a fixed width page would do from the start).
Interesting stuff.
What I meant was that, even with whole page zooming, if your site is reasonably fluid and has a max width set on the wrapper (e.g. max-width: 98%), the design stops expanding once it gets to 98% width of the browser—even if all the elements within the page keep getting larger (in which case they are forced to reflow).