Floating text on an image

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Floating text on an image

Post by shiznatix »

I am trying to float some text over top of some images for a navigation list. All of my original testing went really well (Chrome under Debian with Gnome) but now that I am looking at the site on Windows, there is a very big problem. The problem is that on FF and IE, the text does not float on top of the images but instead floats to the right of the image. Chrome on Windows works properly though.

My CSS skills are not very great so I am turning to you guys, hopefully someone can help me out. You can see the results in the image I have attached and below is the relevant CSS / HTML. I can post the full CSS / HTML if needed as well.

Code: Select all

#navigation
{
	float: left;
	width: 7%;
}
/** ...... **/
/*
Primary navigation
*/

#navigation ul
{
	list-style-type: none;
}

#navigation ul li
{
	position: relative;
	width: 85px;
	padding: 0px 0px 5px 0px;
}

#navigation ul li img
{
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
}

.caption
{
	position: absolute;
	top: 69px;
	width: 100%;
	text-align: center;
	font-weight: bold;
	float: left;
}

Code: Select all

<div id="navigation">
	<ul>
		<li>
			<?php echo $this->mainNav('/', 'navHome', 'Home') ?>
		</li>
		<li>
			<?php echo $this->mainNav('/invoices/', 'navInvoices', 'Invoices') ?>
		</li>
		<li>
			<?php echo $this->mainNav('/companies/', 'navClients', 'Companies') ?>
		</li>
		<li>
			<?php echo $this->mainNav('/products/', 'navProducts', 'Products') ?>
		</li>
		<li>
			<?php echo $this->mainNav('/settings/', 'navSettings', 'Settings') ?>
		</li>
		<li>
			<?php echo $this->mainNav('/users/', 'navUsers', 'Users') ?>
		</li>
		<li>
			<?php echo $this->mainNav('/domains/', 'navDomains', 'Domains') ?>
		</li>
	</ul>
<div>
Attachments
good.PNG
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Floating text on an image

Post by Celauran »

Code: Select all

.caption
{
        position: absolute;
        top: 69px;
        left: 0;
        font-weight: bold;
}
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Re: Floating text on an image

Post by shiznatix »

Celauran wrote:

Code: Select all

.caption
{
        position: absolute;
        top: 69px;
        left: 0;
        font-weight: bold;
}
the left: 0; did it! thanks!
Post Reply