Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: CSS in Firefox

  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS in Firefox

    Hi folks,
    I have a website at www.irish-guy.com . Its showed fine with a white background on Explorer and black text when I created in on Windows. I when moved to Mac G4.

    It was also fine on Safari.....but on Firefox, it had white text and a white background. So I could not read anything.

    I ahve tried changing the BG Colour to blue (its back white again). When i chaged it to various colors (for example blue) the following happened.
    (1) Its blue BG and black text on Safari.
    (2) Its gray BG and black text on Explorer (when viewed on a Mac).
    (3) Its gray BG and black text on Firefox (except within the picture boxes where its white text). Unreadable.

    My question is (CSS below), how do i get a white background and black text on all three browsers. Or if you are reading this on Firefox on a Windows machine, how does it read?

    Regards
    Michael



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

    <style type="text/css" media="screen" />

    /*----start mash up-----------------------------------------------------------*/
    /*----start ruthsarian layout-------------------------------------------------*/

    #pageWrapper {
    margin: 0;
    width: auto;
    min-width: 500px;
    border-color: black;
    border-style: solid; /* explicitly defined within eact selector in case you want change border styles (to mix it up) between elements */
    border-width: 1px; /* puts a border around the whole page */
    }

    body {
    background-color: gray;
    color: white;
    margin: 0;
    padding: 2em;
    }
    body {
    font-family: arial, helvetica, sans-serif;
    font-size : x-small;
    voice-family : "\"}\"";
    voice-family : inherit;
    font-size : small;
    }

    #masthead {
    background-color: gray;
    color: black;
    border-color: black;
    border-style: solid;
    border-width: 0 0 1px 0;
    padding: 1em;
    }

    #masthead h1 {
    display: inline; /* personal preference to keep the header inline. you could just as easily change padding and margins to 0. */
    }

    #outerColumnContainer {
    z-index: 1;
    border-left-color: silver; /* left hand column background color */
    border-right-color: blue; /* right hand column background color */
    background-color: white; /* this sets the background color on the center column */
    color: #111111;
    border-style: solid;
    border-width: 0 0 0 200px; /* sets the width of the borders used to create the left and right columns' background color. */
    /* border-width: 0 200px; */ /* for three columns */
    }

    #innerColumnContainer {
    z-index: 2;
    margin: 0 -1px;
    width: 100%;
    border-color: black;
    border-style: solid;
    border-width: 0 0 0 1px; /* puts borders between center and the side columns */
    /* border-width: 0 1px; */ /* for three columns */
    }

    #contentColumn {
    margin: 0 -1px;
    width: 100%;
    float: left;
    position: relative;
    z-index: 10;
    overflow: visible; /* fix for IE italics bug */
    color: black;
    }

    #leftColumn {
    float: left;
    position: relative;
    z-index: 10;
    overflow: visible; /* fix for IE italics bug */
    width: 200px;
    margin: 0 1px 0 -200px;
    color: black;
    text-align: center;
    }

    #rightColumn {
    float: left;
    position: relative;
    z-index: 10;
    overflow: visible; /* fix for IE italics bug */
    width: 200px;
    margin: 0 -200px 0 1px;
    display: none; /* comment this out and edit borders.css to create the third column */
    color: black;
    }

    #footer {
    position: relative;
    background-color: blue;
    color: white;
    border-color: black;
    border-style: solid;
    border-width: 1px 0 0 0;
    text-align: center;
    padding: 1em;
    }

    .clear {
    clear: both;
    }

    .hide {
    display: none; /* hide elements that CSS-targeted browsers shouldn't show */
    }

    .inside {
    padding: 0.5em 1.5em; /* this padding is applied to every major box within the layout for a uniform gutter between borders */
    }

    html>body #innerColumnContainer {
    border-bottom: 1px solid transparent; /* help mozilla render borders and colors. try removing this line and see what happens */
    }

    /*----start vertical nav------------------------------------------------------*/

    .vnav {
    margin: 1em 0;
    }

    .vnav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: block;
    border: solid 1px black;
    border-bottom-width: 0;
    }

    .vnav ul li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: block;
    border-bottom: solid 1px black;
    }

    .vnav ul li a {
    display: block;
    text-decoration: none;
    padding: 2px 10px;
    color: black;
    background-color: white;
    }

    .vnav ul li a:hover {
    background-color: black;
    color: white;
    }

    .vnav h3 {
    margin-bottom: 0;
    padding-bottom: 0;
    }

    * html .vnav {
    position: relative; /* IE needs this to fix a rendering problem */
    }

    * html .vnav ul li a {/* hide from IE5.0/Win & IE5/Mac */
    height: 1%;
    }

    #rightColumn .vnav ul li a {
    color: black;
    background-color: white;
    }

    #rightColumn .vnav ul li a:hover {
    background-color: black;
    color: white;
    }

    /*--------------------------------------------------------end vertical nav----*/
    /*----start horizontal nav bar------------------------------------------------*/

    .hnav {
    white-space: nowrap;
    margin: 0;
    color: black;
    padding: 3px 0 4px 0;
    background-color: blue;
    color: black;
    border-color: black;
    border-style: solid;
    border-width: 0 0 1px 0;
    }

    .hnav ul {
    text-align: center;
    list-style-type: none;
    line-height: normal;
    margin: 0;
    padding: 0;
    }

    .hnav ul li {
    display: inline;
    white-space: nowrap;
    margin: 0;
    }

    .hnav ul li a {
    text-decoration: none;
    color: black;
    background-color: yellow;
    margin: 0 -1px 0 0;
    padding: 3px 10px 4px 10px;
    border-left: solid 1px black;
    border-right: solid 1px black;
    }

    .hnav ul li a:hover {
    text-decoration: underline;
    background-color: black;
    color: yellow;
    }

    * html .hnav {/* Hide from IE5/Mac (& IE5.0/Win) */
    height: 1%; /* holly hack to fix a render bug in IE6/Win */
    }

    }
    /*--------------------------------------------------end horizontal nav bar----*/
    /*----start screen.css----------------------------------------------------------

    @import "base.css";
    @import "hnav.css";
    @import "vnav.css";
    @import "colors.css";
    @import "gutters.css";
    @import "borders.css";
    @import "fonts.css";

    ------------------------------------------------------------end screen.css----*/
    /*---------------------------------------------------end ruthsarian layout----*/

    /*----start minima template---------------------------------------------------*/

    a:link {
    color: blue;
    text-decoration:underline;
    }

    a:visited {
    color: purple;
    text-decoration:underline;
    }

    a:hover {
    color: red;
    text-decoration:underline;
    }

    a img {
    border-width:0;
    }

    /*----Header------------------------------------------------------------------*/

    #masthead h1 a {
    color: black;
    text-decoration:none;
    }

    #masthead h1 a:hover {
    color: silver;
    }

    #description {
    display:inline;
    font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana, Sans-serif;
    text-transform:uppercase;
    letter-spacing:.2em;
    color: silver;
    text-align: right;
    }

    /* Headings----------------------------------------------- */

    h2 {
    margin:1.5em 0 .75em;
    font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana, Sans-serif;
    text-transform:uppercase;
    letter-spacing:.2em;
    color: black;
    }

    /* Posts----------------------------------------------- */

    .date-header {
    margin:1.5em 0 .5em;
    }

    .post {
    margin:.5em 0 1.5em;
    border-bottom:1px solid black;
    padding-bottom:1.5em;
    }

    .post-title {
    margin:.25em 0 0;
    padding:0 0 4px;
    font-size:140%;
    font-weight:normal;
    line-height:1.4em;
    color: red;
    }

    .post-title a {
    display:block;
    text-decoration:none;
    color: lightgrey;
    font-weight:normal;
    }

    .post-title a:visited {
    display:block;
    text-decoration: underline;
    color: green;
    font-weight:normal;
    }

    .post-title strong {
    display:block;
    text-decoration:none;
    color: yellow;
    font-weight:normal;
    }

    .post-title a:hover {
    color: silver;
    }

    .post p {
    margin:0 0 .75em;
    line-height:1.6em;
    }

    p.post-footer {
    margin:-.25em 0 0;
    color: silver;
    }

    .post-footer em {
    font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana, Sans-serif;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-style:normal;
    color: darkgray;
    margin-right:.6em;
    }

    .comment-link {
    font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana, Sans-serif;
    text-transform:uppercase;
    letter-spacing:.1em;
    margin-left:.6em;
    }

    .img {
    padding:5px;
    background:gold;
    border:1px solid black;
    }

    .post blockquote {
    border: 1px dashed black;
    background:gold;
    font-size: 10px;
    color:#666;
    font-family:verdana, arial, sans-serif;
    padding:8px;
    }


    .post blockquote p {
    margin:.75em 0;
    }

    /*----start Sidebar Content---------------------------------------------------*/

    #sidebar ul {
    margin:0 0 1.5em;
    padding:0 0 1.5em;
    border-bottom:1px solid black;
    list-style:none;
    }

    #sidebar li {
    margin:0;
    padding:0 0 .25em 15px;
    text-indent:-15px;
    line-height:1.5em;
    }

    #sidebar p {
    color: darkgray;
    line-height:1.5em;
    }

    /*----start Profile-----------------------------------------------------------*/

    #profile-container {
    margin:0 0 1.5em;
    border-bottom:1px solid black;
    padding-bottom:1.5em;
    }

    .profile-datablock {
    margin:.5em 0 .5em;
    }

    .profile-img {
    display:inline;
    }

    .profile-img img {
    float:left;
    padding:4px;
    border:1px solid black;
    margin:0 8px 3px 0;
    }

    .profile-data {
    margin:0;
    font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana, Sans-serif;
    text-transform:uppercase;
    letter-spacing:.1em;
    }

    .profile-data strong {
    display:none;
    }

    .profile-textblock {
    margin:0 0 .5em;
    }

    .profile-link {
    margin:0;
    font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana, Sans-serif;
    text-transform:uppercase;
    letter-spacing:.1em;
    }

  • #2
    Regular Coder
    Join Date
    Oct 2004
    Posts
    168
    Thanks
    0
    Thanked 5 Times in 5 Posts
    You have an orphaned closing bracket :

    * html .hnav {/* Hide from IE5/Mac (& IE5.0/Win) */
    height: 1%; /* holly hack to fix a render bug in IE6/Win */
    }

    } /* remove this one */

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Still a Problem

    Hi Guys,
    I have white background on all 3 browsers but the FireFox body text is still white (when it should be black). Any idea's?

    #outerColumnContainer {
    z-index: 1;
    border-left-color: silver; /* left hand column background color */
    border-right-color: blue; /* right hand column background color */
    background-color: white; /* this sets the background color on the center column */
    color: #111111;
    border-style: solid;
    border-width: 0 0 0 200px; /* sets the width of the borders used to create the left and right columns' background color. */
    /* border-width: 0 200px; */ /* for three columns */
    }

    On another note, so as not to start another thread, when people visit my page (but if its not fully expanded on the screen), the left borders are jumbled in with the body. Therefore,visitors have to expand the browser to 100% screen and refresh. How can I keep the sidebar relative to the body?


    Michael

  • #4
    New Coder
    Join Date
    Mar 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Its now fixed .... thanks to all .... a html issue (not Css) and yes I have decided to learn and validate. I already started and am down 5/6 to 430 issues.

    Mike

  • #5
    Regular Coder
    Join Date
    Feb 2005
    Location
    Lawrence, Kansas
    Posts
    125
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Macintosh

    I find that validation can go a long way to help fixing pesky errors. On top of that, sometimes an issue early in the page, once cleared up, fixes a slew of others in the process.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •