PHPQuack

img is a child of a, in your code, which is in the order of "a img", but your calling .purchase (which is assigned to img) and than a remove .purchase e.g. a:hover { background-image: url(images/nav_purchase_roll.gif); }

Are you trying to position an element at the bottom right of a containing block, or the bottom right of the browser window?

scrubbed

If using inline, it's very similar to using inline for list items with DIVs instead, and you will have to use margin or padding to space them out. Maybe instead float the first div left and specify width for both DIVs. Depends on what you're trying to do.

Is this what you're trying to do, e.g. <div id="a"> Div A </div> <div id="b"> Div b </div> #a, #b { display: inline; }

I just doubled checked, if you do not specify a src attribute, firefox 2 uses a default alt value. When you say not compatible, are you mainly referring to positions and/or hover? If hover, see below That's the part that I've been having some problems with. See updated example http://evoluent.bugeyedigital.com/ I originally tried using an image for the src attribute for the view cart button, mainly wanting to get the hover effect, but ran into some issues. So I removed the src completely and used background-image instead to get the hover effect, but IE insist on displaying that icon when src is not set, so for now on the view cart button, worked around the IE problem by including a tiny transparent image for the src to get rid of the icon while keeping the background-image in the css. Hover effect does not work in IE6, but works fine with firefox. Look wise, fine on both now. Now trying to figure out how to line up the add to cart buttons correctly with the 3 corresponding inline list buttons to the left of each. What's is up with IE, all versions up to 8 ? I checked the rendering on browsershots.org, practically all versions of different browsers look fine, EXCEPT for all IE.

1. Is there another way to remove/hide the input default value, like "Submit Query" that firefox uses. Right now, I just use an empty alt="" attribute? <form action="script.php" method="post"> <div> <input type="image" alt=""> </div> </form> 2. To use a hover effect on the above input tag , is the only way to do that is to not specify a src for the input tag, and use a background-image instead within the css? input { float: left; width: 90px; height: 50px; background-image: url(viewcart-button.png); } input:hover { background-position: 0 -50px; } 3. Problem is this http://evoluent.bugeyedigital.com/ when viewed with IE5.5, 6, 7 & 8, it displays a default icon when the src attribute is not specified within the html. Is there a way to get rid of it?

Besides, I checked the output from IE5.5, 6, 7 & 8 at browsershots.org, all looks practically identical, except that IE5.5 did not center the main container div.

The test page http://evoluent.bugeyedigital.com/ css http://evoluent.bugeyedigital.com/css/mainstyle.css Looks perfect in Firefox 2.0, but not so well with IE6. Is there a work around for IE6 or am I missing something? If anyone needs more of the code and better explanations, please specify, I'll try to provide either one. Or, any suggestions of a better way to accomplish the task. View Cart (two button states in one image, full image height is 100px): I tried specifying a src image for the input tag, but IE6 seems to want to squish the 100px image to fit within the 50px high containing div. Instead, I specified a background-image within the css. Problem is that IE6 inserts that small image icon when the src is not specified within the input tag and also, gives it that indented look. css for the view cart button #navigation input { float: left; height: 50px; width: 90px; background-image: url(../images/viewcart-button.png); } #navigation input:hover { background-position: 0 -50px; } Add to Cart button: Essentially the same problem as above, including, setting margin-top to move the element up to align with the 3 buttons to the left(the <ul><li> is set to float: left;), it may look good on firefox, but IE6 seems to want an extra 20 or so pixels, just to align #content input { float: right; margin-top: -23px; padding: .2em .5em; color: white; background-image: url(../images/addtocart-button.png); } #content input:hover { color: black; background-position: 0 -22px; }

thank you both, I had my css syntax incorrect. incorrect #hover-red a:hover {background-color: red;} fixed #hover-red:hover {background-color: red;}

Can a class or id be assigned to the <a> tag?

I looked at the css reference at w3schools http://www.w3schools.com/css/css_reference.asp, how do one tell which properties can be used with which selectors?

It's very simple, will take you a couple of hours to go thru this tutorial http://css.maxdesign.com.au/selectutorial/ , you can just jump right into the tutorial near the bottom.

you can, float:left column, float:right column, then set center column's margin-left and margin-right to sit in the middle. Remember that you have to specify a width to an element that is using float.

layout, either fixed or liquid, is pretty easy like the the previous post stated. To learn it, just need to find a well explained tutorial, if you are having problems understanding the tutorial you specified, try this one http://css.maxdesign.com.au/index.htm, look for css selectors, and try the tutorial at the bottom, it's shows how to create a liquid 3 column layout, with header and footer.