Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
Like Tree4Likes
  • 1 Post By TheGAME1264
  • 2 Post By mlseim
  • 1 Post By TheGAME1264

Thread: huh?

  1. #1
    Senior Member
    Join Date
    Apr 2016
    Posts
    715
    Member #
    53891
    Liked
    10 times

    huh?

    Tryit Editor v3.0

    why is it that the bottom photo is wider even though the same width and height are specified?

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,480
    Member #
    425
    Liked
    2784 times
    The img CSS overrides the width/height attributes.

    Mind you, that is an absolutely horrible example and an even worse use of inline styles, if for no other reason than the inline styles will eventually cause issues with a responsive design (picture the width/height CSS used on larger images).
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Senior Member
    Join Date
    Apr 2016
    Posts
    715
    Member #
    53891
    Liked
    10 times
    I get that it was because of the css width="100%" I just don't understand why one went bigger and the other didn't. was the 128 in the enlarged one % or pixel?

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,480
    Member #
    425
    Liked
    2784 times
    Neither. It used the width/height attributes of the img tag. The smaller one had explicit width/height CSS attributes set.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Senior Member
    Join Date
    Apr 2016
    Posts
    715
    Member #
    53891
    Liked
    10 times
    Explicit? I'm lost, the waybi see it they both had the same specified

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,480
    Member #
    425
    Liked
    2784 times
    CSS:
    Code:
    style="width:128px;height:128px;"
    Not CSS:
    Code:
    width="128" height="128"
    CSS in a style tag can override non-CSS width/height attributes. Almost nothing can override inline CSS (there are things that can, but that's an advanced topic).
    busso likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  8. #7
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,980
    Member #
    5580
    Liked
    761 times
    This is the first thing that applies:
    <style>
    img {
    width:100%;
    }
    </style>

    Any images will now be 100% wide.

    oh, but wait ...

    Now we have inline CSS that over-rides the style sheet:
    style="width:128px;height:128px;"

    So that rule applies, regardless of the "width:100%"


    And now we use HTML properties:
    width="128" height="128"

    Those mean nothing to CSS and are ignored.
    That means the "width:100%" prevails.
    busso and TheGAME1264 like this.


  9. #8
    Junior Member
    Join Date
    May 2016
    Location
    Bangaluru
    Posts
    16
    Member #
    54222
    you need to change the size in css and write proper code

  10. #9
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,480
    Member #
    425
    Liked
    2784 times
    pxljobs: what exactly does that have to do with the question being asked?
    busso likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:00 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2022 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com