Solved

Difficult CSS Rounded Edge question

Posted on 2009-05-07
11
416 Views
Last Modified: 2013-11-19
I have a rounded edge dialog box that is not displayign the bottom left corner properly.  I cannot figure out what I am doing wrong.

Goto this link and click the Sign Up link in the top right to see the example:
http://www.homey.com/rounded/

Here is the CSS:
 
/* 
  -- Even more rounded corners with CSS: Base stylesheet --
*/
 
.dialog {
 position:relative;
 margin:0px auto;
 min-height:0px;
 min-width:8em;
 max-width:760px; /* based on image dimensions - not quite consistent with drip styles yet */
 color:#fff;
 z-index:1;
 margin-left:12px; /* default, width of left corner */
 margin-bottom:0.5em; /* spacing under dialog */
}
 
.dialog .content,
.dialog .t,
.dialog .b,
.dialog .b div {
 background:transparent url(../images/dialog2-blue-800x1600.png) no-repeat top right;
 _background-image:url(../images/dialog2-blue.gif);
}
 
.dialog .content {
 position:relative;
 zoom:1;
 _overflow-y:hidden;
 padding:0px 12px 0px 0px;
}
 
.dialog .t {
 /* top+left vertical slice */
 position:absolute;
 left:0px;
 top:0px;
 width:12px; /* top slice width */
 margin-left:-12px;
 height:100%;
 _height:1600px; /* arbitrary long height, IE 6 */
 background-position:top left;
}
 
.dialog .b {
 /* bottom */
 position:relative;
 width:100%;
}
 
.dialog .b,
.dialog .b div {
 height:30px; /* height of bottom cap/shade */
 font-size:1px;
}
 
.dialog .b {
 background-position:bottom right;
}
 
.dialog .b div {
 position:relative;
 width:12px; /* bottom corner width */
 margin-left:-12px;
 background-position:bottom left;
}
 
.dialog .hd,
.dialog .bd,
.dialog .ft {
 position:relative;
}
 
.dialog .wrapper {
 /* extra content protector - preventing vertical overflow (past background) */
 position:static;
 max-height:1000px;
 overflow:auto; /* note that overflow:auto causes a rather annoying redraw "lag" in Firefox 2, and may degrade performance. Might be worth trying without if you aren't worried about height/overflow issues. */
}
 
.dialog h1,
.dialog p {
 margin:0px; /* margins will blow out backgrounds, leaving whitespace. */
 padding:0.5em 0px 0.5em 0px;
}
 
.dialog h1 {
 padding-bottom:0px;
}

Open in new window

0
Comment
Question by:pda4me
  • 6
  • 5
11 Comments
 
LVL 39

Expert Comment

by:abel
ID: 24326949
I managed to get your bottom left corner correct (you reversed ".dialog .b div" where you meant ".dialog div.b" or you were missing a div). Here's the snippet:

.dialog div.b  {
 position:absolute;
 width:100%; /* bottom corner width */
 margin-left:-12px;
 background-position:bottom left;
}

Open in new window

0
 

Author Comment

by:pda4me
ID: 24327032
thanks...close, but still not 100%, it looks like it reversed the corner and its not lining up?  Suggestions?
0
 

Author Comment

by:pda4me
ID: 24327082
please hit refresh here to see the update:
http://www.homey.com/rounded/
0
Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

 
LVL 39

Expert Comment

by:abel
ID: 24327120
exactly. But, the point seems to be, that you are missing a div there. I don't know this method of rounded corners (and there are many around) but here's a way to position the div in the correct position, while you need to add the following to the html page. I pasted the full CSS because it needed some minor tweaks on several spots:


</p>
   <!-- the b2 class div before the closing of the big div -->
   <div class="b2" ></div>
   </div>
 <div class="b"></div>


/* 
  -- Even more rounded corners with CSS: Base stylesheet --
*/
 
.dialog {
 position:relative;
 margin:0px auto;
 min-height:0px;
 min-width:8em;
 max-width:760px; /* based on image dimensions - not quite consistent with drip styles yet */
 color:#fff;
 z-index:1;
 margin-left:12px; /* default, width of left corner */
 margin-bottom:0.5em; /* spacing under dialog */
}
 
.dialog .content,
.dialog .t,
.dialog .b,
.dialog .b div,
.dialog div.b2 {
 background:transparent url(dialog2-blue-800x1600.png) no-repeat top right;
 _background-image:url(../images/dialog2-blue.gif);
}
 
.dialog .content {
 position:relative;
 zoom:1;
 _overflow-y:hidden;
 padding:0px 12px 0px 0px;
}
 
.dialog .t {
 /* top+left vertical slice */
 position:absolute;
 left:0px;
 top:0px;
 width:12px; /* top slice width */
 margin-left:-12px;
 height:100%;
 _height:1600px; /* arbitrary long height, IE 6 */
 background-position:top left;
}
 
.dialog .b {
 /* bottom */
 position:relative;
 width:100%;
}
 
.dialog .b,
.dialog div.b,
.dialog div.b2{
 height:30px; /* height of bottom cap/shade */
 font-size:1px;
}
 
.dialog .b {
 background-position:bottom right;
}
 
.dialog div.b2  {
 position:absolute;
 width:12px; /* bottom corner width */
 margin-left:-12px;
 background-position:bottom left;
}
 
.dialog .hd,
.dialog .bd,
.dialog .ft {
 position:relative;
}
 
.dialog .wrapper {
 /* extra content protector - preventing vertical overflow (past background) */
 position:static;
 max-height:1000px;
 overflow:auto; /* note that overflow:auto causes a rather annoying redraw "lag" in Firefox 2, and may degrade performance. Might be worth trying without if you aren't worried about height/overflow issues. */
}
 
.dialog h1,
.dialog p {
 margin:0px; /* margins will blow out backgrounds, leaving whitespace. */
 padding:0.5em 0px 0.5em 0px;
}
 
.dialog h1 {
 padding-bottom:0px;
}

Open in new window

0
 
LVL 39

Expert Comment

by:abel
ID: 24327209
ignore that last post. It will not hold on IE.
0
 

Author Comment

by:pda4me
ID: 24327212
I updated with the changed above will still no luck.  If there another method you would recommend that would work better?
0
 
LVL 39

Accepted Solution

by:
abel earned 500 total points
ID: 24327257
But my analysis of you missing a <div> was correct, however. Intead of my instruction before, you should place a div inside the <div class="b">. That will look like this:
<div class="b">     <div></div> </div>

Then, all of a sudden most of the code will work, with the exception of some outlining on IE. Which is fixed by adding a text-align:left to the .dialog .b styles, which is in the end the only line that changes. For completeness sake (and because you may lose track) here's the full CSS again with only one changed line.

-- Abel --


/* 
  -- Even more rounded corners with CSS: Base stylesheet --
*/
 
.dialog {
 position:relative;
 margin:0px auto;
 min-height:0px;
 min-width:8em;
 max-width:760px; /* based on image dimensions - not quite consistent with drip styles yet */
 color:#fff;
 z-index:1;
 margin-left:12px; /* default, width of left corner */
 margin-bottom:0.5em; /* spacing under dialog */
}
 
.dialog .content,
.dialog .t,
.dialog .b,
.dialog .b div {
 background:transparent url(dialog2-blue-800x1600.png) no-repeat top right;
 _background-image:url(../images/dialog2-blue.gif);
}
 
.dialog .content {
 position:relative;
 zoom:1;
 _overflow-y:hidden;
 padding:0px 12px 0px 0px;
}
 
.dialog .t {
 /* top+left vertical slice */
 position:absolute;
 left:0px;
 top:0px;
 width:12px; /* top slice width */
 margin-left:-12px;
 height:100%;
 _height:1600px; /* arbitrary long height, IE 6 */
 background-position:top left;
}
 
.dialog .b {
 /* bottom */
 position:relative;
 width:100%;
}
 
.dialog .b,
.dialog .b div {
 height:30px; /* height of bottom cap/shade */
 font-size:1px;
}
 
.dialog .b {
 background-position:bottom right;
 text-align:left;
}
 
.dialog .b div {
 position:relative;
 width:12px; /* bottom corner width */
 margin-left:-12px; 
 background-position:bottom left;
}
 
.dialog .hd,
.dialog .bd,
.dialog .ft {
 position:relative;
}
 
.dialog .wrapper {
 /* extra content protector - preventing vertical overflow (past background) */
 position:static;
 max-height:1000px;
 overflow:auto; /* note that overflow:auto causes a rather annoying redraw "lag" in Firefox 2, and may degrade performance. Might be worth trying without if you aren't worried about height/overflow issues. */
}
 
.dialog h1,
.dialog p {
 margin:0px; /* margins will blow out backgrounds, leaving whitespace. */
 padding:0.5em 0px 0.5em 0px;
}
 
.dialog h1 {
 padding-bottom:0px;
}

Open in new window

ScreenShot262.png
0
 

Author Comment

by:pda4me
ID: 24327344
This is what I added to the page after the </p> and updated the css with the new and its not working. What am I doing wrong?

</p>
   </div>
 <div class="b"><div></div></div>
</div>
</div>
</div>
0
 

Author Comment

by:pda4me
ID: 24327445
nevermind, found it...worked great, thanks!
0
 

Author Closing Comment

by:pda4me
ID: 31579029
Thanks for working with me on this, you were a HUGE help!
0
 
LVL 39

Expert Comment

by:abel
ID: 24327540
you're welcome, glad it worked well!
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
css, html 5 42
P tag not forcing line space 2 27
Problem to refer to value 8 48
div to fit another div 8 22
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question