SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    England
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Drop down menu problem in IE (only of course!)

    Hi everyone!

    I have a little issue with my drop down menu which I'm using from Dynamic Drive link here -

    http://www.dynamicdrive.com/style/cs...ss_menu_2/P30/

    The link to the website is here: http://www.weresolucky.com/pc/

    This hover menu link is making the whole design be pushed down an inch only in IE. Here is what it looks like:

    http://imgur.com/TPrn8

    Any information would be great!

    I'm also getting this error message when my webpage loads, how do I remove this error? :/

    http://imgur.com/WbPUH

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    As for the 2nd error message. It's because your Javascript is faulty. Head on over there after this and provide them your website and that image of hte error .

    Now onto the first...Never ever ever ever ever use Dynamic Drive scripts. From every script I've seen in the past, it's complete crap .

    The Javascript is probably to blame. Do this. Replace your whole ddstyle.css file (whatever that name is) with this code. I modified it a good bit (it's not perfect but it's a heck of a lot better )

    Code:
    .ddsmoothmenu {	font: bold 12px Verdana;
    	background: #e46d18; /*background of menu bar (default state)*/
    	width: 90%;
    	margin: auto;
    	-webkit-border-radius: 12px;
    	-moz-border-radius: 12px;
    	border-radius: 12px;
    	padding: 0px 20px 0px 20px;
    }
    .ddsmoothmenu ul {
    	z-index:100;
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    }
    /*Top level list items*/
    .ddsmoothmenu ul li {
    	position: relative;
    	display: inline;
    	float: left;
    }
    .ddsmoothmenu li.right {
    	position: relative;
    	display: inline;
    	float: right;
    	list-style-type: none;
    }
    .ddsmoothmenu li.right a {
    	display: block;
    	background: #e46d18; /*background of menu items (default state)*/
    	color: white;
    	padding: 8px 10px;
    	text-decoration: none;
    	border-left: 1px solid #fff;
    	
    }
    .ddsmoothmenu li.right a:hover {
    	background: #ff8b38; /*background of menu items during onmouseover (hover state)*/
    	color: white;
    	
    }
    
    
    .ddsmoothmenu .rightselected a{
    	background-color: #4f4f4f;
    	display: block;
    	color: white;
    	padding: 8px 10px;
    	text-decoration: none;
    	border-left: 1px solid #fff;
    	position: relative;
    	display: inline;
    	float: right;
    	list-style-type: none;
    }
    
    
    .ddsmoothmenu .selected a{
    background-color: #4f4f4f;
    
    
    }
    .ddsmoothmenu ul {
    	position: relative;
    	display: inline;
    	float: left;
    }
    /*Top level menu link items style*/
    .ddsmoothmenu ul li a {
    	display: block;
    	background: #e46d18; /*background of menu items (default state)*/
    	color: white;
    	padding: 8px 10px;
    	border-right: 1px solid #fff;
    	text-decoration: none;
    	
    }
    .ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited {
    	color: white;
    }
    .ddsmoothmenu ul li a.selected { /*CSS class that's dynamically added to the currently active menu items' LI A element*/
    	background: #ffb682;
    	color: fff;
    }
    .ddsmoothmenu ul li a:hover {
    	background: #ffb682; /*background of menu items during onmouseover (hover state)*/
    	color: white;
    }
    .ddsmoothmenu ul li:hover ul
    {
    	margin:0;
    }
    .ddsmoothmenu ul li
    {
    	position:relative;
    }
    /*1st sub level menu*/
    .ddsmoothmenu ul li ul {
    	position: absolute;
    	left: 0;
    	margin-left:-999em;
    	top:100%;
    	
    }
    /*Sub level menu list items (undo style from Top level List Items)*/
    .ddsmoothmenu ul li ul li {
    	display: list-item;
    
    
    	position:static;
    	float: none;
    	opacity: 0.9;
    }
    /*All subsequent sub menu levels vertical offset after 1st level sub menu */
    .ddsmoothmenu ul li ul li ul {
    	top: 0;
    }
    /* Sub level menu links style */
    .ddsmoothmenu ul li ul li a {
    	font: normal 13px Verdana;
    	width: 160px; /*width of sub menus*/
    	padding: 5px;
    	margin: 0;
    	border-top-width: 0;
    	border-bottom: 1px solid #fff;
    }
    /* Holly Hack for IE \*/
    * html .ddsmoothmenu {
    	height: 1%;
    } /*Holly Hack for IE7 and below*/
    /* ######### CSS classes applied to down and right arrow images  ######### */
    
    
    .downarrowclass {
    	position: absolute;
    	top: 12px;
    	right: 7px;
    }
    .rightarrowclass {
    	position: absolute;
    	top: 6px;
    	right: 5px;
    }
    
    
    /* ######### CSS for shadow added to sub menus  ######### */
    If you want slow motion hover for it, find a jquery script for it (Jquerys site should have one ready to be gotten)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    England
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply Ryan, I've made a post on their forum and I will take your advice

    Could you tell me what you did with the CSS? So I have an understanding for next time. Thanks

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Basically I set coordinates for the Absolutely positioned elements. Also I switched the way you displayed the dropdown. Well, you were relying on JS to do the dropdown, so I added CSS which would make it work without hover. I had to add a few things to make that work, such as position:relative on the top level <li>'s to be a stacking context for the dropdowns <ul>. Then I also added position:static to the dropdowns <li>'s to revert them back to normal since the top level was position:relative;

    I think I may have done some little things but taht's the gist of it .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    England
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again Ryan,

    Well I don't really see what you have done in the view of IE? It still makes the content drop down an inch

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I said not to use the Javascript but perhaps I should have been more specific .

    Remove the Javascript file for the dropdown.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •