<form> and css problems in IE6

[PHPQuack]

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;
}

[ag3nt42]

why would you even waste your time coding for IE6?

 

when we are soo close to IE8

 

You should just code for IE7 and force users to update their browsers

[ag3nt42]

also you shouldn't rely on relative or absolute positioning as it will ALWAYS be different in the two browsers...if you are forced to use it then your only choice is to find a happy medium...

 

 

 

instead use list tags to position your elements or tables. only way to keep them the same in both browsers

 

the browsers will also read float very differently.. so use that sparingly.

instead of floating each element float the container

 

 

as long as their is not a width or height set on the div.. it will not smush the image..

you should however set a height or width on the div is using background image other wise.. the div will only be as large as the content inside it.. the background is not considered content.

[TheFilmGod]

also you shouldn't rely on relative or absolute positioning as it will ALWAYS be different in the two browsers...if you are forced to use it then your only choice is to find a happy medium...

 

 

 

instead use list tags to position your elements or tables. only way to keep them the same in both browsers

 

the browsers will also read float very differently.. so use that sparingly.

instead of floating each element float the container

 

 

as long as their is not a width or height set on the div.. it will not smush the image..

you should however set a height or width on the div is using background image other wise.. the div will only be as large as the content inside it.. the background is not considered content.

 

Again, please ignore everything this person has said as it is completely incorrect.

 

Absolute positioning is the most cross browser method of placing objects in the webpage. The only problem is that it requires you to create a height on EVERY single element. This is not feasible. Furthermore, it is not portable for one screen size to another.

 

Relative positioning is not a positioning technique or method. It is normal static positioning. All it does is make that div "relative" meaning any absolute positioned divs will be measured from THAT div.

 

instead use list tags to position your elements or tables. only way to keep them the same in both browsers

 

If you design properly you can get anything to position correctly in both browsers. You simply need to understand the basic box model framework, which you clearly do not.

 

the browsers will also read float very differently.. so use that sparingly.

instead of floating each element float the container

 

As long as you clear the floats and measure widths correctly, those browsers should correctly render the floated elements... without much problem.

 

the div will only be as large as the content inside it

 

Complete rubbish. A div will expand as far as it's parent container allows it to. The only exception is when a width is specified or when that div is floated.

 

 

[haku]

why would you even waste your time coding for IE6?

 

Over 60% of my users use IE6. Forcing them to upgrade their browser is bad business sense.

[PHPQuack]

Over 60% of my users use IE6. Forcing them to upgrade their browser is bad business sense.

 

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.