Menu
Hi everyone,
This is a page from the website I am working on: [URL=”http://www.media-live.co.uk/index2.php/links/”]Linkage
If you’re viewing that in Opera, you should see the latest forum section display exactly the same as the latest blogs section. This is how it’s supposed to be. However, in Firefox and IE, the latest threads bit displays incorrectly! In Firefox, there are big gaps, and in IE the background colour hover isn’t working right.
Here is the CSS and code for the blogs:
[QUOTE=CSS BLOGS]
#blogs { float: right; margin-right: 15px; margin-top: 15px; width: 250px; height: auto; no-repeat #e9e9e9; background: url(images/blogsbg.jpg) no-repeat #e9e9e9; border: 1px ridge #666666;}
#blogs p { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #990000; margin-top: 5px; margin-bottom: 5px; text-align: center;}
#blogs h1 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #990000; padding-top: 5px; padding-bottom: 5px; text-align: center; background: url(images/titlebg.gif) repeat-x #cccccc; border-bottom: 1px ridge #666666}
#blogs a { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #0033CC; margin-top: 5px; margin-bottom: 5px; padding-top: 3px; padding-bottom: 3px; text-align: center; text-decoration:none; display:block; margin-left: 10px; margin-right: 10px;}
#blogs a:hover { color: #FFFFFF; margin-top: 5px; margin-bottom: 5px; text-align: center; text-decoration:none; background: #999999;}
[CODE]<div id=”blogs”><h1><strong>..:: LATEST BLOGS ::..</strong></h1>
<?php $temp_query = $wp_query; ?>
<?php query_posts(‘showposts=5’); ?>
<?php while (have_posts()) : the_post(); ?>
<div id=”post-<?php the_ID(); ?>”>
<p> <a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><strong><?php the_title(); ?></strong><br/><?php the_author() ?> on <?php the_time(‘F jS’) ?></a></p>
</div>
Here is the CSS and code for the latest threads:
[QUOTE=CSS Threads]
#minibox2 { float: right; margin-right: 15px; margin-top: 15px; width: 250px; height: auto; background: url(images/ltbg.jpg) no-repeat #e9e9e9; border: 1px ridge #666666;}
#minibox2 p { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #990000; text-align: center; margin:0px;}
#minibox2 h1 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #990000; padding-top: 5px; padding-bottom: 5px; text-align: center; background: url(images/titlebg.gif) repeat-x #cccccc; border-bottom: 1px ridge #666666}
#minibox2 a { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #0033CC; margin-top: 5px; margin-bottom: 5px; padding-top: 3px; padding-bottom: 3px; text-align: center; text-decoration:none; margin-left: 10px; margin-right: 10px; display: block;}
#minibox2 a:hover { color: #FFFFFF; text-align: center; margin-top: 5px; margin-bottom: 5px; text-decoration:none; background: #999999;}
[CODE]<div id=”minibox2″>
<h1><strong>..:: LATEST FORUM THREADS ::..</strong></h1>
<script type=”text/javascript” src=”http://www.media-live.co.uk/forums/external.php?type=js”></script>
<script language=”” type=”text/javascript”>
<!–
for (x = 0; x < 5; x++)
{
document.writeln(“<strong><a href=”http://www.media-live.co.uk/forums/showthread.php?t=”+threads[x].threadid+””>”+threads[x].title+”</strong><br>Started By: “+threads[x].poster+”</a>”);
}
//–>
</script>
</div>
I have tried to figure this out for a while but only found different ways of it not working. Could anyone please help me figure out how to display it like I want (see the latest blogs bit in any browser)?
I figure it may be something to do with the CSS (possibly with the <br/> also), but I’m not sure, so I posted it in this forum, sorry if that’s wrong.
I really hope one of you can help me, this is winding me up a fair bit, ha! ?
Cheers!