I've come across in a bug in Safari 4 where the layout changes in a CSS table-less form when a drop down menu appears. I have raised this to the Webkit team: https://bugs.webkit.org/show_bug.cgi?id=27656.

However, I need to find a way to overcome the bug. Why does the bug occur? And what's the best way of overcoming this bug?

We currently support IE6, IE7, FF3 and Safari 3.

4 answers

2
points

It's likely that a partial redraw occurs when you activate the select box, however the redraw doesn't seem to account for the br and breaks the layout. Clearing the labels as recommended by Thomas, only solves the problem partially and the select still jumps

Answered over 7 years ago by Anatoli Papirovski
0
points

Clearing the labels should do the trick:

 .fields {
        clear: left;
  }
Answered over 7 years ago by Thomas Jaggi
0
points

Or floating the select. But clearing the labels seems to be better since you can get rid of the <br /> elements.

Answered over 7 years ago by Thomas Jaggi
0
points

Thanks for the answers.

I'm pretty sure this is a bug in Webkit not selecting the br element.

It seems good practise is to put a div element around the label and the form elements, which does fix this problem, presumably because the br element is no longer necessary for layout purposes, so I'll look into implementing that.

Answered over 7 years ago by Ton Voon