Solved

Difficult CSS Rounded Edge question

Posted on 2009-05-07
11
408 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
 
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
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 the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

705 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now