I Need CSS Help

alfa_375 Active Member

Messages:: 445

Likes Received:: 5

Best Answers:: 0

Trophy Points:: 60

#1

Hi,

I need help to correct this site css problem in my wordpress theme, which looks good in IE and terrible in other browsers.

In IE the text around the image is coming correctly on the right side of the image, rightnavigation container.

But in other browsers all the text is overlapping on the image itself.

Here is the link you can check in your browsers:
http://www.onlinebusinesstrainings.com/ebay/

Here is the code for your consideration:

index.php (theme directory)


<?php get_header(); ?>

<div class="page"> <!-- start page -->
<?php get_sidebar(); ?>

  
  <div id="content"><!-- start content -->

	<?php if (have_posts()) : ?>

		<?php while (have_posts()) : the_post(); ?>
<!--<div class="details" onmouseover="this.className='details2'" onmouseout="this.className='details'"> -->
<div class="mynavigation">
<!-- Start details -->
<div class="clear">
<p><h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2 width=233><hr></p>
<p><?php the_category(' &gt; '); ?> </p> </div>
<div class="clear"></div>

                        

<div class="leftnavigation">  <!--Start Image area -->
<?php if(function_exists('the_ratings')) { the_ratings(); } ?>
<p><a href="<?php the_permalink() ?>"  rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
                <img src="<?php $values = get_post_custom_values("thumbs"); echo $values[0]; ?>" alt="<?php the_title(); ?>"  width="300"  height="240" /></a></p> 
                             </div>   <!--EndImage area -->

<div class="rightnavigation"><!--Start theme specs -->

<div class="tabbertab"><h3><u>Quick Info</u></h3></div>
<br>> Magazine Style 
<br>> Content Slide

<hr>
<a href="http://www.yousite.com/fclick/fclick.php?fid=10">
<div class="tabbertab"><p><a href="<?php $values = get_post_custom_values("demo"); echo $values[0]; ?>"><h3>Preview</h3></a> </p></div></a>
<hr>
<div class="tabbertab"><p><a href="<?php $values = get_post_custom_values("demo"); echo $values[0]; ?>"><h3>Download</h3></a></p></div> 
<hr>
<?php if (function_exists('sociable_html')) { 
  echo sociable_html(); 
} ?>

<div class="tabbertab"><h3><u>Comments</u></h3></div>

<?php
$numcomms = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments WHERE comment_approved = '1'");
if (0 < $numcomms) $numcomms = number_format($numcomms);
echo $numcomms . ' response so far.'; ?>
<hr>
                             </div> <!--End theme specs -->
                            
</div> <!-- End details-->            

                     
                       
                  <?php endwhile; ?>  
         <?php endif; ?>  
 </div> <!-- End content -->		
 </div> <!-- End Page-->

Code (markup):

style.css (theme directory)




body {
	font-family:Arial,Helvetica,sans-serif;
	font-size:13px;
	color:#474848;
	margin:0;
	padding:0;
}

img {
	border:0px;
}
a {
	color:#0066cb;
	text-decoration:none;
}
a:hover {
	color:#474848;
	text-decoration:underline;
}
a img {
	border:0px;
}
#wrapper {
	width:860px;
	margin:15px auto 0 auto;
}
#header {
	padding:0;
	margin:0 auto;
	text-align:left;
}
#header h1 {
	margin: 0;
	padding:0;
}
#logo {
	/*background:url('images/logo.gif') no-repeat; */
	background:url('') no-repeat;
	width:231px;
	height:78px;
	display: block;
}
#main_bar {
	padding:0;
	height:25px;
	background:#e43b05;
	color:#ffffff;
}
#main_bar h3 {
	margin:0;
	float:left;
	padding:3px 0 0 20px;
	font-size:1.0em;
	background:url('images/corner.gif') no-repeat;
	height:22px;
}
#main_bar p {
	margin:0;
	float:right;
	padding:3px 10px 0 0;
	background:url('images/corner.gif') no-repeat right -25px;
}
#main_bar a {
	color:#ffffff;
	text-decoration:none;
}
#main_bar a:hover {
	text-decoration:underline;
}
#footer {
	width:860px;
	height:70px;
	margin:0 auto;
	padding:9px 0 0 0;
	background:url('images/footer.gif') no-repeat top center;
}
#footer p {
	padding-top:20px;
	text-align:center;
	font-size:11px;
	margin:0;
}
#footer a {
	color:#474848;
	text-decoration:none;
}
#footer a:hover {
	color:#0066cb;
}
.page {
	width:860px;
	margin:0 auto;
}
#content {
	width:550px;
	padding:0;
	overflow:hidden;
}
#bgtop {
	height:20px;
	background:url('images/img07.gif');
}
.sidebar {
	width:300px;
	float:right;
}
.sidebar h2 {
	letter-spacing:-1px;
	font-size:1.2em;
	margin:0 0 10px 0;
}
#nav {
	background:url('images/navbg.gif') repeat-x top;
	height:37px;
	margin:10px 0 0 0;
}
.rss {
	float:right;
	margin:0;
	padding:0;
}
.rss a {
	background:url('images/rss.gif') no-repeat;
	width:38px;
	height:37px;
	display:block;
}
.rss a:hover {
	background:url('images/rss.gif') no-repeat 0px -37px;
	width:38px;
	height:37px;
	display:block;
}
#nav ul {
	margin:0;
	padding:0;
	list-style-type:none;
	background:url('images/nav.gif') no-repeat top left;
	height:37px;
}
#nav li {
	padding:0;
	margin:0;
	height:37px;
	float:left;
	list-style-type:none;
}
#nav li a {
	display:block;
	height:27px;
	padding:10px 15px 0 15px;
	text-decoration:none;
	color:#474848;
	font-size:11px;
	text-align:center;
	font-weight:bold;
	float: left;
}
#nav .main {
	background:url('images/nav.gif') no-repeat;
	color:#006600;
}
#nav .main a {
	background:url('images/nav.gif') no-repeat;
	font-weight:bold;
	color:#474848;
}
#nav .main a:hover {
	background:url('images/nav.gif') no-repeat 0px -37px;
	font-weight:bold;
	color:#000000;
}
#nav .main #current {
	background:url('images/nav.gif') no-repeat 0px -37px;
	color:#000000;
}
#nav .main #current a {
	background:url('images/nav.gif') no-repeat 0px -37px;
	font-weight:bold;
	color:#474848;
}
#nav .main #current a:hover {
	background:url('images/nav.gif') no-repeat 0px -37px;
	font-weight:bold;
	color: #000000;
}
#nav .normal {
	color:#006600;
	font-weight:bold;
}
#nav .normal a {
	background:url('images/navbg.gif') no-repeat;
	color:#474848;
}
#nav .normal a:hover {
	background:url('images/navbg.gif') no-repeat 0px -37px;
	color:#000000;
}
#nav .normal #current {
	background:url('images/navbg.gif') no-repeat center -37px;
	color:#000000;
}
#nav .normal #current a {
	background:url('images/navbg.gif') no-repeat center -37px;
	color:#474848;
}
#nav .normal #current a:hover {
	background:url('images/navbg.gif') no-repeat center -37px;
	color: #000000;
}
.break {
	clear:both;

	padding:0;
	margin:0 0 10px 0;
}
.clear {
	clear:both;
	padding:0;
	margin:0;
}
.item {
	padding:5px 10px 5px 10px;
	width:227px;
	float:left;
	margin:0 15px 15px 0;
	background:#ffffff;
	border:1px solid #e5e5e5;
}
.item h2 {
	font-size:1.2em;
	margin:0 0 3px 0;
	padding:0;
}
.item h2 a {
	color:#0066cb;
	text-decoration:none;
}
.item h2 a:hover {
	color:#474848;
	text-decoration:none;
}
.item p {
	margin:0 0 4px 0;
	border:#e5e5e5 1px solid;
}
.item2 {
	padding:5px 10px 5px 10px;
	width:227px;
	float:left;
	margin:0 15px 15px 0;
	background:#ebf3fb;
	border:1px solid #cce0f5;
}
.item2 h2 {
	font-size:1.2em;
	margin:0 0 3px 0;
	padding:0;
	color:#ffffff;
}
.item2 h2 a {
	color:#474848;
	text-decoration:none;
}
.item2 h2 a:hover {
	color:#0066cb;
	text-decoration:none;
}
.item2 p {
	margin:0 0 4px 0;
	border:#838383 1px solid;
}
.details {
	padding:8px;
	margin:0 5px 0 5px;
	background:#ffffff;
	border:1px solid #e5e5e5;
    width:520px;
}
.details ul {
	margin:0 5px 0 5px;
	list-style-type:none;
}
.details li {
	padding:0 3px 0 3px;
	list-style-type:none;
            float:left;
}
.details h2 {
	font-size:1.2em;
	color:#0066cb;
	margin:0 0 0 0;
}
.details p {
	margin:0 0 15px 0;
}
.details p img {
	padding:0;
	border:#e5e5e5 1px solid;
}
.details2 {
            padding:8px;
	margin:0 5px 0 5px;
            background:#ebf3fb;
	border:1px solid #cce0f5;
            width:520px;
}
.details2 ul {
	margin:0 5px 0 5px;
	list-style-type:none;
}
.details2 li {
	padding:0 3px 0 3px;
	list-style-type:none;
           float:left;    
}
.details2 h2 {
	font-size:1.2em;
	color:#474848;
	margin:0 0 0 0;
}
.details2 p {
	margin:0 0 15px 0;
}
.details2 p img {
	padding:0;
	border:#838383 1px solid;
}
.tags {
	margin:0;
	padding:15px 0 0 0;
	font-size:1.2em;
	font-weight:bold;
}
.post-ratings span {
	float:right;
	font-size:11px;
	padding:3px 0 0 0;
}
.navbottom {
	background:url('images/navbottom.gif') no-repeat;
	height:21px;
	margin:1px 0 0 0;
}
.Nav {
	margin:0 0 20px 0;
	padding:10px 0 0 0;
	color:#838383;
}
.Nav a {
	padding:4px 8px 4px 8px;
	background:#fff;
	border:1px solid #e5e5e5;
	color:#838383;
	font-size:10px;
	margin:0 5px 0 0;
}
.Nav a:hover {
	padding:4px 8px 4px 8px;
	border:1px solid #0066cb;
	color:#0066cb;
	text-decoration:none;
	font-size:10px;
	margin:0 5px 0 0;
}
.Nav .on {
	padding:4px 8px 4px 8px;
	border:1px solid #0066cb;
	color:#0066cb;
	font-size:10px;
	margin:0 5px 0 0;
}
.Nav span {
	padding:4px 8px 4px 8px;
	border:1px solid #e5e5e5;
	font-size:10px;
	margin:0 5px 0 0;
}
#ads {
	border:1px solid #cdcdcd;
	clear:both;
	width:280px;
	padding:9px;
}
#ads ul {
	margin:0;
	padding:0;
	list-style-type:none;
}
#ads li {
	float:left;
	margin:0;
	padding:3px 8px 3px 7px;
	list-style-type:none;
}
.singleads {
	background:#fdf9eb;
	padding:9px;
	margin:0 30px 15px 0;
	border:1px solid #f8ecbd;
}
.singleads h2 {
	margin:0 0 10px 0;
	font-size:1.2em;
	color:#474848;
}
.tabberlive .tabbertabhide {
	display:none;
	overflow: hidden;
}
.tabber {
	padding:0;
	display: none;
	overflow: hidden;
}
.tabberlive {
	margin:1px 0 10px 0;
}
ul.tabbernav {
	margin:0;
	padding:3px 0;
	border-bottom:1px solid #f8ecbd;
}
ul.tabbernav li {
	list-style:none;
	margin:0;
	display:inline;
}
ul.tabbernav li a {
	padding:3px 0.5em;
	border-bottom:none;
	text-decoration:none;
}
ul.tabbernav li a:link {
	color:#313062;
}
ul.tabbernav li a:hover {
	color:#CC0000;
}
ul.tabbernav li.tabberactive a {
	background:#fdf9eb;
	color:#474848;
	border:1px solid #f8ecbd;
	border-bottom:1px solid #fdf9eb;
	text-decoration:none;
	font-weight:bold;
}
ul.tabbernav li.tabberactive a:hover {
	color:#474848;
	background:#fdf9eb;
	border-left:1px solid #f8ecbd;
	border-right:1px solid #f8ecbd;
	border-top:1px solid #f8ecbd;
}
.tabberlive .tabbertab {
	background:#fdf9eb;
	padding:5px 10px 10px 10px;
	border-top:0px;
	border-left:1px solid #f8ecbd;
	border-right:1px solid #f8ecbd;
	border-bottom:1px solid #f8ecbd;
}
.tabberlive .tabbertab h2 {
	display:none;
	color:#313062;
}
.tabberlive .tabbertab h3 {
	display:none;
}
.tabbertab {
	margin:0px;
	padding:0px;
}
.tabbertab ul {
	margin:5px 0 5px 15px;
	padding:0;
	list-style-type:none;
}
.tabbertab li {
	margin:0;
	padding:3px 0 3px 0;
	list-style-type:square;
}
.wp-smiley {
	border:none !important;
	padding:0 !important;
	margin:0 !important;
}
#comment_form .text_input {
	width:191px;
	padding:3px;
	color:#444;
	border:1px solid #696969;
	border-left:2px solid #0066cb;
}
#comment_form .text_area {
	width:321px !important;
	border:1px solid #696969;
	border-left:2px solid #0066cb;
}
ul#comment_list {
	list-style-type:none;
	margin:0;
	padding:0;
}
ul#comment_list li.comment {
	margin:0 0 10px 0;
}
ul#comment_list li.trackback {
	padding:1.2em 15px 0 15px;
}
.comment_meta {
	margin:0 30px 15px 0;
	font-size:11px;
}
.comment_num {
	padding:0 8px 0 0;
	font-weight:bold;
	font-size:1.3em;
	float:right;
}
.trackback .comment_num {
	padding:0 0 0 20px;
}
.comment_num a,.comment_num a:visited {
	color:#888;
	text-decoration:none;
}
.comment_num a:hover {
	color:#303030;
	text-decoration:none;
}
.comment_meta strong {
	font-size:1.2em;
}
.comment_time {
	font-size:1em;
	color:#888;
}
blockquote {
	font-style:italic;
	font-size:11px;
	color:#888888;
	margin:0 0 5px 20px;
	padding:0 0 0 10px;
	border-left:4px solid #0066cb;
}
abbr,acronym {
	border-bottom:1px dotted #0066cb;
	text-transform:uppercase;
}
code {
	color:#474848;
	font-family:Courier,monospace;
	margin:0 0 5px 5px;
}
pre {
	margin:0 0 1.5em 0;
	overflow:auto;
	font-size:1.3em;
	clear:both;
}
form {
	margin:0;
	padding:0;
}
.searchbox {
	margin:0 0 20px 0;
	width:300px;
}
.search {
	background:url('images/input.gif') no-repeat;
	height:19px;
	padding:8px 5px 5px 8px;
	width:255px;
	color:#444;
	border:none;
	margin:0;
	float:left;
}
.find {
	background:url('images/find.gif') no-repeat;
	border:none;
	height:32px;
	width:32px;
	margin:0;
	float:right;
}
.os {
	color:#3d4c53;
	font-weight:bold;
}
.os a {
	color:#3d4c53;
	font-size:11px;
	text-decoration:none;
}
.os a:hover {
	text-decoration:underline;
}
.designer {
	color:#982a05;
	font-weight:bold;
}
.design a {
	color:#982a05;
	font-size:11px;
	text-decoration: none;
}

.mynavigation {
	//clear:both;
	border:1px solid #e5e5e5;	
	width:520px;
	height:auto;
	padding:9px;
	margin:0 5px 0 5px;
         position : relative;
	left : 0;	
}

.leftnavigation{
         color:blue;
	width:320px;
         height:300px;
 	float:left;
	margin:0;
	padding:0;
	//border:#0000ff 1px solid;
         border:none;
	
}

.rightnavigation {
        color:#red;
        width:200px;
        float:right; 
        position : absolute;
        margin:0;
        padding:3px 4px 3px 4px;
	
}

.mynavigation h3 {
	font-size:1.2em;
	color:#474848;
	margin:0 0 0 0;
         
}
.mynavigation p {
	margin:0 0 0 0;
}
.mynavigation p img {
	padding:0;
	//border:#838383 1px solid;
         border:none;
}

Code (markup):

Let me know anything else you need for this.

And I want appreciate Sky AK47, for his quick reply yesterday to fix some tag problems.

Thanks in advance everyone who took time to see this thead and help me out.

alfa_375, May 17, 2009 IP

N2D Peon

Messages:: 198

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#2

Dude i suggest u contact wordpress!

N2D, May 17, 2009 IP

alfa_375 Active Member

Messages:: 445

Likes Received:: 5

Best Answers:: 0

Trophy Points:: 60

#3

Thank you for the suggestions and pms, I fixed it by myself. If anybody wants to know how i did it? Just request here.

alfa_375, May 17, 2009 IP

N2D Peon

Messages:: 198

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#4

Thank you for the suggestions and pms, I fixed it by myself. If anybody wants to know how i did it? Just request here.
Click to expand...

Dude u welcome, but its will be nice if u pass d request on here.

N2D, May 17, 2009 IP

alfa_375 Active Member

Messages:: 445

Likes Received:: 5

Best Answers:: 0

Trophy Points:: 60

#5

Here u go N2D on your request, please find the corrected css classes. Lol somebody asked $800 :eek:

for this minor change.

/*

.mynavigation {
	//clear:both;
	border:1px solid #e5e5e5;	
	width:520px;
	height:350px;
	padding:9px;
	margin:0 5px 0 5px;
         position : relative;
	left : 0;	
}

.leftnavigation{
         color:blue;
	width:320px;
         height:300px;
 	float:left;
	margin:0;
	padding:0;
	//border:#0000ff 1px solid;
         border:none;
	
}

.rightnavigation {
        color:#red;
        width:190px;
        float:right; 
        position : absolute;
        margin:0;
        padding:3px 4px 3px 4px;
        left: 317px;
	
}

}

Code (markup):

alfa_375, May 17, 2009 IP

Log in or Sign up

I Need CSS Help

alfa_375 Active Member

N2D Peon

alfa_375 Active Member

N2D Peon

alfa_375 Active Member

Useful Searches