Greetings, I have a background in graphic design though I'm new to webdesign so don't be super tough on me I will appologize up front for the long post. I have 2 questions and will be as descriptive as possible. I know the BASICS when it comes to HTML and using dreamweaver, but I am trying to learn a little CSS. Question 1: I read and tried to follow a tutorial from http://meyerweb.com/eric/css/edge/popups/demo.html to get it to work on a site I'm working on for a friend's band. The site is http://www.themethodmusic.com The area i'm trying to do this in is the "Previous Shows" section on the right of the page. It seems to work the way I want it to on Firefox and Safari (both PC and Mac). The setlists, for the shows that we have setlists for, appear below the list of shows. However not on IE6 at all and in IE7 it will appear but it's positioned too far to the right, and it moves farther to the right as you go to roll over the next few shows. I need to get it so that it shows up in the same spot no matter what browser looks at it. Question 2 On the "Media" page, I am using a flash based gallery called SimpleViewer, I'm sure some of you may be familiar with it. In IE6/7, and Safari the gallery shows up properly w/o any issues. In FF on both PC & Mac, the top and bottom of the gallery are cut off, and the main picture is much smaller than it should be. I'm looking for a way to fix this! I've messed around w/ all the numbers that I can and I can't seem to make it work. I'm sure the website is a mess by most people's standards, but it's definitely a work in progress. I truly appreciate any time and help you folks may be able to provide -Zak
Can't help with the Flash, really, but as to #1: Yesh, the page is a mess : ) you don't need that Dreambeaver MMswap thing either, CSS can do it... google "css rollovers" to see how to get that effect with simple CSS. OKay here... div#links a span {display: none;} div#links a:hover span {display: block; position: absolute; top: 300px; left: 575; width: 125px; padding: 2px; margin: 0px; z-index: 100; color: #8E2800; background: #FFB03A; font: 10px Verdana, sans-serif; text-align: Left;} div#links a:link {color: black;} div#links v:link {color: black;} Code (markup): I'm not going to rewrite it because I've got to run, but the secret to positioning something absolutley is that its parent (or whoever the base is) has to be set to position: relative. So every browser is guessing where to being with those coords. IE is more likely to get it wrong, I know. So #links {position: relative;} should tell the children where to be positioned in relation to... unless those coords are from the bigger block. Whoever those coords are in relation to is who needs position: relative-- absolutely positioned children are always relative to the nearest positioned anscestor and if there isn't one, then it's the body or viewport by default. : )