Posted: Thu Aug 14, 2008 11:56 am unwanted space between left side and li
Okay, I am just getting back into coding and have been messing around with the html part. I have made a table, one col, two row. However ther is a huge space left of my list that I would like to get rid of and would like to know how it came about. So help for both would be appreciated. I will just give the code from where the table begins.
<table width=15% Rules=none Frame=Void cellspacing="0" cellpadding="0">
<tr BGCOLOR="blue">
<td>Useful Links</td>
</tr>
<tr>
<td>
<ul class="Navbartopleft">
<li><a href="kldjfido">Generator Sizing Guide</a></li>
<li>Rebates</li>
<li>Payment Methods/Discounts</li>
<li>Returns/Cancellation Policy</li>
<li>Shipping Policy</li>
</ul>
</td>
</tr>
By default list have a margin to the left to display the list-style-type. If you do not want the style to display it can be removed and using negative margin to slide the list back to the left.
This goes in the head section
Code:
<style type="text/css">
.Navbartopleft {
margin-left:-40px;/* move list to the left */
list-style:none;/* remove the left style */
}
.Navbartopleft li {
display:block;/* gives each list item it's own space to be styled */
margin:5px 0;/* adds space between each list item */
}
</style>
If you want the round circle next to the list item remove the line
Code:
list-style:none;
Now you must reduce the left-margin to accommodate the circle
You can use the css resets. Modify as needed. It will remove all browser defaults, eliminate padding and/or margins and list styles from lists. Works for all browsers.
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum
HTML Help Forum
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
