Zelaron Gaming Forum

Zelaron Gaming Forum (http://zelaron.com/forum/index.php)
-   Tech Help (http://zelaron.com/forum/forumdisplay.php?f=329)
-   -   Help make this Page Work for I.E. & FF instead of just FF. (http://zelaron.com/forum/showthread.php?t=45841)

Goodlookinguy 2008-05-25 12:55 AM
Help make this Page Work for I.E. & FF instead of just FF.
 
I am creating a template and can't get this Navigation bar to work out the way I want it to for I.E. However, for FireFox it looks great! I can't figure it out, WetWired I'm looking at you for the answer possibly, since you I know you use I.E. more than any other browser, right?

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> ::HIDDEN:: </title>
<style type="text/css">
<!--
a {color:#000000;}
a:link {color:#000000}
a:visited {color:#222111}
a:hover {color:#000000}
a:active {color:#000000}
ul {
        padding:0px 0px 0px 0px;
        }
li {
        background-color:#CCCCCC;
        width:200px;
        padding:0px 0px 0px 0px;
        font-family:Georgia, "Times New Roman", Times, serif;
        font-size:12px;
        font-style:normal;
        font-weight:normal;
        text-align:left;
        text-decoration:none;
        letter-spacing:normal;
        border-bottom:none thin;
        border-left:none thin;
        border-right:none thin;
        border-top:none thin;
        list-style-type:none;
        margin:0px 0px 0px 0px;
        color:#000000;
        }
li.lib {background-color:#BBBBBB;text-align:center;}
li:hover.lib {background-color:#BBBBBB;text-align:center;}
li.lic {background-color:#DDDCCC; padding:0px 0px 0px 25px;width:175px;}
li:hover {background-color:#BBBCCC;}
-->
</style>
</head>

<body>
<!-- Everything On This Site was Created By Goodlookinguy -->
<!-- Copyright © 2007-2008 ::HIDDEN:: -->
<table class="NavBar" summary="Tables used on this page are for formatting purposes only" border="0" cellpadding="0" align="left" width="100%" cellspacing="0">
<tr>
<th colspan="3" align="left">
<img src="img/img.png" alt="" width="200" height="200" />
</th>
</tr>
<tr>
<td width="200">
<ul>
        <li class="lib">MAIN</li>
        <li>::HIDDEN::
        <ul>
                <li class="lic">+&nbsp; ::HIDDEN:: </li>
                <li class="lic">+&nbsp; ::HIDDEN:: </li>
        </ul>
        </li>
        <li>::HIDDEN::
        <ul>
                <li class="lic">+&nbsp; ::HIDDEN:: </li>
                <li class="lic">+&nbsp; ::HIDDEN:: </li>
                <li class="lic">+&nbsp; ::HIDDEN:: </li>
                <li class="lic">+&nbsp; ::HIDDEN:: </li>
        </ul>
        </li>
        <li>::HIDDEN::
        <ul>
                <li class="lic">+&nbsp; ::HIDDEN:: </li>
                <li class="lic">+&nbsp; ::HIDDEN:: </li>
        </ul>
        </li>
        <li>About
        <ul>
                <li class="lic">+&nbsp;Website/Me</li>
                <li class="lic">+&nbsp;Contact Webmaster</li>
                <li class="lic">+&nbsp;Contact Me</li>
        </ul>
        </li>
        <li>Links
        <ul>
                <li class="lic">+&nbsp; ::HIDDEN:: </li>
                <li class="lic">+&nbsp; ::HIDDEN:: </li>
        </ul>
        </li>
</ul>
</td>
<td>&nbsp;</td>
<td>&nbsp; <!-- I do what I want --></td>
</tr>
</table>

</body>
</html>

Lenny 2008-05-25 06:29 AM
Between your </style> and </head> tags, put:

Code:
<!--[if IE]>
<style type="text/css">
 
li.lic {
    background-color:#DDDCCC;
    padding:0px 0px 0px 25px;
    margin: 0px 0px 0px -40px;
    width:175px;
}
 
li:hover {
    background-color:#BBBCCC;
}
 
</style>
<![endif]-->
That is called a downlevel-hidden CC (Conditional Comment). It's a comment that only IE will pick up on, and carry out. If the browser is IE, then it finds the comment, runs through the If statement (which is written to apply only to IE) and uses a slightly different li.lic (shown in bold and red) - I've given it a margin of -40 pixels, which drags the grey that sticks out 40 pixels to the left, leaving no space for any blue to pop in.

You'll find that it's very useful sometimes, as IE doesn't fully support stylesheets and CSS (well, any versoin before 8, which finally has full CSS support).

Read this: http://www.positioniseverything.net/...s/multiIE.html

Goodlookinguy 2008-05-25 12:06 PM
Aw, great job Lenny. I'd never realized there was a way to specify rules in css for I.E.

Hey, I just found out that IE 8 is out! Well, a beta at least.

BAD!!!

IE 8 = FireFox Similar Representation of CSS data
IE 7 = Crappy Representation CSS data

<!--[if IE]> = Not good for IE 8 users. IE 8 still follows the rules of <!--[if IE]>. That means that there is now a giant 40-width margin on the right.

EDIT: <!--[if IE 7]>

WetWired 2008-05-25 01:10 PM
You can specify versions in the comments. As for IE7's CSS support, it still supports more new stuff from CSS2.1 than FF, so you can shove it up your better-than-thou ass. Usually, if you're having problems between IE and FF, it means there's a better way to structure your document than the one you are trying.

Lenny 2008-05-25 01:49 PM
Quote:
Originally Posted by Goodlookinguy
<!--[if IE]> = Not good for IE 8 users. IE 8 still follows the rules of <!--[if IE]>. That means that there is now a giant 40-width margin on the right.
Did you read the article?

Replace <!--[if IE]> with <!--[if lte IE 7]>. "lte" = "Less Than or Equal to", which means that if the browser is IE 7 or below the code in the if statement will apply to it.

---

Quote:
Originally Posted by WW
Usually, if you're having problems between IE and FF, it means there's a better way to structure your document than the one you are trying.
I might have suggested the downlevel-hidden CC, bit I agree with WW that it's not the best method to use. It's kinda sloppy, really, as if you've got the attitude, "Well, it works for FF, why should I re-structure everything to make it work in all browser?". I'm interested to see how WW would do it - I reckon it can be done with Javascript, or maybe nested tables.

Lenny 2008-05-25 04:24 PM
Right, sorted. :) After lots of messing about, I've built the same navigation system using much simpler CSS, and nested tables.

---

This is soooooo big
<head>

<style type="text/css"><!--
a {color:#000000;}
a:link {color:#000000}
a:visited {color:#222111}
a:hover {color:#000000}
a:active {color:#000000}

table {
background-color:#CCCCCC;
width:200px;
padding:0px 0px 0px 0px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
font-style:normal;
font-weight:normal;
text-align:left;
text-decoration:none;
letter-spacing:normal;
border-bottom:none thin;
border-left:none thin;
border-right:none thin;
border-top:none thin;
list-style-type:none;
margin:0px 0px 0px 0px;
color:#000000;
}

.lib {background-color:#BBBBBB; text-align:center;}
.lic {background-color:#DDDCCC; padding:0px 0px 0px 25px; width:175px;}
.lid {background-color:#BBBCCC;}
--></style>

</head>
<body>

<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="lib">Main</td>
</tr>
<tr>
<td><table width="200" border="0" cellspacing="0" cellpadding="0" onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#CCCCCC';">
<tr>
<td>::HIDDEN::</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; ::HIDDEN::</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; ::HIDDEN::</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><table width="200" border="0" cellspacing="0" cellpadding="0" onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#CCCCCC';">
<tr>
<td>::HIDDEN::</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; ::HIDDEN::</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; ::HIDDEN::</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; ::HIDDEN::</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; ::HIDDEN::</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><table width="200" border="0" cellspacing="0" cellpadding="0" onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#CCCCCC';">
<tr>
<td>::HIDDEN::</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; ::HIDDEN::</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; ::HIDDEN::</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><table width="200" border="0" cellspacing="0" cellpadding="0" onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#CCCCCC';">
<tr>
<td>About</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; Website/Me</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; Contact Webmaster</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; Contact Me</td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="200" border="0" cellspacing="0" cellpadding="0" onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#CCCCCC';">
<tr>
<td>::HIDDEN::</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; ::HIDDEN::</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; ::HIDDEN::</td>
</tr>
</table></td>
</tr>
</table>

</body>
</html>



IE6 doesn't support :hover on tables. In fact, it will only support it with links. So, :hover was out of the question.

Javascript might be helpful... except it's more bloody trouble than it's worth. Bollocks to Javascript.

So what else can be used? Well, what happens when someone hovers over something? Their mouse movers over it. Hover is basically onmouseover, yes? And when they move off, and the object goes back to normal, it's kinda like onmouseout. Follow me so far?

In fact that's all there is to it. In the elements you want changing, simply use onmouseover to change the background as you hover over it, and then onmouseout to change it back. Simple.

You can call me "Daddy" now, if you want. :) :rolleyes: :p

Oh, and: http://lenco.110mb.com/Untitled-2.html

It works in Maxthon 2.1, IE 6, IE 7, Opera 9.27, FireFox 2.0.0.14 and Safari for Windows 3.who-cares. Which means it should work in every browser.

Goodlookinguy 2008-06-01 08:22 AM
Oh, completely sorry, I forgot to mention thank you for the help.

I've been working on javascript and have come up with something for a particular page of mine, not the same as the one that you were helping me out on above.

Go here to see the page I am going to be mentioning.

First off, for some reason I've yet to figure out how to make it so that when I scroll over the area that is glowing to have the entire length of the area take me to the destination URL.

Second, in what ways are there to super improve the menu. I know there must be other ways (Or maybe not).

Just take a look at the source code so that I don't have to put it here.


All times are GMT -6. The time now is 10:18 PM.

Powered by vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
This site is best seen with your eyes open.