Hello, I need some CSS help. I believe there is a conflict of margins between the content part of the theme and the right sidebar. The problem only shows up in FireFox and not in IE. In FireFox when a user makes a comment then the comment reply box is pushed down to where the blocks end in the right side bar. Also, when fivestar is enabled the first recent content gets chopped, a bit will show up before the blocks in the right side bar and the rest after the blocks. Everything below the blocks works fine.

For Example:

Things are fine with no comments added, http://apodos.info/content/el-manitas

Things are not so fine with a comment (in Firefox, ie is fine) , http://apodos.info/content/la-mosqueteros#comment-5

Here is the CSS

/* CSS Document */

/*------------------- Layout --------------------*/

body{
background:url(img/bg.jpg) repeat-y center top #000;
text-align:center;
margin:0;
padding:0;
}

#container{
background:url(img/full.jpg) repeat-y top left #000;
width:720px;
min-height:700px;
margin:auto;
font:12px Arial, Helvetica, sans-serif;
}

#main {
background: transparent url(img/middle.jpg) no-repeat scroll right top;
width: 393px;
padding: 0 20px;
}

#header {
color:#FFFFFF;
text-align:left;
padding-top:1px;
padding-bottom: 10px;
width: 370px;
}

#content{
width: 370px;
color: #DDD;
text-align: left;
}

#content .node {
margin-bottom: 30px;
}

#tabs-wrapper {
height:25px;
}

#sidebar{
height:100%;
color:#FFF;
font:12px Arial, Helvetica, sans-serif;
letter-spacing:1px;
text-align:left;
width:240px;
margin-right:10px;
float:left;

}

#sidebar .block_inside {
padding: 10px;

}

#rightside{
float:right;
width:287px;
min-height:700px;
}

#sidebar .clear-block {
display: block;
margin: 0;
}

#content .clear-block {
display: block;
margin: 0;
}

.node-form .standard {
clear:none;
}

#footer{
color: #FFF;
padding: 20px 0 25px 0;
margin-right: -345px;
text-align: left;
}

#header .block,
#footer .block {
padding: 0;
margin: 0;
}

#content .clear-block .block_inside,
#footer .clear-block .block_inside {
list-style-type: none;
overflow: hidden;
border: none;
border-top: none;
border-style: none;
background-color: #000;
}

.block_inside {
list-style-type: none;
overflow: hidden;
width: 208px;
border: 4px solid #FFF000;
border-top: 8px solid #FFF000;
border-style: solid solid;
background-color: #ED145A;

}

#header .block_inside,
#footer .block_inside {
list-style-type: none;
overflow: hidden;
width: 380px;
border: none;
background-color: #000;

}

#end {
background: url(img/footer.gif) no-repeat bottom right transparent;
height: 300px;
margin-top: 10px;
margin-right: -350px;
color: #333;
text-align: left;
clear: right;
}

#credits {
background:#000000 none repeat scroll 0 0;
color:#777777;
margin:50px 5px -150px 1px;
text-align:left;
}

.breadcrumb {
padding-top: 20px;
width: 350px;
}

.help {
margin-top: 5px;
}

tr.even, tr.odd {
color: #666;
}

div.error, tr.error {
background: #FFCCCC none repeat scroll 0 0;
color: #220000;
padding: 2px;
}

div.error a, tr.error a {
color: #6E132D;
}

div.error a:hover, tr.error a:hover {
color: #FFF000;
}

.admin, .warning {
width: 370px;
margin-bottom: 10px;
}

div.admin .left {
float:left;
margin-left:1em;
width:45%;
}

div.admin .right {
float:right;
margin-right:1em;
width:45%;
}

dd {
margin-left: 10px;
font-size: 0.8em;
}

.block-region {
color:#000000;
}

.more-help-link {
font-size:0.85em;
text-align:right;
width: 400px;
margin-bottom: 10px;
}

html.js fieldset.collapsible {
position:relative;
}

html.js fieldset.collapsible legend a {
padding-left:2px;
}

.profile {
clear:none;
margin:1em 0;
}

.form-text {
width: 300px;
}

textarea {
width: 200px;
}

.help-items {
float: left;
padding-right: 1%;
width: 23%;
}

.compact-link {
margin-left: 30px;
}

#offline {
padding-top:200px;
padding-bottom:200px;
}

/*------------------- Typeface --------------------*/

#title{
background: url(img/title.jpg) no-repeat top left transparent;
height: 372px;
}

#title p{
margin:0 0 12px 0;
color:#FFF;
font:62px "Arial Black", Arial, Helvetica, sans-serif;
font-weight:900;
text-transform:uppercase;
padding:80px 20px 0 0;
line-height:45px;
letter-spacing:-6px;
}

#content h2{
border-top:4px solid #FFF000;
color:#FFF;
font:22px "Arial Black", Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing:-1px;
line-height:28px;
margin: 0;
}

.submitted {
background-color: #FFF000;
color: #000;
font: 12px "Arial Black", Arial, Helvetica, sans-serif;
text-transform: uppercase;
letter-spacing: -1px;
padding-left: 4px;
line-height: 18px;
}

#content p{
font:12px Arial, Helvetica, sans-serif;
line-height:20px;
letter-spacing:1px;
}

#content b{
color:#FFF;
font:13px "Arial Black", Arial, Helvetica, sans-serif;
font-weight:600;
}

#content em,#content i{
color:#FFF;
font:13px Georgia, Times, serif;
font-style:italic;
}

#content blockquote{
width:70%;
margin-left:50px;
background-color:#222;
border-top:2px solid #FFF000;
border-bottom:2px solid #FFF000;
}

#content blockquote p{
margin:5px 10px;
color:#FFF;
}

#sidebar h2{
border-top:4px solid #FFF000;
color:#FFF;
font:22px "Arial Black", Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing:-1px;
margin:30px 0 0 0;
line-height:28px;
}

#sidebar h3{
background-color:#FFF000;
color:#ED145A;
font:13px "Arial Black", Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing:-1px;
margin:0 0 10px 0;
padding-left:4px;
line-height:18px;
}

#sidebar p{
line-height:16px;
margin: -5px 0 0 0;
}

#footer p{
color:#DDDDDD;
text-align:left;
-x-system-font:none;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
letter-spacing:1px;
line-height:20px;
margin-top: 0px;
}

#footer h2{
color:#FFFFFF;
font-family:"Arial Black",Arial,Helvetica,sans-serif;
font-size:22px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
letter-spacing:-1px;
line-height:28px;
text-transform:uppercase;
}

/*------------------- Links --------------------*/

a {
color:#FFF000;
text-decoration:none;
font-weight:900;
}

a:hover {
color:#ED145A;
text-decoration:none;
}

.content a {
color:#FFF000;
text-decoration:none;
font-weight:900;
}

.content a:hover {
color:#ED145A;
text-decoration:none;
}

#content h2 a {
color:#FFF000;
text-decoration:none;
}

#content h2 a:hover {
color:#ED145A;
text-decoration:none;
}

#sidebar a{
color:#FFF000;
font-weight:900;
text-decoration:none;
text-transform:uppercase;
}

#sidebar a:hover{
color:#000;
}

#sidebar .nav{
list-style-position:inside;
list-style-type:none;
font:22px "Arial Black", Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing:-1px;
padding-left:0;
margin-left:0;
}

#sidebar .nav li{
display: list-item;
}

#sidebar .nav a {
color:#FFF;
text-decoration:none;
background:url(img/star1.jpg) no-repeat center left;
padding:0 0 0 30px;
}

#sidebar .nav a:hover{
color:#FFF000;
background:url(img/star2.jpg) no-repeat center left;
}

.breadcrumb a {
color: #FFF000;
text-decoration:none;
}

.breadcrumb a:hover {
color: #ED145A;
text-decoration:none;
}

.submitted a {
color: #ED145A;
text-decoration:none;
}

.submitted a:hover {
color: #000000;
text-decoration:none;
}

.feed-icon img {
border:medium none;
float:right;
padding-right:50px;
}

#aggregator .links {
text-align: right;
margin-right: 60px;
}

#aggregator .links a {
color:#FFF000;
text-decoration:none;
font-weight:900;
}

#aggregator .links a:hover {
color: #ED145A;
}

.more-link {
text-align: right;

}

.profile a {
color:#FFF000;
text-decoration:none;
font-weight:900;
}

.profile a:hover {
color:#ED145A;
}

.comment {
margin-bottom: 30px;
}

.comment h3 {
}

#footer .footer_links{
clear:both;
float:left;
width:100%;
margin-bottom:40px;
}

#footer a{
color:#FFF000;
text-decoration:none;
font-weight:900;
}

#footer a:hover{
color:#ED145A;
text-decoration:none;
}

ul.primary li a {
color:#ED145A;
background-color: #000;
border: none;
height: auto;
margin-right: 0.1em;
padding: 0 0.4em;
text-decoration: none;
}

ul.primary li.active a {
color:#FFF000;
background-color: #000;
border: none;
}

ul.primary li.active a:hover {
color:#FFF;
}

ul.primary li a:hover {
color:#FFF000;
background-color: #000;
border: none;
}

.admin a, .help a,
html.js fieldset.collapsible legend a {
color:#FFF000;
text-decoration: none;
}

.admin a:hover, .help a:hover,
html.js fieldset.collapsible legend a {
color:#ED145A;
text-decoration: none;
}

.draggable {
color: #666;
}

.draggable a {
color: #6E132D;
text-decoration: none;
}

.draggable a:hover {
color: #000;
text-decoration: none;
}

.draggable a.tabledrag-handle {
padding:0.42em 1.5em;
}

table.system-status-report th,
table.system-status-report td {
color: #666;
}

table {
border-collapse:collapse;
}

table.views-entry {
background-color: #0F0F0F;
border:1px solid #222;
clear:left;
margin: 2px 0;
width: 100%;
}

table.views-entry td.view-name,
table.views-entry td.view-ops {
background-color: #333;
}

.views-basic-info {
background: #0f0f0f;
border-bottom: 1px solid #333;
margin:0.5em 0 0 0;
padding:0.5em;
}

.views-tabset .views-display {
border:0;
margin-left:118px;
}

.views-display {
background: none;
}

.views-display .tab-section .inside .views-category {
background: #0f0f0f;
border: none;
margin-bottom:1em;
}

.views-display .tab-section .inside .views-category-title {
background-color: #0f0f0f;
border-bottom: 1px solid #EFEFEF;
font-size: 9pt;
font-weight: bold;
margin: 0 0 0.1em;
padding: 0.1em 0.1em 0.1em 0.3em;
}

.views-display .top {
background: #0f0f0f none repeat scroll 0 0;
padding: 0.5em 0 0 1em;
}

.views-tabset .views-tabs {
background: #0f0f0f none repeat scroll 0 0;
border: 1px solid #222;
float: left;
margin-right: 0;
width: 117px;
}

.views-tabset .views-tabs ul li {
background:#0f0f0f none repeat scroll 0 0;
border-bottom:1px solid #D6DBDE;
line-height:100%;
list-style-image:none;
list-style-type:none;
margin:0;
padding:0;
position:relative;
}

.views-tabset .views-tabs ul li.active {
background: #666;

}

views-ajax-form {
background: #0f0f0f;
}

tr.even, tr.odd {
background-color: #0F0F0F;
border-bottom: 1px solid #333;
padding: 0.1em 0.6em;
}

tr.drag-previous {
background-color:#333;
}

#edit-submit {
margin-top: 5px;
}

#edit-title {
width: 350px;
}

.screenshot {
width: 80px;
padding: 5px;
}

.theme-info {
font-size: 0.8em;
}

/*------------------- Images --------------------*/

.content img{
border:2px solid #FFF000;
padding:3px;
float: left;
margin-right: 5px;
margin-top: 4px;
}

#content img.l_blog{
float:left;
margin:4px 8px 4px 0;
}

#content img.r_blog{
float:right;
margin:4px 10px 4px 8px;
}

#content a:hover img {
border-color: #ED145A;
}

/*------------------- Lists --------------------*/

ul.links li a {
color: #FFF000;
text-decoration: none;
}

ul.primary {
border-bottom: none;
width: 340px;
margin:0;
}

#content ul,#content ol{
list-style-position:inside;
line-height:20px;
letter-spacing:1px;
}

#clear-block .item-list ul {
margin-left: 30px;
}

#content .item-list ul li a{
color: #FFF000;
}

#content .item-list ul li a:hover{
color: #ED145A;
}

#content ul{
list-style-image:url(img/bullet.gif);
}

#content .foot_top{
font:11px Arial, Helvetica, sans-serif;
}

#content .foot_top a{
font:11px Arial, Helvetica, sans-serif;
}

#content .foot_top li {
display: inline;
padding: 0px;
}

#content .foot_top li:after {
content: ", ";
}

#content .foot_top li.last:after {
content: "";
}

#content .foot_top li.first {
padding-left: 5px;
}

#content .foot_top li a {
color: #FFF000;
}

#content .foot_top li a:hover {
color: #ED145A;
}

#content .foot_bottom{
font:11px Arial, Helvetica, sans-serif;
font-weight:900;
text-transform:uppercase;
letter-spacing:1px;
}

#content .foot_bottom li {
display: inline;
padding: 0px;
}

#content .foot_bottom li:after {
content: " | ";
}

#content .foot_bottom li.last:after {
content: "";
}

#content .foot_bottom li a {
color: #FFF000;
}

#content .foot_bottom li a:hover {
color: #ED145A;
}

#content .blogfoot{
border-left:4px solid #FFF000;
padding-left:4px;
}

#header ul,
#footer ul{
float:left;
list-style-type: none;
width: 98%;
margin:1px 0 10px;
padding:0;
}

#header ul li,
#footer ul li{
list-style-type: none;
margin: 0;
padding: 0;
}

#header li.top_link,
#footer li.top_link{
display:block;
color:#DDD;
padding:10px 0;
margin:1px 0;
font:13px "Arial Black", Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-decoration:none;
letter-spacing:1px;
background-color:#000;
}

#header li a,
#footer li a {
background-color:#0F0F0F;
border-bottom:1px solid #555555;
border-top:1px solid #555555;
color:#777777;
display:block;
font-weight:normal;
letter-spacing:1px;
margin-bottom: -5px;
padding:10px;
text-decoration:none;
}

#header li a:hover,
#footer li a:hover{
background-color:#252525;
color:#ED145A;
}

/*------------------- Gallery (maybe trash) --------------------*/

#gallery li a{
display:block;
height:30px;
width:218px;
text-decoration:none;
color:#FFF;
overflow:hidden;
padding-left:10px;
}

#gallery li a:hover{
background-color:#FFF000;
height:180px;
color:#333;
}

#gallery b{
text-transform:uppercase;
font:13px "Arial Black", Arial, Helvetica, sans-serif;
font-weight:600;
letter-spacing:-1px;
}

#gallery .spacer{
line-height:10px;
}

#gallery i{
font-style:normal;
color:#ED145A;
font-weight:900;
}

Comments

blackarma’s picture

Provided links are not working (The requested page could not be found. ) Please reupdate links with comments.

UPDATE: sorry not that language expert but found your node post with 1 comment.
Looks like .comment in your style.css need a display:inline-block !important; rule so it become

.comment {
display:inline-block !important;
margin-bottom:30px;

Also noticed .form-text css is streching search field to widht of 300px (like all form fields) and thats too wide should go with

#edit-search-block-form-1 {width:203px;}
neobodhi’s picture

Thanks for the reply, I tried the changes but still no luck. Sorry about the broken link, the URLs must have changed when I switched languages. You can see on the main page now in FireFox how the newest post gets chopped up.

jarek foksa’s picture

form.fivestar-widget {
display:inline-block!important;
}

ie.css:

form.fivestar-widget {
zoom:1;
*display:inline;
}
neobodhi’s picture

That worked, thanks a lot!!!!

shadcn’s picture

form.fivestar-widget {
zoom:1;
*display:inline; //this is a css hack that should be discouraged.
}

in some cases, it can help though