SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist Jhorra's Avatar
    Join Date
    Sep 2004
    Location
    Phoenix, Az
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Part of my CSS menu is suddenly not working

    It's the links underneath the contest link. All the other sub links drop down underneath the main link, but these two links for some reason are going to the side. It functions fine in Firefox, the problem only exists in IE.

    You can see the menu live with this action at http://www.uvntv.com

    Here's the menu itself
    Code:
    <div id="nav">
    	<ul id="nav_ul">
    		<li><a href="/tv">WATCH TELEVISION</a></li>
    		<li>
    			<a class="trigger" href="/user">MY PROFILE</a>
    			<ul>
    				<li><a href="/user">HOME</a></li>
    				<li><a href="/profile/professional">EDIT</a></li>
    				<li><a href="/profile/myprofile">VIEW</a></li>
    				<li><a href="/messages">MESSAGES</a></li>
    				<li><a href="/profile/edit/section/photos">PHOTOS</a></li>
    				<li><a href="/blogs/view/user/jhorra">BLOG</a></li>
    				<li><a href="/user/hotlist">HOT lIST</a></li>
    			</ul>
    		</li>
    		<li><a href="/">COMMUNITY</a></li>
    		<li><a href="/user/search">BROWSE</a></li>
    		<li>
    			<a class="trigger" href="#">CONTESTS</a>
    			<ul>
    				<li><a href="/contests/rules/id/1">THE CASTING CALL</a></li>
    				<li><a href="/contests/rules/id/2">AFFILIATE CONTEST</a></li>
    			</ul>
    		</li>								
    		<li>
    			<a class="trigger" href="#">CASTING & MEDIA</a>
    			<ul>
    				<li><a href="#">COMING SOON</a></li>
    			</ul>
    		</li>
    		<li><a href="/corporate/contact">CORPORATE</a></li>
    		<li><a href="/login/register">JOIN</a></li>
    		<li><a href="/login/logout">LOGOUT</a></li>							
    	</ul>
    	<br class="clearit">
    </div>
    And here's the relevant CSS
    Code:
    #nav 
    {
    	height:20px;
    	line-height:20px;
    	background:#1e1e1e url(http://home.uvntv.com/public/images/site_section_heading_bg.jpg) repeat-x;
    	font-weight:bold;
    }
    .clearit 
    {
    	clear: both;
    	height: 0;
    	line-height: 0.0;
    	font-size: 0;
    }
    #nav_ul, #nav_ul ul 
    {
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	font-family: Arial, Helvetica, sans-serif;
    }
    #nav_ul a 
    {
    	display: block;
    	text-decoration: none;
    	padding: 0px;
    	color: #FFE400;
    }
    #nav_ul a.trigger 
    {
    	padding: 0px;
    }
    #nav_ul li 
    {
    	float: left;
    	padding:0px 15px;
    }
    #nav_ul ul li a  
    {
    	padding:0px;
    }
    #nav_ul li ul 
    {
    	position: absolute;
    	display: none;
    	background:#1e1e1e;
    	height:20px;
    	line-height:20px;
    }
    #nav_ul li:hover a, #nav_ul a:focus,
    #nav_ul a:active, #nav_ul li.li_hover a 
    {
    	color: #FFFFFF;
    }
    #nav_ul li:hover ul, #nav_ul li.li_hover ul 
    {
    	display: block;
    }
    #nav_ul li:hover ul a, #nav_ul li.li_hover ul a 
    {
    	color: #FFE400;
    	background-color: transparent;
    }
    #nav_ul ul a:hover 
    {
    	background-color: transparent!important;
    	color: #FFFFFF!important;
    }
    #nav_ul li
     {
     	width: auto;
    }

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Had a look at your site code, when this part is line-breaked and indented it is working ok:
    Code HTML4Strict:
    								<li><a class="trigger" href="#">CONTESTS</a><ul><li><a href="/contests/rules/id/1">THE CASTING CALL</a></li><li><a href="/contests/rules/id/2">AFFILIATE CONTEST</a></li></ul></li>				<li><a class="trigger" href="#">CASTING & MEDIA</a>
    Code HTML4Strict:
    <li><a class="trigger" href="#">CONTESTS</a>
    	<ul>
    		<li><a href="/contests/rules/id/1">THE CASTING CALL</a></li>
    		<li><a href="/contests/rules/id/2">AFFILIATE CONTEST</a></li>
    	</ul>
    </li>

    But strictly, it only needs a space after the CONTESTS link stop tag to fix the error.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not only that but you also don't need the DIV or the BR elements either.

  4. #4
    SitePoint Evangelist Jhorra's Avatar
    Join Date
    Sep 2004
    Location
    Phoenix, Az
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have the br in there because they have floats on them, so other elements on the page go below them.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So just apply clear: left; to the element that comes after the menu.


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
  •