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-indent: 15px;
}
td.news_body img
{
float:left;
margin:3px;
}
td.news_title,td.news_date
{
color:#e8d138;
background-image: url(news_title.gif);
background-repeat: repeat-x;
background-position: left 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;
background: url(news_nw.gif) no-repeat bottom right;
}
td.news_ne{
width:5px;
background: url(news_ne.gif) no-repeat bottom left;
}
td.news_sw{
width:5px;
background: url(news_sw.gif) no-repeat top right;
}
td.news_se{
width:5px;
background: url(news_se.gif) no-repeat top left;
}
td.news_midtop
{
background: url(news_mid.gif) repeat-x bottom left;
}
td.news_midbot
{
background: url(news_midbot.gif) repeat-x top left;
}
td.news_side
{
background-color: #fcfff4;
vertical-align:top;
}
div.news_side
{
height:28px;
background-image: url(news_title.gif);
background-repeat: no-repeat;
background-position: top;
overflow:hidden;
}
</style>
</head>
<body>
<div id="news">
<table class="news_corners">
<tr>
<td class="news_nw"> </td><td class="news_midtop"> </td><td class="news_ne"> </td>
</tr>
<tr>
<td class="news_side"><div class="news_side"> </div></td>
<td>
<table class="news_output">
<tr>
<td class="news_title">News Item</td><td class="news_date">Feb 12, 2008 7:38PM by <a href="#">Poster</a></td>
</tr>
<tr>
<td colspan="2" class="news_body">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sed sapien vitae nunc mollis convallis. In hac habitasse platea dictumst. Vivamus accumsan nulla eget justo. Donec et ipsum. Proin volutpat, nunc nec egestas venenatis, neque nisl tincidunt mi, et consectetuer odio purus a eros. Ut tristique massa sed diam. Fusce tellus. In commodo dictum arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent a nibh. In lacus felis, pharetra eu, ornare volutpat, lacinia vitae, lorem. Donec ullamcorper hendrerit tortor. Cras bibendum pellentesque odio. Aliquam venenatis feugiat odio. Morbi elementum, nisi sit amet laoreet pulvinar, nisi lorem euismod mi, ac consectetuer nunc felis porta felis. Nulla pellentesque, metus quis blandit gravida, libero est facilisis lectus, quis congue diam sem nec pede. Cras eu augue quis felis bibendum tempor. Pellentesque dapibus turpis at metus. Maecenas in mauris. Maecenas dictum odio condimentum mauris.</p>
</td>
</tr>
</table>
</td>
<td class="news_side"><div class="news_side"> </div></td>
</tr>
<tr>
<td class="news_sw"> </td><td class="news_midbot"> </td><td class="news_se"> </td>
</tr>
</table>
</div>
</body>
</html>
Originally Posted by Dan Schulz
Bookmarks