I’m having trouble with (of course, what else could it be ?) Internet Explorer. A program as crappy shouldn’t have the market percentage it has, but anyway.
I’m building a layout, set up with tables. I originally aimed for all CSS, but I had to give up soon due to incredible IE crapiness. So I went with the tables way, and I’m glad to say that I’ve finished the layout completely using tables and CSS support, but there is one major bug left - if the browser window is resized in IE, any element with a relative positioning (css: position:relative; ) remains on the place it was on before the resize, even though the browser window is resized, until the page is refreshed.
The following screenshots will clear things up:
Site opened in browser window - all is good:
Site after having resized the window:
Site on the same size, after having refreshed:
I noticed that this only happens in IE, and, as said above, only with item that are relatively positioned. Now the problem is that I need these relative positions, because I need to offset the form from the edge. On the screenshots it is offsetted, but the bug is there. If I simply let out the relative positioning, the bug isn’t there. And after a refresh after having resized the window with the bug, all is fine again.
Please help, as this is the only thing left to complete the site.
Margins provide the offset, but I’m gonna need to use relative positioning for more complicated positioning which margins can’t do. And besides, I shouldn’t have to use margins at all ! Stupid IE !
Assign the parent container of the form a style, and use padding to get it away from the edges. Then get rid of positioning on your form style. If that doesn’t work maybe try putting the form in a div w/o any kind of styling on it. I could try and help w/ this if you can’t get it to work. I’ve had this problem b4 and I think that’s how I fixed it.
I’ve tried that - the form is in a div, and that div is inside the table. I don’t have any style on the form, I’m setting the styles of the div which contains the form. It’s about the same thing as Yeldarb proposed, but with padding instead of margins. Though I think I’ll go with padding.
If I don’t give the DIV any style at all it’s pasted to the edges of the tables, and I originally used relative positioning for that offset. Now I have to make changes in the table widths and all because of the padding and the margins. Isn’t there any CSS property that fixes this for IE ? display:inline sounds like the perfect solution but it doesn’t seem to do anything.
If you want to have a look at it, it would be greatly appreciated
I have the same behavior whenever resizing the window in IE6. Relative positioned items stay put until refresh (or rollover). Anyone figure out a work around aside from padding and margins?
Errrmmm… is there some issue you have w/ padding, or margins? I’m pretty sure that’s what I did to get Voets site to work, been a while. Anyway, post the HTML or something.
I’m doing some really complicated relative positioning, but I got it to work. If you set the containing div to height of 1% it will expand to fit what is inside and also fixes the bug with resizing the window. See the following:
The only downside is that I like to specify all my images as background images in my css file, but I don’t think this technique will work unless you actually use image tags.
If you have DW there is an extension that you can use that fixes this. I believe it is made by project seven. I did not read all the posts Voets did you ever get this fixed?
