SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 37 of 37
  1. #26
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,506
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by John_Betong View Post
    @ronpat ;

    I added the menu and linked the relevant stylesheet.css to your file and you can see the results here:
    http://johns-jokes.com/downloads/sp-...ronpat-002.php

    Check the Validation button on the top right and I will let you explain the following error:

    Line 8, Column 207: there is no attribute "data-href"

    ...and also if it behaves nicely with IEx 8, etc
    Hi, John. I'm intrigued because FF and IE8 on my WinXP box don't show the things that you mention.

    I couldn't explain that "data-href" thingy... I don't see it; and the height still stretches out of proportion in IE8.

    ...And a couple of XHTML-style close tags (space forward-slash) have been inserted, too.

    I would love to understand why it is working nicely for you but not for me! Maybe there is hope for that IE8 behavior.

    Thanks,
    Ron

  2. #27
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    86
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Test Drive this on IEx 8 guys (I had to use a different image from DOLPHIN because it was, erm . . . swimming away heh heh).

    What I'd like to accomplish is a "plumping out" of the hilighting that occurs in the footer text. Any thoughts?

    Thanks.

    s

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <title>FONT STYLING with "STRICT" + <img style="display: BLOCK; . . .</title>
    
    <!-- ======================================================================================== -->
    <style type="text/css">
    
    body {
        background-image: url(http://25.media.tumblr.com/tumblr_medeoycBYZ1qcdtsho1_400.jpg);
        background-position: 50% 0;
        font-family: helvetica, arial, sans-serif;
        text-align: center;   /* Center aligns inline objects. */
        padding: 0;
        margin: 70PX 0 50PX;  /* Applies {margin-top: 70PX} and {margin-bottom: 50PX} to the top and bottom of the page.  Zero's left and right side defaults. */
    }
    
    img {
        display: block;       /* eliminates extra white space beneath the image */
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;    /* the {box-sizing: border-box} property includes the dimensions of the border with the image. */
        margin: 0 auto;       /* "auto" centers the image in its container */
    }
    
    .WRAPPER {
        outline: 1PX solid magenta;   /* show-and-tell testing.  Delete whenever.... */
        width: 64%;           /* the WRAPPER div will expand to 90% of the width of the window or whatever percentage you choose. */
        margin: 35PX auto 0PX;
    }
    
    .MUSHROOMS {
        width: 80%;          /* the image will expand to the width of the WRAPPER div or whatever percentage of it you choose. */
        max-width: 600PX;     /* you can assign a max-width here or in the .WRAPPER, if you wish. */
    }
    
    .LEAVES {
        width: 80%;
        max-width: 400PX;
    }
    
    .HILIGHT1 {
        margin-top: 20PX;
        margin-left: 24%;
        margin-right: 24%;
        width: 100%;
        max-width: 552PX;
        font-size: 14PX;
        line-height: 16px;
        color: RED;      /* #444444 */
    }
    
    .HILIGHT2 {
        background-color: WHITE;
        margin-left: 24%;
        margin-right: 24%;
        width: 100%;
        max-width: 552PX;
        font-size: 10PX;
        line-height: 12PX;
        color: BLUE;     /* #666666 */
    }
    
    </style>
    <!-- ======================================================================================== -->
    
    </head>
    
    <body>
    
    <!-- 1. MUSHROOMS -->
    <div class="WRAPPER">
        <img class="MUSHROOMS" src="http://www.leevalley.com/en/images/item/Gardening/lc109s4.jpg" alt="">
    </div>
    
    <!-- 2. BORDER-PLAID (PINK) -->
    <div style="text-align: center; margin-top: 35PX;">
    <table style="width: 100%;" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <td style="margin-left: 18%; margin-right: 18%; text-align: CENTER; vertical-align: CENTER;">
        <div>
        <img style="display: BLOCK; max-width: 450PX; max-height: 450PX; margin: AUTO; width: 100%; padding: 25PX; border: 4PX dashed black; background-color: white;" src="http://catalog.carlislefsp.com/images/450/10635.jpg" alt="">
        </div>
    </td>
    </tr>
    </tbody>
    </table>
    </div>
    
    <!-- 3. BORDER-ARCHWAY -->
    <div style="text-align: center; margin-top: 35PX;">
    <table style="width: 100%;" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <td style="margin-left: 18%; margin-right: 18%; text-align: CENTER; vertical-align: CENTER;">
        <div>
        <img style="display: BLOCK; max-width: 700PX; max-height: 509PX; margin: AUTO; width: 100%; border: 44PX RIDGE #BFBFBF;" src="http://www.fineliving.ro/wp-content/uploads/2012/11/vacanta_muntenegru1.jpg" alt="">
        </div>
    </td>
    </tr>
    </tbody>
    </table>
    </div>
    
    <!-- 4. FALL LEAVES -->
    <div class="WRAPPER">
        <img class="LEAVES" src="http://1.bp.blogspot.com/_Q0nt60mY35Y/St0lKLzl9pI/AAAAAAAAEVY/2knB8mkdg10/s400/eb335J09autumn-LEAVES.jpg" alt="">
    </div>
    
    <!-- TESTING LINE-HEIGHT with HILIGHTING -->
    <div class="HILIGHT1">
    <span style="background-color: WHITE;">
    XX XXXXX XXX XXXXXXXX XXXX X XXXXXX</span>
    </div>
    
    <div class="HILIGHT2">
    XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
    XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
    XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX
    XXX XXXXXXXX XXXX X XXXXXX
    </div>
    
    </body>
    </html>

  3. #28
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    86
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Oh and . . . yes, I have changed the % sizing on a few of the images, as well as assigning #BFBFBF; to ARCHWAY's border because IEx was rendering it almost black.

    I've basically given up hope that any image with a border (I have two) can render accurately with anything other than inline specifications . . . or the friggin' thing just won't work. Even now the image heights in IEx 8 are not true; but they're the best I can get. Negative margins? Inquiring Minds want to Know . . .

    semiAWAKE

    Oh and, me too: Win XP, Firefox, and (only when I must) IEx 8 phhhhhhlttt!

  4. #29
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,506
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    semicolon, my first code looked EXACTLY like yours... invalid doctype, mixed case inline styles, deprecated attributes... and for the same reasons, I was new. Fortunately, I didn't know anything about the validator until AFTER I had figured out how to write css at the top of the page. THEN I was able to focus on choosing a valid doctype and losing the deprecated attributes and mixed case styles.

    If inline styles are how you prefer to write at this stage of learning, that's OK; they work. If you write uppercase because it's easier to read, that's OK, too; it works. Deprecated attributes and uppercase styles will fail validation, so don't expect "clean", valid code for awhile, OK? Your first goal should be to learn to read and write css by whatever route that takes. You know where you are and where you are going. Better-written, valid code will come in time.

    Stray (unmatched) tags should ALWAYS be avoided. Indenting is a visual aid to writing balanced code and helps avoid strays; the validator usually spots them (but not always). In my life, there is no substitute for a text editor that highlights tags with tell-tale colors. There are several such editors on the market. I have used EditPad Pro for years.

    I do not follow the HTML forum, so I did not know that you first posted there. The moddie rightly moved your post to the css forum since your questions are about styling.

    If your post is primarily about resizing images, then why the tables? I never quite figured that out. They are working the way tables work. They obviously clutter the picture if you are only interested in the images.

    I will encourage you to stick with an HTML 4.01 strict doctype and start reading about HTML 5. WHY? Because HTML 5 is still under development. Because HTML 4 is less "permissive" than HTML 5, it helps teach structure... and as John said, it's easier to validate. Become abreast of HTML 5 because, although still under development, it is already being used and introduces new tags to encourage a new way of thinking about HTML code and CSS. There is a lot to learn.

    By all means, reformat my code to suit yourself. It's good practice I wrote it as I did quite intentionally as a side-by-side comparison tool. A little push toward separating the CSS from the HTML. Reformatting is part of learning. Go for it.

    Last piece of advice: Don't take "critics" personally. Some folks are entrenched in personal preferences whereas others are less dogmatic, but everyone means well. Evaluate advice always asking "why". It's called learning.

    EDIT: You were posting while I was writing. Will catch up!

  5. #30
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    86
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ron, any thoughts to helping me "plump out" the 2 hilighting classes at the footer of my most recent code? I do want it sitting on top of the background image, but I'd like to expand the white background on both to make the text a little easier to read.

    Explorer is such a pita!!! lol

  6. #31
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    86
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Okay, cleaned up, ((padded)), and the best I can do! . . .

    s

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <title>FONT STYLING with "STRICT" + <img style="display: BLOCK; . . .</title>
    
    <!-- ======================================================================================== -->
    <style type="text/css">
    
    body {
        margin-top: 41PX;
        margin-bottom: 50PX;
        margin-left: 18%;
        margin-right: 18%;
        background-image: url(http://25.media.tumblr.com/tumblr_medeoycBYZ1qcdtsho1_400.jpg);
        background-repeat: repeat;
        font-family: HELVETICA, ARIAL, SANS-SERIF;
        text-align: center;   /* Center aligns inline objects. */
        padding: 0;
    }
    
    img {
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;    /* the {box-sizing: border-box} property includes the dimensions of the border with the image. */
    }
    
    .HILIGHT1 {
        margin-top: 20PX;
        margin-bottom: 0PX;
        margin-left: AUTO;
        margin-right: AUTO;
        max-width: 552PX;
        font-size: 14PX;
        line-height: 16px;
        color: RED;      /* #444444 */
        text-align: center;
    }
    
    .HILIGHT2 {
        margin-top: 0PX;
        margin-bottom: 0PX;
        margin-left: AUTO;
        margin-right: AUTO;
        background-color: WHITE;
        padding: 4PX 7PX 4PX 7PX;
        max-width: 552PX;
        font-size: 10PX;
        line-height: 12PX;
        color: BLUE;     /* #666666 */
        text-align: center;
    }
    
    </style>
    <!-- ======================================================================================== -->
    
    </head>
    
    <body>
    
    <!-- 1. MUSHROOMS -->
        <div style="margin-top: 35PX; text-align: center;">
        <img style="display: BLOCK; max-width: 500PX; max-height: 145PX; margin: AUTO; width: 100%;" src="http://www.leevalley.com/en/images/item/Gardening/lc109s4.jpg" alt="">
        </div>
    
    <!-- 2. |||||||||||||||| BORDER-PLAID (PINK) |||||||||||||||| -->
    <div style="margin-top: 35PX; text-align: center;">
    <table style="width: 100%;" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <td style="margin-left: 18%; margin-right: 18%; text-align: CENTER; vertical-align: CENTER;">
        <div>
        <img style="display: BLOCK; max-width: 450PX; max-height: 450PX; margin: AUTO; width: 100%; padding: 25PX; border: 4PX dashed black; background-color: white;" src="http://catalog.carlislefsp.com/images/450/10635.jpg" alt="">
        </div>
    </td>
    </tr>
    </tbody>
    </table>
    </div>
    
    <!-- 3. |||||||||||||||| BORDER-ARCHWAY |||||||||||||||| -->
    <div style="margin-top: 35PX; text-align: center;">
    <table style="width: 100%;" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <td style="margin-left: 18%; margin-right: 18%; text-align: CENTER; vertical-align: CENTER;">
        <div>
        <img style="display: BLOCK; max-width: 700PX; max-height: 509PX; margin: AUTO; width: 100%; border: 44PX RIDGE #BFBFBF;" src="http://www.fineliving.ro/wp-content/uploads/2012/11/vacanta_muntenegru1.jpg" alt="">
        </div>
    </td>
    </tr>
    </tbody>
    </table>
    </div>
    
    <!-- 4. FALL LEAVES -->
        <div style="text-align: center;">
        <img style="display: BLOCK; max-width: 400PX; max-height: 275PX; margin: AUTO; width: 100%;" src="http://1.bp.blogspot.com/_Q0nt60mY35Y/St0lKLzl9pI/AAAAAAAAEVY/2knB8mkdg10/s400/eb335J09autumn-LEAVES.jpg" alt="">
        </div>
    
    <!-- LINE-HEIGHT, HILIGHTING & PADDING -->
        <div class="HILIGHT1">
    <span style="background-color: WHITE; padding: 4PX 7PX 0PX 7PX;">
    XX XXXXX XXX XXXXXXXX XXXX X XXXXXX</span>
        </div>
    
        <div class="HILIGHT2">
    XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
    XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
    XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX
    XXX XXXXXXXX XXXX X XXXXXX
        </div>
    
    </body>
    </html>

  7. #32
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    86
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Damn it, I knew there was something I would forget. Now, originally you may recall I had a top margin of 76PX? So rather than have the first element in the page have a 0PX margin, I decided to make the body margin-top 41PX, so that that first element (MUSHROOMS) has the same uniform 35PX top margin as its fellows below.

    Well (as with almost everything I have attempted to place into a CSS style header) the body isn't rendering correctly. Now, I guess this was too much of a stretch but I thought that 41 + 35 = 76 would combine to create a top margin of 76PX. Obviously, no. So this isn't possible (combining top margins)?

  8. #33
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,506
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Vertical margins collapse to the height of the greater value, with certain exceptions of course. You would have to give that top item or the top of the body a full 76px margin.

  9. #34
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,819
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    @semicolon ;

    http://johns-jokes.com/downloads/sp-...icolon-003.php

    Above is the link to your script from post #31.

    Please note I have made the following changes:

    1. changed doctype to show more errors and warnings.
    2. added a common stylesheet necessary for the top button links
    3. added the top menu button links and amended link to validator.w3.org - PLEASE TRY IT

    Please note that the doctype is your friend and guide to minimise browser conflicts. All browsers are coded differently but all follow the w3.org standards. BIG problems arise when the errors and warnings occur because the coding team does not have standards to follow. No doubt heated discussions have eventually decided on how the coder's browser should handle the discrepancies. Also no doubt a time consuming long series of tests also occur to guess a best match.

    External style-sheets make it Oh so easy to standardise a site and future changes are simplified.

  10. #35
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,819
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ronpat View Post
    Hi, John. I'm intrigued because FF and IE8 on my WinXP box don't show the things that you mention.

    I couldn't explain that "data-href" thingy... I don't see it; and the height still stretches out of proportion in IE8.

    ...And a couple of XHTML-style close tags (space forward-slash) have been inserted, too.

    I would love to understand why it is working nicely for you but not for me! Maybe there is hope for that IE8 behavior.

    Thanks,
    Ron
    Eventually managed to track the elusive "data-href"...

    Problem was I was viewing the source code of another page using Firefox Addon "Html Validator 0.9.5.1". The single error was from the following: <div class="g-plus" data-href="//plus.google.com/...

    Please accept my apologies.

  11. #36
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,506
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    No apology necessary, my friend. Thanks for the feedback.

    Ron

  12. #37
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    86
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by John_Betong View Post
    Above is the link to your script from post #31.
    Thanks for giving it a home John! I just created an account at
    http://social.msdn.microsoft.com/For...opment/threads
    so I'll see if any of the developers there have a tweak for the IMG height problem that occurs in IEx 8
    and an explanation for why it occurs nowhere else

    and will post any fix here. Don't hold your breath!!

    semicodin


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
  •