Log in

View Full Version : Resolved PNG Pushes Nav Buttons Down



deathbycheese
11-04-2011, 08:03 PM
URL: http://www.firsttexasmedicalpartners.com/sandbox/

As you can see, the little house icon is pushing the next nav button down. Does anyone know how to stop this?

Thanks,
dbc


Edit: actually in IE it pushes the other nav buttons to the right leaving an exact button-width of space between.

auntnini
11-04-2011, 09:46 PM
I couldn't spot the problem, but some CSS styling must be puhsing team.html down.

What puzzels me is why you have ./ when there are no sub-folders in path to file? Use ../indea.html (two ../ dots) when you are in a sub-folder and want to get out of that sub-folder to go to top-level home page or to another sub-folder. If you are two sub-folders deep, you use ../../index.html to get out of two sub-folders.




http://www.firsttexasmedicalpartners.com/sandbox/index.html

<div id="mainNav">
<ul>
<li class="thisNav homeNav"><a href="./index.html"><img src="images/home.png" height="23"</a></li>
<li><a href="./team.html">Our Team</a></li>
<li><a href="./index.html">Key Alliances</a></li>
<li><a href="./index.html">History</a></li>
<li class="lastNav"><a href="./index.html">Investors</a></li>
</ul>
</div>

From <link rel="stylesheet" href="./css/style01.css" type="text/css" />
#mainNav ul .thisNav a{ width:109px; height:40px; position:relative; top:-1px; color:#fff;
background:url(../images/mainNavButtons.png) -220px 0px no-repeat; border: 0px solid #fff; }
.homeNav { width: 40px !important; overflow:hidden; text-align:left; }
.homeNav img { margin:5px 0px 0px 10px; float:left; border:0; }

From <link type='text/css' href='./css/contact.css' rel='stylesheet' media='screen' />
/* * SimpleModal Contact Form * http://www.ericmmartin.com/projects/simplemodal/
* http://code.google.com/p/simplemodal/
* * Copyright (c) 2010 Eric Martin - http://ericmmartin.com
* * Licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php
* * Revision: $Id: contact.css 254 2010-07-23 05:14:44Z emartin24 $ */

deathbycheese
11-04-2011, 09:54 PM
@auntnini.

Thanks for the off-topic remarks. I am aware of ./ vs ../ but it only seems to work as I have it now.


The only thing that is pushing Team down (or over) is the PNG. When I remove it, all is well.

deathbycheese
11-04-2011, 10:19 PM
It is now looking like the overflow:hidden nav button background image of the "short" button may be pushing the other one even though it's set to overflow:hidden.
So that means it's not the little home.png. This is worse! I hope someone out there has an idea.

deathbycheese
11-05-2011, 05:40 PM
Solved