Hi
I have a box with rounded corners created with divs and background graphics
of the corners, sides and the bottom.
The problem is that it doesn't scale with the content. So I used a
javascript to do that. But that doesn't always work. Often when it goes
wrong it becomes ok if I refresh the page. But this seems like a buggy
solution. Also, Mozilla and IE seems to decide the height a little
differently so I have to check for wich browser it is etc. Would be nice to
get away from this Javascript way.Is there a CSS way to get it to the right
size?
The php can be mostly ignored. The <?=msg?> part is the part that print the
actual message.
Also, if the message height becomes less than the newsimage used it would be
nice to have the entire thing conform to the size of the image instead.
Here is the code:
<div id="nbcontainer<?=$news_id?>" class="news">
<!-- Left Side -->
<div id="nbleft<?=$news_id?>" style="float: left; width: 56px;">
<div><img src="<?=getImage('newsbox_topleft.gif')?>"></div>
<div style="height: 100%; overflow: hidden; background:
url(<?=getImage('newsbox_left.gif')?>)"><img id="nbimage<?=$news_id?>"
style="margin-left: 11px" src="<?=getImage($news_image, news_files .
'images/')?>" /></div>
<div><img src="<?=getImage('newsbox_bottomleft.gif')?>"></div>
</div>
<!-- Middle -->
<div id="nbmiddle<?=$news_id?>" style="float: left; width: 462px">
<div style="background: #e2dedd ; padding: 5px"><div style="height:
20px"><span style="font-weight: bold; font-size: 13px; float: left"><a
href="<?=$news_link?>"><?=$news_header?></a></span><span style="float:
right"><?=$news_time?> CET</span></div><br />
<?=$news_flash?><br /><hr />
<div style="float: left; position: relative; top: -8px">Written by <a
href="<?=(root_path . 'index.php?p=view_profile&id=' .
$news_owner)?>"><?=$w_names[$news_owner]?></a> <?php
if($GLOBALS['current_user']->is_admin)
{
echo(' | <a href="' . root_path .
'index.php?p=editnews&id=' . $news_id . '" >Edit post</a> | <a href="' .
root_path . 'index.php?p=deletenews&id=' . $news_id . '">Delete Post</a>');
}?></div><div style="float: right;
position: relative; top: -8px"><a href="<?=$news_link?>"
class="news_link"><b>Read more</b></a><b> - Comments:</b>
(<?=$num_of_comments?>)</div>
</div>
<div style="height: 9px; background:
url(<?=getImage('newsbox_bottom.gif')?>)"></div>
</div>
<!-- Right Side -->
<div id="nbright<?=$news_id?>" style="width: 12px; float: left; clear:
right;">
<div><img src="<?=getImage('newsbox_topright.gif')?>"></div>
<div style="height: 100%; background:
url(<?=getImage('newsbox_right.gif')?>)"></div>
<div style="position: relative; top: -8px"><img
src="<?=getImage('newsbox_bottomright.gif')?>"></div>
</div>
<div class="clear"></div>
</div>
<script>
// Make the three div columns the same height (these values
apply to MOZ)
document.getElementById("nbleft<?=$news_id?>").style.height
= document.getElementById("nbmiddle<?=$news_id?>").offsetHeight - 19;
document.getElementById("nbright<?=$news_id?>").style.height =
document.getElementById("nbmiddle<?=$news_id?>").offsetHeight - 19;
document.getElementById("nbcontainer<?=$news_id?>").style.height
= document.getElementById("nbmiddle<?=$news_id?>").offsetHeight;
</script>
Thanx for your time
Best regards
Daniel Liljeberg
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
