Few Theme CSS Problems with FireFox on my Site

  • supermag

    (@supermag)


    15 years ago

    I have a problem. Please check this site: http://sports2all.com/misc/

    First Problem:
    when i open the page with Google chrome or internet explore, The Distance between the Sidebar and the Main content is 10px.

    But when i open it with Firefox. there is no distance. and it looks ugly.

    So i traced the problem to a css code. And have no solution for it. since i am not a coder.

    My css is :

    body{font-family:Arial, Arial, Helvetica,  sans-serif;font-size:12px;color:#000000;margin:0;padding:0;}
h2, h3{font-size:16px;line-height:20px;color:#00749E;margin:0;padding:0;}
.h2{font-family:Arial, Helvetica, sans-serif;line-height:18px;font-size:12px;color:#312E2E;font-weight:700;}
a:link,a:visited,a:active{color:#00749E;text-decoration:none;}
a:hover{color:#000;text-decoration:underline;}
#header{width:1050px;height:95px;margin:0 auto;padding:0;}
#header h1.blogtitle{font-family:Arial, Helvetica, sans-serif;margin:0;padding:10px 0 0;}
#header p.desc{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:11px;margin:0;padding:0;}
#top{background-color:#fff;background-image:url(images/topbck.gif);background-repeat:repeat-x;height:34px;}
#ddnav{background-color:#312e2e;height:35px;margin:0;padding:0;}
#nav{height:25px;width:1050px;font-weight:700;margin:0 auto;padding:10px 0 0;}
ul.nav{height:25px;line-height:25px;float:left;list-style:none;font-size:11px;text-transform:inherit;margin:0;padding:0;}
ul.nav li{float:left !important;list-style-type:none;border-right:2px solid #312e2e;margin:0;padding:0;}
ul.nav li a,ul.nav li a:link,ul.nav li a:visited{background:url(images/navsilver.gif) repeat-x;color:#818181;float:left;display:block;text-decoration:none;padding:0 15px;}
ul.nav li a:hover,ul.nav li a:active{background:url(images/navblue.gif) repeat-x;color:#205387;text-decoration:none;}
ul.nav li.current_page_item a{text-decoration:none;background:url(images/navblue.gif) repeat-x;color:#fff;}
ul.nav li ul{float:left;margin:0;padding:0;}
#main{width:1050px;margin:0 auto;padding:0;}
#content{float:left;width:716px;margin:0;padding:0;}
.entry{float:left;width:706px;border:1px solid #dadada;background:#fff url('images/box.gif') repeat-x left top;padding:10px; margin-left:0; margin-right:0; margin-top:0; margin-bottom:10px}
#sidebar{float:right;width:310px;margin:0;padding:0;}
.rsidebar{float:right;width:300px;border:1px solid #dadada;background:#fff url(images/box.gif) repeat-x left top;margin:0 0 10px;padding:10px;}
top;margin:0 0 10px;padding:10px;}
.rsidebar h2{font-size:12px;border-bottom:#eee 1px solid;margin:0 0 5px;padding:0;}
.rsidebar ul{list-style-type:none;margin:0;padding:0;}
.rsidebar ul li{list-style-type:none;margin:0 0 10px;padding:0;}
.rsidebar ul li ul{list-style-type:square;margin:0;padding:0 3px;}
.rsidebar ul li ul li{list-style-type:none;background:transparent url(images/li.gif) no-repeat;border:0;margin:0;padding:0 0 5px 20px;}
.navigation{width:600px;float:left;color:#666;}
.alignright{float:right;margin-top:10px;}
.alignleft{float:left;margin-top:10px;}
span.cmt{background:transparent url(images/comment.gif) no-repeat;border:0;margin:0;padding:0 0 5px 20px;}
span.cty{background:transparent url(images/category.gif) no-repeat;border:0;margin:0;padding:0 0 5px 20px;}
.postmetadata{border-top:1px #eee solid;font-size:10px;margin:0;padding:5px;}
.boxcomments{border-top:5px solid #ddd;border-bottom:5px solid #ddd;margin-bottom:20px;width:706px;}

/* Begin Form Elements */
.entry form { /* This is mainly for password protected posts, makes them look better. */ text-align:left;}
select {width: 130px;}
#commentform {border: 1px solid #DADADA;padding: 20px;}
#commentform input {width: 170px;padding: 0px;margin: 5px 5px 0px 0;}
#commentform {margin: 5px 0px 0 0;}
#commentform textarea {width: 100%;border:1px solid #DADADA;height: 120px;padding: 2px;}
#respond:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
#submitbox #submit {float: right;padding:3px 6px;background:#F3F3F3;border-top:1px solid #DADADA;border-right:1px solid #DADADA;border-bottom:1px solid #DADADA;border-left:1px solid #DADADA;color:#000000;font-size:11px;cursor:pointer;}
#submitbox #submit:hover {background:#FFFFFF;border-top:1px solid #DADADA;border-right:1px solid #DADADA;border-bottom:1px solid #DADADA;border-left:1px solid #DADADA;color:#000000;}
/* End Form Elements */

/* Begin Typography & Colors */
.thread-alt {background-color: #f8f8f8;}
.thread-even {background-color: white;}
.depth-1 {border: 1px solid #ddd;}
.even, .alt {border-left: 1px solid #ddd;}
.commentlist li .avatar {float: right;border: 1px solid #eee;padding: 2px;background: #fff;}
.commentlist cite, .commentlist cite a {font-weight: bold;font-style: normal;font-size: 1.1em;}
.commentlist p {font-weight: normal;line-height: 1.5em;text-transform: none;}
.commentmetadata {font-weight: normal;} small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {color: #777;} code {font: 1.1em 'Courier New', Courier, Fixed;} acronym, abbr, span.caps {font-size: 0.9em;letter-spacing: .07em;}
/* End Typography & Colors */

/* Begin Comments*/
ol.commentlist{margin:0 0 1px;padding:0;}
ol.commentlist :hover{background:#f3f3f3;}
ol.commentlist li :hover{background:none;}
ol.alt {margin: 0;padding: 10px;}
ol.commentlist {padding: 0;text-align: justify;}
ol.commentlist li {margin: 15px 0 10px;padding: 5px 5px 10px 10px;list-style: none;}
ol.commentlist li ul li {margin-right: 0px;margin-left: 10px;}
ol.commentlist p {margin: 10px 5px 10px 0;}
ol.children { padding: 0; }
ol.nocomments {text-align: left;margin: 0;padding: 0;}
ol.commentmetadata {margin: 0;display: block;}
ol.commentlist li.commenthead{display:block;list-style:none;margin:0;padding:5px 15px;}
ol.commentlist li.commenthead h2{margin:0;}
/* End Comments */

ol.tblist{border-top:1px solid #fff;list-style:none;margin:0 0 1px;padding:15px;}
ol.tblist li{display:block;background:url('images/c.gif') no-repeat 0 2px;padding-left:15px;list-style-type:none; margin-left:0; margin-right:0; margin-top:0; margin-bottom:5px}
#footer{background-image:url('images/footerbck.gif');background-repeat:repeat-x;clear:both;height:24px;margin:0;padding:0}
#footerbox{color:#fff;background-color:#312e2e;height:30px;line-height:30px !important;margin:0;padding:0;}
.footer{width:980px;color:#fff;height:30px;line-height:30px !important;margin:0 auto;padding:0;}
.footer a:hover{text-decoration:underline;color:#fff;border:none;}
.footer a:link, .footer a:active, .footer a:visited{text-decoration:underline;color:#25aacd;border:none;}

    The problem is in this Line:

    #sidebar{float:right;width:310px;margin:0;padding:0;}
.rsidebar{float:right;width:300px;border:1px solid #dadada;background:#fff url(images/box.gif) repeat-x left top;margin:0 0 10px;padding:10px;}

    You see, if i changed the width of the sidebar to 300 in the first line and 290 in the second line. Then problem is fixed in Firefox, and there will be space between sidebar and the main content. BUT the space will be doubled in Google Chrome and I.E. And it will look ugly. So is there any way to fix it.

    Second Problem:
    Some How in Firefox, the text in footer colour is red. it is supposed to white. Its white in I.E and Google Chrome. So any way to change that too. Thanks.

Viewing 15 replies - 1 through 15 (of 21 total)
1 2
  • esmi

    (@esmi)

    15 years ago

    There may be some CSS issues on your site but, more importantly, you need to validate your site first. You have quite a few validation errors – some of which will, almost certainly, be contributing to your problems. Once the serious validation errors have been removed, it will be much easier to deal with any outstanding CSS problems.

    Thread Starter supermag

    (@supermag)

    15 years ago

    but how to validate the site, i am new to this, and i dont know coding.

    greg2008

    (@greg2008)

    15 years ago

    Validate here:
    http://validator.w3.org/

    Thread Starter supermag

    (@supermag)

    15 years ago

    ok, i the css vaildating thing here: http://jigsaw.w3.org/css-validator/validator?uri=http://sports2all.com/&profile=css21&usermedium=all&warning=1&lang=en

    but i cant understand it. what does it mean and how do i correct it.

    greg2008

    (@greg2008)

    15 years ago

    Value Error : padding-left only 0 can be a length. You must put a unit after your number : 10
    Value Error : margin-bottom Too many values or values are not recognized : 0 px

    So lines 142 and 161 of your CSS file have errors.

    It informs you that “padding-left” cannot be “10”, only “0” can be. So it tells you to put a unit after your number. Like “px” etc
    eg “padding-left: 10px;”

    Then also “margin-bottom” has too many values.
    I.E. “Margin-bottom: 10px 10px;” you can only use ONE size when you specify a particular margin of the four.
    Otherwise, use eg “margin: 10px 10px 10px 10px;”

    You can ignore the warnings if you just want to validate, but sometimes it’s a good thing to correct them as it makes for tidier and better structured code.

    It also appears (for some bizarre reason) I cannot right click on your site.

    Thread Starter supermag

    (@supermag)

    15 years ago

    the problem is i cant find line 142 and 161 in my css.

    http://sports2all.com/wp-content/themes/silverlight/style.css

    there is only 121 lines.

    esmi

    (@esmi)

    15 years ago

    The errors are inline style (ie in the page template or content).

    First error:

    <div id="content">

<div align="left" style="padding:0px;padding-left:10;padding-bottom: 10px;">

    It should be padding-left:10px.

    Second error:

    <h2>Home</h2>

				<div style="float: right; margin-right: 5px; margin-bottom:0 px;">

    It should be margin-bottom:0px (no space)

    Thread Starter supermag

    (@supermag)

    15 years ago

    THANKS ALOT esmi found the problems. and fixed.

    ok its vaildated now, but there is still no space between sidebar and main in other browsers.

    Thread Starter supermag

    (@supermag)

    15 years ago

    ok i maked the #main{width:1050px;margin:0 auto;padding:0;}
    to width 1060px and its fixed with firefox and other browsers but now the space is doubled in Google Chrome.

    greg2008

    (@greg2008)

    15 years ago

    It’s probably becasue you call <div id="sidebar"> BEFORE <div class="rsidebar">, and sidebar has margin and padding 0.

    EG
    style.css (line 32)

    #sidebar {
    float:right;
    margin:0;
    padding:0;
    width:310px;
    }

    Try adding a left margin to that, or as it’s floated to the right, try reducing the width by 10px.

    We can help, but without knowing all your CSS and HTML, it’s hard to adjust little things like that.
    You really should try to play around with the code yourself and adjust things. Then once you have learned it you can adjust it with ease.

    Just backup any files you are playing with first, like style.css, then play with the declarations, if it all goes wrong, just overwrite it with your backed up one.

    Thread Starter supermag

    (@supermag)

    15 years ago

    ok, lol that was tricky. can you give few more hints.

    I dont want to change the width of sidebar, because alot of widgets depend on that width. but i changed the #main{width:1050px;margin:0 auto;padding:0;}

    to 1060px

    so that now fixed the problem in FF, but now in I.E 7 and GC the space is doubled.

    And now as you said i added 10 cm to mergin left and became like this:

    #sidebar{float:right;width:310px;margin-left:10px;padding:0;}

    is that correct code. any way i changed to this and nothing happened.

    so whats next. i can give you access to site if you can help me.

    Thanks

    greg2008

    (@greg2008)

    15 years ago

    I dont want to change the width of sidebar, because alot of widgets depend on that width

    That’s the sort of thing I meant by it’s difficult to help and suggest code/CSS changes to someone else’s site.

    Again, we can still try though.
    You will have to give me a bit of time as the site doesn’t load for me (hope that’s just an issue for me)

    I don’t need access to the site for styling, the HTML and CSS is available by other means.

    Thread Starter supermag

    (@supermag)

    15 years ago

    ok thanks alot for your help greg. realy appreciate it.

    Thread Starter supermag

    (@supermag)

    15 years ago

    hey greg you mentioned:

    It’s probably becasue you call <div id=”sidebar”> BEFORE <div class=”rsidebar”>, and sidebar has margin and padding 0.

    If i renamed the rsidebar to sidebar.php . will it be fixed.

    Thread Starter supermag

    (@supermag)

    15 years ago

    waiting for your reply.

Viewing 15 replies - 1 through 15 (of 21 total)
1 2
  • The topic ‘Few Theme CSS Problems with FireFox on my Site’ is closed to new replies.