Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6

Thread: CSS Menu issues

  1. #1
    Junior Member randi's Avatar
    Join Date
    Jul 2010
    Location
    Durham, NC
    Posts
    12
    Member #
    22667
    Attachment 3485
    Picture 1 is a Safari screen capture
    Attachment 3486
    Picture 2 is a Firefox screen capture

    Commercial Photographers Raleigh | Professional Photography Raleigh is the webpage

    The menu when hovered should look like the firefox one... I'm still trying to figure out how to add more distance below the last menu item, since the shadow box cuts into the text. What do I have to do to the css for it to work in safari???
    Attached Images Attached Images

  2.  

  3. #2
    Member JayWood's Avatar
    Join Date
    Oct 2010
    Location
    East Coast U.S.
    Posts
    55
    Member #
    24240
    Unfortunately I can't really tell what's affected at the moment. I don't have my web tools on me I'll have a looksee when I get home in a couple hours however.

    If anyone else is trying to solve this problem I've conveniently posted the code that should be affecting the layout for you, see below:

    The CSS
    Code:
    @charset "UTF-8";
    @import url("raleigh_nc_photography_9_import_01_rh.css");
    ul.dropdown
    {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-variant: normal;
    	font-weight: bold;
    }
    ul.dropdown li
    {
    	background-color: #ded9cd;
    	color: #74593c;
    	font-variant: normal;
    	letter-spacing: 0.1em;
    	padding-bottom: 5px;
    	padding-left: 12px;
    	padding-right: 7px;
    	padding-top: 0px;
    	text-transform: uppercase;
    }
    ul.dropdown li.hover,
    	ul.dropdown li:hover
    {
    	background-color: #cfc8b6;
    }
    ul.dropdown a:link,
    	ul.dropdown a:visited
    {
    	color: #74593c;
    	text-decoration: none;
    }
    ul.dropdown a:hover
    {
    	color: #fff;
    }
    ul.dropdown a:active
    {
    	color: #fff;
    }
    ul.dropdown ul
    {
    	background: url(images/dropdown_pane.png) 0 100% no-repeat;
    	color: #74593c;
    	font-size: 14px;
    	font-variant: normal;
    	font-weight: bold;
    	margin-left: -6px;
    	padding-bottom: 9px;
    	text-align: left;
    	text-transform: capitalize;
    	width: 170px;
    }
    ul.dropdown ul li
    {
    	background-color: transparent;
    	color: #74593c;
    	font-variant: normal;
    	letter-spacing: 0em;
    	text-align: left;
    	text-transform: capitalize;
    }
    ul.dropdown ul li.hover,
    		ul.dropdown ul li:hover
    {
    	background-color: transparent;
    	font-weight: normal;
    }
    ul.dropdown ul li.empty
    {
    	font-weight: bold;
    	padding-bottom: 0px;
    	padding-left: 12px;
    	padding-right: 12px;
    	padding-top: 0px;
    }
    ul.dropdown ul a:link,
    		ul.dropdown ul a:visited
    {
    	color: #74593c;
    }
    ul.dropdown ul a:hover
    {
    	color: #74593c;
    	font-weight: bold;
    	text-decoration: none;
    }
    ul.dropdown ul a:active
    {
    	color: #74593c;
    }
    ul.dropdown ul ul
    {
    	display: none;
    }
    ul.dropdown ul ul li
    {
    }
    ul.dropdown *.dir
    {
    	background-image: none;
    	background-position: 100% 50%;
    	background-repeat: no-repeat;
    	padding-right: 12px;
    }
    ul.dropdown li a
    {
    	display: block;
    	padding: 7px 12px;
    }
    ul.dropdown li
    {
    	padding: 0;
    }
    ul.dropdown li.dir
    {
    	padding-bottom: 0px;
    	padding-left: 20px;
    	padding-right: 20px;
    	padding-top: 0px;
    }
    ul.dropdown ul li.dir
    {
    	padding-right: 15px;
    }
    ul.dropdown li
    {
    }
    ul.dropdown ul a
    {
    	padding-bottom: 5px;
    	padding-left: 12px;
    	padding-right: 5px;
    	padding-top: 0px;
    	width: 170px;
    }
    ul.dropdown ul a:hover
    {
    	background-color: #ded9cd;
    	border: solid 1px #ddd;
    	font-weight: bold;
    	padding-bottom: 1px;
    	padding-left: 11px;
    	padding-right: 5px;
    	padding-top: 1px;
    	width: 170px;
    }
    ul.dropdown ul a.dir
    {
    }
    *
    {
    	margin: 0;
    	padding: 0;
    }
    body
    {
    	background-color: #CFC8B5;
    	background-position: 0 0;
    	font: 14px/normal Tahoma, Arial, Helvetica, sans-serif;
    	padding: 0px;
    }
    h1
    {
    	border-bottom: solid 1px #d9d9d9;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 180%;
    	font-weight: normal;
    	letter-spacing: -1px;
    	margin-bottom: .5em;
    	text-indent: 5px;
    }
    cite
    {
    	float: right;
    }
    ul.classic
    {
    	list-style: disc;
    	margin-bottom: 1em;
    	padding-left: 2em;
    }
    div.section
    {
    	clear: both;
    	padding-top: 50px;
    }
    * html ul.dropdown ul
    {
    	background-image: url(images/dropdown_pane_8bit.png);
    	width: 170px;
    }
    ul.dropdown,
    ul.dropdown li,
    ul.dropdown ul
    {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    ul.dropdown
    {
    	float: left;
    	position: relative;
    	z-index: 1000;
    }
    ul.dropdown li
    {
    	float: left;
    	line-height: 0.9em;
    	vertical-align: middle;
    	zoom: 1;
    }
    ul.dropdown li.hover,
    ul.dropdown li:hover
    {
    	cursor: default;
    	font-weight: normal;
    	position: relative;
    	z-index: 1000;
    }
    ul.dropdown ul
    {
    	left: 0;
    	position: absolute;
    	top: 100%;
    	visibility: hidden;
    	width: 100%;
    	z-index: 1000;
    }
    ul.dropdown ul li
    {
    	float: none;
    }
    ul.dropdown ul ul
    {
    	left: 99%;
    	top: 1px;
    }
    ul.dropdown li:hover > ul
    {
    	font-weight: normal;
    	visibility: visible;
    	width: 170px;
    }
    The HTML itself, the LI navigation, and FYI it is wrapped in a UL tag
    HTML Code:
    <ul class="dropdown dropdown-horizontal" id="nav" name="nav">
    <!-- more li tags, excluded for brevancy -->
                  <li><a href="http://www.newimagestudio.com/corporate_commercial_photographers/nc_commercial_photography.html" title="Commercial Photography" class="dir">Commercial</a>
    		<ul>
    			<li><a href="http://www.newimagestudio.com/corporate_commercial_photographers/nc_commercial_photography.html" title="Commercial Photography">Commercial</a></li>
    			<li><a href="http://www.newimagestudio.com/corporate_commercial_photographers/headshots/headshots.html" title="Headshot Photography">Headshots</a></li>
    			<li><a href="http://www.newimagestudio.com/corporate_commercial_photographers/buildings/building_photographer.html" title="Building Photography">Buildings</a></li>
    			<li><a href="http://www.newimagestudio.com/corporate_commercial_photographers/food/food.html" title="Food Photography">Food</a></li>
    			<li><a href="http://www.newimagestudio.com/corporate_commercial_photographers/annual_report/annual_report.html" title="Annual Reports">Annual Reports</a></li>
    			<li><a href="http://www.newimagestudio.com/corporate_commercial_photographers/model/model.html" title="Model Photography">Models</a></li>
    			<li><a href="http://www.newimagestudio.com/corporate_commercial_photographers/band/band.html" title="Band Photography">Bands</a></li>
    			<li><a href="http://www.newimagestudio.com/corporate_commercial_photographers/ad_design/ad_design.html" title="Ad Designs">Ad Designs</a></li>
    			<li><a href="http://www.newimagestudio.com/slideshows/woodwise" title="Corporate Slideshow">Corporate Slide</a></li>
    			<li><a href="http://www.newimagestudio.com/slideshows/raynor1" title="Model Slideshow">Model Slide</a></li>
    		</ul>
    	</li>
    <!-- more li tags, excluded for brevancy -->
    </ul>
    I suspect it is a discrepancy in the style declarations on the ul li ul order of tags. Though as I said, I can't look until I get home Work is more important atm
    Don't forget to Rep people if they've helped you, it's just the right thing to do.
    My Site - JJ's Webs
    My oDesk Profile - Hire me on oDesk
    My Themeforest Profile - Just for you TF people!

  4. #3
    Member WPExplorer's Avatar
    Join Date
    Apr 2010
    Location
    USA
    Posts
    89
    Member #
    21716
    It looks like you got it working...yes?

    By the way you should add a bit more space at the bottom of your drop-down as the last link is cut off.

    In the future you may want to use the SuperFish code for your drop-down menu's it is very easy to work with and you can download the HTML, jQuery and CSS.

    Superfish - Suckerfish on 'roids

  5. #4
    Junior Member randi's Avatar
    Join Date
    Jul 2010
    Location
    Durham, NC
    Posts
    12
    Member #
    22667
    Thanks for the replies guys. I'm working on the menu now and see what you're saying about the HTML written badly... This was my first menu I didn't start from scratch or use a template.. I used and customized and it kind of turned into a mess.

    And How exactly does the Superfish work? I haven't done much research on it, but I have to have jQuery first??? I don't have much experience with that. Is it a separate program I need?

  6. #5
    Member WPExplorer's Avatar
    Join Date
    Apr 2010
    Location
    USA
    Posts
    89
    Member #
    21716
    SuperFish is pretty much the easiest and one of the best ways to create drop down menus.

    Yes you need to add some jQuery to your site, but if you visit the main SuperFish page you can download everything and pretty much copy and paste into your design, than edit the CSS appropriately.

    If you plan on creating any more websites in the future, it would be a good tool to have.

  7. #6
    Banned
    Join Date
    Oct 2010
    Posts
    11
    Member #
    24426
    your css is not compatible for all browser for resolving this use all browser compatibility code with helps you for this problem


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:44 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com