[SOLVED] XHTML site messy in Opera/IE

[Azu]

Hello, every since I converted my website to xhtml 1.1, it has started looking really bad in Opera and IE.

 

In Opera and IE, EVERYTHING is underlined.

 

Can somebody please tell me why it works right in Firefox but not Opera/IE and how I can fix it so that it works right in Opera/IE?

 

Here is my CSS file. Sorry if it's a bit unreadable, I keep it condensed to save bandwidth.

 

 

 

[css]

html,body{margin:0%;text-align:center;background:black url("http://img95.imageshack.us/img95/2792/tile06smpn3.gif");}body{font-size:13px;color:#00cccc;}input,select,table,tr,td,a,textarea,p,div,span{margin-top:0%;margin-bottom:0%;margin-left:auto;margin-right:auto;letter-spacing:-.1px;font-family:Verdana,Tahoma,Arial,sans-serif;border:1px solid #00cccc;border-collapse:collapse;text-align:center;font-size:11px;color:#00cccc;}:link,:visited{text-decoration:none;color:#66ffff;}.r{float:right;margin:0%;}.l{float:left;margin:0%;}a img,:link,:visited{text-decoration:none;border:none;}span,p,tr,table,div{background-color:#000033;}div{display:inline;}input,textarea,select{background-color:#000033;}td:hover,div:hover,p:hover{background-color:gray;color:white;}tr:hover{background-color:#333333;}.s{text-decoration:line-through;}.a{background-color:#00008B;}.b{background-color:#8B0000;}tr.a a:hover{background-color:blue;color:white;}tr.b a:hover{background-color:red;color:white;}tr a:hover{background-color:#66ffff;color:black;}a:hover,input:hover,textarea:hover,select:hover,span:hover{background-color:#66ffff;color:black;cursor:pointer;}.q{position:absolute;left:0%;top:-500%;width:1px;height:1px;overflow:hidden;}.z,.x,.y{color:black;font-size:10px;}.z{background-color:gold;}.x{background-color:silver;}.y{background-color:copper;}

[/css]

 

 

And also can somebody please tell me why part my javascript isn't being ran? It's all being ran except this part. Please say how to fix it also, even though this isn't JS section.. I think it is better to also ask it here instead of making two separate topics..

[js]

function crx(a,b,c){var a=b+"@"+c+"."+a;document.write("<td><a href=mail"+"to:"+a+">"+a+"</a></td>");}

[/js]

 

Oh and also both the css and javascript are in external files on a separate server. Not sure if that matters just thought I'd mention it.

[bronzemonkey]

Your CSS is not standards compliant, and parts of the CSS that are valid will not work in Opera or IE - stuff like :link,:visited{}

Google some tutorials

 

http://jigsaw.w3.org/css-validator/

[Azu]

Sorry about the validation errors. Fixed below:

 

[css]html,body{margin:0%;text-align:center;background:black url("http://img95.imageshack.us/img95/2792/tile06smpn3.gif");}body{font-size:13px;color:#00cccc;}input,select,table,tr,td,a,textarea,p,div,span{margin-top:0%;margin-bottom:0%;margin-left:auto;margin-right:auto;letter-spacing:-.1px;font-family:Verdana,Tahoma,Arial,sans-serif;border:1px solid #00cccc;border-collapse:collapse;text-align:center;font-size:11px;color:#00cccc;}:link,:visited{text-decoration:none;color:#66ffff;}.r{float:right;margin:0%;}.l{float:left;margin:0%;}a img,:link,:visited{text-decoration:none;border:none;}span,p,tr,table,div{background-color:#000033;}div{display:inline;}input,textarea,select{background-color:#000033;}td:hover,div:hover,p:hover{background-color:gray;color:white;}tr:hover{background-color:#333333;}.s{text-decoration:line-through;}.a{background-color:#00008B;}.b{background-color:#8B0000;}tr.a a:hover{background-color:blue;color:white;}tr.b a:hover{background-color:red;color:white;}tr a:hover{background-color:#66ffff;color:black;}a:hover,input:hover,textarea:hover,select:hover,span:hover{background-color:#66ffff;color:black;cursor:pointer;}.z,.x,.y{color:black;font-size:10px;}.z{background-color:#ffd700;}.x{background-color:#c0c0c0;}.y{background-color:#d2691e;}

[/css]

 

Valid in CSS2 and above.

 

Gives some warnings about textcolor/background-color possibly being the same, but those are false positives and not errors.

 

 

Can somebody please tell me why everything in underlined in IE/Opera with this? And how I can fix it? I would greatly appreciate it..

[bronzemonkey]

Hate to be brutal but it I already said that code like...

 

:link,:visited{text-decoration:none;color:#66ffff;}

 

a img,:link,:visited{text-decoration:none;border:none;}

 

...is not going to work in IE/Opera. You need to use a:link, a:visited. The use of :hover with any elements other than <a> is also not going to work in IE6.

 

You should also post markup when you want help with a problem. Seeing someone's CSS or HTML in isolation makes little sense because we can't be aware of what problems there might be in the other.

[Azu]

Okay sorry about that, thanks for the tip.

 

I tried changing all of the :link to a:link and all the :visited to a:visited

 

Here is an example of the problem; it looks right in Firefox but not in Opera/IE

 

http://tso.hopto.org/test.htm

 

 

Actually it doesn't look right in Firefox either, it's just that in Firefox it doesn't underline EVERYTHING ON THE PAGE. Just the text at the bottom.

[bronzemonkey]

Everything on that page is underlined in Firefox too.

 

It's because you've wrapped all the text in <ins> tags! Most browsers don't support that.

 

You should remove all the tables from your layout and use divs, you also need to clean up your css so that you stop using :hover on so many different elements because the only cross-browser support for :hover is on <a>, and your email isn't showing because you decided to use a script (probably broken) to display it for some reason.

 

good luck with the site

[Azu]

Okay thanks guys it is working right now ^^ I had forgotten to put text-decoration:none; for the ins tag and I didn't know that document.write doesn't work in xhtml so I had to use a different way for javascript to write for the page.

 

No more problems now (I think)