Image covers list bullets

HTML & CSS
1

Hi,

I’m not sure if this is an html question or CSS?

I’ve created an interactive map using the wz_tooltip.js script and an image map. The popups work fine as you mouseover the buildign names but, within the pop up, I have an unordered list and a picture of the building aligned to the right of the list and an <h2> element.

The image covers over the <h2> element and the list appears over the image so that you can’t read the text. I have tried a bunch of different settings but can’t get it to work.

You can see the map here: http://explore.fortlewis.edu/campus_map2.asp

All the CSS and HTML is embeded in the page. The JS is an external file.

Does anyone have an idea why this will not work?

Thanks,

-sk

PS - The problem is mainly with IE.

2

mmm… i can’t seem to see your code but i would perhaps suggest adding padding to your image. maybe also include it in a div and then add padding to the div. that should push your text to the side and below.

3 
div h2 {float:left;}
div img {
float:right;
border:1px solid;
margin:6px;
}
div ul {
clear:left;
float:left; 
white-space:nowrap; 
margin-right:1em;
}

Change html

    <div id="foo">
      <h2>foo</h2><img src="foo.jpg" alt="" height="102" width="250">
      <ul>
        <li>foobar</li>
      </ul>
    </div>
4

well, on your ul element you are telling it to clear both sides, so then you will actually have to add a break and then the image will be on top with the text at the bottom. You also just perhaps need to wrap your float text…

for instance…

css


divwrapper {
	width:100%;
}
div h2 {
float:left;
width:48%;
}
div img {
float:right;
border:1px solid;
margin:6px;
width:50%;
}
div ul {
clear:left;
float:left; 
white-space:nowrap; 
margin-right:1em;
}

html


<div class="divwrapper">
  <h2>foo</h2><img src="foo.jpg" alt="" height="102" width="250">
  </div>
  <br style="clear:both" />
  <ul>
    <li>foobar</li>
  </ul>
</div>

alternatively, just let your image float within your container…

css


div h2 {
text-align:left;
}
div img {
float:right;
border:1px solid;
margin:6px;
}
div ul {
text-align:left;
margin-right:1em;
}

html


<div id="foo">
<img src="foo.jpg" alt="" height="102" width="250">
<h2>foo</h2>
<ul>
<li>foobar</li>
<li>foobar</li>
<li>foobar</li>
</ul>
</div>