Member Avatar for kained

The code i'm using is fine in firefox and chrome but ie is keeping the bullet point as black.

Anyone know how i can hack round it?

.rightpane ul , .contentpane ul {
	padding:0;
	margin:0;
	margin-left:15px;
	text-align:left;
	list-style-type:disc;
	color: #007dc3;
	}
.rightpane ul li:first-line , .contentpane ul li:first-line {
	color: black;
	padding:0;
	margin:0;
	list-style-type:disc;
	text-align:left;
	font-family: Arial, Helvetica, sans-serif;	
	font-size:14px;
}

had a quick google for the li:first-line pseudo class but it has left me more confused quite frankly!

cheers,

dave

  • 3 Contributors
  • 4 Replies
  • 205 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by gogreen1

Dani AI

Generated

Short answer: the bullet is a generated “marker” and not part of the li text, so li:first-line won’t change it. ’s approach relies on the list color inheriting to the marker in modern browsers (Chrome/Firefox), but older IE will still draw a black marker. was right that a background image will always work; there are a couple of cleaner CSS approaches that give you a blue bullet and black text.

Modern + graceful fallback (works in current browsers; fallback for old IE):

  • Prefer the ::marker rule where available, then provide a :before fallback that inserts a colored glyph and hides the UA bullet. This keeps text color and bullet color independent.

Example (use your own selector instead of .blue-bullets):

ul.blue-bullets { margin:0; padding-left:1.4em; }

/* modern browsers */
ul.blue-bullets li::marker {
  color: #007dc3;
  font-size: 1.05em;
}

/* fallback for browsers without ::marker */
ul.blue-bullets li {
  list-style: none;
  position: relative;
  padding-left: 1.4em;
  color: #000; /* text color */
}
ul.blue-bullets li:before {
  content: '\2022';
  position: absolute;
  left: 0;
  top: 0.05em;
  color: #007dc3; /* bullet color */
  font-size: 1.05em;
  line-height: 1;
}

Image fallback (old IE safe): hide the native bullet and use a small PNG/SVG as a background or list-style-image, then adjust padding-left so text lines line up. This is the technique suggested and is the most compatible for IE6/7.

Quick troubleshooting checklist:

  • Make sure the page is in standards mode (valid DOCTYPE) — quirks mode changes list rendering in IE.
  • Watch list-style-position: inside (it makes the bullet part of the text flow and changes wrapping).
  • Check for competing color rules on the li that might override inheritance.
  • Test the chosen method in the specific IE version you must support; use image fallback for the oldest IE.

Recommended Answers

All 4 Replies

Member Avatar for gogreen1

can you just post the full HTML code ..so that its easy for us to check .:-)

Member Avatar for kained 
.rightpane ul , .contentpane ul {
	padding:0;
	margin:0;
	margin-left:15px;
	text-align:left;
	list-style-type:disc;
	color: #007dc3;
	}
	
.rightpane ul li , .contentpane ul li {
    list-style-type: disc;
}

.rightpane ul li:first-line , .contentpane ul li:first-line {
	color: black;
	padding:0;
	margin:0;
	list-style-type:disc;
	text-align:left;
	font-family: Arial, Helvetica, sans-serif;	
	font-size:14px;
}

well that is all the relevent css.

<td id="dnn_rightPane" width="224" rowspan="2" align="right" valign="top" class="rightpane"><div class="DnnModule DnnModule-DNN_HTML DnnModule-383"><a name="383"></a>
<!-- Basic Container -->
<div class="graybox">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>

        <td nowrap="nowrap"></td>
        <td valign="top" align="left" width="100%" class="title"><h2 class="graybox">
            <span id="dnn_ctr383_dnnTITLE_lblTitle" class="title">Latest News</span>



          </h2></td>
      </tr>
    </table>
    <div id="dnn_ctr383_contentPane" class="content"><!-- Start_Module_383 --><div id="dnn_ctr383_ModuleContent" class="ModDNNHTMLC">

	<div id="dnn_ctr383_HtmlModule_lblContent" class="Normal">
	<ul>
    <li>here is a little bit of content</li>
    <li>
    what happen if i do two lines?</li>
</ul>
</div>

and that is the right panes html code. The weird id's and stuff is beacuse it is a dnn site, but that isn't an issue.

dave

Member Avatar for ko ko

IE 7 and older cannot support pseudo element except anchor tags. Use black circle image as background-image and define the class to the first 'li' element and set the background-image in your CSS for the 'li' element and put appropriate spacing (padding left/right) to place the black circle.

Member Avatar for gogreen1

thanks for your info.even i was trying alot in IE 6 :-(

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.