Results 1 to 17 of 17
  1. #1
    Join Date
    Feb 2004
    Posts
    305

    A tiny problem with rounded corners

    Please look at the attached image.

    What should I do in the .css file to resolve this?

    Thanks
    Attached Thumbnails Attached Thumbnails webhostingtalk.gif  

  2. #2
    Join Date
    Jan 2006
    Location
    England
    Posts
    463
    can we see the css file and html so i can see how it is coded?

    here is a tutorial which shows you how to make rounded corders with a border (similar to you) using only css - http://www.webberscorner.com/showthread.php?tid=116

    to help we need to see the site.

  3. #3
    Join Date
    Feb 2004
    Posts
    305
    Hello daveredfern

    Sorry for being late, and thanks for your concern

    Please visit this page:

    http://bluemeel.com/lessrobo/reviews.htm

    You will find another example of what I'm talking about.

    Thanks

  4. #4
    Join Date
    Feb 2004
    Posts
    305
    Please guys, guide me to a solution

  5. #5
    Join Date
    Sep 2004
    Location
    singapore
    Posts
    125
    Hi.
    Its because the max height of the content is restricted by

    http://bluemeel.com/lessrobo/roundedcornr_625978_tl.png

    What you do is enclose the content in another div so that the left green img will repeat with content

    .roundedcornr_content_625978-l {
    background: url(roundedcornr_625978_r.png) top left repeat-y;
    margin-left:-15px;
    }

    This type of round corner will always break when a user increases text size, i would advice you to look for a better one .. try the one below

    http://www.webcredible.co.uk/user-fr...-borders.shtml

  6. #6
    Join Date
    Feb 2004
    Posts
    305
    Hello flakdesign,

    Where should I put the <div> tag in the html code?

    Also, should I put the css tag in a particular place in the css file? because I put it at bottom

    I'm a beginner in css, sorry

  7. #7
    Join Date
    Feb 2004
    Posts
    305
    Also, the link you put does not work!

  8. #8
    Join Date
    Sep 2004
    Location
    singapore
    Posts
    125
    The link does work..

  9. #9
    Join Date
    Sep 2004
    Location
    singapore
    Posts
    125
    Include the div as given in bold/....

    <div class="roundedcornr_box_625978">
    <div class="roundedcornr_box_625978">
    <div class="roundedcornr_top_625978"><div></div></div>
    <div class="roundedcornr_content_625978">
    <div class="roundedcornr_content_625978-l">
    <p><table border="0" width="95%">
    <tr>
    <td width="141" align="center">
    <img border="0" src="pcmag-edchoice.jpg" width="61" height="120"></td>
    <td height="128">RoboForm was awarded the prestigious
    Editor's Choice Award by PC Magazine on May 25, 2005.</td>
    </tr>

  10. #10
    Join Date
    Feb 2004
    Posts
    305
    Thanks a lot flakdesign

    That solved it, but another problem happened, please look at the attached image.
    Attached Thumbnails Attached Thumbnails Image1.gif  

  11. #11
    Join Date
    Sep 2004
    Location
    singapore
    Posts
    125
    Please post your code or link to the page.

  12. #12
    Join Date
    Feb 2004
    Posts
    305

  13. #13
    Join Date
    Sep 2004
    Location
    singapore
    Posts
    125
    i would say. you use a different method to generate round corners...

  14. #14
    Join Date
    Feb 2004
    Posts
    305
    I see

    I've used this generator by the way:

    http://www.roundedcornr.com

  15. #15
    Join Date
    Nov 2003
    Location
    Buffalo, New York
    Posts
    63
    Hi,

    I see you are still having little problems with the corners. Looking at the coding, not too sure as I have never tried using corners with Tables. That might be one reason why things break because of the table expanding and table-less solution would be best way going about this.

    Here is the correct way that I could think of, you have too many div endings, or your corner is in the wrong place. For example;

    (The XHTML input)
    HTML Code:
    <div id="roundcorner">
         <div class="corner-top-left"><div class="corner-top-right">
         <div class="corner-bottom-left"><div class="corner-bottom-right">
         
         Than in between here place the <p><table> and end it with </table></p>
    
         </div></div></div></div>
    </div>
    (The CSS input)
    HTML Code:
    div#roundcorner {enter your settings}
    
    div.corner-top-left {background:url(../images/top-left.gif) 0 0 no-repeat #E3E3E3}
    
    div.corner-top-right {background:url(../images/top-right.gif) 100% 0 no-repeat; display: block}
    
    div.corner-bottom-left { background:url(../images/bottom-left.gif) 0 100% no-repeat #E3E3E3; width:810px}
    
    div.corner-bottom-right {background:url(../images/bottom-right.gif) 100% 100% no-repeat}
    Sure there are different approaches when it comes to CSS setup, but we use this for most of our clients and it works like a charm.

    Give it a try, if still problems give me a shout.
    Artur B. @ Kenton Networks, New York Reliable Dedicated Servers with SSD.
    Website: www.kentonnetworks.com / Skype: kentonnetworks
    Office: 1.716.220.8995

  16. #16
    Join Date
    Feb 2004
    Posts
    305
    catbones.

    before I do anything, do you take any PSD file we file and conver it into HTML with CSS page in less than 24h for only $150 per page??

    I'll be your first client in that case

    Regards

  17. #17
    Join Date
    Nov 2003
    Location
    Buffalo, New York
    Posts
    63
    Hi,

    Yes any PSD, I'm hoping we are talking about Photoshop lol. Umm... best thang to do is to contact me directly and while doing that send me your PSD, I'll have a look. Usually, yes a PSD with any design, cut set or not, we cut it and convert it into xhtml and css. Visit our site for more info
    Artur B. @ Kenton Networks, New York Reliable Dedicated Servers with SSD.
    Website: www.kentonnetworks.com / Skype: kentonnetworks
    Office: 1.716.220.8995

Posting Permissions

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