Hey all! Thanks for your help thus far... I would like to ask of anyone's help. I just published my first site. I designed everything in Dreamweaver CS3 and although I am a complete novice, I managed to get the site on the server. However, I have browser compatibility issues that I do not understand how to resolve. Can someone help me by looking at my site, html & css coding and assist me in making my site better? The spacing is off thoughout the wholst site, plus the header banner will not readjust with the browser size. I do not know where to begin to resolve my issues. Thank you... link to site: stonemtnbullmastiffs.com Please PM me because I know I will have follow up questions. I would like to chat with you if you have time.
Seems Ok. Though I would say the Design is rather not attractive. These are my Ratings. Design - 5/10 Programming - 5/10 W3C Results - 12 Valid Anchors. Dogs.HTML is obviously not developed yet. But I would say that the kinda site you're gonna be hosting. A Flash one with some nice Designs would be far more attractive than an HTML One.
Thank you for your input. I am learning Flash now, just not at the point to put together a complete site. I guess I need to hurry then? As far as the design, what do you suggest I do to make it more attractive? Also, did you get any error when testing it with the other browsers like I did? I'm not sure now to fix these issues. Thank you...
Well as the Site is about Cannines. I suggest you get rid of the Dark Colours and focus on Lighter versions with Some Good Dog Logo Mayb or some Good Dog Pictures. Plus if you are coding it yourself, I suggest you take help from tutorialized.com to things better with HTML, as your Coding seems really Basic atm.
and there is two-thirds of your problem right there, though: let's you get away with it. My first advice though, and this is going to set you back a ways, is chuck dreamweaver in the trash, grab a simple text editor (even notepad will do) and start coding by hand. It takes a while to learn but once you get a few basics down it is simpler, faster and more effective than EVER trusting any of the crap code the various WYSIWYG's out there generate, be it frontpage (or whatever the **** M$ renamed it), visual page pro, hotMetal, or Dreamweaver. Your page has ALL the telltales of a dreamweaver design - the stupid MM_ image javascript nonsense, inlined styles, inlined presentation, and a total lack of semantic markup. Let me walk you through my process for designing a page, we'll use your layout as it appears in Opera as our baseline. I will assume you at least know what a comment is, how ID's and classes work, and how to open/close tags. First, all my sites start with the SAME base template: <!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="text/css" rel="stylesheet" href="screen.css" media="screen,projection" /> <title>Template</title> </head><body> <div id="container"> </div> </body></html> Code (markup): 99.99% of my websites leave everything there, excepting the page title, the same. I use iso-8859-1 as my character encoding because I only deal in english language sites, but you may want UTF-8 if you plan on mixing languages... but for the most part that's a good starting point. We change the title, and we're good to go. Then, I would start adding elements inside #container. I've reached the point I'm always using an extra containing div even if the site is fluid width, just so if I want I can implement a 100% height model. The first thing on your page is the header - first, we want to mark that up as a header, using plain text... because you are using an image over the content I'd include an empty span at the end of the text for what's called 'image replacement', then I'd put the section of text that's different inside it's own container. <h1> Stone Mountain Bullmastiffs<br /> <small> Phone:(512)789-6319<br /> Atlanta, Georgia </small> <span></span> </h1> Code (markup): Boom, instant header. Normally I would NOT use 'small' as that's a 'presentational' tag, but in this case it formats the text better when css is not present, and does mark up the relationship of that text to the other stuff in the header better. Then you have two columns. Because this is a dynamic width layout and 'content first' is increasingly desirable for things like SEO, I'd double wrap the content in a DIV, and make that header text an actual header. The paragraphs are easy, just wrap them in PARAGRAPH tags. You'll notice in my code I usually force a newline at 76 characters, this is due to my using a 'Wirth' type styleguide. (which I'm going to formalize and post up soon for common use). Because this is a longer section, I put comments with the ID name we are closing at the end of the blocks, BEFORE the closing text. There is a bug in IE involving comments between floats - putting the comments inside the DIV's lets us dodge that pesky little problem. <div id="contentWrapper"><div id="content"> <h2>Naturally Reared for Companionship or Competition</h2> <p> Welcome to Stone Mountain Bullmastiffs where we specialize in Bullmastiffs. Stone Mountain Bullmastiffs are bred to AKC standards for type and temperament. Our Bullmastiffs come with a hip/health guarantee. We only breed once or twice a year. </p><p> Our kennel is a hobby, not a business. We are committed to breeding with the intention of preserving the integrity of the Bullmastiff, while offering an animal with a sound temperament. Every litter has an objective. Our goal is to breed sound/healthy dogs/bitches for the ring and more importantly for the home. </p><p> Stone Mountain Bullmastiffs is not a kennel. Our dogs are raised in our home and as part of the family. This ensures that you get a well socialized puppy. </p> <!-- #content, #contentWrapper --></div></div> Code (markup): Then you have the sidebar, which we'll name sideBar. You'll notice on this and above I use capitol letters at the wordbreaks - this is the official way stuff is supposed to be formatted for javascript, I use it in HTML as well for consistancy. In the sidebar is a menu... what is a menu but a list of items? So we'll mark that up as an unordered list. I would wrap that list in an extra DIV in this case JUST in case you want to put other stuff in the sidebar later. Because the anchors use images, we'll code them with empty spans for image replacement. Those images are presentational, not content, so they should be declared in the CSS - as such we'll need unique ID's on each item to target them for their unique images. <div id="sideBar"> <ul id="mainMenu"> <li id="mmHome"><a href="index.html">Home<span></span></a></li> <li id="mmDogs"><a href="">Dogs<span></span></a></li> <li id="mmLitters"><a href="">Scheduled Litters<span></span></a></li> <li id="mmForm"><a href="">Puppy Form<span></span></a></li> <li id="mmContact"><a href="">Contact Us<span></span></a></li> <li id="mmAbout"><a href="">Links<span></span></a></li> </ul> <!-- #sideBar --></div> Code (markup): Which looks kind of complicated, but isn't THAT complex. When I get to the CSS I'll explain things like the empty span's in greater detail. Finally, you have your relatively simple footer. That's easy. <div id="footer"> Copyright © <a href="http://www.lbgmultifx.com">LBGMultiFX</a> | Stone Mountain Bullmstiffs | All Rights Reserved. </div> Code (markup): Though I would place that AFTER #container is closed, so that if we in the future wanted a 100% height layout, it's at least possible without changing the HTML. That would make our final template.html read: <!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="text/css" rel="stylesheet" href="screen.css" media="screen,projection" /> <title>Stone Mountain Bullmastiffs</title> </head><body> <div id="container"> <h1> Stone Mountain Bullmastiffs<br /> <small> Phone:(512)789-6319<br /> Atlanta, Georgia </small> <span></span> </h1> <div id="contentWrapper"><div id="content"> <h2>Naturally Reared for Companionship or Competition</h2> <p> Welcome to Stone Mountain Bullmastiffs where we specialize in Bullmastiffs. Stone Mountain Bullmastiffs are bred to AKC standards for type and temperament. Our Bullmastiffs come with a hip/health guarantee. We only breed once or twice a year. </p><p> Our kennel is a hobby, not a business. We are committed to breeding with the intention of preserving the integrity of the Bullmastiff, while offering an animal with a sound temperament. Every litter has an objective. Our goal is to breed sound/healthy dogs/bitches for the ring and more importantly for the home. </p><p> Stone Mountain Bullmastiffs is not a kennel. Our dogs are raised in our home and as part of the family. This ensures that you get a well socialized puppy. </p> <!-- #content, #contentWrapper --></div></div> <div id="sideBar"> <ul id="mainMenu"> <li id="mmHome"><a href="index.html">Home<span></span></a></li> <li id="mmDogs"><a href="">Dogs<span></span></a></li> <li id="mmLitters"><a href="">Scheduled Litters<span></span></a></li> <li id="mmForm"><a href="">Puppy Form<span></span></a></li> <li id="mmContact"><a href="">Contact Us<span></span></a></li> <li id="mmAbout"><a href="">Links<span></span></a></li> </ul> <!-- #sideBar --></div> <!-- #container --></div> <div id="footer"> Copyright © <a href="http://www.lbgmultifx.com">LBGMultiFX</a> | Stone Mountain Bullmstiffs | All Rights Reserved. <!-- #footer --></div> </body></html> Code (markup): Which is with the exception of maybe one extra DIV around the header or content/sidebar ALL the HTML that layout should need (ok, we might want a print.css as well ) - compare that to what Dreamweaver vomited up... with more consistant formatting, verbose meaningful class and ID names, and it's STILL a third the code. To make it look how you want - that's where the CSS comes in. I'm headed to bed right now, but if I have time in the afternoon I'll churn out the CSS, document how/why/what, and post it up here... During that process I'll also show you how to take all those separate menu images, and combine them down to a single image saving bandwidth and handshaking time - basically making the page load faster AND not need all that javascript nonsense Dreamweaver seated you with. Oh, and don't bother wasting your time on flash for anything other than movies or games - using it for presentational elements is the fastest way to a bloated, slow loading crap site with major accessability issues.
Thank you... I originally attempted the sode by hand, but got really frustrated with it, so I picked up Dreamweaver. I will continue to learn Flash, but use my knowledge to create a totally different site. Now, I won't be rushed. As far as the CSS, that's where I have the most difficulty. I learned the basics, but incorporating it within my document has been very difficult to comprehend. So, I would appreciate your time, if you have it to teach me. I will continue to try in the meantime, while I'm at work...my job will allow me to be distracted some...(thank goodness) Anyway, I appreciate your help...Dreamweaver is straight forward, although, some things are still hard to manipulate with it, I see the importance of the basics - HTML & CSS. Thank you SO much for your time, and I will be looking forward to hearing from you again soon.
death shadow? didn't get a chance to return to my post? thanks for you help thus far. i still need you help though with the css.
Hahaha... you wouldn't know it, though. Eh, if he didn't forget, he'll be back. The HTML stuff, you can learn really fast, katty. CSS however can be a bitch of a dog (btw, when does a dog become a bitch? before or after puppies? What is she called when she'd not a bitch? Just curious), and while deathshadow's image-replacement is absolutely the best way to go, its nothing you'll figure out yourself until after you've built a few pages and run into a few of the very popular problems with either CSS itself or the various browser bugs. If you want o keep building websites, here's what you do: Download as many browsers as you can. That means there's a Windows machine somewhere with IE7 and IE6 (5.5 is really optional), and that same machine or another with FireFox 2+, Opera 9+, Safari (either with a Mac or, there's Safari for Windows out now), and a text browser like Lynx is kinda nice, if you get it like mine-- mine is stuck in a very small window, so I cannot see the whole page in one glance-- I must always scroll and this is good for finding "bugs" like stuff I thought obviously went together but in plain text doesn't look related at all. If you really wanna get fanatical, or know any disabled people and care, get JAWS (a free Windows screen-reader-- it reads all Window's programmes out loud for the blind) and maybe a screen magnifyer-- or you can just go crazy on the zoom in Opera. The reason for all those browsers is, in Dreambeaver you've got "Design View" which is kinda like a browser-- but it doesn't have the same "rendering engine" as any REAL browser, so what's the point if anything looks the way you want in DW? It won't necessarily look good on anyone's REAL browser-- so instead, type ina text editor and keep looking in real browsers. After fiddling with Flash, I'll tell you this-- learn it to make pretty decorations and advertisements. You learn a lot of Flash, you learn a bit of Actionscript (like Javascript for Flash, basically), but remember that many people have Flash either not installed or turned off, because often it's really really big files. At first, Flash sites look cool... but then you see too many sites like nike.com and as a visitor you quickly get frustrated with long loading times, Click To Enter (why should the customer have to do more work? They've already filled in the URL didn't they?). Sometimes, if you're really really good, you can build a real site, and lay Flash on top of it-- best of both worlds. Not something anyone'll learn in a week, I tell you. Good place for basic Flash tutorials http://lukamaras.com/ DON'T take his advice and try to build a website using Flash-- start with the banners. This guy's been using Flash for a decade or so and knows his stuff. His tutorials are so nice, because you really learn while doing. Lastly, with your site-- I'd change the nasty grey-denim body background. I dunno what to, really, but while it adds texture, I don't think it works... maybe try dog hair? That'd be a neat idea. With a name like Stone Mountain, it makes me think of that movie Shooter where there's this guy (and a few other characters) living in these stone-and-wood cabins in the woods in the mountians with too many guns and too many dogs-- so get some really nice, beautiful image of mountains tops with pines... like I dunno, Virginia or somewhere in the ROckies or something. With a dog. The paw prints around the page are nice. Lastly, add some fotos. Nothing huge and nasty, but images of maybe a particular good bitch or sire you use so people can see their puppies' parents or something. Or the breeding grounds, or people working with puppies (c'mon, who can resist puppies???). Also, your form could be awesome-wicked styled with a bit of CSS. Since Dreambeaver used a table for everything, I'm surprised the form isn't in some nice, straight table (meaning, it's in a table but not lined up nicely). Deathshadow's example will certainly help you, but you'll still get a ton of questions when you want to change something. That's why he's being really careful with the HTML-- you should (after learning CSS) be able to change the look of the site without having to touch the HTML. I've listed in several places on the forum where to learn a good basis in HTML and CSS (I feel weird repeating myself... ro-bot). Good luck with the dogs.
Sorry for the delay - BP was right, I've got a life too. Ok, on to the CSS. First, all of my CSS starts with this: * { margin:0; padding:0; } Code (markup): The asterisk is called the 'universal selector' - it selects all elements. By setting margins and padding to zero, we get a nice starting baseline. Some people will say not to use this because it messes up form elements (no, it just makes them behave differently), or because it makes ordered lists a pain (compared to normal?) or some other made up bull - likewise they'll go nuts turning off borders on elements. That stuff rarely comes up as an issue on my pages so we're just fine using that. Next, I was looking at the page, and I think we'd be better off using a 100% height model. To do that, first we need to make sure all browsers have ACCESS to 100% browser height: html, body { height:100%; } Code (markup): Since we're styling body, to it we should probably set our default font size, the background image, and centering in IE 5.x. I'm also going to set a minimum padding width-wise - we'll get to why in a moment. body { padding:0 2.5%; text-align:center; /* center #container in IE 5.x */ font:normal 100%/140% "Times New Roman",Times,serif; background:url(images/bodyBackground.png) top center; } Code (markup): That background image was a major problem - it was over 300k in size, almost five times the size of the entire rest of the site. I re-optimized that down to a 16 color .png at only 17k, that should load WAY faster. http://battletech.hopto.org/for_others/phattykatty/images/bodyBackground.png You'll notice I used a % font size - this will be used in the content area so that for IE and Opera users fonts will at least obey the system metric, automatically growing 25% (or more) in size for those that desire it. On your version you were using 80% width. Percentage widths have a number of issues - the biggest of which being they can go too narrow for the content chopping it off without scrollbars, but also the borders can get too wide not making adequate use of screen space at lower resolutions. Instead of percentage widths, we'll use min-width and max-width, telling our page to dynamically size as needed. Since your header image is 728px, that's a nice minimum and keeps the page 800x600 friendly... I went with 1120 as the high end as that's usually the point at which two column layouts get 'too wide' for some people to follow the wordwraps. Since #footer is kin to #container, we'll need to set this on both of them. We'll set position:relative to keep depth sorting AND absolute positioning well behaved, and margin:0 auto; to center it them in browsers other than IE 5.x. We'll also declare our side borders - you'll notice I put the style and color as a condensed property, then used the -width to just set the sides. #container, #footer { min-width:728px; max-width:1120px; position:relative; margin:0 auto; border:solid #000; border-width:0 1px; } Code (markup): #container will also need some extra properties. We need a minimum height so our page will stretch the whole way, we want it to wrap floats to avoid needing to waste code on clearing DIV's, and we'll use a background-image to add faux-columns so it looks like #sideBar stretches the full height. Since we use an image, I gave it a light shading at the sides and a cold off-hue akin to that used in your animated .gif #container { min-height:100%; overflow:hidden; /* wrap floats */ background:#FFF url(images/sideBarBackground.png) 0 0 repeat-y; } Code (markup): Since we're dealing with #footer at the same time above, we'll deal with it's styling now. Because it's after the 100% min-height, it makes the page too tall... but if we lock it to a fixed height, then set a negative margin-top equal to that height, we can 'ride it up' over our 100% height container - meaning that no matter what the screen size the footer will be at the bottom of the content if the content is taller than the browser window, or it will be at the bottom of the browser window if the content is shorter than the browser height. #footer { height:32px; margin-top:-32px; font:normal 16px/32px "times new roman",times,sans-serif; background:#DDD; } Code (markup): Now, the above code has a few problems - well, one problem really. That problem of course is IE6 and earlier (go figure). First, IE6/earlier has no min-height property... but it DOES treat height (incorrectly) as min-height, so all we need to do is set height to 100% - EXCEPT height:100% + the overflow:hidden we're using to wrap floats will chop off the bottom of our content if the page is too short - BUT, height:100% trips haslayout, which wraps floats in IE, so we just have to set overflow back to the default value of 'visible'. We can target IE6 and earlier reliably with the simple "* html" hack. Ugly, but I'd rather see this in the CSS where it will cache across pages than in every single HTML page. Because this is kind of a hack, I'd put a comment in explaining it. * html #container { /* IE treats height as min-height, but height screws up how we wrap floats in other browsers - but height trips haslayout which wraps floats in IE - so just set overflow back to visible and it's all good. */ height:100%; overflow:visible. } Code (markup): Likewise IE has no min-width and max-width, there's no easy way around this one, but we can use javascript expressions in IE's CSS (the only browser to let one do so) - problem is, if javascript is off, we don't get our min/max. The solution is to set a fixed width first, which is what will be used if javascript is disabled - THEN we set the width AGAIN using an expression, which if it runs will override the fixed width. * html #container, * html #footer { /* if .js is off, set fixed width /* width:728px; /* otherwise use expression for min-width */ width:expression( (document.body.clientWidth>1152) ? "1120px" : ((document.body.clientWidth>800) ? "auto" : "728px") ); } Code (markup): You'll see in the above my logic flow is all greater than's - there's a quirk between the rendering engine and less-than compares that could lead to an infinate loop if one uses less than - easily avoided by changing the logic flow. Next up, the header - after playing with the header I came to the conculsion that padding it a fixed left amount wreaked havoc with the appearance at 800x600 - simple solution is to center that banner... to do this I did end up having to add a span to our HTML: <h1> <span> Stone Mountain Bullmastiffs<br /> <small> Phone:(512)789-6319<br /> Atlanta, Georgia </small> <b></b> </span> </h1> Code (markup): That extra span let's us center everything without wasting time on a classed div - this does mean that the image replacement span got replaced with an empty bold tag - more on that in a second. First, we set the background-color on the H1, then we set the span to the 728px banner width, we set the font to 36px with a 90px line-height to center our first section of text (the site title) behind our banner. Margin:0 auto will center it for us, and because we haven't reset from the text-align:center in the body yet, that centers us in IE 5.x. Text-align:left puts the title text on the left, and padding-top/bottom to space it out like yours was. We'll also set position:relative so we can absolute position our image-replacement. Absolute positioned elements normally position as 0,0 being the top left corner of the browser, but if you put one inside a relative positioned element, 0,0 is treated as the upper left corner of that parent element. h1 { background:#DDD; } h1 span { display:block; position:relative; width:728px; margin:0 auto; padding:16px 0; text-align:left; font:bold 36px/90px "times new roman",times,serif; } Code (markup): Now, for a cute trick. The reason we are formatting text is so that if someone is browsing images off, or a search engine (which gives a **** about images) hits the page, they have something meaningful to look at. We put the 'small' text in a 'small' tag, let's position that 'box' roughly where it would be on the image. We set 'small' to display:block, which will auto-fit the width of our 728px wide span. 18px high text with a 22px high line-height looks good there, and text align:right will put the text on the correct side. To 'slide it up' next to the title text, we just put a negative margin on the top of it - To 'center' it top to bottom next to the text, we just do a little math... the whole area is 90px tall, two lines of 22px line-height = 44px. 90-44 = 46.. to center we want half that, so 23... if we make the whole thing that 23px tall plus the 44px of the two lines, or 67px total, it should line right up without resorting to fixed heights and padding which would mess up IE 5.x, and without resorting to absolute positioning which could cause issues with our image-replacement technique. h1 small { display:block; height:67px; overflow:hidden; margin-top:-67px; text-align:right; font:bold 18px/22px "times new roman",times,serif; } Code (markup): Now, you've likely seen me say 'image replacement' a whole lot. Image replacement is a very simple concept: When you use an image for something that is text, put the text on the page, then hide the text under the image. Since alt text is often ignored by screen readers, IS ignored outright by search engines, and usually looks like CRAP when images are turned off in a normal browser, having REAL text there is highly desirable. This is fairly simple. Position:absolute; top:0; left:0; which thanks to the position:relative we put on the span, will put it right there. The traditional glider-levin technique puts the 'sandbag' (in this case our empty B tag) first, meaning you really don't need the top:0; and left:0; - but I use other techniques like sliding doors which also use a sandbag AFTER the content, so I put it after and eat the ten bytes so that if in the future I want to style it the other way, I can. h1 b { position:absolute; top:16px; left:0px; width:728px; height:90px; background:url(images/h1Logo.gif) 0 0 no-repeat; } Code (markup): One thing to always remember about position:absolute is it changes the element it's on to display:block - but percentage widths and heights do not work consistantly cross-browser, so be sure to specify them in a fixed metric like px. That finishes off our header, next up in the source is our content. I did the double wrap so we could use a fairly standard content-first column method. First we make a wrapper that's floating (in this case we'll float:right to keep it simple) at 100% width. We will also pad the bottom so that if the content is too tall, it won't appear BEHIND our footer. #contentWrapper { float:right; width:100%; padding-bottom:48px; /* make room for footer */ } Code (markup): Then the actual #content - we will pad the bottom to make room for that little watermark you had, then pad the left side the width of our side column. This makes the VISUAL room for it, but not the 'flow'. Since we haven't reset the text-align it's still set to center, which is NOT what we would want in a content area, so let's hit that now - and we can tack that watermark image on right here too. #content { padding:0 0 112px 200px; text-align:left; background:url(images/contentWatermark.png) bottom right no-repeat; } Code (markup): Next up is formatting the content text - fairly simple. Play with the margins and padding until you get it how you like. #content h2 { font:bold 125%/110% "times new roman",times,serif; padding:16px 16px 0.3em; } #content p { padding:0.5em 16px; } Code (markup): Now for the #sideBar. This is kind of tricky, but once you understand it some really big layout doors will open for you. Up above, we have #contentWRapper set to take up 100% the available width, leaving no room for anything to float next to it - 0px free... Wait, 0px free? We set our sideBar to the desired width. I switched to 200px from the 24% you had becuase the percentage width caused major layout issues at lower resolutions... 200px is usually plenty for a sidebar anyways. Now, if we set the margin-right to 200px, we 'narrow' the area the browser uses to calculate 'flow' to 0px - as far as the browser is concerned #sideBar is 0px wide for flow, even though for rendering it's 200px wide... We can fit 0px next to the above 100% - instantly the sidebar pops up into place. In my head I think of the box model as two separate boxes for the content - the flow box and the render box... Render box is what's drawn, flow is for what's used to calculate how other items around it are positioned. Negative margins decrease the size of the flow box, meaning the content will 'hang over' the side you shrink. Again, we need to pad this for the footer as well should the content be shorter than the sideBar. #sideBar { float:right; width:200px; margin-right:-200px; padding:16px 0 48px; /* bottom padding makes room for footer */ } Code (markup): Next up is the menu. Looking at your images I found some 'issues' - like they were all different heights (+/- a px or two), and the font was, well... that vertical stretch didn't look all that great. Instead of sitting here remastering it, I said let's bite the bullet and simplify. I created a single image that was just the background without the text, containing both mouse states one over the other. http://battletech.hopto.org/for_others/phattykatty/images/mainMenu.png We can then just slap that as a background on the anchor, and use the text in the anchor as our actual link text. That simplifies out HTML down to: <ul id="mainMenu"> <li><a href="index.html">Home</a></li> <li><a href="">Dogs</a></li> <li><a href="">Scheduled Litters</a></li> <li><a href="">Puppy Form</a></li> <li><a href="">Contact Us</a></li> <li><a href="">Links</a></li> </ul> Code (markup): First we need to style the UL itself. I used padding to center it so we could use floating anchors, dodging a pesky rendering bug in IE. We set the font to a fixed PX size so that at default zoom in all browsers they will render properly. Firefux and other gecko browsers will screw up on text resizing, but being that anyone who actually gives a **** about resizing content wouldn't be using a gecko based browser in the FIRST PLACE who gives a flying shtup. #mainMenu { list-style:none; padding-right:16px; font:bold 15px/35px "times new roman",times,serif; } Code (markup): Now, there's a quirk in IE regarding LI's - all sorts of positioning headaches from hell.. Solution, set the LI to display:inline then don't try to add ANY sort of other styling to it. #mainMenu li { display:inline; } Code (markup): Next the anchors. Because we are inside a float:right, IE will make float:left elements go missing, and do wierd stuff to margin-bottom unless we make these float:right - so float:right it is. We set the width (I enlarged them to 168px - multiples of 8 work better in the .png encoder). If we use text-indent to push the text past the little 'paw' on the images, we can avoid using padding which causes IE 5.x issues. We then just set the color and slap our background behind it - adding a background-color means that images off the user still has buttons. Setting white-space:nowrap and overflow:hidden prevents text-sizing errors from turning into broken layout errors. #mainMenu a { float:right; width:168px; height:36px; margin-bottom:8px; text-indent:38px; text-align:left; /* put back on left after IE 5.x fix */ text-decoration:none; white-space:nowrap; overflow:hidden; color:#000; background:#DDD url(images/mainMenu.png) 0 0 no-repeat; }[code] Then comes our mouseovers. These are easy - we change the text color, then we slide the background up to reveal the other image stored in there. [code]#mainMenu a:active, #mainMenu a:focus, #mainMenu a:hover { color:#FFF; background-color:#444; background-position:0 -36px; } Code (markup): ... and that's it for the CSS. You can see this whole thing working live at: http://battletech.hopto.org/for_others/phattykatty/template.html As with all my examples, the directory: http://battletech.hopto.org/for_others/phattykatty is unlocked so you can get at the drippy gooey goodness. Validates XHTML 1.0 Strict, CSS would validate if not for the IE specific stuff, and the whole page now comes in at 78k in 7 files. Hope this helps.