No replies
GreenDude's picture
Last seen: 14 years 43 weeks ago
Joined: 2007-02-11
Posts: 20
Points: 0

Good day to you all!

After a period of meditation and study, I have returned with yet another brainstormer.

This is a model of a form and its elements that I'm trying to put together for a website.

I have used for reference IE6, IE7, Safari (Win-beta), Opera 9.23 and Firefox 2. If you take a ander, they all behave acceptable with every element, except the two edge backgrounds

main stuff

  • This is the css from my basic form template which works in all browsers.

    fieldset {
    background: #f9f9f9 ;
    margin: 10px 0 0 0; padding: 10px; overflow: hidden;
    border: 1px solid #999999;}

    fieldset li {
    line-height: 27px;
    clear: both;
    text-align: left; }

    And this is the css from the admin.css file which is specific to the page.

    form {
    float: right;
    margin: 0 0 20px 0; }

    fieldset {
    position: relative;
    background: none;
    padding: 0;
    border: none; }

    fieldset ul { background: url(images/sidebar_backgr.jpg) 110px repeat-y; }

    fieldset li.first {
    height: 60px;
    background: url(images/sidebar_top.jpg) 110px no-repeat; }

    fieldset li.last {
    height: 60px;
    background: url(images/sidebar_bottom.jpg) 110px no-repeat; }

    Of course, IE is the pain.

    As you can see, in IE7, the bottom background is shifted along with the submit button, and the top one disappears. In IE6 you can't see that because the form float doesn't work either :? The whole thing comes from the float actually... if you take it off it will display normally.

    On top of all this, IE grants me a 1px extra height to the ul or a 1px margin to the edge li (for all I know) that shows the li background.

    That's 3 puzzles in a pack. Smile

    Please share your wisdom with me on this one. Smile