PDA

View Full Version : Navibar on different computers

dashmacintosh
Jun-30-2009, 06:30 AM
Hello
I've created a navigation bar in my smugmug with pull down menu's, which looks great on my computer, yet certain computers don't recognise it, and jumbles everything together (and it looks really messy) This always happens using firefox or Mac's, but the problem isn't exclusive to these programs.

My question is if there is a "one size fit's all" option I can use...? Do you think this would solve the problem?

Joey
Allen
Jun-30-2009, 09:21 AM
Hello
I've created a navigation bar in my smugmug with pull down menu's, which looks great on my computer, yet certain computers don't recognise it, and jumbles everything together (and it looks really messy) This always happens using firefox or Mac's, but the problem isn't exclusive to these programs.

My question is if there is a "one size fit's all" option I can use...? Do you think this would solve the problem?

Joey We would need a link to your site to troubleshoot.
dashmacintosh
Jun-30-2009, 11:35 AM
my site is http://joeygoertz.smugmug.com/
Allen
Jun-30-2009, 02:36 PM
...
Change your header nav html to this, fixes a few errors and also switches to
relative links. Your CSS needs tweakin' to size and line up drop.

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Abstract">Abstract</a></li>
<li><a href="/Animals">Animals</a></li>
<li><a href="/Architecture">Architecture</a></li>
<li><a href="/Events">Events</a></li>
<li><a href="/Family">Family</a></li>
<li><a href="/Nature">Nature</a></li>
<li><a href="/Travel">Travel</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a href="/gallery/6051006_bY7Ds">Daily Photos</a></li>
<li><a href="/Clients">Clients</a></li>
<li><a href="/gallery/7925062_szNc6">Guestbook</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
jfriend
Jun-30-2009, 03:00 PM
Change your header nav html to this, fixes a few errors and also switches to
relative links. Your CSS needs tweakin' to size and line up drop.

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Abstract">Abstract</a></li>
<li><a href="/Animals">Animals</a></li>
<li><a href="/Architecture">Architecture</a></li>
<li><a href="/Events">Events</a></li>
<li><a href="/Family">Family</a></li>
<li><a href="/Nature">Nature</a></li>
<li><a href="/Travel">Travel</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a href="/gallery/6051006_bY7Ds">Daily Photos</a></li>
<li><a href="/Clients">Clients</a></li>
<li><a href="/gallery/7925062_szNc6">Guestbook</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
Allen, isn't there a </li> missing for the Galleries <li>?
Allen
Jun-30-2009, 03:07 PM
Allen, isn't there a </li> missing for the Galleries <li>?
Duh!! You're most certainly correct. He originally had </a></li> behind galleries
and I didn't see the missing one to close galleries. Thanks :thumb

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Abstract">Abstract</a></li>
<li><a href="/Animals">Animals</a></li>
<li><a href="/Architecture">Architecture</a></li>
<li><a href="/Events">Events</a></li>
<li><a href="/Family">Family</a></li>
<li><a href="/Nature">Nature</a></li>
<li><a href="/Travel">Travel</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/6051006_bY7Ds">Daily Photos</a></li>
<li><a href="/Clients">Clients</a></li>
<li><a href="/gallery/7925062_szNc6">Guestbook</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>

Why indenting is so important when constructing html.
dashmacintosh
Jun-30-2009, 07:52 PM
Great! That helps a lot. It seems to be working now. Thanks so much you guys. Now if I could only get the words on the navibar centered, I would be set!
jfriend
Jun-30-2009, 08:35 PM
Great! That helps a lot. It seems to be working now. Thanks so much you guys. Now if I could only get the words on the navibar centered, I would be set!

To center things at the top level, remove the line in red:

.menu ul li a,
.menu ul li a:visited {
display: block;
font-size: 1.2em; /* main buttons */
color: #FDEEF4 ; /* main buttons text non-hover*/
text-decoration:none;
text-align: center; /* centers text in buttons */
width: 100px; /* main box width */
height: 30px; /* main box height */
border: 1px solid blue; /* start your design with borders on, easier to position DD's & FO's */
border-width: 1px 1px 1px 1px;
background: #151B54; /* main button color */
padding-left: 15px;
line-height: 30px; /* positions text up/down in box */
}
dashmacintosh
Jul-01-2009, 07:51 AM
Great! Thanks again!
fthsm
Jul-03-2009, 12:27 AM
Allen, could you please take a look at my navbar? Some computers show my last two items, GuestBook and Search, on left hand side, under the banner.
www.fthsm.com
Allen
Jul-03-2009, 07:19 AM
Allen, could you please take a look at my navbar? Some computers show my last two items, GuestBook and Search, on left hand side, under the banner.
www.fthsm.com (http://www.fthsm.com)
See if this works better.

<div class="menu" align="right">
<ul>
<li><a href="/">Home</a></li>
<li><a class="drop" href="/gallery/8152317_udrd7">Galleries
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/keyword/favorites">Favorites</a></li>
<li><a href="/gallery/6542997_VVvhm">Birds</a></li>
<li><a href="/gallery/7868381_7kM5y">Butterflies</a></li>
<li><a href="/gallery/7539693_NuoJ6">Insects</a></li>
<li><a href="/gallery/7492637_bD4P7">Others</a></li>
<li><a href="/gallery/7889499_bSwCm">People&amp;Places</a></li>
<li><a href="/gallery/7441960_wnRQx">Me&amp;Myself</a></li>
<li><a href="/gallery/7481051_Npb6g">New Photos</a></li>
<li><a href="/gallery/7481051_Npb6g"> <font color="black">.</font></a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/7935534_xZ8b8">Links</a></li>
<li><a href="/gallery/7927212_ScVux">GuestBook</a></li>
<li><a href="/find">Search</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
fthsm
Jul-04-2009, 02:40 AM
Thanks a lot Allen. I noticed the difference in the code: !--[if lte IE 6
I will check it when I get back to work, as it was happening on some of my virtual machines. But I am quite sure that it is ok now.
MainlySports
Jul-06-2009, 04:58 AM
I am having the identical problem to dashmacintosh (http://www.dgrin.com/member.php?u=45194) vbmenu_register("postmenu_1147034", true); where things look fine on my computer (IE 7) however, others aren't seeing what I see and I'm at a loss for how to fix it. I have IE 6 at work and I try to access my site and it immediately crashes. I've also been told it doesn't look right in IE8 and Firefox.

I worked all weekend and finally got the drop down Navbar to look and work the way I want, now it seems that it doesn't work in different browsers. Can anyone take a look at my code and help me?
Thx.

http://smichael.smugmug.com