1 reply [Last post]
Catharsis
Offline
newbie
Last seen: 18 years 15 weeks ago
Joined: 2004-08-18
Posts: 3
Points: 0

Well.. I must say I am digging CSS. I was a back end Perl/scripting coder several years back before switching my focus to 3D graphics and real time audio, so I know standard HTML well, but I recently decided to build a modern web site and CSS is awesome!

Ok to my question. And it probably is easy..

I have a 1st test copy of the site here:
http://www.egrsoftware.com/test.html

The tabbed menu bar at the top displays fine in IE, but in Firefox there is a "gray link box" surrounding each tab. I haven't found a way to remove that for Firefox. This gray link box appeared when I moved to a div oriented layout.

The main page www.egrsoftware.com shows the same exact CSS code that is on the test.html page except I am using frames instead of a div oriented layout. When moving to the div oriented layout that extra gray link box appears in the top menu bar in Firefox and I haven't found a way to get rid of it.

The CSS code is located here:
http://www.egrsoftware.com/css/

test.css for test.html
top_menu.css for the www.egrsoftware.com page.

Both are essentially the same except test.html (the div oriented layout) gives me that extra "link box" in Firefox for the tab menu.

Any suggestions on how to remove this link box or why it would appear in the div oriented layout with Firefox only?

Thanks...

LinuxGold
Offline
newbie
Last seen: 18 years 15 weeks ago
Joined: 2004-08-18
Posts: 3
Points: 0

Re: Problem: IE ok; Firefox not

Quote:

I have a 1st test copy of the site here:
http://www.egrsoftware.com/test.html

I would suggest as following:

Instead of:

<ul id="nav">

<li><a href="/test.html"><IMG SRC="/images/frames/menu/main.png" WIDTH=42 HEIGHT=20></a></li>
<li><a href="/test.html"><IMG SRC="/images/frames/menu/about.png" WIDTH=50 HEIGHT=20></a></li>
<li><a href="/test.html"><IMG SRC="/images/frames/menu/games.png" WIDTH=59 HEIGHT=20></a></li>
<li><a href="/test.html"><IMG SRC="/images/frames/menu/products.png" WIDTH=70 HEIGHT=20></a></li>
<li><a href="/test.html"><IMG SRC="/images/frames/menu/services.png" WIDTH=69 HEIGHT=20></a></li>
<li><a href="/test.html"><IMG SRC="/images/frames/menu/research.png" WIDTH=75 HEIGHT=20></a></li>
<li><a href="/test.html"><IMG SRC="/images/frames/menu/contact.png" WIDTH=63 HEIGHT=20></a></li>
</ul>

Use this:

<!-- Makes it more accessible for blind users or text-based browsers -->
<ul id="nav">
<li class="main"><a href="/test.html"><span>Main</span></a></li>
<li class="About"><a href="/test.html"><span>About</span></a></li>
<li class="Games"><a href="/test.html"><span>Games</span></a></li>
<li class="Products"><a href="/test.html"><span>Products</span></a></li>
<li class="Services"><a href="/test.html"><span>Services</span></a></li>
<li class="Research"><a href="/test.html"><span>Research</span></a></li>
<li class="Contact"><a href="/test.html"><span>Contact</span></a></li>
</ul>

<style type="css/text">
<!--
li a {background-repeat: no-repeat;background-position: center center;height:20px;display:block;} /* Filters out the common properties */

/* Individual specs */
li.main a {background:url(/images/frames/menu/main.png);width:42px;}
li.about a{background:url(/images/frames/menu/about.png);width:50px;}
li.games a{background:url(/images/frames/menu/games.png);width:59px;}
li.products a{background:url(/images/frames/menu/products.png);width:70px;}
li.services a{background:url(/images/frames/menu/services.png);width:69px;}
li.research a{background:url(/images/frames/menu/research.png);width:75px;}
li.contact a{background:url(/images/frames/menu/contact.png);width:63px;}

/* To hide the anchored text displaying only images */
li a span {display:none;}
-->
</style>

However, I would recommend to get rid of words from widest image and use it globally, and configure as follows:

a {font-family:arial; font-size:8pt; /* set size to your liking */ color:white; text-decoration:none; blah blah blah}

That way you will ONLY load one image for everything!