Staredit Network

Staredit Network -> Computers and Technical -> CSS Incompatibilities!
Report, edit, etc...Posted by Shadow on 2006-04-29 at 01:29:50
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.org
Report, edit, etc...Posted by Centreri on 2006-04-29 at 10:07:23
Mind 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?
Report, edit, etc...Posted by Shadow on 2006-04-29 at 10:58:53
Internet Explorer:

user posted image

Firefox:
user posted image

There is some Javascript as well, so could that be the error?
Report, edit, etc...Posted by Centreri on 2006-04-29 at 12:56:35
Could be Javascript.. What's CSS 'Voicefamily'?
Report, edit, etc...Posted by BeeR_KeG on 2006-04-29 at 14:45:32
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.
Report, edit, etc...Posted by Shadow on 2006-04-29 at 15:15:16
Well, what should I use?

And is there a way to be able to use both?
Report, edit, etc...Posted by Doodle77(MM) on 2006-04-29 at 16:13:59
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]
Report, edit, etc...Posted by RexyRex on 2006-04-29 at 19:12:35
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_support

Mozilla Firefox supports damn near everything. Internet Explorer supports -- partially -- CSS2. Firefox supports 1, 2, and some of 3. smile.gif

http://en.wikipedia.org/wiki/Comparison_of...gines_%28CSS%29
Report, edit, etc...Posted by BeeR_KeG on 2006-04-29 at 20:21:07
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.
Report, edit, etc...Posted by Shadow on 2006-04-29 at 20:35:42
Well, I understand that the browsers render things differently, but can anyone answer how I can fix this?
Report, edit, etc...Posted by Centreri on 2006-04-30 at 09:54:25
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).
Report, edit, etc...Posted by Shadow on 2006-04-30 at 10:48:52
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]
Report, edit, etc...Posted by RexyRex on 2006-05-01 at 01:46:31
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.
Report, edit, etc...Posted by Doodle77(MM) on 2006-05-01 at 16:00:29
My idea = Wait for IE7, mine works in the beta.
Report, edit, etc...Posted by Syphon on 2006-05-05 at 22:41:05
I jsut skimmed through, but I believe that the h1 element doesn't work in FireFox.
Next Page (1)