Retro-style CMS site

[designhut]

Thx for your comments FantomCircuit, really helpful - my designer is on to it!

Hi Mark,
Yes, I'm still getting these strange menus aren't I? We can only get the menus doing strange vertical things in old IE for Mac though. In IE7 on PC it's fine, horizontal and right-aligned along the biege graphic. Then on latest FF it's fine too.

I would really appreciate any help you can give me. I was thinking it was partly something to do with constraining the width of the pagewrapper.

[designhut]

Mark: Hi again. Right, I've finally got myself set up with multiple installations of IE (what a lovely package I found). Incidentally, an old Mac version of IE is showing all my horizontal CSS menus as verticals...  

Anyway I see how the menu has dropped down in IE6 when it should be in the beige bar as it is on IE7. Here is my CSS, I'm guessing it is the layers, as the IE6 menu is sitting just below the header div instead of over it. Please, do you have a suggestion on how to get round this? Thanks so much! 

div#header {
  height: 180px; /* adjust according your image size */
       
}

div#header h1 a {
  background: #3d2d09 url(/uploads/siteimages/top.jpg) no-repeat 0 0px;
  display: block; 
  height: 334px;
  text-indent: -999em;
  text-decoration:none;
  z-index: 1;
}

div#menu_vert {
float:right;
margin-left:400px;
margin-right:44px;
margin-bottom:25px;
z-index: 2;
}

[Dr.CSS]

You want the menu in the header, you may want to move the closing for the header below the search, if you want that in there also, then give your menu a width:400px to make the last item go inline...

I use the free PSPad editor, it's great for lots of things, like if you click on a it will show you the closing , or turn red if there is none, so I looked at yours and found that the header was only enclosing itself, which I could tell just by looking at it but just to check, which is why the menu sits so low in IE, it's helped me find out why a div was running below the closing image in a template, great for reformatting HTML or compacting it and making CSS inline or formated, compacting html and inlining CSS may make sites load faster, takes all the white space out...

compacted html...

{metadata} {title} @ MultiInTech {stylesheet}

inline CSS...

div#header h1{margin:5px 0;padding:60px 5px 15px}
div#menu_horiz{width:95%;margin:3px auto;padding:0px}
div#wrapper{height:20px;padding:0}
div#menuwrapper{margin:0px;padding:0px 0 0 85px}
div#content{margin:4px 0 10px;padding:0px}
div#contentbox{margin:0px;padding:10px}

[designhut]

Hi Mark,

I put in the menu width, thx for that.

Putting the menu and search in the header isn't the solution though, admittedly probably because of the way I have set it up. It is one big image and it's only by using the z-levels (which I imagine only work in IE7?) that I can place the menu on top of the image, else everything drops below the image. I'm close to giving up on it, or rewriting the whole structure? I really appreciate your dogged assistance, most people would have given up on me... I need to try another couple of things but your suggestions are always appreciated.

I have got PSPad now and am feeling my way around. I certainly was looking for something exactly like that - you read my mind!

Thx for everything! 

[Dr.CSS]

OK try this...

http://multiintech.com/VW/index.html

I had to put the menu before the h1 a and put it in a "holder" div...

And you needed the IE JS to get the menu to work with internet exploder  ...

There are a couple of IE CSS hacks they start with * html...

[designhut]

Oh WOW! Thank you so much for your time and attention!  In a little corner of the UK, we are bowing to your CSS skills...

OK, I think I got most of it - the menu is now spot on in IE6&7, but I'm a little lost with the IE JS bit you mention. I added the bit that calls a .js file into my template header and uploaded the CSSMenu.js file into my root - is that right? I am guessing not. Is that the reason the menu doesn't expand in IE6?

On a tangent, there are some other changes to this site:

My designer has made a little animation on the logo (after 10 seconds and then every 30 seconds).

We changed all the graphics to gifs (we tried pngs as was suggested but we wanted the logo animation and the colour diff was obvious when changing from one to the other so we went for gifs throughout).

And we also now have lovely rollovers on the cataloger thumbnails.

[designhut]

Mark> I uploaded the .js file into the wrong place!  Works now!

You're the best, I REALLY appreciate everything you've done!

[Dr.CSS]

Your welcome, just trying to help in my own small way...