I am having some issues with IE7 and lower. Right now, the page is only css, no tables. The menu is suppose to line up to the right of the triangle and does so in ff3 and ie8, but the menu lines up to the right of the logo instead in 7 and lower. If I remember correctly, the issue is with the margin feature Photographers site #menu-triangle { clear : left; float : left; position : relative; width : 80px; height : 60px; margin-left : 220px; background-image : url(images/menu-triangle.gif); } Code (markup):
The html tag <li> should float left , the clear attributor is not needed . css code #menu-triangle li { float : left; width : 80px; }
Can you narrow down where to look in the code? I am not seeing an obvious element that is similar. The triangle is in the correct spot, the menu buttons are not where they are suppose to be. I think this would bring the triangle up not the menu buttons down.
Advice #1 - take a giant axe to that STUPID MALFING DREAMWEAVER MM_ JAVASCRIPT BULL - That's basically using javascript to do CSS' job, and results in fat bloated non-presentational markup... as evidenced by the use of a bunch of DIV instead of a list and ten separate images doing the job of one. It was a bad idea to use javascript for rollovers when .js was introduced, there is no excuse for doing it after 1998. 2 - throw that entire markup away, what you SHOULD have is something like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link type="image/x-icon" rel="shortcut icon" href="images/favicon.ico" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <title> Dan Sawusch Photography </title> </head><body> <!-- empty tags like SPAN and B below are image sandbags for sliding doors or glider-levin replacement - do not remove!!! --> <div id="container"> <h1> Dan Sawusch Photography <span></span> </h1> <ul id="mainMenu"> <li class="home"><a href="#">Home<span></span></a></li> <li class="aboutDan"><a href="#">About Dan<span></span></a></li> <li class="gallery"><a href="#">Gallery<span></span></a></li> <li class="catalog"><a href="#">Catalog<span></span></a></li> <li class="contact"><a href="#">Contact<span></span></a></li> </ul> <div id="content"> <img src="http://dansawuschphotography.com/images/image-tetons.jpg" alt="tetons" /> <!-- #content --></div> <!-- #container --></div> </body></html> Code (markup): It's actually kind of funny, you have the image tags for presentational elements and no img tag for the page content - completely backwards. Gimme a bit and I'll toss together the CSS that would make that work. The big problem as I see it is you've been lead down the garden path by macromedia/adobe resulting in unnecessarily complex and decade out of date markup. But as I keep saying, the only thing you can learn from tools like Dreamweaver is how not to code a website.
Try this on for size: http://www.cutcodedown.com/for_others/ziplock122949/template.html as with all my examples the directory: http://www.cutcodedown.com/for_others/ziplock122949 is unlocked so you can grab the gooey bits. Valid XHTML 1.0 Strict, Valid CSS, Tested working 100% in IE 5.5, 6, 7 & 8, Opera 9.64 and 10 beta, FF 2, 3 & 3.5, and the latest iterations of Safari and Chrome. How it works is pretty simple. Menus are supposed to be marked up as unordered lists, so we do that. We turn of list bullets, then float it right, padding the left to make room for the background-image. All of the menu images got recombined for use as a sliding background thus: http://www.cutcodedown.com/for_others/ziplock122949/images/mainMenu.gif We then turn off all styling for the LI - setting them display:inline neuters their rendering effects in all browsers. This avoids the 'staircase' effect issue that can crop up in IE7, as well as some rendering quirks in earlier versions. The anchors we float:left. The float:right on the UL will still slide them all right, but the float left puts them on one line in source order. You'll notice we have real text in the anchors - this means that images off the user will see that text, and it gives search engines something to build pretty link lists with. (Ever see those relevant links in search results under a page? That's how you get them!). The empty spans are absolute positioned over that text and have the background applied to them hiding the text for your image-text instead. Rather than have to state all the background positions for hovered and unhovered, we just set the dimensions on the anchor to the desired height then force overflow:hidden... We make the spans twice that height and either the top or bottom gets chopped off - so on hover we just move the spans instead of their backgrounds. Might seem a little complex, but it's better than bloating out the markup with javascript, it means using a lot less files (more files == more handshakes == slower pageloads) and takes care of any sort of 'caching' of the images automatically. I use the same image replacement technique on the h1 / site logo.
Thanks for the help, I will play around with this a little bit and see what i can do. I am not a fan of js and prefer to not use it at all also. Not having any web classes makes it a bit harder to learn what everything is and how to use them, but thats where the internet comes in. Some items like li, I do not really know how they work so I will have to do some research. Edit: I'm going to take a look at what you just posted since you posted it as I was typing in this response
Some references you may find of use - even now I still refer to these whenever I forget something (dealing with parkinsons) or have trouble remembering exactly how things work... For HTML, I still use the decade old WDG page, which is an updated rewrite of the old Netscape HTML 4 reference page. http://htmlhelp.com/reference/html40/ It is written in plain english, divides up the tags alphabetically and by category, includes an entities reference. Yes, it's old school, but that's ok, HTML 4 (and by extension XHTML 1.0) are a decade old too - kind of sad only the past few years are people starting to use them properly. For a CSS reference, I use sitepoint's. I'm not exactly on the best of terms with the people at that site, but a good online reference is hard to find for CSS. http://reference.sitepoint.com/css One of the hardest things about learning web development right now, is that we've got a decade and a half of outdated/outmoded code techniques still being propagated by sites that are little more than web rot (W3Schools for example). From the time of the first browser wars people started coding HTML to say how the site appears - which was not the point of HTML. The entire reason for HTML's existance was to be appearance neutral - any device would see "that's a paragraph" or "that's a heading" and display it however is appropriate to that device. CSS returns to us the capability of doing that - because now you can have a separate file that says how it is going to look, and your markup can once again say what things ARE. It simplifies the markup, is easier to maintain, and generally uses a lot less bandwidth (since anything 'appearance' ends up cached), but has the double hurdle of needing to learn BOTH HTML and CSS pretty much simultaneously, and overcoming a decade and a half momentum of appearance being in the HTML. In addition to the above references, you may also want to read my "good code, bad code" post here on DP which talks about coding habits, formatting and common mistakes. Again, hope all this helps.