Recently, I implemented a jQuery tab on my website using the following code snippet:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Basic Info</a></li>
</ul>
<div id="tabs-1">
<p>
<div class="gen_col">
<div class="gen_col_1">Username</div>
<div class="gen_col_2"><input type="text" name="username" id="username" class="as_input" /></div>
<div class="gen_col_1">Password</div>
<div class="gen_col_2"><input type="password" name="password" id="password" class="as_input" /></div>
<div class="gen_col_0"><input type="submit" name="login" id="login" value="Login »" class="as_button" /></div>
</div>
</p>
</div>
</div>
The CSS rules for the gen_col classes are specified as follows:
.gen_col {
width:400px;
}
.gen_col_0 {
width:400px;
float:left;
padding-top:10px;
font-size:1.5em;
font-style:italic;
}
.gen_col_1 {
width:90px;
float:left;
padding-top:6px;
font-weight:bold;
}
.gen_col_2 {
width:310px;
float:left;
padding-top:6px;
}
Upon review, the display output on my website seems incorrect. Is there a way to rectify this issue? (Please note that the content within the tab is not related to login credentials but was added for testing purposes.)
Thank you in advance!