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