Floating text on an image
Posted: Fri Sep 21, 2012 4:01 am
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.
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>