Jump to content

List Indentation Issues


darkblade986
 Share

Recommended Posts

So I have a page set up that uses custom bullets. Got those set up just fine.Also have CSS established that creates 2 classes of bullets (akin to the list within a list) without actually using a new <ul> tag.The issue I have is with how Internet Explorer (v7 at least) and Firefox render these lists. It is significantly easier for my pages (when creating them) to not have to use the <ul> tag at all, which the CSS is set up to format these lists appropriately. However, when I do this, Internet Explorer creates a first line indent of about 15px, while Firefox keeps the first line even with the other lines. I'm looking to get rid of that indent, ideally through CSS, as several other pages are showing this issue too.Example page: https://www.nmnathletics.com/ViewArticle.db...TCLID=204842104Due to the way the page is set up, you won't be able to View Page Source and get the HTML or CSS, so I've provided them as well.The content isn't relevant, so the tag order is as follows:

<p>[text]</p><br /><li class="l1">[text]</li><li class="l1">[text]</li>[etc etc]<p>[text]</p>

The relevant CSS to those tags in the HTML is here as well (the bullet image is 34x16):

li.l1 { /*Top level list item; "L" "One"*/background-image:url('https://admin.xosn.com/pics10/0/JA/JASCXVGSAXUCLWV.20091119230545.gif'); /*RMU logo*/background-repeat:no-repeat;padding: 0px 0 0px 35px;margin: .4em 0;font-face: Arial;font-size: 16px;font-weight: bold;list-style: none;text-indent: 0px;}p {font-size: 16px;}

Now I did notice that if I do go in and add <ul> tags to these lists, the issue is solved, but it also causes the entire list (bullets and all) to be indented a full 42px and offsets it (vertically) an extra 6px. If using <ul> is the best option, I'm not sure what the appropriate CSS would be to correct these changes. May be an easy question, but my brain isn't working right now (Finals), so I'm not exactly sure what to do.

Edited by darkblade986
Link to comment
Share on other sites

I'm not sure if you need to declare li.l1 like that necessarily, but have you tried playing with margins and padding's of the <li>'s. Sometimes a common approach is to use the universal selector to remove all padding's and margins from all elements at the beginning of the CSS document, and then you can just add what positioning you need to each item as you start laying out your page. The reason this is a good technique is as you have found out, different browsers render different elements with their own interpreted default padding's and/or margins. This technique effectively resets all browsers to a defined default that you create and control.

Edited by thescientist
Link to comment
Share on other sites

The <ul> element has a default padding or 20 or 40 px (depending on the browser)Add the <ul> element and simply add padding: 0; to the CSS. It's incorrect to have <li> elements outside of a list.You might want to consider validating your website. You have duplicate <title> elements, duplicate <body> elements, duplicate <html> elements and all kinds of crazy tag combinations. There's no indication of which language the page is written in, and no consistency between upper- and lowercase tags.

Link to comment
Share on other sites

The <ul> element has a default padding or 20 or 40 px (depending on the browser)Add the <ul> element and simply add padding: 0; to the CSS. It's incorrect to have <li> elements outside of a list.
Alright, thanks.
You might want to consider validating your website. You have duplicate <title> elements, duplicate <body> elements, duplicate <html> elements and all kinds of crazy tag combinations. There's no indication of which language the page is written in, and no consistency between upper- and lowercase tags.
Unfortunately, I'm only able to access the content area of each page, not the menu bars. The website is handled by a system called "JumpTV Titan," and that allows me to modify the information in the white space only, which seems to keep itself independent from everything else (which allows me to use an external CSS document and only apply it to that area).
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...