subaculture
03-06-2005, 03:09 PM
Hi folks,
I have a website at www.irish-guy.com (http://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;
}
I have a website at www.irish-guy.com (http://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;
}