Hi All,
The problem i'm having is on the following website:
http://www.tazzyserver.co.uk/
In IE the tag cloud div in the sidebar is extending far too wide and causing the whole layout to mess up.
In Firefox the tag cloud content just seems to ignore the div boundaries and float out over everything.
I have tried everything to get it work from setting the divs widths, margins the lot.
My CSS is as follows:
Code:
/* Sidebar Start */
#sidebar {
float: right;
position: relative;
width: 225px;
margin-top: 0.5em;
margin-left: 0;
margin-right: 0.5em;;
margin-bottom: 0;
font-family: Verdana;
font-stretch: expanded;
font-size: 14px;
color: #666666;
}
.tagcloud {
width: 100%;
max-width: 200px;
margin: auto;
padding: 2px 2px 2px 2px;
background-color: #E3E5E9;
border: 1px solid #DDDDCA;
}
#cprojects {
background-color: #FFFFFF;
color: #666666;
padding-top:0.5em;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 0.5em;
}
#cprojects-header {
background: url('images/cprojects-header.gif') repeat-x;
padding: 5px 5px 5px 5px;
font-size: 16px;
font-family: verdana;
font-stretch: extra-expanded;
color: #ffffff;
bottom: 0;
margin: 0 0 0 0;
}
#lnews {
border: 2px solid #DDDDCA;
background-color: #FFFFFF;
color: #666666;
padding-top:0.5em;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 0.5em;
}
#lnews-header {
background: url('images/login-header.gif') repeat-x;
border: 1px solid #DDDDCA;
padding: 5px 5px 5px 5px;
font-size: 16px;
font-family: verdana;
font-stretch: extra-expanded;
color: #ffffff;
bottom: 0;
margin: 0 0 0 0;
}
#cats {
border: 2px solid #DDDDCA;
background-color: #FFFFFF;
color: #666666;
padding-top:0.5em;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 0.5em;
}
#cats-header {
background: url('images/login-header.gif') repeat-x;
border: 1px solid #DDDDCA;
padding: 5px 5px 5px 5px;
font-size: 16px;
font-family: verdana;
font-stretch: extra-expanded;
color: #ffffff;
bottom: 0;
margin: 0 0 0 0;
}
#logindiv {
border: 2px solid #DDDDCA;
background-color: #FFFFFF;
color: #666666;
padding-top:0.5em;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 0.5em;
margin-bottom: 1em;
margin-top: 0;
}
#login-header {
background: url('images/login-header.gif') repeat-x;
border: 1px solid #DDDDCA;
padding: 5px 5px 5px 5px;
font-size: 16px;
font-family: verdana;
font-stretch: extra-expanded;
color: #ffffff;
}
and my html is as follows:
HTML Code:
<!-- start of sidebar content -->
<div id="lnews-header"><strong>Member Login </strong></div>
<div id="lnews">
<?php
// check to see if the user is logged in already
if($loggedin=='true') {
// the user is logged in, show user menu
//Here we define out main variables
$welcome_string="Welcome,";
$numeric_date=date("G");
//Start conditionals based on military time
if($numeric_date>=0&&$numeric_date<=11)
$welcome_string="Good Morning,";
else if($numeric_date>=12&&$numeric_date<=16)
$welcome_string="Good Afternoon,";
else if($numeric_date>=17&&$numeric_date<=23)
$welcome_string="Good Evening,";
//Display our greeting
echo "".$welcome_string." ".$username."!<br />";
if($userrank=='Admin') {
include('includes/admin_usermenu.php');
} else {
include('includes/usermenu.php');
}
} else {
// the user isn't logged in, show login form
?>
<form action="login.php" method="post" enctype="multipart/form-data" name="loginform" id="loginform">
<p>Username
<input name="username" id="username" type="text" />
Password
<input name="userpass" id="userpass" type="password" />
<br />
<br />
<input name="submit" type="submit" value="Login" />
</p>
<p><a href="register.php">Register</a> | <a href="reminder.php">Forgotten Login</a> </p>
</form>
<?php
}
?>
</div>
<div id="cats-header"><strong>Categories</strong></div>
<div id="cats">
<?php
$getcats=mysql_query("SELECT * FROM blog_post_cats ORDER BY postcatname ASC");
while($cat=mysql_fetch_array($getcats, MYSQL_ASSOC)) {
$postcount=mysql_query("SELECT * FROM blog_posts WHERE postcatid='".$cat['postcatid']."'") or die(mysql_error());
$count=mysql_num_rows($postcount);
echo "<a href='viewcat.php?catid=".$cat['postcatid']."'>".$cat['postcatname']." (".$count.")</a><br />";
}
?>
</div>
<div id="cats-header"><strong>Search</strong></div>
<div id="cats">
<form action="search.php?action=process" method="post" enctype="multipart/form-data" name="search" id="search">
<label>
<input name="keywords" type="text" id="keywords" />
<br />
<br />
<input type="submit" name="Submit" value="Search" />
</label>
</form>
</div>
<div id="cats-header"><strong>Tag Cloud</strong></div>
<div id="cats">
<?php
include('includes/tagcloud.php');
?>
</div>
</div>
<!-- end of sidebar content -->
The content of tagcloud.php is:
PHP Code:
echo "<div class='tagcloud'>";
// get tags from database
$gettags=mysql_query("SELECT * FROM blog_tags");
while($tag=mysql_fetch_array($gettags, MYSQL_ASSOC)) {
// output tagcloud, vary font size depending on tagcount
$tagcount="".$tag['tagcount']."";
$tagname="".$tag['tag']."";
$tagid="".$tag['tagid']."";
if($tagcount<=5) {
echo "<span style='font-size: 14px; margin: 2px 2px 2px 2px;'><a href='search.php?action=tag&tagid=".$tagid."'>".$tagname."</a> </span>";
} else if($tagcount>=5&&$tagcount<=10) {
echo "<span style='font-size: 18px; margin: 2px 2px 2px 2px;'><a href='search.php?action=tag&tagid=".$tagid."'>".$tagname."</a> </span>";
} else if($tagcount>=10&&$tagcount<=20) {
echo "<span style='font-size: 20px; margin: 2px 2px 2px 2px;'><a href='search.php?action=tag&tagid=".$tagid."'>".$tagname."</a> </span>";
}
}
echo "</div>";
Any help would be greatly appreciated as this is really frustrating hehe
Kind Regards,
Martin
Last edited by digitalfusion; 11-24-2008 at 08:20 PM..
Reason: Forgot to include tagcloud.php contents
|
