SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    SitePoint Zealot eLePHANT's Avatar
    Join Date
    Feb 2010
    Location
    RI, USA
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Header Issue - On Widescreen 16:9

    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.

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,460
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.

    Code:
    #contact {
      width: 300px;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    SitePoint Zealot eLePHANT's Avatar
    Join Date
    Feb 2010
    Location
    RI, USA
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

    Code:
    #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.

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,460
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    My suggestion was just a "shot in the dark", so to speak, because Firefox flags this string:
    Code:
    happy and well-behaved pet."width="250" height="293" />
    It expects a space between the double quote and the word 'width' like this:
    Code:
    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.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,460
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,786
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ronpat View Post
    Yes, the specs say there should be a space before closing forward slashes of empty tags.
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,460
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.

  9. #9
    SitePoint Zealot eLePHANT's Avatar
    Join Date
    Feb 2010
    Location
    RI, USA
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

    Code:
    #contact {
      width: 300px;
    }
    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.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Looks good to me in Firefox and Chrome!
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  11. #11
    SitePoint Zealot eLePHANT's Avatar
    Join Date
    Feb 2010
    Location
    RI, USA
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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: sitepoint-nk.gif

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by eLePHANT View Post
    I still don't see the black top border on the image.
    Hm, appears fine for me in all my Mac browsers.

    Off Topic:

    Quote Originally Posted by eLePHANT View Post
    Your word is golden.
    Have you ever heard of "fool's gold"?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,460
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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?

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.

    Off Topic:

    Quote Originally Posted by ronpat View Post
    Humor me, please.
    Hopefully you found my answer funny.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  15. #15
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,460
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

    Off Topic:



    Hopefully you found my answer funny.
    Off Topic:

    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

  16. #16
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,460
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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:
    Code:
     ... happy and well-behaved pet."width="250" height="293" /></p>
    try:
    Code:
     ... happy and well-behaved pet." width="250" height="293" /></p>
    What's to lose?

  17. #17
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,460
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)

    Just for fun!

    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

    navGrad5.png

    Code:
    /*
    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;
    }
    Code:
    <!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 &amp; 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&nbsp;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>
    -----

    Quote Originally Posted by eLePHANT View Post
    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.
    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.

    Quote Originally Posted by eLePHANT View Post
    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?
    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

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ronpat View Post
    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.
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  19. #19
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,460
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph.m View Post
    This is kinder on layouts, but it's behavior I hate, personally. I'd rather the text just got bigger and not the design. ... (which means that fixed width designs—with no max-width—quickly get too wide for the browser window ).
    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.

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ronpat View Post
    I don't think the absence of a max-width has anything to do with the page size exceeding the browser window size.
    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).
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  21. #21
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,460
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Ah, OK, I was thinking in terms of pixels. Perhaps a max-width set with percent works differently. Will have to try it. Thanks!

  22. #22
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,460
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Percentage and pixels seem to behave the same. I think my confusion is between zooming text only vs the whole page. Zooming text only seems to behave exactly you describe. Zooming the whole page fits my previous description. I think I'm getting tired. Am already over my monthly zoom bogey

  23. #23
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Take this page, par exemple:

    http://pageaffairs.com/code-archive/...d-columns.html

    Whether the browser is set to full zoom or zoom text only, you shouldn't get a scroll bar at the bottom even if you zoom right in. Not in a prober browser, anyway.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  24. #24
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,460
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Take this page, par exemple:

    http://pageaffairs.com/code-archive/...d-columns.html

    Whether the browser is set to full zoom or zoom text only, you shouldn't get a scroll bar at the bottom even if you zoom right in. Not in a prober browser, anyway.
    "OK, I hear ya", said the deafened man.

    The example page is fluid down to almost zero width, as I imagine good fluid/responsive layouts would try to be.

    Give that page a min-width in pixels (or some unit other than percent) and it will develop an h-scroll bar when the browser window is narrowed enough. It seems to me that one assigns a min-width to a page to limit the narrowness of the page for some reason; and when that is done, the browser will develop an h-scroll bar when it's viewport is narrow enough or the zoom is big enough to trigger it. If no min-width is assigned then the fixed width boxes on the page will determine the minimum width, and when their width threshold is reached the h-scroll bar will appear.

    The ideal is to eliminate fixed width items on a web page (somehow). When that ideal is achieved, no scroll bars will be triggered. It's the target of the future.

    Or so it seems tonight.

    EDIT:
    Quote Originally Posted by ralph.m View Post
    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).
    Until the widest box that cannot reflow is finally reached, then the h-scrollbar appears.

  25. #25
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ronpat View Post
    Until the widest box that cannot reflow is finally reached, then the h-scrollbar appears.
    That's usually where you let @media rules kick in, and drop them to a line of their own.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •