Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder
    Join Date
    Feb 2014
    Posts
    534
    Thanks
    85
    Thanked 0 Times in 0 Posts

    Border size question

    Hello

    I have the following in my code:

    HTML

    Code:
    <body>
    <h1>Heading</h1>
    
    <ul class="gallery_type">
    	<li>
    		<a href="#">
    			<img src="images/01.jpg" alt="placeholder">
    		</a>
    	</li><li>
    		<a href="#">
    			<img src="images/02.jpg" alt="placeholder">
    		</a>
    	</li><li>
    		<a href="#">
    			<img src="images/03.jpg" alt="placeholder">
    		</a>
    	</li><li>
    		<a href="#">
    			<img src="images/04.jpg" alt="placeholder">
    		</a>
    	</li>
    </ul>
    
    </body>
    and in my CSS:

    Code:
    .gallery_type {
    	list-style:none;
    	display:flex;
    	flex-direction:row;	
    	flex-wrap:wrap;	
    	align-items:center;	
    	justify-content:center;
    	margin:0 auto;
    	padding:40px;	
    	}
    
    .gallery_type {
    	max-width:850px;
    }
    
    .gallery_type li {
    	padding:5px;
    	text-align:center;
    	outline:1px solid #ffffff;
    }
    
    .gallery_type a {
    	display:inline-block;
    	vertical-align:bottom;
    	padding:10px;
    	background:#000;
    	border:1px solid #FFF;	
    	border-radius:5%;	
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
    	transition:scale 0.3s;
    	transform:scale 1.1;	
    }
    
    .gallery_type img {
    	display:block;
    	height:180px;
    }
    It produces the following movie screenshot

    -posttoforum.jpg

    The black border around the images is too thick, but even when I make it 1px it doesn't seem to have changed anything (it was 5px and I haven't noticed a difference). How would I narrow that border, please? I am not sure if the problem is related to box-shadow rather than the border itself.

    Thank you.

  2. #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,596
    Thanks
    3
    Thanked 641 Times in 627 Posts
    Hi there Blue1,
    [

    does this look any better...

    Code:
    
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <link rel="stylesheet" href="screen.css" media="screen">
    
    <style media="screen">
    body {
        background-color: #f9f9f9;
        font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
     }
    .gallery_type {
    	list-style: none;
    	display: flex;
    	flex-direction: row;	
    	flex-wrap: wrap;	
    	align-items: center;	
    	justify-content: center;
    	margin:0 auto;
    	padding: 2.5em;	
    	}
    
    .gallery_type {
    	max-width: 53.125em;
    }
    
    .gallery_type li {
    	padding: 0.3em;
    }
    
    .gallery_type a {
    	display:block;
    	border: 2px solid #fff;	
    	border-radius: 0.75em;	
       padding: 0.625em;
       background: #000;
    	transition:scale 0.3s;
    	transform:scale 1.1;	
       box-shadow: 0 0 0.65em rgba(0,0,0,0.6);
    }
    
    .gallery_type img {
    	display: block;
       border: 1px solid #fff;
    }
    </style>
    
    </head>
    <body> 
     <ul class="gallery_type">
      <li>
    	<a href="#">
    	 <img src="https://via.placeholder.com/278x152/f93/fff"  width="278"  height="152" alt="placeholder">
    	</a>
      </li><li>
    	<a href="#">
    	 <img src="https://via.placeholder.com/278x152/080/fff" width="278"  height="152" alt="placeholder">
    	</a>
      </li><li>
    	<a href="#">
    	 <img src="https://via.placeholder.com/278x152/f00/fff" width="278"  height="152" alt="placeholder">
    	</a>
      </li><li>
    	<a href="#">
    	 <img src="https://via.placeholder.com/278x152/00f/fff" width="278"  height="152" alt="placeholder">
    	</a>
    	</li>
    </ul>
    
    <script>
    (function( d ) {
       'use strict';
    
    }( document ));
    </script>
    
    </body>
    </html>

    coothead
    ~ the original bald headed old fart ~

  3. #3
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,411
    Thanks
    7
    Thanked 1,377 Times in 1,346 Posts
    By the way: your transform value is malformed. It’s a function and as such needs brackets and within those the factors for the directions. See https://developer.mozilla.org/en-US/...function/scale

  4. #4
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,742
    Thanks
    5
    Thanked 536 Times in 522 Posts
    Code:
    	padding:10px;
    	background:#000;
    The padding is making the black border, not your border or box-shadow!
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  5. #5
    Regular Coder
    Join Date
    Feb 2014
    Posts
    534
    Thanks
    85
    Thanked 0 Times in 0 Posts
    Thank you VIPStephan for the advice and link.

    I now have this:

    Code:
    /*transform:scale 1.1;*/
    transform: scale (1.1); /* Equal to scaleX(1.1) scaleY(1.1) */
    Regards

  6. #6
    Regular Coder
    Join Date
    Feb 2014
    Posts
    534
    Thanks
    85
    Thanked 0 Times in 0 Posts
    Just what the doctor ordered, deathshadow.

    Many thanks for pointing that out!

    Resolved now.

    Regards

  7. #7
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,411
    Thanks
    7
    Thanked 1,377 Times in 1,346 Posts
    Quote Originally Posted by Blue1 View Post
    Thank you VIPStephan for the advice and link.

    I now have this:

    Code:
    /*transform:scale 1.1;*/
    transform: scale (1.1); /* Equal to scaleX(1.1) scaleY(1.1) */
    Regards
    Nope, it needs to be scale(1.1) – without space.

  8. #8
    New Coder
    Join Date
    Aug 2019
    Posts
    51
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Nope, it needs to be scale(1.1) – without space.
    Are you sure about that? I'm pretty sure CSS is very "forgiving" and smart when it comes to white space between ... parts of statements, whatever they're called. transform: scale (1.1); should work every bit as well as transform: scale(1.1);. (Not like the bad old days with some programming languages that were totally inflexible when it came to white space and formatting!)

  9. #9
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,596
    Thanks
    3
    Thanked 641 Times in 627 Posts
    Hi there NotACodeMonkey,

    scale() does not work with a space between the word
    and the opening bracket.

    Why did you not test your assertion before posting?

    I have not bothered to test similar attributes, other than
    rgb(), as I am pretty sure that the no-space rule applies
    to them all.

    coothead
    Last edited by coothead; Sep 22nd, 2019 at 11:30 PM.
    ~ the original bald headed old fart ~

  10. #10
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,742
    Thanks
    5
    Thanked 536 Times in 522 Posts
    Quote Originally Posted by NotACodeMonkey View Post
    (Not like the bad old days with some programming languages that were totally inflexible when it came to white space and formatting!)
    GOOD languages never were. HTML is not a good language.

    It's not even the language's fault, but implementer's. Do you remember back when you could have perfectly "valid" C99 code that two different compilers would require modifications to even get them to compile? Browsers are basically that. They don't agree on much of anything and their parser engines are a bit... dumb.

    It's actually part of why the over-forgiveness of the languages is a problem, not all browsers are as forgiving as the specification. I'm sure some browser engine somewhere doesn't care, but Gecko -- which I just tried it on -- does. This is probably much like how if you're dealing with time, Gecko is too stupid to realize that zero is zero regardless of metric. Hence why:

    Code:
    border:0;
    is perfectly fine, but Gecko (firefox) chokes on:

    Code:
    transition:0 0.5s;
    Even though no other browser takes issue with it. You HAVE to include a metric. Just like that metricless line-height bullcookies where people say if you:

    Code:
    body {
      line-height:1.5;
    }
    it will act like EM and inherit... except in gecko it remains based on a 16px default regardless of what the browser preference or system metric is, so it's ALWAYS going to be 24px on body even if your 1 REM is 20px, or 24px, etc, etc. As such, put a bloody metric on it.

    A lot of the advice you will hear is based on these types of experiences where one particular little browser -- usually FF or IE -- will utterly screw up how things are supposed to or typically do work.

    Sadly you can badmouth IE about this until the cows come home, nobody bats and eyelash. You DARE to say something like this about Firefox, the FLOSS "church of stallman" fanboy halfwits come streaming out of the woodwork screaming "HOW DARE YOU INSULT FIREFOX!!!"

    Laugh is prior to the release of "quantum" I was finding myself using stupid little hacks to get around FF issues more than I was IE11. But again, don't you DARE say that in public unless you want to be treated as a pariah. Just like it's not allowed to complain about 21 year old engine bugs (hello 915) or actual bugs that have plagued it just as long they delete as "resolved" or "invalid" from bugzilla. Remember, it's not a memory leak with runaway CPU hogging, it's a "feature".

    FFS Firefox still has gaps in its CSS2 implementation!

    With that type of site developer and user abuse commonplace in browser development, if you see a specific pattern being used or certain rules and practices are established? USE THEM! They are NOT all on the same page -- even today. It WAS worse a decade ago, but it's still very much there.
    Last edited by deathshadow; Sep 22nd, 2019 at 11:40 PM.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  11. #11
    New Coder
    Join Date
    Aug 2019
    Posts
    51
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by coothead View Post
    Hi there NotACodeMonkey,

    scale() does not work with a space between the word
    and the opening bracket.

    Why did you not test your assertion before posting?

    I have not bothered to test similar attributes, other than
    rgb(), as I am pretty sure that the no-space rule applies
    to them all.

    coothead
    Your apparent assumption here is incorrect.

    I did check it. Using this example (from developer.mozilla.org), I tested it both in CodePen and JSFiddle (links provided in example). In both of these, it makes no difference if you put a space between "scale" and "()". Don't believe me? Try it yourself.

    Don't know where you got that idea. BTW, I looked for, but failed to find, anything anywhere on the web that states that the syntax for that method disallows spaces. If you can find one, I'll stand corrected.
    Last edited by NotACodeMonkey; Sep 23rd, 2019 at 12:02 AM.

  12. #12
    New Coder
    Join Date
    Jul 2019
    Location
    Ahmedabad
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Blue1
    The problem here is with padding. i tried to changed value of padding. and then image's border is changed from thick to narrow.

    What i have changed is the value of padding .gallery_type a.

    Like this:

    .gallery_type a {
    display: inline-block;
    vertical-align: bottom;
    padding: 5px;
    background: #000;
    border: 1px solid #FFF;
    border-radius: 5%;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    transition: scale 0.3s;
    transform: scale 1.1;
    }


    Result:
    -screenshot-63-.jpg
    Last edited by HarshShah; Sep 23rd, 2019 at 05:47 AM.

  13. #13
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,411
    Thanks
    7
    Thanked 1,377 Times in 1,346 Posts
    Quote Originally Posted by NotACodeMonkey View Post
    Your apparent assumption here is incorrect.

    I did check it. Using this example (from developer.mozilla.org), I tested it both in CodePen and JSFiddle (links provided in example). In both of these, it makes no difference if you put a space between "scale" and "()". Don't believe me? Try it yourself.
    Sorry to disappoint you but with a space it definitely doesn’t work (at least in Firefox). I looked at the CodePen and JSFiddle examples and put a space between the string “scale” and the opening bracket and the scale transformation went back to nothing. I also created a simple example of my own: https://jsfiddle.net/1e2pgf07/ Works without space, doesn’t work with space.

  14. #14
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,596
    Thanks
    3
    Thanked 641 Times in 627 Posts

    Quote Originally Posted by NotACodeMonkey View Post
    If you can find one, I'll stand corrected.
    This example...

    Code:
    
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    
    <style media="screen">
    body {
        background-color: #f9f9f9;
        font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
     }
    
    #spaced-css {
        display: block;
        width: 6.25em;
        height: auto;
        margin: 4em auto;
        transform: rotate ( 90deg ) scale ( 1.75 );
        border: 0.25em solid rgba ( 255, 0, 0, 1 );
        filter: drop-shadow ( 0.5em 0.5em 1em #f00 ) 
                grayscale ( 80% ) 
                hue-rotate ( 90deg );   
     }
    
    </style>
    
    </head>
    <body> 
    
     <img id="spaced-css" src="https://www.coothead.co.uk/images/facepalm.jpg" width="225" height="225" alt="face palm">
    
    </body>
    </html>
    ...does not work and the CSS does not validate - ( see attached image ).

    This example...

    Code:
    
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    
    <style media="screen">
    body {
        background-color: #f9f9f9;
        font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
     }
    
    #unspaced-css {
        display: block;
        width: 6.25em;
        height: auto;
        margin: 4em auto;
        transform: rotate( 90deg ) scale( 1.75 );
        border: 0.25em solid rgba( 255, 0, 0, 1 );
        filter: drop-shadow( 0.5em 0.5em 1em #f00 ) 
                grayscale( 80% )  
                hue-rotate( 90deg );
     }
    
    </style>
    
    </head>
    <body> 
    
    <img id="unspaced-css" src="https://www.coothead.co.uk/images/facepalm.jpg" width="225" height="225" alt="face palm">
    
    </body>
    </html>
    ...does work and the CSS does Validate - ( see attached image ).

    coothead
    Attached Thumbnails Attached Thumbnails -notvalid.jpg   -valid.jpg  
    Last edited by coothead; Oct 4th, 2019 at 11:32 AM.
    ~ the original bald headed old fart ~

  15. #15
    New Coder
    Join Date
    Aug 2019
    Posts
    51
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Hmm, you're right.

    Thing is, I don't think it's supposed to work that way. I'd chalk that up to a defect in the parser (I guess in Firefox, which is what I'm using).

    I tried it in Chrome, and the damn page doesn't even render correctly! (Chrome's fault, not yours or JSfiddle). All the stuff at the top of the page is cut off. But I can see that the scale() doesn't work correctly without the space here either.


 
Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

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