css - List Item Background Image - Neighbor Floated Content Overlaps -

-

i've used list item background images customized bullets hundreds of times in past, , somehow never came across issue.

essentially, have img floated left of unordered list. bullet background images set top-left of each li. however, floated image covering bullets, browser treating list if it's still full width (as if floated image isn't there).

it's bit hard explain. here screenshot notes. http://img695.imageshack.us/img695/1328/cssquestion.jpg

here code snippets (sorry, can't upload server @ moment):

<h2>about us</h2>             <img src="image.jpg" class="img-left" />             <h3>heading</h3>             <p>text</p>              <ul>                 <li>list item one</li>                 <li>list item two</li>                 <li>list item three</li>             </ul>        ul { padding: 0;  margin: 0; }     ul li { background: url(../images/bg-main-bullet.gif) top left no-repeat;  list-style: none;  padding: 0;  margin: 0; }  .img-left {float: left; margin: 0 19px 0 0;}

does have ideas how achieve desired result?

any tips or input appreciated! thanks

the default style position lists "outside" meaning appear outside of related padding or margin. presumably have margin or padding on list or list items, pushing them past right side of graphic.

the fix set list style position "inside". try adding stylesheet (customize specificity of ul fit needs):

ul{ list-style-position: inside; }


Comments

Post a Comment

Popular posts from this blog

c++ - How do I get a multi line tooltip in MFC -

-
right now, have tool tip pops when hover on edit box. problem tool tip contains multiple error messages , in 1 long line. need have each error message on own line. error messages contained in cstring new line seperating them. my existing code below. bool ontooltiptext(uint, nmhdr* pnmhdr, lresult* presult) { assert(pnmhdr->code == ttn_needtexta || pnmhdr->code == ttn_needtextw); // need handle both ansi , unicode versions of message tooltiptexta* pttta = (tooltiptexta*)pnmhdr; tooltiptextw* ptttw = (tooltiptextw*)pnmhdr; // tchar szfulltext[256]; cstring strtiptext=_t(""); uint nid = pnmhdr->idfrom; if (pnmhdr->code == ttn_needtexta && (pttta->uflags & ttf_idishwnd) || pnmhdr->code == ttn_needtextw && (ptttw->uflags & ttf_idishwnd)) { // idfrom hwnd of tool nid = ::getdlgctrlid((hwnd)nid); } //m_errprojaccel[ch] contains 1 or more error messages each...
Read more

asp.net - In javascript how to find the height and width -

-
i having .aspx , masterpage page. in masterpage loading aspx page . in aspx page design using generating table structure using code-behind server in javascript how find height , width . regards, kumar if you're looking table height , width, should it var tbl = document.getelementbyid('tbldemo'); alert(tbl.offsetwidth + '\n' + tbl.offsetheight);
Read more

c# - DataTable to EnumerableRowCollection -

-
i have datatable according client requirement can contain invalid date "00/00/1999",null,empty string.(typed datset) when collect them enumerables wish convert of invalid forms empty string. (i.e) enumerablerowcollection<datarow> query = order in _table.asenumerable() select new { orderdate= string.isnullorempty(convert.tostring(order.field<datetime>("orderdate")) || (how check date invalid date) ? string.empty : order.field<datetime>("orderdate") } how check whether date valid date or not? datetime.tryparse...like given current code: datetime date; enumerablerowcollection<datarow> query = order in _table.asenumerable() select new { orderdate= string.isnullorempty(convert.tostring(order.field<datetime>("orderdate")) || !datetime.tryparse(convert.tostring(order.field<datetime...
Read more