UL bullets do not appear when to the right of an image - Bug?

Bontebok · Aug 21, 2003

Hi All,

If you view the following html in an IE browser, you will notice that the bullets on the list items to the right of the image will not appear.

Code:

  <img src=&quot;none&quot; width=&quot;100&quot; height=&quot;50&quot; align=&quot;left&quot;>
   <ul style=&quot;border: solid black 1px&quot;>
     <li>Test Test Test Test Test Test Test Test</li>
     <li>Test Test Test Test Test Test Test Test</li>
     <li>Test Test Test Test Test Test Test Test</li>
     <li>Test Test Test Test Test Test Test Test</li>
     <li>Test Test Test Test Test Test Test Test</li>
   </ul>

I have added a border on the ul block so that you can see that the border begins underneath the image and extended out to the right to the end of the text.

This makes sense, the browser is attempting to make sure that all of the bullets are inline with eachother, which they are, but are hidden by the image. You can see that when the list extends below the image, the bullets appear correctly.

In a perfect world, I would like the bullets to appear to the right of the image -without- setting a margin. I do not want to set a margin against the ul because the bullets will not fall back to the left of the image when they fall underneath it.
Here is my current work-around:

Code:

  <img src=&quot;none&quot; width=&quot;100&quot; height=&quot;50&quot; align=&quot;left&quot;>
   <ul style=&quot;margin-left: 128px; border: solid black 1px&quot;>
     <li>Test Test Test Test Test Test Test Test</li>
     <li>Test Test Test Test Test Test Test Test</li>
     <li>Test Test Test Test Test Test Test Test</li>
     <li>Test Test Test Test Test Test Test Test</li>
     <li>Test Test Test Test Test Test Test Test</li>
   </ul>

If you have any idea how to do this without using a margin-left, please let me know!

Thanks,

Bontebok

vbkris · Aug 21, 2003

well is this what u r looking for?

Code:

<html>
<table cellsapcing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot;>
<tr>
<td>
<img src=&quot;none&quot; width=&quot;100&quot; height=&quot;50&quot; align=&quot;left&quot;>
</td>
<td>
   <ul>
     <li>Test Test Test Test Test Test Test Test</li>
     <li>Test Test Test Test Test Test Test Test</li>
     <li>Test Test Test Test Test Test Test Test</li>
     <li>Test Test Test Test Test Test Test Test</li>
     <li>Test Test Test Test Test Test Test Test</li>
   </ul>
</td>
</tr>
</html>

Known is handfull, Unknown is worldfull

Bontebok · Aug 21, 2003

Nope, that does not allow the bullets to wrap from the right of the image to underneath the image.

What I'm looking for should look something like this:

Code:

 _________
|         |  * List Item
|  Image  |  * List Item
|_________|  * List Item

  * List Item
  * List Item
  * List Item

Bontebok

EdwardMartinIII · Aug 21, 2003

Oooooh.

You mean something like this:

Code:

<!DOCTYPE html 
     PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
     &quot;[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>[/URL]

<html xmlns=&quot;[URL unfurl="true"]http://www.w3.org/1999/xhtml&quot;[/URL] xml:lang=&quot;en&quot; lang=&quot;en&quot;>
  <head>
    <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;></meta>
    <title>List Fun!</title>
  <style type=&quot;text/css&quot;>
  <!--
  .spork {
     float: inline;
     padding-left: 20px;
  }
  -->
  </style>

  </head>
  <body>
    <img src=&quot;nose.gif&quot; height=&quot;100&quot; width=&quot;100&quot; alt=&quot;Nose&quot; border=&quot;0&quot; style=&quot;float:left;padding-right: 30px;&quot;></img>
    <div class=&quot;spork&quot;>
      <ul style=&quot;list-style-type: square;&quot;>
          <li>Ruth Bader Ginsburg</li>
          <li>David Hackett Souter</li>
          <li>Clarence Thomas</li>
          <li>Stephen Breyer</li>
          <li>Antonin Scalia</li>
          <li>John Paul Stevens</li>
          <li>William Hubbs Rehnquist</li>
          <li>Sandra Day O'Connor</li>
          <li>Anthony M. Kennedy</li>
          <li>Henry Baldwin</li>
          <li>Philip P. Barbour (1836-1841)</li>
          <li>Hugo L. Black (1937-1972)</li>
          <li>Harry A. Blackmun (1970-1994)</li>
          <li>John Blair (1789-1796)</li>
          <li>Samuel Blatchford (1882-1894)</li>
          <li>Joseph P. Bradley (1869-1892)</li>
          <li>Louis D. Brandeis (1916-1939)</li>
          <li>William J. Brennan (1956-1990) </li>
          <li>David J. Brewer (1889-1910) </li>
          <li>Henry B. Brown (1890-1906) </li>
          <li>Warren E. Burger (1969-1986)</li>
          <li>Harold H. Burton (1945-1958)</li>
          <li>Pierce Butler (1922-1940)</li>
          <li>James F. Byrnes (1941-1943)</li>
      </ul>
    </div>
  </body>
</html>

Sorry, can't be done. [smile]

Cheers,

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

CliveC · Aug 23, 2003

Edward, Do you know why they used to call it the "Burger Court"?

Clive

http://tubularity.com

EdwardMartinIII · Sep 4, 2003

Because "Burger King" was already taken? [lol]

Cheers,

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

TheConeHead · Sep 4, 2003

what if you say <img .... align="left">
<ul>......

shouldn't that work?

EdwardMartinIII · Sep 4, 2003

You mean the thing that was listed in the first post, that didn't work? [smile]

Cheers,

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

TheConeHead · Sep 4, 2003

[tongue

TheConeHead · Sep 4, 2003

needtoknowurgently · Oct 27, 2003

Bontebok,
Did you find a solution for this problem? I'm having the same problem...

Bontebok · Oct 28, 2003

needtoknow:

Sorry, I did not find the solution. What I believe was happening is illustrated in my ascii drawing below.

_________
| * | List Item
| *Image | List Item
|_*_______| List Item
* List Item
* List Item
* List Item

Notice the bullets being placed behind the image? I believe this is caused by the browser not being able to align bullets around an image. The image covers the bullets, but if the image was broken, you will be able to see the bullets behind the broken image.

I did however come up with a workaround that does not produce the exact results I wanted, but did display the bullets.

Place a left margin on the UL tag. This will push the bullets over and produce a result like below:

_________
| | * List Item
| Image | * List Item
|_________| * List Item
* List Item
* List Item
* List Item

Remember, you could always replace the bullets with real images.

Bontebok

Battalion · Oct 28, 2003

Try this... you will have to play with the width a little but it should work

<html>
<table cellsapcing="0" border="1" cellpadding="0" border="0">
<tr>
<td>
<img src="none" width="100" height="50" align="left">
</td>
<td>
<ul>
<li>Test Test Test Test Test Test Test Test</li>
<li>Test Test Test Test Test Test Test Test</li>
<li>Test Test Test Test Test Test Test Test</li>
</ul>
</td>
</TR>
<TR>
<TD>
<UL>
<li>Test Test Test Test Test Test Test Test</li>
<li>Test Test Test Test Test Test Test Test</li>
</UL>
</TD>
</tr>
</table>

EdwardMartinIII · Oct 28, 2003

needtoknowurgently and Bontebok, although I am a known purveyor of Gargantuan Manuals of Animal Husbandry, I think it might not sufficiently taint my work such that the listing I placed above, dated Aug 21, would be unusable to you.

I have confirmed it functions in IE and Mozilla and a brand new browser called GroverClevelandWearsNoPantsBrowser.

If you cannot make it work, then I would like to know so I can report an obvious bug to the previously mentioned browsers.

Unless it's really, really urgent.

Cheers,

[monkey]

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

Bontebok · Oct 29, 2003

Edward,

Your code was tested under IE 5.5 and does not work, it produces the same results when using align="left" without any styles. Our organization does not use IE 6 or Mozilla so I did not bother testing it in other browsers.

I interpreted your sarcasm at the bottom of your original post to be a statement that it infact could not be done, the length of your post also helped convinced me of this. Perhaps other people interpretted it in the same way or they may have been using IE 5.5.

I found an IE 6 browser and tested your code there, it does infact work under IE 6. The bullets correctly align themselves to the right side of the image and correctly align themselves to the left below the image.

To all that may be reading this thread to find a solution, EdwardMartinIII has provided a solution for IE 6 and as he pointed out Mozilla as well. See the 4th post for the code.

Bontebok

EdwardMartinIII · Oct 29, 2003

"I interpreted your sarcasm at the bottom of your original post to be a statement that it infact could not be done, the length of your post also helped convinced me of this."

Well, in theory, the smiley-face is supposed to suggest I'm joking.

How a long post could suggest it couldn't be done is beyond me, but okay.

"Your code was tested under IE 5.5 and does not work..."

Oh, you had a browser restriction! That's a different kettle of fish. Ya' gotta tell me these things -- I figured when I hadn't heard back that you had just grabbed a solution and scampered.

How much support for styles was in IE5.5? I thought it was pretty good about that. Hm, from

http://msdn.microsoft.com/workshop/author/

dhtml/overview/compat.asp:
As of Internet Explorer 5.5, border, margin, and padding attributes are supported on inline elements, such as the span element.

...which are the tags I used. And you say it didn't do the trick for you?

Hm, further searching indicates 5.5 isn't nearly as supportive of CSS as Microsoft claimed it was, particularly with inline styles, which is pretty much the only way I can think of solving your problem dynamically. Further searching, in fact, reveals the presence of known bugs in 5.5 for certain positioning.

Do any of the positioning tests at

http://richinstyle.com/test/

work for whatever browser you're using?

Regardless, it's probably best to treat it like the cranky old browser it is.

Code:

<!DOCTYPE html 
     PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
     &quot;[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>[/URL]

<html xmlns=&quot;[URL unfurl="true"]http://www.w3.org/1999/xhtml&quot;[/URL] xml:lang=&quot;en&quot; lang=&quot;en&quot;>
  <head>
    <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;></meta>
    <title>List Fun for cranky old browsers!</title>
  </head>
  <body>
    <img src=&quot;nose.gif&quot; height=&quot;100&quot; width=&quot;100&quot; alt=&quot;Nose&quot; border=&quot;1&quot; align=&quot;left&quot; ></img>
    <ul>
      <li>Ruth Bader Ginsburg</li>
      <li>David Hackett Souter</li>
      <li>Clarence Thomas</li>
      <li>Stephen Breyer</li>
      <li>Antonin Scalia</li>
      <li>John Paul Stevens</li>
      <li>William Hubbs Rehnquist</li>
      <li>Sandra Day O'Connor</li>
      <li>Anthony M. Kennedy</li>
      <li>Henry Baldwin</li>
      <li>Philip P. Barbour (1836-1841)</li>
      <li>Hugo L. Black (1937-1972)</li>
      <li>Harry A. Blackmun (1970-1994)</li>
      <li>John Blair (1789-1796)</li>
      <li>Samuel Blatchford (1882-1894)</li>
      <li>Joseph P. Bradley (1869-1892)</li>
      <li>Louis D. Brandeis (1916-1939)</li>
      <li>William J. Brennan (1956-1990) </li>
      <li>David J. Brewer (1889-1910) </li>
      <li>Henry B. Brown (1890-1906) </li>
      <li>Warren E. Burger (1969-1986)</li>
      <li>Harold H. Burton (1945-1958)</li>
      <li>Pierce Butler (1922-1940)</li>
      <li>James F. Byrnes (1941-1943)</li>
      </ul>
  </body>
</html>

You'll have to fiddle with your padding values, of course, but it might do the trick.

I have no idea how to test this under IE 5.5, other than via you, so you'll have to let me know if it works.

Cheers,

[monkey]

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

EdwardMartinIII · Oct 29, 2003

Ack! Try changing the IMG line to

Code:

<img src=&quot;nose.gif&quot; height=&quot;100&quot; width=&quot;100&quot; alt=&quot;Nose&quot; border=&quot;0&quot; align=&quot;left&quot; style=&quot;padding:20px;&quot;></img>

Does that work in Mosaic, er, I mean IE 5.5?

Cheers,

[monkey]

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

UL bullets do not appear when to the right of an image - Bug?

Bontebok

Programmer

vbkris

Programmer

Bontebok

Programmer

EdwardMartinIII

Technical User

CliveC

Programmer

EdwardMartinIII

Technical User

TheConeHead

Programmer

EdwardMartinIII

Technical User

TheConeHead

Programmer

TheConeHead

Programmer

needtoknowurgently

Programmer

Bontebok

Programmer

Battalion

Programmer

EdwardMartinIII

Technical User

Bontebok

Programmer

EdwardMartinIII

Technical User

EdwardMartinIII

Technical User

Similar threads

Part and Inventory Search

Sponsor