By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,723 Members | 1,665 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,723 IT Pros & Developers. It's quick & easy.

Positioning Text Over an Image

P: n/a
I'm having difficulities positioning text over an image. Specifically, I am
trying to position the text within each <div> to the topleft of each image
within that <div>.

The following works as I want it to in IE6, but the text is not properly
positioned in Mozilla 1.4.

A test page can be found here:

http://members.rogers.com/db-ls/test/textoverimage.html
CSS:

#navtabs { width: 190px; }
..navtab { position: relative; height: 19px; width: 190px; margin-bottom:
1px; }
..navtab img { cursor: pointer; }
..navtab p { position: absolute; float: left; left: 0px; top: 0px; z-index:
10; cursor: pointer; }

HTML:

<div id="navtabs">
<div class="navtab"><img src="/images/navtab_1.gif" id="navtab_1"
isrollover="yes" alt="" width="190" height="19"><p>link 1</p></div>
<div class="navtab"><img src="../images/navtab_2.gif" id="navtab_2"
isrollover="yes" alt="" width="190" height="19"><p>link 2</p></div>
<div class="navtab"><img src="../images/navtab_3.gif" id="navtab_3"
isrollover="yes" alt="" width="190" height="19"><p>link 3</p></div>
</div>

Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
"DB McGee" <no*****@noreply.com> wrote in
news:23******************@twister01.bloor.is.net.c able.rogers.com:
I'm having difficulities positioning text over an image. Specifically,
I am trying to position the text within each <div> to the topleft of
each image within that <div>.

The following works as I want it to in IE6, but the text is not
properly positioned in Mozilla 1.4.
Because it has a default top margin for paragraphs.
.navtab p { position: absolute; float: left; left: 0px; top: 0px;
z-index: 10; cursor: pointer; }


Add "margin: 0" (I see you've already taken out the "float: left").
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.