SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Problem:Rounded Corners with Tables 1px off

    Hello all,

    I am working on a rounded block for a website - specifically a block for news items. Each news item is going to fit in its own nice rounded block on a front page.

    Currently I am using a table for the news content within a table that handles the formatting of the rounded corners. Everything looks good in FF however when I pop into IE the side td's (in the outside table (class="news_side")) background image pops 1px down throwing off the clean line formed by that same gradient in the title.

    The Optimal solution would be to not use the <td class="news-side"> at all and just apply colspan="3" to the td containing the content. Because i would love to be able to apply a nice gradient behind the actual article going up and fading to white. However when I tried using this technique it IE rejected it and did not align the corners to the outside of the table.

    I fear my explanation may be a bit unclear and convoluted without looking at the code. I have attached a zip file containing all of the html demo and the images used. Here is the code here as well with CSS at the top.

    Thanks in advance! I love this site - been spending loads of time trolling all the different sections since I discovered it a couple of weeks ago.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>SP Rounded Corner Demo</title>

    <
    style type="text/css">
    *
    {
        
    margin:0;
        
    padding:0;
    }
    body
    {
        
    background-color:#161616;
    }
    div#news 
    {
        
    float left;
        
    width 828px;
        
    border 1px solid #161616;
        
    margin:0 5px 0 5px;
    }
    table.news_output
    {
        
    background-color:#FFF;
        
    border-collapse:collapse;
    }
    td.news_body
    {
        
    padding:5px;
    }
    td.news_body p
    {
        
    text-indent15px;    
    }
    td.news_body img
    {
        
    float:left;
        
    margin:3px;
    }
    td.news_title,td.news_date
    {
        
    color:#e8d138;
        
    background-imageurl(news_title.gif);
        
    background-repeatrepeat-x;
        
    background-positionleft top;
    }
    td.news_title a,td.news_date a:visited
    {
        
    color:#e8d138;
    }
    td.news_title
    {font-size:24px;padding:0 0 0 2px;}
    td.news_date
    {
        
    text-align:right;
        
    padding:0 2px 0 0;
    }
    /*Corners*/
    table.news_corners
    {    
        
    border-collapse:collapse;
        
    width:100%;
        
    margin:0 0 0 0;
    }
    td.news_nw{
        
    width:5px;
        
    backgroundurl(news_nw.gifno-repeat bottom right;
    }
    td.news_ne{
        
    width:5px;
        
    backgroundurl(news_ne.gifno-repeat bottom left;
    }
    td.news_sw{
        
    width:5px;
        
    backgroundurl(news_sw.gifno-repeat top right;
    }
    td.news_se{
        
    width:5px;
        
    backgroundurl(news_se.gifno-repeat top left;
    }
    td.news_midtop
    {
        
    backgroundurl(news_mid.gifrepeat-x bottom left;
    }
    td.news_midbot
    {
        
    backgroundurl(news_midbot.gifrepeat-x top left;
    }
    td.news_side
    {
        
    background-color#fcfff4;
        
    vertical-align:top;
    }
    div.news_side
    {
        
    height:28px;
        
    background-imageurl(news_title.gif);
        
    background-repeatno-repeat;
        
    background-positiontop;
        
    overflow:hidden;
    }
    </
    style>
    </
    head>

    <
    body>
        <
    div id="news">
        <
    table class="news_corners">
                    <
    tr>
                    <
    td class="news_nw">&nbsp;</td><td class="news_midtop">&nbsp;</td><td class="news_ne">&nbsp;</td>
                    </
    tr>
                    <
    tr>
                    <
    td class="news_side"><div class="news_side">&nbsp;</div></td>
                    <
    td>
                    <
    table class="news_output">
                        <
    tr>
                        <
    td class="news_title">News Item</td><td class="news_date">Feb 122008 7:38PM by <a href="#">Poster</a></td>
                        </
    tr>
                        <
    tr>
                        <
    td colspan="2" class="news_body">
                        <
    p>Lorem ipsum dolor sit ametconsectetuer adipiscing elitDonec sed sapien vitae nunc mollis convallisIn hac habitasse platea dictumstVivamus accumsan nulla eget justoDonec et ipsumProin volutpatnunc nec egestas venenatisneque nisl tincidunt miet consectetuer odio purus a erosUt tristique massa sed diamFusce tellusIn commodo dictum arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostraper inceptos hymenaeosPraesent a nibhIn lacus felispharetra euornare volutpatlacinia vitaeloremDonec ullamcorper hendrerit tortorCras bibendum pellentesque odioAliquam venenatis feugiat odioMorbi elementumnisi sit amet laoreet pulvinarnisi lorem euismod miac consectetuer nunc felis porta felisNulla pellentesquemetus quis blandit gravidalibero est facilisis lectusquis congue diam sem nec pedeCras eu augue quis felis bibendum temporPellentesque dapibus turpis at metusMaecenas in maurisMaecenas dictum odio condimentum mauris.</p>
                        </
    td>
                        </
    tr>       
                    </
    table>
                    </
    td>
                    <
    td class="news_side"><div class="news_side">&nbsp;</div></td>
                    </
    tr>
                    <
    tr>
                        <
    td class="news_sw">&nbsp;</td><td class="news_midbot">&nbsp;</td><td class="news_se">&nbsp;</td>
                    </
    tr>
        </
    table>
        </
    div>
    </
    body>
    </
    html
    Attached Files Attached Files

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you thought about using Spanky Corners (from SitePoint) instead of a table?

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Have you thought about using Spanky Corners (from SitePoint) instead of a table?
    What a great tool. I would love to use the simplicity of using a header element to position the corners.

    However, I wonder if it will work for the way I have the information formatted - I really want to maintain the look of having the title of the article on the far right and the date on the far left. Would I be able to get the same look using the single header as done in Spanky Corners (love the name btw).

    It is important to me that this format be consistently obtained; accommodating variable length titles and dates.

    PHP Code:
    --Title Of Article----------------------------Feb 62007-- 
    Thanks!

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The best way would be to wrap the two elements inside a DIV, position it relatively, then position the title (a heading) and the date (a span) absolutely. If you need the border, then giving each element a background color and running a background image simulating the dashed border could work as well, especially if you floated both the heading and date span to the left and right, respectively.

    In other words, there are a few ways to go about it, depending on how you code the page.

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright, I'll give it a try in the morning and see what I can make of it. Thanks for the suggestion. It certainly would be a much simpler way of doing it.

    Out of curiosity though - is there a way to make the tabled version i have work for IE?

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Probably, but I don't use tables for layout - only to contain tabular data, so I wouldn't know of anything off the bat.

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Probably, but I don't use tables for layout - only to contain tabular data, so I wouldn't know of anything off the bat.
    You are wise to do so because these are driving me crazy! As it turns out FF is the only browser that displays it as I intentioned. Opera and Safari have the same thing going on.

    I've been trying to get something working with Spanky Corners. I have had very limited success.

    Here is what I have so far.
    PHP Code:
    <div class="rounded">
            <
    h1 style="background-color:blue">Title<span id="date">Feb Blah</span></h1>
                <
    p>&nbsp;</p>
            </
    div
    with the standard CSS from Spanky corners other than my span element within the header

    PHP Code:
    body {
      
    background-color#161616;
      
    color#333333;
      
    font-size:62.5%; /* Explain @ www.clagnut.com/blog/348/ */
    }
    span#date
    {
        
    position:relative;
        
    font-size:14px;
        
    left:450px;
    }

    /* all curved boxes get the bottom-left corner */
    div.rounded {
      
    background#ffffff url(bl_5_ffffff_161616.gif) no-repeat bottom left;
      
    color#333333;
      
    positionrelative;
      
    padding-top0;
      
    padding-bottom5px;
      
    margin1em 10px 0 0 ;
      
    height:100%;
      
    width:750px;

    }

    /* all elements in 'div.rounded' gets the B-R corner */
    div.rounded * {
      
    background#ffffff url(br_5_ffffff_161616.gif) no-repeat bottom right;
      
    color#333333;
      
    padding1em 2em 5px 0;
      
    margin0 0 -5px 5px;
      
    height:100%;
    }

    /* Scrub that B-R corner from all elements *2+* levels deep*/
    div.rounded * * {
      
    padding0;
      
    margin0;
      
    backgroundnone;
      
    color#333333;
      
    height:auto
    }

    /* Set up some H's as 'box heads' with the T-R and T-L corners */
    div.rounded h1div.rounded h4 {
      
    color#161616;
      
    background#ffffff url(tr_5_ffffff_161616.gif) no-repeat top right;
      
    display: list-item;
      list-
    style-imageurl(tlc_5_ffffff_161616.gif);
      list-
    style-positioninside;
      list-
    style-type:none;
      
    padding0;
      
    margin0;
      
    positionrelative;
    }

    div.rounded h1 {
      
    font-size3.2em;
    }
    div.rounded h4 {
      
    font-size2em;


    When put both elements inside a div it threw the corners off completely, this is the closest I have been able to come to getting my desired result. Also - the header element only changes its background color to blue when I put it inline or as an id. Is there a way to allow it to accept a class for its background color (image in my case)?

    I do apologize if I seem ignorant but these Spanky corners are new to me and I must admit that the CSS used is not entirely clear to me just yet. Thanks for all the help thus far!

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just thought I would wrap it up - I found a solution that works for what I want to do and works across browsers. Yes - It does use tables but a much simpler approach than I first posted using just 2 background images and one table.

    I did wind up playing around with the SpankyCorners for quite some time and I'm sure I'll have a use for them on a future project. Thanks for pointing those out.

    Cheers!


Bookmarks

Posting Permissions

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