Results 1 to 2 of 2

Thread: Rounded Corner Box CSS problem

  1. #1
    Join Date
    Sep 2010
    Posts
    38

    Rounded Corner Box CSS problem

    I have a rounded corner box which contains records from a MySQL database.

    My problem is that the two bottom corner images do not go on the bottom but rather stay right below the upper 2 corner images as if the box is empty.

    This happens when I generate the box both in HTML and PHP.

    How can I bring the corners down where they belong?

    The problem can be seen on this page - bottom right (the orange corners)
    http://www.troutsalmonchar.com/index1.php



    Here is the php version, wrapping the MySQL table.


    PHP Code:
    echo "<div class='roundcont'>";
    echo 
    "<div class='roundtop'>";
    echo 
    "<img src='tl.gif' alt='' width='15' height='15' class='corner' style='display: none' />";
    echo 
    "</div>";
    echo 
    "<div class='Right_FM'>";

    echo 
    "<table width='100%' border='0' align='left'>";

    while(
    $nt=mysql_fetch_array($result)){
    $dt=date("F j, Y"$nt[post_time]);
    echo 
    "<tr>";
    echo 
    "<td width='30%'>$dt</td>";
    echo 
    "<td width='70%'><a href='http://troutsalmonchar.com/Forum/viewtopic.php?f=$nt[forum_id]&t=$nt[topic_id]'>$nt[post_subject]</a></td>";
    echo 
    "<tr>";
    }

    echo 
    "</table>";
    echo 
    "</div>";

    echo 
    "<div class='roundbottom'>";
    echo 
    "<img src='bl.gif' alt=''width='15' height='15' class='corner' style='display: none' />";
    echo 
    "</div>";
    echo 
    "</div>"

  2. #2
    Join Date
    Feb 2006
    Location
    Salisbury UK
    Posts
    4,332
    I wouldn't do it your way, but I can make your method work like this:-
    CSS edits:-
    Code:
    .roundcont {                 position: relative;
    	width: 250px;
    	background-color: #949F83;
    	color: #fff;
    	float: right;
    	height: 200px;/*200px;*/
    	width: 281px;
    }
    
    .roundbottom { height: 15px; clear: both; background-color: #949F83;
    }
    Markup:-
    Code:
    ................Lake - Kamloops</a></td><tr></table>
    </div><!--end of .roundtop-->
    
    <div class='roundbottom'><img src='images/bl.gif' alt=''width='15' 
    height='15' class='corner' style='position: absolute; left:0;' 
    /><img src='images/br.gif' alt=''width='15' height='15' class='corner' 
    style='position: absolute; right:0;' />
    </div><!--end of .roundbottom-->
    
    </div><!--end of .roundcont-->
    Code downloaded to my PC will be deleted in due course.
    WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
    Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.

Similar Threads

  1. rounded corners with css
    By rich in forum Web Design, HTML Reference and CSS
    Replies: 1
    Last Post: 08 Feb 2010, 04:40 PM
  2. Changing css style with Javascript - with a difference
    By mojobullfrog in forum Client & Server Side Scripting (PHP, ASP, JavaScript)
    Replies: 0
    Last Post: 28 Jan 2010, 08:58 PM

Posting Permissions

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