$5 via paypal if someone could help me fix this simple CSS problem!

Im developing a new site: http://www.hospiceinform.net/ using joomla 1.5 and i have two CSS problems build into the template that i haven't been able to fix.

I really like the template, and want to use it but i need to fix these two things.

1. For some reason (and i'm positive it's build into the template CSS) when i set the horizontal space (in tiny MCE) for an image, it only renders correctly in IE and not Firefox. As you can see on the post that i have, the text is flush against the image i am using in the article when in FF, but not in IE. How do i get it to work for FF as well? Could it be in the HTML and not the CSS?

Here is the CSS for the template (im sure theres something that needs to be changed in there to make it work):

@charset "utf-8";
/* CSS Document for JP Default Template 1.5 */

/* Default HTML Styles */
*{
padding:0px;
margin:0px;
}
html{
font-size:100%;
height:100%;
margin:0px 0px 1px 0px;
}
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:1.2em;
background:#FFFFFF;
color:#333333;
}
.moduletable table.contentpaneopen{
border-collapse:collapse;
}
img{
border:none;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin: 0.5em 0; 
}
li,dd, ul, ol { 
margin-left:1em;
}
ul{
list-style:square;
}
fieldset { 
padding:.5em; 
border:0px;
}
a{
text-decoration:none;
color:#3399FF;
}
a:hover{
text-decoration:underline;
}
h1, h2, h3, h4, h5, h6, .componentheading, .contentheading, .contentdescription{
font-weight:bold;
}
h1,.componentheading{
font-size:1.7em;
line-height:1.7em;
}
h2,.contentheading{
color:#3399FF;
font-size:1.5em;
line-height:1.5em;
border-bottom:1px solid #CCCCCC;
}
h3, .contentdescription{
font-size:1.3em;
}
h4{
font-size:1.2em;
}
h5{
font-size:1.1em;
}
h6{
font-size:1em;
font-weight:bold;
}
#footer,.small,.createdate,.modifydate,.mosimage_caption{
font:0.8em Arial,Helvetica,sans-serif;
color:#999;
}

/* Layout Styles */
.inside{
padding:1em;
}
.clr{
clear:both;
}
#wrapper{
width:960px;
margin:0 auto;
}
#header{}
#logo{
float:left;
display:block;
width:230px;
height:85px;
background:url(../images/theme1/logo.png) no-repeat 0px 0px;
}
#toolbar{
float:right;
overflow:hidden;
font-size:0.9em;
padding:5px 0px;
}
#navigation{
background:url(../images/theme1/navigation.png) repeat-x 0px 0px;
padding:0px 0px 15px 0px;
margin:0px 0px 15px 0px;
}
#menu{
float:left;
}
#search{
float:right;
}
#banner{}
#container{
border:1px solid #CCCCCC;
background:#FFFFFF url(../images/theme1/container-seperator.png) repeat-y 20% 0px;
overflow:hidden;
}
#container-inner{
background:url(../images/theme1/container-seperator.png) repeat-y 80% 0px;
overflow:hidden;
}
#mainbody{
float:left;
width:80%;
overflow:hidden;
}
#content{
float:right;
width:75%;
overflow:hidden;
}
#sidebar{
width:25%;
float:left;
overflow:hidden;
}
#sidebar a:link, #sidebar a:active, #sidebar a:visited{}
#sidebar2{
float:right;
width:20%;
overflow:hidden;
}
#top{}
#footer{
padding:10px 0px;
}
#bottom{
border-top:1px solid #CCCCCC;
}
#copy{
float:left;
width:40%;
}
#link{
float:right;
width:45%;
text-align:right;
}
#debug{
background:#FFFFFF;
padding:20px;
overflow:scroll;
margin:0px 0px 15px 0px;
}

/* Menu Styles */
#toolbar ul{
padding:0px;
margin:0px;
list-style:none;
}
#toolbar li{
padding:0px;
margin:0px;
list-style:none;
display:inline;
}
#toolbar a:link, #toolbar a:active, #toolbar a:visited{
color:#000000;
display:block;
float:left;
padding:7px 10px;
}
#toolbar a:hover, #toolbar #current a{
color:#000000;
}

#navigation ul{
padding:0px;
margin:0px;
list-style:none;
}
#navigation li{
padding:0px;
margin:0px;
list-style:none;
display:inline;
}
#navigation a:link, #navigation a:active, #navigation a:visited{
color:#FFFFFF;
display:block;
float:left;
padding:3px 12px 6px 10px;
background:url(../images/theme1/nav-seperator.png) no-repeat 100% 0px;
}
#navigation a:hover, #navigation #current a{
color:#CCCCCC;
text-decoration:none;
}

#link ul{
padding:0px;
margin:0px;
list-style:none;
}
#link li{
padding:0px;
margin:0px;
list-style:none;
display:inline;
}
#link a:link, #link a:active, #link a:visited{
color:#999999;
padding:0px 10px;
}
#link a:hover, #link #current a{
color:#000000;
}

/* Custom Joomla Styles */

/* Moduletables */
div.moduletable, div.moduletable_menu, div.moduletable_text{
margin:0px 0px 1em 0px;
padding:10px;
}
div.moduletable h3, div.moduletable_menu h3, div.moduletable_text h3{
font-size:1em;
line-height:1em;
font-weight:normal;
}
#sidebar div.moduletable h3, #sidebar div.moduletable_menu h3, #sidebar div.moduletable_text h3{
color:#FFFFFF;
background:#333333 url(../images/theme1/heading.png) repeat-x 0px 0px;
padding:5px;
margin:-10px -10px 10px -10px;
}
#sidebar2 div.moduletable h3, #sidebar2 div.moduletable_menu h3, #sidebar2 div.moduletable_text h3{
color:#FFFFFF;
background:#000000 url(../images/theme1/heading2.png) repeat-x 0px 0px;
padding:5px;
margin:-10px -10px 10px -10px;
}
#bottom .moduletable h3{
color:#3399FF;
font-size:1.3em;
}

/* Menu Module */
div.moduletable_menu ul{
margin:0px;
padding:0px;
list-style:none;
}
div.moduletable_menu li{
margin:0px;
padding:0px;
list-style:none;
}
div.moduletable_menu a:link, div.moduletable_menu a:active, div.moduletable_menu a:visited{
color:#999999;
display:block;
border-bottom:1px solid #CCCCCC;
padding:5px 10px 5px 5px;
background:url(../images/theme1/menu.png) no-repeat 100% 50%;
}
div.moduletable_menu a:hover, div.moduletable_menu li.active a{
color:#3399FF;
background:url(../images/theme1/menu-active.png) no-repeat 100% 50%;
}
div.moduletable_menu ul ul{
color:#999999;
margin:0px 0px 10px 10px;
padding:0px;
list-style:square;
}
div.moduletable_menu ul ul li{
list-style:square;
margin:0px 0px 0px 10px;
}
div.moduletable_menu ul ul a:link, div.moduletable_menu ul ul a:active, div.moduletable_menu ul ul a:visited{
border:none;
color:#999999;
background-image:none;
}

/* Search Module */
#search form{
padding:3px;
margin:0px;
}
#search #mod_search_searchword{
padding:2px;
border:1px solid #333333;
background:#FFFFFF url(../images/search.png) no-repeat 100% 0px;
}

/* Content */
.button{
color:#666666;
background:#EEEEEE url(../images/theme1/button.png) repeat-x 0px 0px;
border-bottom:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:1px solid #EEEEEE;
border-left:1px solid #EEEEEE;
padding:5px 6px;
cursor:pointer;
margin:5px 0px;
}
.readon, .modal-button, .readmore a{
color:#666666;
background:#EEEEEE url(../images/theme1/button.png) repeat-x 0px 0px;
border-bottom:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:1px solid #EEEEEE;
border-left:1px solid #EEEEEE;
padding:3px 6px;
cursor:pointer;
margin:5px 0px;
float:left;
display:block;
}
.contentpaneopen{
width:100%;
}
.article_column{
padding-right:5px;
}
.column_separator{
padding-left:5px;
}
.contenttoc{
width:40%;
margin:0px 0px 15px 15px;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
background:#FFFFFF;
}
.contenttoc th{
color:#FFFFFF;
background:#333333 url(../images/theme1/heading.png) repeat-x 0px 0px;
padding:3px 5px;
text-align:left;
font-weight:normal;
}
.contenttoc .toclink{
display:block;
border-bottom:1px solid #CCCCCC;
padding:5px 10px 5px 5px;
background:url(../images/theme1/menu.png) no-repeat 98% 50%;
}
.pagenavbar{
text-align:center;
background:#F7F7F7;
padding:3px;
border:1px solid #CCCCCC;
}
.blog_more{
padding:10px;
border:1px solid #CCCCCC;
margin:10px 0px;
}

#message {}
.contentpane a.category, a.category{}
.contentpane form table{
width:100%;
}
.contentpane .contentdescription{
color:#666666;
padding:10px 0px;
}
.contentpane .sectiontableheader{
font-weight:bold;
text-align:left;
padding:10px 3px;
border-top:1px solid #EEEEEE;
background:#F7F7F7;
}
.contentpane tr.sectiontableentry1 td{
text-align:left;
padding:10px 3px;
border-top:1px solid #EEEEEE;
}
.contentpane tr.sectiontableentry1 td a{}
.contentpane tr.sectiontableentry2 td{
text-align:left;
padding:10px 3px;
border-top:1px solid #EEEEEE;
}
.contentpane tr.sectiontableentry2 td a{}

/* Login Module */
#form-login ul{
padding:0px;
margin:0px;
list-style:none;
}
#form-login li{
padding:0px;
margin:0px;
list-style:none;
}
#form-login ul a{
color:#999999;
display:block;
border-bottom:1px solid #CCCCCC;
padding:5px 10px 5px 5px;
background:url(../images/theme1/menu.png) no-repeat 100% 50%;
}
#form-login ul a:hover{
color:#3399FF;
background:url(../images/theme1/menu-active.png) no-repeat 100% 50%;
}
#modlgn_username, #modlgn_passwd, #mod_login_username, #mod_login_password{
width:95%;
border-top:#CCCCCC 1px solid;
border-left:#CCCCCC 1px solid;
border-right:#EEEEEE 1px solid;
border-bottom:#EEEEEE 1px solid;
padding:5px;
}

/* Polls Module */
.pollstableborder{
width:100%;
border-collapse:collapse;
margin:0px 0px 10px 0px;
}
.poll thead{
font-weight:bold;
}
.poll thead td{
padding:5px;
border-bottom:1px solid #CCCCCC;
}
.pollstableborder td{
vertical-align:middle;
padding:3px;
}
.pollstableborder .sectiontableentry1{
text-align:left;
border-bottom:1px solid #CCCCCC;
}
.pollstableborder td.sectiontableentry2{
text-align:left;
border-bottom:1px solid #CCCCCC;
}

/* Banner Text Ad Module */
.moduletable_text .bannerheader{
display:block;
font-weight:bold;
border-bottom:1px solid #CCCCCC;
padding:5px;
}
.moduletable_text .banneritem_text{
padding:10px 0px 10px 0px;
border-bottom:1px solid #CCCCCC;
}

/* Banner Module */
#bottom .bannergroup{
text-align:center;
}

/* Contact Form */
#emailForm{
padding:15px;
border:1px solid #EEEEEE;
background:#F7F7F7;
}
#emailForm #contact_name, #emailForm #contact_email, #emailForm #contact_subject, #emailForm #contact_text{
width:95%;
border-top:#CCCCCC 1px solid;
border-left:#CCCCCC 1px solid;
border-right:#EEEEEE 1px solid;
border-bottom:#EEEEEE 1px solid;
padding:5px;
}
#emailForm label {
font-weight:bold;
}

/* System Messages */
#system-message    {
margin-bottom: 0px;
padding: 0;
}
#system-message dt { 
font-weight: bold; 
}
#system-message dd { 
margin: 0; font-weight: bold; text-indent: 30px; 
}
#system-message dd ul {
color: #0055BB;
list-style: none;
margin: 0px;
padding: 10px;
background: #D8E5F8 url(../images/status-info.png) no-repeat 10px 50%;
border-top: 3px solid #629DE3;
border-bottom: 3px solid #629DE3;
}
#system-message dt.message { 
display: none; 
}
#system-message dd.message {}
#system-message dt.error { 
display: none; 
}
#system-message dd.error ul {
color: #c00;
margin: 0px;
list-style: none;
background: #FFD6D6 url(../images/status-alert.png) no-repeat 10px 50%;
border-top: 3px solid #DE7A7B;
border-bottom: 3px solid #DE7A7B;
}
#system-message dt.notice { 
display: none; 
}
#system-message dd.notice ul {
color: #DCA33C;
margin: 0px;
list-style: none;
background: #FEF6D8 url(../images/status-note.png) no-repeat 10px 50%;
border-top: 3px solid #F0DC7E;
border-bottom: 3px solid #F0DC7E;
}

/*Typography Styles*/
blockquote {
padding:10px 0px 10px 50px;
}
blockquote .close {
padding:10px 50px 10px 0px;
}
pre {
font-size:1em;
padding:10px;
}
span.alert, span.info, span.download, span.note {
display: block;
padding: 10px 10px 10px 45px;
margin: 15px 0;	
}
ul.bullet1, ul.bullet2, ul.bullet3, ul.bullet4{
padding-left: 10px;
margin-left: 0;
}
ul.bullet1 li,  ul.bullet2 li, ul.bullet3 li, ul.bullet4 li{ 
list-style: none;
margin-left: 0;
padding-bottom: 3px;
margin-bottom: 5px;
padding-left: 24px;
}
blockquote {
background: #F8F8F8 url(../images/quoteopen.png) no-repeat 0px 0px;
}
blockquote .close {
background:url(../images/quoteclose.png) no-repeat 100% 100%;
}
pre {
background-color:#F8F8F8;
}
span.alert {
color: #c00;
border-top: 3px solid #fe7b7a;
border-bottom: 3px solid #fe7b7a;
background: #FFD6D6 url(../images/status-alert.png) 10px 50% no-repeat;
}
span.info {
color: #0055BB;
border-top: 3px solid #629de3;
border-bottom: 3px solid #629de3;
background: #D8E5F8 url(../images/status-info.png) 10px 50% no-repeat;
}
span.note {
color: #B79000;
border-top: 3px solid #fde179;
border-bottom: 3px solid #fde179;
background: #FEF6D8 url(../images/status-note.png) 10px 50% no-repeat;
}
span.download {
color: #57861A;
border-top: 3px solid #c2df88;
border-bottom: 3px solid #c2df88;
background: #EEF7DD url(../images/status-download.png) 10px 50% no-repeat;
}
ul.bullet1 li {
background: url(../images/bullet1.png) 4px 4px no-repeat;
}

ul.bullet2 li {
background: url(../images/bullet2.png) 4px 4px no-repeat;
}
ul.bullet3 li {
background: url(../images/bullet3.png) 4px 4px no-repeat;
}
ul.bullet4 li {
background: url(../images/bullet4.png) 4px 4px no-repeat;
}

HTML:

2. The next problem I have is the spacing between paragraphs. I know how to change the line height, but how do i change the line height between paragraphs? Meaning i want there to be more spacing between paragraphs; i don't want just normal line height between paragraphs. I want make this work using the template CSS file (i don't want to have to keep editing the HTML). I wan't to have similar proportions as articles on CNN.com

PM me with your solutions, and i will pay $5 via paypal if it works.

 

You've got one post, and it's you saying you'll pay someone for help.

Guys If you take this offer up I'd suggest you fix it, show him a screenshot of your firefox browser successfully rendering it and then you send him the $5 and in exchange you get the source code.

WINWIN

 

well i signed up to this forum because i desperate to fix this problem.

i'm sure you can take my word on $5...if i wanted to cheat someone i probably would have said $25 or something.

 

One thing i just noticed. I have a seperate CSS file that makes setting just for IE. Here is the code:

@charset "utf-8";
/* CSS Document for JP Default Template 1.5 */

#sidebar{
margin:0px 0px 0px -1px;
width:25%;
float:left;
overflow:hidden;
}

HTML:

 

This should fix that:

for "img" in the CSS... add this:
margin:1px 10px 0 0;

You could also create a separate class for this... ie:
.image-left img {
margin:1px 10px 0 0;
}
and then add class="image-left" to them.

 

Wow you just totally ripped me off

 

Wow, the computer scientist salary gets lower and lower

 

your css problem it would take more time than this money worth

 

hot problem dude..5$ are few...I should suggest you something on my experience..when things work properly in ie and opera and there are problems in ff3 than try changing your doc type.

 

Add padding to give more space around paragpaphs:

p { padding: 20px; }

Or alternatively if you just want padding on one side of the paragraph:

p { padding-bottom: 10px; }

You can replace padding-bottom with right left top.
Also this is generic for all paragaphs on your page. You need to specify a class or a DIV that it is contained inside to only style certain paragaphs.

And also remember that padding adds value onto width and height values.