Displaying Icons on a webpage

[refhat]

Hello I need to have three icons on my page.
1:mail icon 2:pdf icon 3: print icon.

I have written the following HTML for three icons. Remember I want these three icons to remain fixed and should not move with the page scroll.

I have created a div tag to hold these icons. This div rests inside a top level div element which holds the rest of the page(Main content, which can be printed).

My(part of) HTML content is below:

<div id="topmenu">
		<ul>
			<li><a href="#" title="pdf">pdf</a></li>
			<li><a href="mailto:refhat2@Gmail.com" title = "email">email</a></li>
			<li><a href="#" title="print">Print</a></li>
		</ul>
	</div>

And my CSS goes below:

#topMenu {
	height: 22px;
	overflow: visible;
	padding: 23px 20px 0 0;
	width: 695px;
}

#topmenu ul {
	float: right;
}

#topmenu ul li {
	float: left;
	margin-left: 8px;
	text-indent: -9999px;
}

#topmenu ul li a {
	background: url("images/icon_pdf.jpg") no-repeat top left;
	display: block;
	height: 20px;
	width: 20px;
}

#topmenu ul li a[title="email"] {
	background: url("images/icon_mail.jpg") no-repeat top left;
}

#topmenu ul li a[title="print"] {
	background: url("images/icon_print.jpg") no-repeat top left;
}

First I need to sort out how to display these icons and second I want this div tag to remain static so that icons dont move as the page scrolls as it is a one web page.
When I run this page , I dont find my icons anywhere on the page.Do you have any Idea as to where I am doing wrong here.

Thanks


Edit: In FF I am seeing three dots(I guess because of li) but Chrome doesn't display anything.

[ryanbutler]

Regarding your images showing up, are the images in the images directory and is the path correct? Continuing, regarding the bullets showing up, add the following to this existing rule:

#topmenu ul li {
	float: left;
	margin-left: 8px;
	text-indent: -9999px;
        list-style-type:none;
}

For the elements not scrolling with the page, you'll have to set your div that contains your content to:

#mycontent{
   position:fixed;
}

[refhat]

Regarding your images showing up, are the images in the images directory and is the path correct? Continuing, regarding the bullets showing up, add the following to this existing rule:

#topmenu ul li {
	float: left;
	margin-left: 8px;
	text-indent: -9999px;
        list-style-type:none;
}

For the elements not scrolling with the page, you'll have to set your div that contains your content to:

#mycontent{
   position:fixed;
}

Thanks for the reply.

Offcourse the icons are in the images folder, I have tried putting them in a parent directory(where my page exists) and changed the relative path. still it doesn't work.

Regarding bullets showing up, I am not worried about that as they dont appear in chrome. They just appear in FF and the text doesn't.

Thanks

[criterion9]

I'm betting your disappearing text has something to do with:

text-indent: -9999px;

Try 0 and see if your text comes back.

[refhat]

I'm betting your disappearing text has something to do with:

Try 0 and see if your text comes back.

Thank You, Ya it does But I dont want the text there rather I want my Icons there.

[criterion9]

Perhaps an image tag or an empty tag? If you move the indention the background image will also move.

[refhat]

If you move the indention the background image will also move.

But I do no where see my image on the page

[criterion9]

I would classes (or IDs) rather than advanced selectors (a[title="email"]) since that is not the most reliable across browsers.

<li>
   <a class="email">&nbsp;</a>
</li>
#topmenu ul li a.email {
//set background image here
}

Semantically it would make more sense to me for the img to be within the a tags and make use of the alt attribute as that would handle odd cases like text readers and such plus you wouldn't have to mess with negative indentions (which doesn't always work the same across rendering engines).

<li>
    <a href="whatever"><img src="email" alt="Email Icon" /></a>
</li>

[refhat]

Thanks Dude, I finally got over it. Also can I have a div fixed, i-e it should not scroll with the page. Actually My icons are in top level div, These icons will print the contents of the page that are in the second div(main central). I want the top div that holds the icons to remain static so that I can use icons to do their task, because my central div is scoll page.

I hope I am clear enough.

Thanks