Go Back   TechArena Community > Software > Software Development
Become a Member!
Forgot your username/password?
Tags Active Topics RSS Search Mark Forums Read

Reply
 
Thread Tools Search this Thread
  #1  
Old 15-04-2009
Member
 
Join Date: May 2008
Posts: 260
Overlapping corners with CSS

Hello,

Well, I was trying to create a couple overlapping rounded rectangles to the border at the left which overlaps the border on the bottom, which overlaps the one on the right and so on. I also want the borders to sit outside the content area and remain there no matter how the user resizes the window.

Am i approaching this wrong, just not aware of how to use the tool, or am I running into limitations of Design 2?
Reply With Quote
  #2  
Old 15-04-2009
Member
 
Join Date: May 2008
Posts: 279
Re: Overlapping corners with CSS

Hi,

Unfortunately my Design 2 has expired so I'm working from memory here.

First, when you set your slice to .jpg you should be able to uncheck the antialias box in the properties pane. First, when you set your slice to. Jpg you should be able to uncheck the antialias box in the properties pane. Also, turn on Snap to Points so that your slices snap to the points on the edges of your rectangles. Also, turn on Snap to Points so that your slices snap to the points on the edges of your rectangles. Does this work for you? Does this work for you?
Reply With Quote
  #3  
Old 15-04-2009
Member
 
Join Date: May 2008
Posts: 260
Re: Overlapping corners with CSS

Hi,

Well, Try this, although it only works on IE since it has a broken-box model, you'd have to work around it for Firefox. I think you could also fix it by adding a background pattern (with a an image that has the 1px blue line, it can be a 1x1 px image) and then add the css that would be something like this:
HTML Code:
.div2{ 
background: #fff url(blue_1px.gif) bottom left repeat-x; 
border-bottom: none; 
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style> 
body{background-color:#000;} 
.div2{ 
border-top:1px solid #f45; 
border-right:1px solid #f45; 
border-left:1px solid #f45; 
background-color:#fff; 
height:100px; 
width:100px; 
} 
.div1 { 
width: 101px; 
border-left: 1px solid black; 
border-bottom: 1px solid #14f; 
} 
</style> 
</head> 
<body> 
<div class="div1"> 
<div class=div2>Overlapping Corners Small</div> 
</div> 
</body> 
</html>
Reply With Quote
Reply

  TechArena Community > Software > Software Development
Tags:



Thread Tools Search this Thread
Search this Thread:

Advanced Search


Similar Threads for: "Overlapping corners with CSS"
Thread Thread Starter Forum Replies Last Post
My Text are overlapping with other columns in Excel RajiI MS Office Support 4 27-01-2012 07:20 PM
Mozilla Firefox 4 overlapping other windows Edgar Arular Technology & Internet 5 15-04-2011 10:28 AM
Problem of overlapping JLabel on JFrame with background Baazigar Software Development 6 14-12-2010 02:09 PM
How to set the Rounded corners for UIView? Bhartiya-Technician Software Development 4 01-06-2010 12:09 PM
Gears Of War 2: Dark Corners DLC justin987 Video Games 1 08-05-2009 08:13 AM


All times are GMT +5.5. The time now is 05:24 PM.