darkblade986 Posted December 1, 2009 Share Posted December 1, 2009 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. Link to comment Share on other sites More sharing options...
thescientist Posted December 1, 2009 Share Posted December 1, 2009 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. Link to comment Share on other sites More sharing options...
Ingolme Posted December 1, 2009 Share Posted December 1, 2009 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 More sharing options...
darkblade986 Posted December 1, 2009 Author Share Posted December 1, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.