Floating images with an unordered list

I am having a problem trying to find the proper way to float an image to the left of an unordered list. In different browers it responds differently - the image will sometimes find it's way between the bullets and the text rather than having the bullets and text wrap around the right side of the image. I have changed margins to try to push the bullets as far out as possible. I've dragged the image to the end of of a line thinking that it will automatically float left of the bullets (of course I am using the .fltlft class). But the positioning is not consistent in any browser.

Thak Marksey and Nancy, but I am still having issues. I tried the container solution. I altered the source code to this (the bold is what I altered): (again, this is just one of the lists)
<p><a name="service" id="service"></a><strong>REGULAR OR SPECIAL SERVICE MUSIC EXPECTATIONS</strong></p>
<div style="fltlft">
<img src="saxophone.jpg" alt="sax" width="227" height="170" class="fltlft" />
</div>
    <ul>
      <li>Martha will work with the Director of Music to determine the overall service needs, from the theme of the service to particular musical requirements</li>
      <li>Martha will rehearse the choir and/or other musicians ahead of the service</li>
      <li>Martha will meet with the Liturgist and/or Pastor ahead of the service to coordinate any special requirements</li>
      <li>Martha and Dana will provide a prelude, a postlude, an offertory, gifts of music (special music), hymn accompaniment, liturgical music, incidental background music and accompaniment for any special music</li>
      <li>Martha and Dana will play for special services, such as Baptisms, Lessons and Carols, Candlelight Services, Christmas Eve, Lent, Capital Campaign Kickoff, Rally Day</li>
    </ul>
    <p class="clearfloat"/>
In firefox and and chrome it looks fine. But in Internet Explorer, the bullets in the list disappear. Internet explorer created most of the original problem. Before I made this change, the image appeared between the bullets and the text in IE.
I do have an external css attached to this page which has the .fltlft class which I applied to the images. But before I had not addressed the .clearfloat issue (which I also am not sure if I applied correctly).
What am I doing wrong????

Similar Messages

Floating images mess up bullet lists

When I place a floating object to the left of bulleted or numbered text, the bullet indentations fall apart. See attached image of a bulleted list. How does this get fixed? What is a work around?
Thnak you, Shawn

It isn't the only DTP program to get this wrong.
You'll have to manually set the left margin in for the bulletted text to the right. So whatever the width of the image make the left indent a little more.
Peter

How to make floating image with dim background

hi guys, i would like to know how to make a floating image and the background will dim? like for example when you click a thumbnail, the bigger version of that image will pop up on the same page and will have a dim background? can someone point me to a tutorial? any help would be appreciated, thanks in advance!

Hi,
If you look at the tutorials in fireworks such as changing images/rolover images you will start to get an understanding.
Cheers

Need Quick Help with Unordered List in Table (text too small)

Hi,
I have a table with 2 unordered lists and the font size is smaller than what I need.
I'm using CSS and have checked all of my font sizes and I have all of what I consider my normal text set to 12.
When my client views the page on his browser, the unordered lists appears to be about a size 8. I checked on my cell phone and I see what he's talking about.
I set the <ul> and <li> to font size 12, but the problem still exists.
It's almost like the table is scaling the text down.
I worked all night trying to figure out what I've done wrong (newbie ) and I can't fix it and my client is waiting!
Here's the page: http://www.precisioncleaning.com/expert_witness_services.html
Please help!
Thanks,
Kathy

I tried adding a new CSS rule to the table font, but it didn't work.
I also edited the <tr> and <td> but still didn't work.
I think something higher up is messing the table up. I don't know anything about specificity or how to see who has the power to overwrite the table.
Do you?

Rounded corners on unordered list

I'd like to be able to have style my vertical menu, made with
an
unordered list, to have rounded corners. The menu is a fixed
width, but
the items could sometimes run onto two lines, so the height
of each item
needs to be flexible.
I created images called top.gif and bottom.gif for the curves
and when
I've done boxes I've made the bottom image a background to
the box div
tag and the top image a background to the heading tag within
the div.
However with the unordered list I don't really have two
elements to
attach the images to, if you understand what I mean?
I've been googling but haven't yet found a solution. Can
anyone
recommend a way of doing this?
Thanks
Vix

> I've been googling but haven't yet found a solution. Can
anyone recommend
> a way of doing this?
Could could wrap the UL in a DIV, giving you two elements.
You could give the first LI and last LI custom classes,
giving you to
elements.
While not pristine, I often will use wrapper divs to attach
CSS too:
<div id="menuOuterwrapper">
<div id="innnerWrapper">
<ul>...</ul>
</div></div>
That works for me in that it keeps my 'style HTML' separate
from my 'content
HTML'.
A goofy interpretation of 'separation of style and content',
perhaps.
-Darrel

I have both Photoshop 4 and Photoshop 6 on my computer. When I am in Bridge and want to open an image by double clicking, it automatically opens in 6. I see, when I go to "open with" 6 is listed as "default" How can I change the "double click" defult to o

I have both Photoshop 4 and Photoshop 6 on my computer. When I am in Bridge and want to open an image by double clicking, it automatically opens in 6. I see, when I go to "open with" 6 is listed as "default" How can I change the default to open an image with a double click in 4?

You can associate files from the Bridge level and the Desktop level.
In Bridge CS4, go to Preferences > File Type Associations and change it to Photoshop CS4 for the file types you want.
If you want to open files from the Windows Desktop in CS4, these are the instructions:
Do this from the Windows Desktop:
If you want your image file to open in Photoshop and it doesn't, right click on it and choose
Open with > Choose default program… select Photoshop CS4 or CS6 and checkmark "always use the selected program to open this type of file".

How do I create an unordered list with three items and link to id's

How do I create an ordered list with three items and linl to id's on my page

Thanks, I guess what I was really asking, Is there a n option in the insert menu or somewhere where Dreamweaver does it for you.
I am not clear on what you are wanting DW to do for you? Is it that you want it to insert a three item unordered list? No - there's no such function. You would need to click in Design view where you want the list to go, click on the bulleted list icon on the Property inspector, and then enter the three items separated by carriage returns. Then you'd have to link each item specifically.
To enter the named anchors to element ID values, CS5 has no way to do this. You'd have to enter those links manually.

Most efficient way to insert into a story with many floating images?

I have a document with many floating images. They must all be floating because otherwise I do not get the Caption numbering right and it is impossible (because some images take an entire page) to use only anchored images.
Now, I have to insert a large part into the middle / at the beginning of a section. If I do that the text will flow, but the images remain in place. This is extremely slow working because of all teh movements I have to do on all the images. What I would like to do is to let the pages after the page where I am entering remain the same and when I insert text and images this should just move up one page at a time. Then, at the end, I can do the fine tuning of attaching both parts again. Is there a way to do that in an efficient way?
What I now often do is move all the floating images out of the pages, then insert the new stuff, move the images back, then make sure all the references are fine (e.g. if they refer to an image on another page, the style becomes paragraph number + page numer). For some sections this is a hideous amount of work (many, many images).
Is there a smarter way. I have been thinking about splitting and later rejoining a section. If I add pages to one section, the following sections are not damaged, after all.
What is the best way to do this?
Thanks in advance.

I have a document with many floating images. They must all be floating because otherwise I do not get the Caption numbering right and it is impossible (because some images take an entire page) to use only anchored images.
Now, I have to insert a large part into the middle / at the beginning of a section. If I do that the text will flow, but the images remain in place. This is extremely slow working because of all teh movements I have to do on all the images. What I would like to do is to let the pages after the page where I am entering remain the same and when I insert text and images this should just move up one page at a time. Then, at the end, I can do the fine tuning of attaching both parts again. Is there a way to do that in an efficient way?
What I now often do is move all the floating images out of the pages, then insert the new stuff, move the images back, then make sure all the references are fine (e.g. if they refer to an image on another page, the style becomes paragraph number + page numer). For some sections this is a hideous amount of work (many, many images).
Is there a smarter way. I have been thinking about splitting and later rejoining a section. If I add pages to one section, the following sections are not damaged, after all.
What is the best way to do this?
Thanks in advance.

Problem with One column Unordered list.

Help me out !!!
I have a "one column unordered list" as my report template. The query will return atleast 5 rows at any given point of time. The page shows only 3 records. I tried modifying "Number of Rows" attributes etc., nothing works.
Let me know what I'm doing wrong or how to fix it.
Thanks
- Richard

Thanks for replying, Scott
Here is the app http://htmldb.oracle.com/pls/otn/f?p=19793:1
I want to display only 4 rows (table has around 10 rows). I couldn't display more than 2. If I change the template, then everything works fine. Its just with the "One Column Unordered List" template that is not working.
Thanks.
- Richard.

In the process of reformatting my macbook pro, I saved everything but my keyword list. The keywords are with the images, but the total list I use under "Keywords" is not present. Is there a way to re-create all my keywords I've used over the last 6 year

In the process of reformatting my macbook pro, I saved everything but my keyword list. The keywords are with the images, but the total list I use under "Keywords" is not present. Is there a way to re-create all my keywords I've used over the last 6 years.

I accomplished what I needed last night. I remembered I had picked my favorite images from each year and put them in a "favorite" folder by year. These folders included 500 to 1200 images per year. I pulled up the folder for each year and highlighted all images and clicked on "Keywords" and all keywords used for all images were listed. I made those keywords persistent. It took me a while to realize I had to click on each keyword to make it persistent. After doing this for all years, I assume 95% of all keywords I have used over the many years were back in my list. I'm sure there is probably a more "technical" way to accomplish what I needed, but this seems to have worked. I also exported my list into a word document and is saved on my hard drive.
If I had not made folders with my favorite images for each year, I could not have used this method, so if you figure out a better way, I like to hear it. Thanks for your comments and willingness to help.

Unordered list with mouseover help

A question from the past... I thought I dealt with this a few years back, but can not find it up here.. I have an unordered list of values (in a list in an accordion region!!) and wish to have mouseover help for the list items..
Using APEX 4.0 on 11g Enterprise..
IE 7 (yea I know, don't get ME started on that..)
Can anyone shed light on how to do this again?
Thank you,
Tony Miller
Dallas, TX

Hi,
This might help.
http://dbswh.webhop.net/dbswh/f?p=BLOG:READ:0::::ARTICLE:2571800346711217
Regards,
Jari
My Blog: http://dbswh.webhop.net/dbswh/f?p=BLOG:HOME:0
Twitter: http://www.twitter.com/jariolai

Unordered list with pop out menu

I have an unordered list in a sidebar. After a user clicks on the link in the sidebar, I want a larger pop up window to appear with several links inside of that box that they can click on. What is the best way to do that?

http://css3menu.com/modern-css3-menu-bar.html
These are all CSS Menu's which can be modified to suit your requirements. If you are looking for a straight-forward drag, drop and play, your expectations may be a little too high. These take a simple list structure and style it. The modifications you would need to make would be in the CSS stylesheet.

DHTML List (Image) with Sublist and authorization problems

Dear all -
I wonder if anyone can help with this DHTML drop-down menu query:
We use hierarchical menus implemented as DHTML Lists (Image) with Sublists. When some of the items are hidden through authorization, the wrong headers appear for the menus.
For example:
Menu
  Item 1
    Subitem 1 of Item 1
    Subitem 2 of Item 1
  Item 2
    Subitem 1 of Item 2
    Subitem 2 of Item 2
Say Item 1 and its subitems are all hidden through authorization controls. The heading for Item 2 then appears as 'Subitem 2 of Item 1' instead of 'Menu'.
There's an example here:
http://htmldb.oracle.com/pls/otn/f?p=11837:1
Anyone know why this is happening?
Thanks for your time.
John.
PS. Any idea where my previous post on this subject has disappeared to?

Carl - in the example on htmldb.oracle.com, in Menu2 I'm hiding all the elements in Category 1 (parent and children), although not the 'grandparent' (Menu2).
I'm therefore still expecting the menu title to be 'Menu2', because that's Category 2's parent.
It doesn't appear to be an issue with the sequence of the items, because I've changed all those about and still got the same problem.
To be more specific, again using the htmldb.oracle.com example, in Menu2 we have:
Menu2
  Category 1 (Hidden)
    Item 1 of Category 1 (Hidden)
    Item 2 of Category 1 (Hidden)
    Item 3 of Category 1 (Hidden)
    Item 4 of Category 1 (Hidden)
  Category 2
    Item 1 of Category 2
    Item 2 of Category 2
And Scott - thanks for picking up the previous post - for some reason I couldn't for the life of me find that yesterday (in fact I still can't find it when I search).
Thanks for looking into this.
Regards,
John.

Centering a horizontal image with label list...

Hi there,
Image list is aligned to the left by default. I'd like to know if it's possible to aligned it to the center of page? If so, please educate me... Thank you in advance...
Chris :)
Edited by: Chris K.W. on Dec 11, 2009 8:54 AM

You've caused very little hassle. Microsoft on the other hand...
To do this using CSS you have to account for bugs in IE, meaning it takes 4 times longer than it needs to. We won't go into the ensuing unfortunate chain of events involving VMs, but it meant that I couldn't test this on IE8.
1. Set the template for the containing region to "No Template".
2. To cope with Microsoft's broken browsers, enter
in the Region Header, and
in the Region Footer.
3. Add this internal style sheet to the page HTML Header
<style type="text/css">
.t13HorizontalImageswithLabelList {
margin-left: auto;
margin-right: auto;
</style>If it doesn't work in IE8 then try removing 'lt' and '8' in step 2.
This will center all Horizontal Images with Label Lists on a page: we can change this if necessary, but will skip redundant code if it's not required.

Unordered list not printing correctly

I created a heading 3 followed immediately by an unordered
list. However, when I print the webpage out, I see the heading 3
fine and then the 1st bullet appears where it should but the text
for the first bullet begins several lines down the page. All the
other bullets are thus pushed down as well but the spacing for the
remaining bullets is fine. It's just that the text for the first
bullet begins way down the page. Everything looks OK in the
browser; just when printed is the problem.
Here is the process I followed. Selected heading 3 on the
property inspector and typed my heading. Then went to
insert-->html-->text objects-->unordered list and began
typing in the info for each bullet
My code is below. Please help.
<h3>Deposit Ticket Request</h3>
<ul>
<li>Deposit tickets will be paid for by Treasury
Operations provided they are ordered through our department and not
ordered as a RUSH</li>
<li>If a RUSH is requested it will be the
responsibility of the department to cover all charges for the
deposit tickets</li>
<li>Please allow 3-4 weeks for the deposit tickets to
arrive once they are ordered</li>
<li>Whenever a deposit is made, a deposit ticket MUST
be included, regardless of the amount, or the type of
deposit</li>
<li>The deposit tickets will be either a two or three
part ticket</li>
</ul>

.oO(Johnny the boy)
>Thanks for the reply Micha
>
> It appears the problem occurs in I.E. but is just fine
when printing in Firefox
>
> the site address to the page in question is
>
http://www.indiana.edu/~iutreas/test/forms/bankingdepositticketrequest.html
It's most likely an IE issue with floats. I already get this
effect in
the normal browser view - the form is pushed down after the
left-side
"New Items" box. The print preview looks even worse as
described.
Actually I don't have a quick solution at hand. A while ago I
had a
similar problem on one of my sites, but can't remember what I
did to
solve it ... In many cases it's enough to simply apply a
height: 1% or
zoom: 1
to the floated element to get the rendering right in IE. You
just have
to make sure that only IE sees these hacks. Conditional
comments are
really helpful for that.
Micha

Floating images with an unordered list

Similar Messages

Maybe you are looking for