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.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    405
    Thanks
    17
    Thanked 2 Times in 2 Posts

    div overflow hidden for images possible?

    I'm trying to make a div tag with rounded corners to place images in for a gallery. But when I apply the overflow to "hidden" it doesn't hide the corners.

    Still learning the ins and outs of style sheets, so maybe I'm missing something simple, but I don't know what.

    thanks!
    Last edited by turpentyne; 12-27-2010 at 03:36 AM.

  • #2
    Regular Coder
    Join Date
    May 2009
    Posts
    425
    Thanks
    3
    Thanked 62 Times in 61 Posts
    I'm assuming you're using border-radius or whatever. I don't have much experience with this... because I see no reason to use it until it's standard throughout 99% of web browsers people use. In the meantime, a sure fire way for you to solve this problem is to add position:relative; or position:absolute; to the div containing the image and then add 4 divs with position:absolute; to the container div to imitate the 4 rounded corners... that is, if you're not using a complex background around the container.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello turpentyne,
    Many times a containing div is just extra markup. If you put the rounded corners on the image itself then you don't need to worry about your div overflowing.

    Look at this example -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    		/* HTML5 tags */
    		header, section, footer,
    		aside, nav, article, figure {display: block;}
    section {
    	width: 800px;
    	margin: 30px auto;
    	padding: 50px;
    	background: #999;
    }
    img {
    	height: 150px;
    	width: 150px;
    	-moz-border-radius: 15px;
    	border-radius: 15px;
    } 
    
    </style>
    </head>
    <body>
            <section>
            	<img src="backall.jpg" alt="img" />
            </section>
    </body>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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