I'm just learning CSS, and attempting to put together what should be a very simple site, adapting a template from someone else. The site I want (ignoring the missing pictures) is at notanumberinc.com/artwalk2. Looks good in IE, but in Firefox and Safari the links for the main menu no longer work - at least they show up. Thanks for any help - Jon
I'm surprised it works in IE. Must be it's buggy bug-handling : ) Your code is completely invalid, plus this guy you got the template from I think has added bloat too (unless it was you). For instance: <p /> this doesn't exist, except possibly in SGML (and HTML-reading browsers don't understand it anyway, so it's pretty much an error... it wasn't supposed to be, but you know, when everyone builds stuff to not understand something, that something becomes an error...) Stuff like this: <div id="title"><h1>title stuff</h1></div> is extra super double bloat, and the guy didn't even put the menu in a list (not that that's got anything to do with the menu not working, just a comment). My guess, after a quick look, is Safari and FF just dunno what to do with the big P covering the menu. If you don't have Aardvark extention added to FireFox, it's a nice toy that can sometimes show you overlapping elements. I see one of the p's (the ones by the second menu) seems to be covering the upper menu. This could cause it to stop the menu from being "touched" by the mouse. <p /> sure could be confusing them. IE might just be ignoring it. Send your code to the W3C markup validator and after fixing the errors, if the problem persists, come back here and we'll get you through it. btw, most of us think a menu is a list of links, so we usually put them in a ul or ol. <ul> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> </ul> or some such thing. Having a's inside a div isn't causing the problem, though.
Thanks for the suggestions. I originally added all the <p /> because the validator was giving me errors like this ---------- Error Line 61, Column 2: document type does not allow element "p" here; missing one of "object", "ins", "del", "map", "button" start-tag. <p> ✉ etc. ---------- So <p /> or </p> seemed to get rid of that error. If I don't use <p>, how do I control the line spacing? can I use CSS and specify line-height? In any case, I tried removing all the <p> tags from the file, and all it did was mess up the spacing, but the links still didn't work. I did note that when I first loaded the page, the links worked in Firefox, but only for a split second, as soon as the page was fully loaded the links no longer worked. Could something be overlaying the menu (background of the the container)? Other suggestions? Thanks.
Just noted that the links work if I remove the blocks right below it (the sponsor links and the picture), as soon as I add either one of those back, the links no longer work.
Weird, narrowed it down to the positioning of the sponsors menu. As soon as I add position:relative to the block for the sponsor menu, the links for the main menu stop functioning. All I want is to move the sponsor menu to the appropriate place below the main menu with a picture below that. I know I could probably achieve close to what I want with tables, but I thought CSS was supposed to make this easier!!
Your code is still wonky... Again, get Aardvark. It'll show you exactly where that div id="leftpict" is covering up the links. <!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"> <head> <title>Wallingford Art Walk Home Page</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="Home Page for the Wallingford Art Walk" /> <meta name="keywords" content="Art, Art Walk,wallingford" /> <meta name="author" content="Number Six / Based on designs by Andreas Viklund - http://andreasviklund.com/" /> <link rel="stylesheet" type="text/css" href="andreas05.css" /> </head> <body> <h1>Wallingford Monthly Art Walk</h1> <div id="container"> <div id="sidebar"> <ul id="menu"> <li><ahref="index.html">Home</a></li> <li><a href="businesses.html">Businesses</a></li> <li><a href="artists.html">Artists</a></li> <li><a href="directions.html">Directions</a></li> <li><a href="shuttle.html">Shuttle Info</a></li> <li><a href="contact.html">Contact</a></li> <li> <a href="participate.html">Participate</a></li> </ul> <img class="leftpic" src="Graphics/more_terra_hemp_167x250.jpg" width="167" height="250" /> </div> <div id="main"> <h3>Sponsors/Organizers</h3> <ul id="sponsors"> <li><a href="http://wallingfordchamber.org/">Wallingford Chamber of Commerce</a></li> <li><a href="http://oasisinseattle.com">Oasis Art Gallery</a></li> <li><a href="http://cutzwallingford.net">Cutz Wallingford</a></li> <li><a href="http://alliancehealingarts.com">Alliance Chiropractic</a></li> <li><a href="http://notanumbergifts.com">Not A Number Cards & Gifts</a></li> <li>Mitch Hunter</li> <li>Carol Meyer</li> </ul> <img src="Graphics/buying_art_300x200.jpg" width="300" height="200" alt="People buying art" /> <h2>Wallingford Art Walk</h2> <!-- Image here --> <p>The <a href="http://wallingfordchamber.org">Wallingford Chamber of Commerce</a> is proud to sponsor the Wallingford Art Walk!</p> <p>This monthly event is <br /><strong>6:00-9:00PM on the first Wednesday of every month</strong>. (Starts at 5:00 inside Wallingford Center) .</p> <p>Look to enjoy Wednesday afternoons in Wallingford. Start with the <a href="http://www.fremontmarket.com/wallingford/">Wallingford Farmer's Market</a> (mid-May thru end of September), and then follow it with the Art Walk.</p> <p><strong><em>With over thirty participating businesses and eighty participating artists, this promises to be a fun monthly event! </em></strong> </p> <p>Wallingford is pleased to be the only Art Walk in the city with its own <a href="shuttle.html">shuttle</a> to make it easy to visit all of the participating businesses. Many thanks to the <a href="http://www.wallingfordseniors.org/">Wallingford Community Senior Center</a> for providing the shuttle!</p> <!--credits here if something not yet added--> <div id="footer"> <p>© 2008 Wallingford Chamber of Commerce<br />Photos: <a href="https://kylemperterson.com">Kyle Peterson</a></p> </div> </div><!--main--> </div><!--container--> </body> </html> Code (markup): I'd do something like this. It is easy at first to misinterpret what the validator says. When it says something like "missing element p, blah" that usually means you have done something like put a block element inside an inline (inlines are like water, blocks are like buckets... water cannot hold a bucket, while buckets can hold water and other buckets). So, the <p/> (which like I said doesn't exist in HTML) might have fooled the validator, but it didn't really validate your code. <p> is a block element so it satisfied a requirement. Also, if you're going to bother with XHTML, change your &whatevers over to Hex numbers instead (http://en.wikipedia.org/wiki/Ascii is my reference, look at Hex) because if XHTML is going to pretend it's XML, then go ahead and follow XML protocol as much as you can (so, there are only 5 character entities in XML, and one of the 5 doesn't work in HTML so you have a choice of 4 entities.... use those, but make the rest & # 169 ; as example, without spaces). http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references Mostly what I did was put your lists into real lists, and set your boxes a bit more logically, and removed a bunch of classes and things. I put your footer inside #main because on the url you've posted it seems like that info visually belongs in #main... not the best way to do it as I should not be considering the visual aspect but whatever... otherwise, the footer can go outside #main and the text given a left margin as large as that of the #sidebar's width. CSS, here are some things I'd do: I removed the div around the h1. There is only ever 1 h1 per page as it's the page name. So, in CSS you don't need a div wrapped around it for an id (heck, you could put the id right on the h1, but you only have one of them so don't bother), just refer to it by its name: h1 { styles; } Add a class if on one page of the website the h1 is supposed to not look like the rest. h1 { styles; } h1.shuttle { different styles; } and you're good. Your images and sidebar and other divs are always covering other stuff (the reason your links aren't clickable). There's no reason for that, as normally (without CSS) the document wouldn't let that happen. The elements would push around at each other and would allow no overlapping. universal reset: * { margin: 0; padding: 0; } img { border: 0; } /*end reset*/ h1 { set height here; } #container { set the desired width and margin: 0 auto; (or whatever you want for the top-bottom number; } #sidebar { give a width that's wide enough for your pictures and menu and stuff-- no wider; float: left; whatever else; } ul { list-style: none; set a width here, at least as wide as the widest word; overflow: hidden if you need the menu to wrap the floats (like, if there's a background or something) } ul li { display: inline; (I normally never style them but IE7 wants something here) } #menu li a { float: left; clear: left; (these make the a's blocks without the IE whitesoace bug, and clear: left makes them stack like blocks normally do... or, instead of clear: left, set a width here that's the same as the width of #menu) text-align: center; any padding wanted line-height: make it slightly bigger than your font font-size: make it big enough to read... your text was pretty small any other styling wanted here like color } #sponsors li a { set whatever differences you want here... might as well let #sponsors get as much from #menu as possible : ) } #main { don't set a width, just a left-margin = the width of #sidebar plus a bit more. This means IE6 won't drop it below as Haslayout isn't triggered #sponsorts, #main img { float: right; margins as needed; } h2 { clear: right (for those floats above it) styles here, you only have one on this page... if you have more, and you want the others styled different, give the one that's different a class and restyle) } p { styles here } #footer { whatever styles for the box itself } #footer p { make your bold text here other styles } Anyway, something along those lines. If the footer ends up back outside #main, then add clear: left to clear the sidebar... otherwise, add overflow: hidden to the container... this is only really needed if #main is not as long as #sidebar somewhere.... otherwise #main's length will pull the bottom of the container down far enough. Uncleared unenclosed floats don't affect their parent containers like normal divs do. Their bottoms just hang out. Sorry I didn't look at your CSS, only the HTML and did some Aardvarking (get that extention!! It's free!
OKay, looked at the CSS, some of the things you need are in there. Part of your problem is the use of relative positionig. What happens when you position something relative is you release its visual representation to be moved around. However, that it NOT moving the actual box itself! The visual representation can cover up things like links. If you set something to position: relative, do not give it coordinates. Just use it as a positioned reference for children if they need positioning. Positioning a big block of the page like #main with absolutle positioning is also not a good idea. Big blocks should be allowed to be in the document (pos: abso takes it out of the document flow) so that if something grows or gets wider or something, the other blocks can react to it. This allows your page to flow. Careful use of margins will usually preserve the design while still allowing flow. You might also want to google up some CSS two-column setups. Like at Layout Gala or something. There are different ways to set them up but some are more prone to IE acting up than others. *EDIT**** Sorry, I had missed you saying you wanted #sponsors menu under the main menu!! In which case, the html is this: <div id="sidebar"> <ul id="menu"> <li><ahref="index.html">Home</a></li> <li><a href="businesses.html">Businesses</a></li> <li><a href="artists.html">Artists</a></li> <li><a href="directions.html">Directions</a></li> <li><a href="shuttle.html">Shuttle Info</a></li> <li><a href="contact.html">Contact</a></li> <li> <a href="participate.html">Participate</a></li> </ul> <h3>Sponsors/Organizers</h3> <ul id="sponsors"> <li><a href="http://wallingfordchamber.org/">Wallingford Chamber of Commerce</a></li> <li><a href="http://oasisinseattle.com">Oasis Art Gallery</a></li> <li><a href="http://cutzwallingford.net">Cutz Wallingford</a></li> <li><a href="http://alliancehealingarts.com">Alliance Chiropractic</a></li> <li><a href="http://notanumbergifts.com">Not A Number Cards & Gifts</a></li> <li>Mitch Hunter</li> <li>Carol Meyer</li> </ul> <img class="leftpic" src="Graphics/more_terra_hemp_167x250.jpg" width="167" height="250" /> </div> <div id="main"> <img src="Graphics/buying_art_300x200.jpg" width="300" height="200" alt="People buying art" /> <h2>Wallingford Art Walk</h2> <!-- Image here --> Code (markup): Assuming the people buying art is still supposed to be above the h2? And remove this css REMOVE THIS BELOW #sponsorts, #main img { float: right; margins as needed; } Code (markup): Since we're not floating the two. For the People Buying Art, if that's to be on top of h2, you could give that image a class and then position as a block (or leave it inline if that works better). Since I see placeholders for other images, and I dunno that you want them positioned the same as the People Buying Art.
Ah, I missed this one: Blocks automatically make new lines (above and below them) and p is a block. Blocks can have margins (top, bottom and sides). So, to set some spacing, you can usually set a top or bottom margin (beware of margin collapse, google it, it is not a bug but can look like one!). inlines cannot usually be given margins, heights, widths (except images and objects since the referenced files they are calling have an intrinsic height and width anyway) so sometimes padding is the solution, otherwise in a situation like the menu list items, we've made them blocks by floating them (floats are blocks) and so they too can have top and bottom margins. Line-height is the height of a line of text usually. What it's good for besides the spacing between multiple lines inside a <p> is vertical text centering, such as in a menu (if there were boxes around each menu item anchor, you can set a height on the anchor (or the menu itself if a horizontal menu) and then make the line-height the same. Now the letters think the to of their space and bottom of their space lines up with the top and bottom of the element they are in-- and so are centered (vertically). I use this instead of vertical-align: center since I never seem to follow the rules right to get that working.