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.

Somebody answered part of your post before I did. Another thing, your following property background-colour: should be background-color: Take out the "u", that's why the background color is not showing. I tried it on firefox 2 and all works fine, if your browser is not displaying it correctly, could be a browser compatibility issue. Look around on this site http://css.maxdesign.com.au/index.htm, there may be a section showing what issues certain version of browsers may have. with or without the closing body tag, does not make a difference in firefox 2 or win IE6, but it should be there anyway.

No transparency in png file. Using firefox 2.0.0.15 I created a more simple html and css with a container div and one div for the image, and it still had that several pixel gap at the bottom only for whatever reason. I went back to some tutorial and noticed that it specified a height for a div using a similar image. So I added the same property and all seems fine. thnx

Here is a link to the test page http://phpquack.awardspace.com/, the banner on top is sitting in it's on <div id="banner">, I set the background-color to black so to easily see the bottom gap that should not be there. Below that is the horizontal menu in it's own <div id="top-nav">. I can't see what is or is not missing that is causing the gap at the bottom only of the <div id="banner">? Here is the partial code for the css body { margin: 0; padding: 0; font-size: 95%; font-family: georgia, times, "times new roman", serif; color: black; background-color: white; } #container { width: 800px; margin: auto; } /* --------------------------------- */ #banner { background-color: black; } /* --------------------------------- */ #top-nav { background-color: rgb(255,223,164); text-align: center; padding: .3em 0; } #top-nav ul { margin: 0; padding: 0; list-style-type: none; } #top-nav ul li { display: inline; } #top-nav ul li a { padding: .6em 2em; text-decoration: none; color: darkred; } #top-nav ul li a:hover, a:active { color: white; background-color: green; border: 1px dotted yellow; Partial code to the html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="en"> <head> <title>Float Practice</title> <link rel="stylesheet" type="text/css" href="float.css"> </head> <body> <div id="container"> <!-- banner --> <div id="banner"> <img src="melonhead-logo.png" alt="MelonHead"> </div> <!-- top nav --> <div id="top-nav"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </div>

I'm using doctype html strict. I'm trying to create a left navigation area, the footer and header, that'll be the same on every page, like what FrontPage calls shared borders. I read something about css that was referring to those terms, which I cannot find again, but not sure if that's what it meant, which from what I recalled, had to do with "margin". From the replies, sounds like this is not what css can do? From what I understood about css "margin", it's is mainly to create space around elements. So, in a way, it's KIND of like padding for a table? Just need a little clarification, so that I don't keep looking in the wrong places.

Can you create common page elements with css or no?

What should I be looking into, to create a similar feature like frontpage's shared borders?