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 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2005
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    if div has rounded corner, how to remove borders?

    I have a snippet of code I'm working on. Basically it's a div that has a corner set to the top right of the image. Similar to the rounded corners things I find all over the web, except for one major difference - it only has one rounded corner image. The image itself is also a shade of grey and a darker grey with a 1px border. So, to match the look of the corner image, I set the bg color to the lighter grey and apply a dark grey 1px border to the div (as seen below). However, that puts the border around the image itself and causes the rounded corner to be pointless. So I tried wrapping the content in a div inside that div and applying the border to that, so as to "push" the rounded corner div outside, but that didn't work either... Any idea on how to get this code to work?

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #left_box {
    	float: left;
    	width: 207px;
    }
    #left_box .title {
    	color: #FFFFFF;
    	font-size: 11px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: normal;
    	background-image: url(img12.jpg);
    	background-repeat: no-repeat;
    	height: 19px;
    }
    #left_box .content_corner {
    	color: #000000;
    	background-color: #F4F4F4;
    	background-position: right top;
    	background-image: url(leftFrame_TLcurve.jpg);
    	background-repeat: no-repeat;
    	font-size: x-small;
    	border: none;
    }
    #left_box .content {
    	border-left: 1px solid #CCCCCC;
    	border-right: 1px solid #CCCCCC;
    	border-top: 1px solid #CCCCCC;
    	border-bottom: 1px solid #CCCCCC;
    	height: 100px;
    }
    -->
    </style>
    </head>
    
    <body>
    
    <div id="left_box">
    		<div class="title">Header</div>
    			<div class="content_corner">
    				<div class="content">
    				Lorem ipsum dolor sit amet, bene facilisi.
    				</div>
    			</div>	
    </div>
    
    </body>
    </html>
    I can't post this live to the net so will attach the two images below.
    Attached Thumbnails Attached Thumbnails if div has rounded corner, how to remove borders?-img12.jpg  
    Attached Images Attached Images  

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Try this:
    Code:
    #left_box .content_corner {
    	color: #000000;
    	font-size: x-small;
    	border: 1px solid #CCCCCC;
    	background-color: #F4F4F4;
    	height: 100px;
    }
    #left_box .content {
    	background-position: right top;
    	background-image: url(leftFrame_TLcurve.jpg);
    	background-repeat: no-repeat;
    	margin-top: -1px;
    	margin-right: -1px;
    	padding-top: 1px;
    	padding-right: 1px;
    	position: relative;
    }

  • #3
    New Coder
    Join Date
    Aug 2005
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm. Seems to sort of work. In IE, it fixes only the top border, but leaves a border on the right that extends up to the corner img. In FF, it's totally out of whack.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Can you please upload the page to some location so we can inspect for ourselves. If you don't have a host then use a free one e.g. http://www.byethost.com/


  •  

    Posting Permissions

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