Difficult CSS Rounded Edge question

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

pda4meAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
abelConnect With a Mentor Commented:
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
 
abelCommented:
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
 
pda4meAuthor Commented:
thanks...close, but still not 100%, it looks like it reversed the corner and its not lining up?  Suggestions?
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
pda4meAuthor Commented:
please hit refresh here to see the update:
http://www.homey.com/rounded/
0
 
abelCommented:
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
 
abelCommented:
ignore that last post. It will not hold on IE.
0
 
pda4meAuthor Commented:
I updated with the changed above will still no luck.  If there another method you would recommend that would work better?
0
 
pda4meAuthor Commented:
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
 
pda4meAuthor Commented:
nevermind, found it...worked great, thanks!
0
 
pda4meAuthor Commented:
Thanks for working with me on this, you were a HUGE help!
0
 
abelCommented:
you're welcome, glad it worked well!
0
All Courses

From novice to tech pro — start learning today.