CODEWITHSUNDEEP
htmlcssformsinput
roeb
roeb

Reputation: 487

css-styled search form input field looks terrible in IE7

Here is the screenshot of my web-development:

Screenshot http://img12.imageshack.us/img12/2668/searchin.jpg

the code: http://jsfiddle.net/pwDXj/5/

The div around the input field is for niftycube, so that the corners are rounded. I cant find out, why IE shows the input-field with this much left margin, anyone got an idea?

Thanks in advance.

Upvotes: 1

Views: 855

Answers (3)

Hamd Islam
Hamd Islam

Reputation: 13

replace this css

suche

{ width: 220px; height: 30px; position: absolute; right: 0px; bottom: 0px; background-color: #cbddf1; } #suche form { margin: 0px; padding: 5px 0px 0px 10px; } #suche label { color: #003399; float: left; font-size: 0.85em; line-height: 24px; padding-right: 10px; } #suche #bginput { background-color: #EFF5FC; float: left; height: 18px; padding: 2px; width: 150px; } #suche input { margin: 0px; border:0px; color: #003399; font-size: 0.7em; width: 140px; background-color: #eff5fc; }

Upvotes: 0

Scott Cranfill
Scott Cranfill

Reputation: 1056

The offending code seems to be the left-margin of 50px on #suche #bginput. IE7 doesn't render this the same as the other browsers. Where they calculate the margin from the left of the containing element, IE7 is calculating it from the right side of the thing that's floated to the left.

I would suggest floating #suche #bginput to the right and not setting the left-margin.

Upvotes: 3

DwB
DwB

Reputation: 38300

This is not a complete answer, but it may get you pointed in the right direction. You probabaly have to setup some special CSS for IE7. You can use conditional comments for this.

Upvotes: 1

Related Questions