Well, this works in Internet Explorer, but not in Firefox!
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en">
<head>
<title>Esoteric Art</title>
<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
font-family: arial, helvetica, serif;
font-size: 80%;
background: #000033 no-repeat 6000px 6000px;
padding: 10em;
margin: 0;
}
#content {
width: 34em;
background-color: #000033;
padding: 1em 0;
border: 6px double #ffffff;
margin: auto;
voice-family: "\"}\"";
voice-family:inherit;
width: 32em;
}
html>body #content {
width: 32em;
}
a {
text-decoration: none;
}
a:link {
color: #FFFFFF;
}
a:visited {
color: #D4D0C8;
}
a:active {
color: #0000FF;
}
a:hover {
text-decoration: color: #ffffff;
}
h1 {
text-align: center;
padding: 0 0 0.25em 0;
margin: 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav a {
font-weight: bold;
color: FFFFFF;
}
#nav a {
text-decoration: none;
}
#nav li li a {
display: block;
font-weight: normal;
color: #ffffff;
padding: 0.2em 10px;
}
#nav li li a:hover {
padding: 0.2em 5px;
border: 5px solid #FF6600;
text-decoration: color: #FF6600;
border-width: 0 5px;
}
li {
float: left;
position: relative;
width: 10em;
text-align: center;
cursor: default;
background-color: transparent;
border: 1px solid #ffffff;
border-width: 1px 0;
}
li#first {
border-left-width: 1em;
}
li#last {
border-right-width: 1em;
}
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
font-weight: normal;
background: #000033 bottom left no-repeat;
padding: 0.2em 0 .2em 0;
border-right: solid 1px #ffffff;
border-left: solid 1px #ffffff;
border-bottom: solid 1px #ffffff;
}
li>ul {
top: auto;
left: auto;
}
li li {
display: block;
float: none;
background-color: #000033;
border: 0;
}
li:hover ul, li.over ul {
display: block;
}
hr {
display: none;
}
p {
clear: left;
background: color: #00FF00 center left no-repeat;
padding: 1em 1em 0 1em;
margin: 0;
}
p.image {
float: right;
font-size: 0.8em;
text-align: center;
color: #00ff00;
padding: 1.25em 1.25em 0.25em 0.25em;
}
p.image img {
display: block;
border: 1px solid #000033;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>
</head>
<body>
<body>
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<ul>
<li><a href="aboutartists.html">Artists</a></li>
<li><a href="aboutsite.html">Site</a></li>
</ul>
<li><a href="artwork.html">Artwork</a></li>
<ul>
<li><a href="artists_art.html">By Artist</a></li>
<li><a href="theme_art.html">By Theme</a></li>
</ul>
<li><a href="literature.html">Literature</a></li>
<ul>
<li><a href="author_lit.html">By Author</a></li>
<li><a href="theme_lit.html"> By Theme</a></li>
</ul>
<li><a href="links.html">Links</a></li>
<ul>
<li><a href="affiliates.html">Affiliates</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="resources.html">Resources</a></li>
<li><a href="contacts.html"> Contacts</a></li>
</ul>
</ul>
</body>
</html>
Little help?
www.tmcc.kupatrix.orgMind putting more details? I don't want to go through all that.. what CSS incompatibilities, and what does it display in FF? And what file format are you using for this?
Internet Explorer:
Firefox:
There is some Javascript as well, so could that be the error?
Could be Javascript.. What's CSS 'Voicefamily'?
You are most probably using CSS1, which Firefox doesn't support and Internet Explorer does. Firefox uses CSS2 and Internet Explorer does not.
That's the big problem for webdesigners, the two browsers don't support the same type of CSS and you have to be very carefull when choosing what syntax to use.
Well, what should I use?
And is there a way to be able to use both?
Okay. This works fine:[attachmentid=18551]
Its CSS only, and nicely simple. I dont know about IE6 but I know it works in Fx and IE7.
Yes, its very similar to what you have right now.
EEK, nvm IE for some reason likes to shift it over.
Okay, now it works. Amazingly simple compatibility hack, shifting it right 0 px makes it go to the correct position.[attachmentid=18552]
QUOTE(BeeR_KeG @ Apr 29 2006, 11:45 AM)
You are most probably using CSS1, which Firefox doesn't support and Internet Explorer does. Firefox uses CSS2 and Internet Explorer does not.
That's the big problem for webdesigners, the two browsers don't support the same type of CSS and you have to be very carefull when choosing what syntax to use.
[right][snapback]475483[/snapback][/right]
Wrong.
http://en.wikipedia.org/wiki/Comparison_of...hnology_supportMozilla Firefox supports damn near everything. Internet Explorer supports --
partially -- CSS2. Firefox supports 1, 2, and some of 3.
http://en.wikipedia.org/wiki/Comparison_of...gines_%28CSS%29Not entirely true.
Firefox doesn't fully support CSS1, why do you think glowing names don't appear?
Firefox's main CSS programming is based on CSS2, whereas IE6 is CSS1.
Well, I understand that the browsers render things differently, but can anyone answer how I can fix this?
Make a script to detect browser with Javascript, then either carry it over to PHP and include() or require() one of two different CSS files, one for each browser, or do the same with Javascript (not as efficient).
It's ok, I have figured out the issue, and not my site is well on its way.
Thanks for all of the help, here is the standard code now.
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en">
<head>
<title>Esoteric Art</title>
<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
font-family: arial, helvetica, serif;
font-size: 80%;
background: #000033 no-repeat 6000px 6000px;
padding: 9.25em;
margin: 0;
}
#content {
width: 34em;
background-color: #000033;
padding: 1em 0;
border: 6px double #ffffff;
margin: auto;
width: 32em;
}
html>body #content {
width: 32em;
}
a {
text-decoration: none;
}
a:link {
color: #FFFFFF;
}
a:visited {
color: #D4D0C8;
}
a:active {
color: #0000FF;
}
a:hover {
text-decoration: none;
color: #ffffff;
}
h1 {
text-align: center;
padding: 0 0 0.25em 0;
margin: 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav a {
font-weight: bold;
color: FFFFFF;
}
#nav a {
text-decoration: none;
}
#nav li li a {
display: block;
font-weight: normal;
color: #ffffff;
padding: 0.2em 10px;
}
#nav li li a:hover {
padding: 0.2em 5px;
border: 5px solid #FF6600;
text-decoration: none;
color: #FF6600;
border-width: 0 5px;
}
li {
float: left;
position: relative;
width: 9.35em;
text-align: center;
cursor: default;
background-color: transparent;
border-width: 1px 0;
}
li#first {
border-left-width: 1em;
}
li#last {
border-right-width: 1em;
}
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
font-weight: normal;
background: #transparent bottom left no-repeat;
padding: 0.2em 0 .2em 0;
}
li>ul {
top: auto;
left: auto;
}
li li {
display: block;
float: none;
background-color: transparent;
border: 0;
}
li:hover ul, li.over ul {
display: block;
}
hr {
display: none;
}
p {
clear: left;
background: #00FF00 center left no-repeat;
padding: 1em 1em 0 1em;
margin: 0;
}
p.image {
float: right;
font-size: 0.8em;
text-align: center;
color: #00ff00;
padding: 1.25em 1.25em 0.25em 0.25em;
}
p.image img {
display: block;
border: 1px solid #000033;
}
</style>
<style type="text/css">
body {background-color:000033; background-image:none;}
.menu_bg {
background-color:black;
background-image:url(http://i35.photobucket.com/albums/d153/JFGoforth/esotericartsbannercopysadf.jpg);
border:1px solid; border-color:#000033;
width:750px; height:175px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-400px; margin-top:0px; text-align:center;
visibility:visible;
border-left: #999999 solid 1px;
border-right: #999999 solid 1px;
border-top: #999999 solid 1px;
}
.menu_bar {
background-color:transparent;
width:750px; height:125px; overflow:auto;
position:absolute; z-index:2; left:504px; top:0px;
margin-left:-313px; margin-top:158px; text-align:center;
visibility:visible;
}
.news {
background-color:black;
border:1px solid; border-color:#999999;
width:750px; height:850px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-400px; margin-top:260px; text-align:center;
visibility:visible;
padding-bottom:inherit;
}
.copyright {
background-color:fff;
border:0px solid; border-color:#999999;
width:750px; height:20px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-400px; margin-top:1235px; text-align:center;
visibility:visible;
}
</style>
<script type="text/javascript">
startList = function() {
navRoot = document.getElementById("nav");
for (i=0 ; i<navRoot.childNodes.length ; i++)
{
node = navRoot.childNodes[i];
if (node.nodeName=="LI")
{
node.onmouseover=function()
{
this.className = "over";
}
node.onmouseout=function()
{
this.className=this.className = " ";
}
}
}
}
window.onload=startList;
</script>
</head>
<body>
<div class="menu_bg">
<font color="#000033">.</font>
</div>
<div class="menu_bar">
<ul id="nav">
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/index.html">Home</a></li>
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/artwork.html">Artwork</a>
<ul>
<br />
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/artists_art.html">By Artist</a></li>
<br />
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/theme_art.html">By Theme</a></li>
</ul>
</li>
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/literature.html">Literature</a>
<ul>
<br />
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/author_lit.html">By Author</a></li>
<br />
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/theme_lit.html"> By Theme</a></li>
</ul>
</li>
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/about.html">About</a>
<ul>
<br />
<li><a href= "file:///C|/Documents and Settings/Owner/My Documents/aboutartists.html">Artists</a></li>
<br />
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/aboutsite.html">Site</a></li>
</ul>
</li>
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/links.html">Links</a>
<ul>
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/affiliates.html">Affiliates</a></li>
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/tutorials.html">Tutorials</a></li>
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/resources.html">Resources</a></li>
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/contacts.html"> Contacts</a></li>
</ul>
</li>
</ul>
</div>
<div class="news">
Welocome to Esoteric Arts, enjoy your stay.
</div>
<div class="copyright">
<font size="-1"><font color="#666666">Copyright © Jake Goforth 2006</font></font>
</div>
</body>
</html>[/cde]
QUOTE(BeeR_KeG @ Apr 29 2006, 05:20 PM)
Not entirely true.
Firefox doesn't fully support CSS1, why do you think glowing names don't appear?
Firefox's main CSS programming is based on CSS2, whereas IE6 is CSS1.
[right][snapback]475704[/snapback][/right]
I think glowing names don't appear because Microsoft threw the filter property into CSS because they wanted to, instead of supporting the W3C standards (which do
not include glowing ANYTHING, or the filter property at all).
Firefox's mission is to comply to the standards. Think of CSS2 as an 'upgrade' to CSS1, therefore if Firefox supports CSS2 it
must support CSS1.
In fact, IE has trouble supporting all of CSS1.
Being a web developer (somewhat), don't get me started.
My idea = Wait for IE7, mine works in the beta.
I jsut skimmed through, but I believe that the h1 element doesn't work in FireFox.