Programming Forums - CSS file for Firefox

Programming Forums (http://www.programmingforums.org/forumindex.php)

- HTML / XHTML / CSS (http://www.programmingforums.org/forum27.html)

- - CSS file for Firefox (http://www.programmingforums.org/showthread.php?t=13868)

CSS file for Firefox

* { 

        margin: 0;

        padding: 0;

}

  

body { 

        background: #333 url("images/back.gif") repeat;

        text-align: center;

        font: normal 11px/18px verdana, arial, tahoma, sans-serif;

        color: #333;

        padding-top: 40px;

}  



a {

        color: #666;

        text-decoration: none;

}  



a:visited { 

        text-decoration: underline;

}  



a:hover {

        color: #000;

}



#header {

        width: 580px;

        height: 210px; 

        background: #000 url("images/header2.png") no-repeat;

        background-position: top right;

}  



#wrapper { 

        width: 580px;

        background: #fff url("images/sidebar.gif") repeat-y;

        background-position: 0 0;

        border: solid 10px #fff;

        margin: 0 auto;

        text-align: left;

}  



h1 {

        width: 140px;

        height: 30px;

        background-color: #333;

        margin: 1px 1px 1px 0;

        float: left;

        font: bold 16px/30px arial, verdana, tahoma, sans-serif;

        padding-left: 10px;

        color: #fff;

        cursor: default;

}



h1:first-letter {

        color: #f00;

        text-decoration: underline;

}



h2 {

        width: 419px;

        height: 30px;

        background-color: #333;

        float: right;

        clear: both;

        font: bold 16px/30px arial, verdana, tahoma, sans-serif;

        padding-left: 10px;

        color: #fff;

        margin-top: 1px;

        cursor: default;

}



#nav {

        list-style: none;

        z-index: 2;

        border-right: 1px solid #fff;

        height: 210px;

        width: 150px;

}



#nav li a {

        color: #fff;

        font: normal 11px/24px verdana, arial, tahoma, sans-serif;

        display: block;

        width: 140px;

        height: 24px;

        background-color: #000;

        border-bottom: 1px solid #fff;

        padding-left: 10px;

        text-decoration: none;

}



#nav li a:hover {

        background-color: #333;

}



#current a {

        background-image: url("images/bullet.gif");

        background-repeat: no-repeat;

        background-position: 100% 50%;

}



#sidebar {

        width: 132px;

        background-color: #ccc;

        float: left;

        position: relative;

        left: -4px;

        margin-left: -147px;

        border-top: 1px solid #fff;

        font: normal 10px/18px verdana, arial, tahoma, sans-serif;

        padding: 8px;

}



img {

        border: none;

}



a img {

        margin-bottom: 20px;

        border: 1px solid #fff;

}



a:hover img {

        border-color: #f00;

}



#content {

        float: left;

        width: 400px;

        margin: 10px 0 0 10px;

}



p {

        margin-bottom: 20px;

}



p:first-line {

        font-weight: bold;

}



#footer {

        text-align: center;

        clear: both;

        width: 400px;

        margin-left: 163px;

}

As of now this works in IE, but I need one for FireFox, can yall help me? The problem is the sidebar seems to overhang to the left a little bit and it takes the body with it. TO get an idea of what I am talking about goto, http://www.geocities.com/it_clientsite in IE and look at it, then view it in Firefox and you will see the difference. Can anyone help? Also my CODE tools and everything else aint working still, wtf is going on? Big_K if you read this, I PMed you about 2 weeks ago, and still no reply, my PM's havent been going through either.

I'm not sure what the problem is but I edited your css so that it looks better. Much easier to read now. :)

Thanks I've been manually having to type in the CODE tags and it always seems to go across instead of down. Thanks

BigK my problem with the tools has somethign to do with the browser I thinik. It wasnt working in firefox now I'm in avant and it working fine. Piece of shit firefox. Thats two problems I'm having with FF CSS and the tools lol. Anyone got advice for my CSS file to work in FF?

:banana:

I'm not familiar with the Avant browser, but I understand it's a clone++ of IE. That means that Firefox is the more compliant, and the other is likely the piece of shit.

IE does not render the box model properly prior to IE7, and IE7 doesn't do it if you don't have the proper DTD.

You could google box model hack or visit A List Apart for ways to write the CSS properly, then hack for IE.

It looks fine in FF 2.0.0.6 and opera 9.22. here is what it looks like in IE 6.

The W3C has standards but why does IE not follow them?

I seriously doubt your problem is caused by Firefox, since it's much more compliant with web standards. In fact, it looks virtually identical in IE6 and Firefox 2.0.0.6 to me. The only differences I noticed were limited to very minor font differences (no doubt due to different browser defaults). I could only notice these differences while viewing the pages side by side.

To illustrate, here are screenies (scaled to save bandwidth) for the two browsers:

http://members.shaw.ca/r.sheppard/temp/DemoIE.png

http://members.shaw.ca/r.sheppard/temp/DemoFirefox.png

So, where's the problem? :)

[edit] On closer inspection, I noticed another difference: where it says 'A couple things' in your menu bar at left, it (being the remainder of that line) doesn't line up with the rest of the layout in the IE version, but does in the Firefox one. Seems to me if one is not producing the desired appearance that it's the IE version. [/edit]

Yeah it was worse then that though. I found the problem I was calling the stylesheet like 3 or 4 times in the html file. lol But it's all fixed now except that A couple things, and the page where you are located is now being pulled to the left a little. But thanks for yall help