Issues with unorderd list generated by JQuery
Hello all,
I am not sure if the problem I am having is with JQuery or it is with using the incorrect CSS.
Here is the HTML:
- <div id="links">
<ul>
<li id="link_index"><a href="/game/index?town_id=52164">City overview</a></li>
<li>
<a href="/game/message?action=index&town_id=52164&h=d0LJTsN1">Messages
<span id="new_messages" style="background-image: url(http://static.grepolis.com/images/game/message/new.png);" class="no_new_messages"></span>
</a>
</li>
<li id="link_report">
<a href="/game/report?action=index&town_id=52164&h=d0LJTsN1">Reports
<span id="new_reports" style="background-image: url(http://static.grepolis.com/images/game/report/new.png);" class="no_new_messages"></span>
</a>
</li>
<li><a href="/game/alliance?action=index&town_id=52164&h=d0LJTsN1">Alliance</a></li>
<li>
<a href="/game/alliance?action=forum&town_id=52164&h=d0LJTsN1">Alliance forum <span id="new_post" style="background-image: url(http://static.grepolis.com/images/game/forum/new_post.png);" class="no_new_post"></span>
</a>
</li>
<li><a href="/game/player?action=index&town_id=52164&h=d0LJTsN1">Settings</a></li>
<li><a href="/game/player_profile?action=index&town_id=52164&h=d0LJTsN1">Profile</a></li>
<li id="link_ranking"><a href="/game/ranking?rank=5848&town_id=52164">Ranking (5848.)</a></li>
<li><a href="http://wiki.en.grepolis.com" target="_blank">Help</a></li>
<li><a href="http://forum.en.grepolis.com" target="_blank">Forum</a></li>
<li><a href="/game/premium_features?action=index&town_id=52164&h=d0LJTsN1">Premium</a></li>
<li><a href="#" onclick="return submit_post('player', 'logout')">Logout</a></li>
</ul>
</div>
Here is the Code:
- $('#links').after("<div id='gt_links'>Grepolis Tools<ul>");
$('#gt_links ul').append('<li><a id="w_pref href="#"">Preferences</a></li><span style="color:#FFCC66;"> | </span><a id="w_help" ">Help</a></li>');
$('#gt_links ul').append('<li id="w_toggle" href="#"><a>Show/Hide</a></li>');
$('#gt_links').append('</div>')
//Change original styles
$('#links').css({'height':'auto'}); // Changed height to auto let GT Tools Menu move with chat link
$('#links li a').css({'display':'inline','position':'relative','font-size':'10px'});
// Must put in style append to body to get background image to work with inline display
$('body').append('<style>#links a:hover{background:none;}#links li:hover{background:url(/images/game/layout/menu_hover.png)no-repeat ;}</style>');
// New Styles for Grepolis Tools Menu
$('#gt_links').css({'position':'relative','top':'139px','height':'auto','width':'138px','margin':'auto','font-size':'12px','font-weight':'bold','color':'#ffcc66','text-decoration':'underline','margin-top':'5px'});
$('#gt_links li, ul').css ({'margin':'0','padding':'0','list-style':'none'});
$('#gt_links li a').css({'display':'inline','position':'relative','font-size':'10px','font-weight':'normal','text-decoration':'none','color':'#ffcc66'});
$('#gt_links a').css({'display':'inline','position':'relative','font-size':'10px','font-weight':'normal','text-decoration':'none','color':'#ffcc66'});
// Must put in style append to body to get background image to work with inline display
$('body').append('<style>#gt_links a:hover{background:none;}#gt_links li:hover{background:url(/images/game/layout/menu_hover.png)no-repeat;}</style>');
What is happening is that I am appending a div with an unordered list inside it after the div with the id of links.
The issue I am having is that the li that has the two href tags in one li in my gt_tools div area aren't showng up on the same line. Also when you mouse over the links you don't see the hand cursor..
Any ideas?