13 replies to this topic

[qwerty]

I'm just getting started on a project to revamp http://www.psipay.com, and I'm beginning by cleaning up the code. I want to replace the vertical navigation bar on the left (which currently uses mouseover images) with styled list items, but I'm running into a lot of issues.

What I've got so far can be viewed here. The relevant CSS code is as follows:

ul.vertnav{
  list-style: none;
  margin: 0px;
  padding: 0px;
  width: 141px;
  height: 20px;
}

.vertnav li{
  margin: 0;
  display: block;
  border: 0px;
}

.vertnav li a{
  display: block;
  text-decoration: none;
  text-align: right;
  padding-right: 15px;
  background-image: url('images/btn-back1.gif');
  color: #E9E6E6;
  height: 100%;
  width: 100%;
  font-family: arial, tahoma, verdana, sans-serif;
  font-weight: bold;
  font-style: italic
}

.vertnav li a:hover{
  color: #E9E6E6;
  text-decoration: none;
  background-image: url('images/btn-back2.gif');
}

At this point, it's displaying pretty close to the way I want it to in Opera 7 (but who uses Opera?). In IE 6, the text appears to be behind the background image (I don't even know how that's possible) when it's not moused over, and when I mouse over it, there's a flash of white before the background switches. In Firebird, the image that should be at the bottom of the list is up at the top, and the whole <ul> is wider than it should be. And in NS 7 it's just a glob. I don't dare try looking in NS 4x.

I know you CSS experts are out there...

[qwerty]

...Just thought I'd give this thread a little bump in the hope of somebody who can help seeing it.

[domokun]

have you seen this?

http://css.maxdesign....au/listamatic/

[Ron Carnell]

I'm running IE 6.0.2800.1106.blablabla, Bob. Works just fine for me?

[qwerty]

Domokun: "vertical 13" looks great, and seems to work across browsers. I'll have a look at the code and see if I can apply it to my version.

Ron: You don't see an odd flash when you mouse over the lines? How odd...

[Ron Carnell]

I saw a very quick flash the first time I did a mouse-over, but nothing after that. That first flash was from you background graphic on the hover selector being loaded, I'm sure, and could probably be eliminated with a pre-load. Frankly, though, it's so quick I probably wouldn't even bother.

Could be a browser configuration issue, maybe? Let's see what a few others find when they load the page.

[qwerty]

I've come up with a second version, based on the listamatic design. It's at http://www.raisemyra...m/psi/left2.htm. Seems to be working better in IE now, although in Firebird and NS 7 it's still coming out wider than it should be, and that's causing the background to appear at the wrong location.

<added> I've also thrown in a background color for the list items, so that now shows up during the tiny interval between background pictures. It seems to have gotten rid of that irritating (to me) flash.

Edited by qwerty, 09 January 2004 - 02:46 PM.

[qwerty]

OK, I'm giving this thread a bit of a bump because there have been numerous changes. I was shown some CSS code that made this much easier, so I created a set of vertical buttons that I liked a lot, then a set of horizontal buttons that were pretty good. By the way, this no longer involves the <li> element.

I then decided to put it all together in a page template, and found myself in trouble again. The page I'm trying to emulate is at http://www.psipay.com. It's chock full of images, preloads, nested tables, javascript... the whole shebang.

What I've got as a replacement for that is currently located at http://www.raisemyra...om/psi/test.htm. I'm currently using two include files -- one for each of the navigation bars -- and I plan on adding another for a footer. The problem I'm experiencing at this point involves putting together the include page that's intended to function as the top navigation. That's currently located at http://www.raisemyra...psi/inc/top.htm. Ignore the blue bar that comes in as a background image. It's not a problem because when the page functions as an include only the full page gets the background.

The problem with this file is that I couldn't figure out how to put it all together without using a table, and even then the images just aren't meshing properly.

On top of that, putting all this together only works (ignoring the problem mentioned above) in IE. What had looked the same in IE as it did in Opera, Firebird, NS 7, and Mozilla is now pure mud in those browsers.

To quote the Fly, "Help me....."

Edited by qwerty, 16 January 2004 - 08:56 AM.

[Googlewhacked]

Hey Bob,

You might also want to have a look @ this article about wrangling & wrestling a list into a different appearances.

OT - what do you use to generate the "garbage" text that I see on your test pages? I've seen that kind of thing around a lot, but could never figure out where it came from (unless I am overthinking it & it is just copy-n-pasted from somewhere...).

phil

[qwerty]

The garbage text comes from the Lorem Ipsum Generator. It lets you pick the number of words, sentences, paragraphs, etc, then generates a page for you. You then go the the source code and copy the contents of the <p> tags. There's another one out there that lets you choose the text from a list, but I can't remember where it is.

I'll take a look at that article as soon as I have a chance. I had a mild brainstorm after my last post, took the top navigation elements out of the table and absolutely positioned them, so now it's all working in IE (but nowhere else).

[hurricane]

If I understand your include problem correctly - you need to remove all head and body formating, and just place the actual menu code in the include file, and nest it within a div that you can position:

<div id="positionme">
<img class="toplogo" src="../images/lfttop.gif" alt="Prelude Software home page" width="160" height="80">
<img class="topbanner" src="../images/toprgt.gif" alt="" width="465" height="56">
<script type="text/javascript">
function Go(){return}
</script>
<img class="btnspacer" src="../images/btn-spacer.gif" alt="" width="42" height="24">
<span class="topbuttons">

<script type="text/javascript" src="http://www.raisemyrank.com/psi/scripts/vbm-menu.js"></script>
<script type="text/javascript" src="http://www.raisemyrank.com/psi/scripts/menu_com.js"></script>
</span>
</div>

[qwerty]

Actually, all of that is working pretty well right now. The current problem isn't exactly one of code, though. The client wants dynamic menus, so I replaced the top navigation with a sample menu, and they were ok with that. Now they want all the menus to be dynamic, and I'm fighting them tooth and nail over it. I think it's a huge mistake.

All the work I did to lighten up the code will be gone, users without javascript will be stuck with nothing but plain text noscript stuff that will take up so much space they'll have trouble finding the content, and it won't look as good

[Googlewhacked]

Hey Bob,

I don't know how much work you are intending to put into this, but you could always set up some kind of sniffer that detects if Javascript is there (test for the positive, not the negative) and, if so, then display the dynamic menus. If JS is not available, then the "clean" menu you have can be within a set of <noscript> tags. The sniffer could probably be done with ASP or PHP and a simple include to add (or exclude) the section of the page with the dynamic menu.

HTH!

Phil

[qwerty]

That's a good idea. In fact, I don't think I'd even need the sniffer. I just put the pretty CSS-based stuff in the noscript tag instead of plain text links. They're completely SE-friendly, since they're just formatted text links, so there's certainly nothing spammy about it.

I still say they shouldn't have all dynamic menus though, just because it really increases the file size a lot, but at least this would take care of the ugly factor.