'k Zit met een klein probleempje. Voor het selecteren van een nieuwe taal wil'k graag een lijstje laten uitschuiven. Natuurlijk heb'k hiervoor jQuery gebruikt om het te laten werken. 't Enigste vervelend is dat in FF het menu wel over mijn content schuift en in IE 7 / 6 / Avant duwt hij de content naar onder.
Weet er iemand waaraan dit zou kunnen liggen?
Voorbeeld kan hier gevonden worden http://www.sygamo.be/admin/auth/ --> klikken op change, testen in FF & IE om't verschil te zien.
Weet er iemand waaraan dit zou kunnen liggen?
Voorbeeld kan hier gevonden worden http://www.sygamo.be/admin/auth/ --> klikken op change, testen in FF & IE om't verschil te zien.
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <script type="text/javascript">slideMenu('span.dropdown','ul.language');</script> <div id="frm_login"> <h3>Language: English<img class="flag" src="images/flags/uk.gif" width="18" height="12" alt="icon flag" title="English">|<span class="dropdown">Change <img src="images/icon_arrow_down.gif" width="6" height="6" alt="icon down" title="Click here to change the language"></span></h3> <ul class="language"> <li><a href="#">English</a></li> <li><a href="#">Nederlands</a></li> </ul> <div class="form"> <form method="post" action="/admin/auth/login/"name="emailform"> <h1>login </h1> <dl> <dt><label for="username">username <small>(<a href="/admin/auth/lostusername/">lost username</a>)</small></label></dt> <dd><input tabindex="1" type="text" id="username" name="username"> <dt><label for="password">password <small>(<a href="/admin/auth/password/">lost password </a>)</small></label></dt> <dd><input tabindex="2" type="password" id="password" name="password"> </dl> <ul> <li><input class="buttons" tabindex="3" type="submit" name="submit" value="login"></li> <li><input class="buttons" tabindex="4" type="reset" value="cancel "></li> </ul> </form> </div> </div> |
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| /*LOGIN*/ #frm_login{width:300px; margin:100px auto;} #frm_login h3{font-family:Arial,Verdana,Tahoma; font-size:0.7em; color:#707070; line-height:24px; vertical-align:middle; text-align:right;} #frm_login h3 img.flag{padding:0 10px 0 8px; vertical-align:middle;} #frm_login h3 span.dropdown{cursor:pointer; padding:0 0 0 8px;} #frm_login ul.language{float:right; padding:0 0 5px 12px; margin:0 -60px 0 0; width:100px; background:url('/images/bg_list.gif') left bottom no-repeat; font-size:0.7em; font-family:Arial,Verdana,Tahoma; color:#707070;} #frm_login ul.language li{line-height:16px; vertical-align:middle;} #frm_login ul.language li a{color:#2c62aa; text-decoration:none;} #frm_login ul.language li a:hover{color:#497FC5; text-decoration:underline;} #frm_login div.form{width:300px; height:225px; background:url('/images/bg_form_login.gif') top left no-repeat;} #frm_login div.form form{padding:21px 0 0 15px;} #frm_login div.form form h1{font-size:1.4em; line-height:25px; vertical-align:middle; font-family:Arial,Verdana,Tahoma; text-transform:uppercase;} #frm_login div.form form dl{padding:5px 0 0 0;} #frm_login div.form form dl dt{font-size:0.8em; line-height:24px; vertical-align:middle; font-family:Arial,Verdana,Tahoma;} #frm_login div.form form dl dt small a{color:#2C62AA; text-decoration:none; cursor:pointer;} #frm_login div.form form dl dt small a:hover{color:#497FC5; text-decoration:underline; cursor:pointer;} #frm_login div.form form dl dd{width:257px; height:28px; background:url('/images/bg_input_login.gif') top left no-repeat;} #frm_login div.form form dl dd input{border:none; background-color:#F8F8F8; width:237px; margin:6px 10px 0 10px;} #frm_login div.form form ul{list-style-type:none; margin:10px 0 0 0px;} #frm_login div.form form ul li{float:left;} #frm_login div.form form ul li input{border:none; background:url('/images/bg_button_login.gif') top left no-repeat; color:#EEE; text-align:center; width:120px; height:27px; cursor:pointer; display:block; margin:0 5px 0 4px;} #frm_login div.form form ul li input:hover{background:url('/images/bg_button_hover_login.gif') top left no-repeat;} |
JavaScript:
1
2
3
4
5
6
7
| function slideMenu(button,list) { $(button).click(function () { $(list).slideToggle('medium'); }); } |
Bedrijf : Webtrix
Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600