Zelaron Gaming Forum  
Stats Arcade Portal Forum FAQ Members List Social Groups Calendar Search Today's Posts Mark Forums Read
Go Back   Zelaron Gaming Forum > The Zelaron Nexus > Science and Art > Tech Help
Reload this Page Help make this Page Work for I.E. & FF instead of just FF.

 
 
Thread Tools Display Modes

 
Help make this Page Work for I.E. & FF instead of just FF.
Reply
Posted 2008-05-25, 12:55 AM
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>
 
Work List
疲れていますから 寝むってありますね。 むずかしいです。 また、ケーキ屋で ケーキを食べていました。

I've considered being a translator, but I dunno. It feels like a lot of work. If someone gets angry then I have to deal with it, you know? I'd rather just relax.

 
Speed Test
 
Favorite Anime/Manga
#01 Clannad ~After Story~
#02 Trigun {Maximum}
#03 Koi Kaze
#04 Berserk
#05 Outlaw Star
#06 Slayers
#07 Desert Punk
#08 Spirited Away
#09 Fullmetal Alchemist
#10 Shakugan no Shana
#11 Death Note
#12 FLCL
#13 Tokyo Magnitude 8.0
#14 Toradora
#15 Gunslinger Girl

 
Anime List
Old
 Profile PM WWW Search
Goodlookinguy seldom sees opportunities until they cease to beGoodlookinguy seldom sees opportunities until they cease to beGoodlookinguy seldom sees opportunities until they cease to beGoodlookinguy seldom sees opportunities until they cease to be
 
 
Goodlookinguy
 



 
Reply
Posted 2008-05-25, 06:29 AM in reply to Goodlookinguy's post "Help make this Page Work for I.E. & FF..."
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
Last edited by Lenny; 2008-05-25 at 07:36 AM.
Old
 Profile PM WWW Search
Lenny simplifies with no grasp of the basicsLenny simplifies with no grasp of the basicsLenny simplifies with no grasp of the basicsLenny simplifies with no grasp of the basicsLenny simplifies with no grasp of the basicsLenny simplifies with no grasp of the basics
 
 
Lenny
 



 
Reply
Posted 2008-05-25, 12:06 PM in reply to Lenny's post starting "Between your </style> and </head> tags,..."
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]>
 
Work List
疲れていますから 寝むってありますね。 むずかしいです。 また、ケーキ屋で ケーキを食べていました。

I've considered being a translator, but I dunno. It feels like a lot of work. If someone gets angry then I have to deal with it, you know? I'd rather just relax.

 
Speed Test
 
Favorite Anime/Manga
#01 Clannad ~After Story~
#02 Trigun {Maximum}
#03 Koi Kaze
#04 Berserk
#05 Outlaw Star
#06 Slayers
#07 Desert Punk
#08 Spirited Away
#09 Fullmetal Alchemist
#10 Shakugan no Shana
#11 Death Note
#12 FLCL
#13 Tokyo Magnitude 8.0
#14 Toradora
#15 Gunslinger Girl

 
Anime List


Last edited by Goodlookinguy; 2008-05-25 at 03:10 PM.
Old
 Profile PM WWW Search
Goodlookinguy seldom sees opportunities until they cease to beGoodlookinguy seldom sees opportunities until they cease to beGoodlookinguy seldom sees opportunities until they cease to beGoodlookinguy seldom sees opportunities until they cease to be
 
 
Goodlookinguy
 



 
Reply
Posted 2008-05-25, 01:10 PM in reply to Goodlookinguy's post starting "Aw, great job Lenny. I'd never..."
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.
Old
 Profile PM WWW Search
WetWired read his obituary with confusionWetWired read his obituary with confusionWetWired read his obituary with confusionWetWired read his obituary with confusion
 
 
WetWired
 



 
Reply
Posted 2008-05-25, 01:49 PM in reply to Goodlookinguy's post starting "Aw, great job Lenny. I'd never..."
Goodlookinguy said:
<!--[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.

---

WW said:
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.
Old
 Profile PM WWW Search
Lenny simplifies with no grasp of the basicsLenny simplifies with no grasp of the basicsLenny simplifies with no grasp of the basicsLenny simplifies with no grasp of the basicsLenny simplifies with no grasp of the basicsLenny simplifies with no grasp of the basics
 
 
Lenny
 



 
Reply
Posted 2008-05-25, 04:24 PM in reply to Lenny's post starting "Did you read the article? Replace..."
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.

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.
Last edited by Lenny; 2008-05-25 at 05:05 PM.
Old
 Profile PM WWW Search
Lenny simplifies with no grasp of the basicsLenny simplifies with no grasp of the basicsLenny simplifies with no grasp of the basicsLenny simplifies with no grasp of the basicsLenny simplifies with no grasp of the basicsLenny simplifies with no grasp of the basics
 
 
Lenny
 



 
Reply
Posted 2008-06-01, 08:22 AM in reply to Lenny's post starting "Right, sorted. :) After lots of messing..."
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.
 
Work List
疲れていますから 寝むってありますね。 むずかしいです。 また、ケーキ屋で ケーキを食べていました。

I've considered being a translator, but I dunno. It feels like a lot of work. If someone gets angry then I have to deal with it, you know? I'd rather just relax.

 
Speed Test
 
Favorite Anime/Manga
#01 Clannad ~After Story~
#02 Trigun {Maximum}
#03 Koi Kaze
#04 Berserk
#05 Outlaw Star
#06 Slayers
#07 Desert Punk
#08 Spirited Away
#09 Fullmetal Alchemist
#10 Shakugan no Shana
#11 Death Note
#12 FLCL
#13 Tokyo Magnitude 8.0
#14 Toradora
#15 Gunslinger Girl

 
Anime List
Old
 Profile PM WWW Search
Goodlookinguy seldom sees opportunities until they cease to beGoodlookinguy seldom sees opportunities until they cease to beGoodlookinguy seldom sees opportunities until they cease to beGoodlookinguy seldom sees opportunities until they cease to be
 
 
Goodlookinguy
 
 

Bookmarks

« Previous Thread | Next Thread »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules [Forum Rules]
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
I want to make a gathering and potion making skill? Wolfturn RPGMaker 0 2007-12-21 10:11 AM
Work II: Rise of the Lulz KagomJack The Lounge 22 2007-05-30 02:54 PM
Today at work KagomJack General Discussion 38 2007-05-15 03:35 PM


All times are GMT -6. The time now is 10:31 PM.
'Synthesis 2' vBulletin 3.x styles and 'x79' derivative
by WetWired the Unbound and Chruser
Copyright ©2002-2008 zelaron.com
Contact Us - Zelaron Gaming Forum - Archive - Top
Powered by vBulletin® Version 3.8.2
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd. 		This site is best seen with your eyes open.