Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS Nav bar not working in Firefox

    Hello one and all,

    As you can see from the following link:

    http://www.retrocalypse.co.uk/press_start.html

    The navigation bar for the comic (currently a blank slate) does not display properly in Mozilla Firefox. I'm currently using Chrome which displays perfectly & as does IE. However, Firefox shows the Next & Latest buttons appear on a separate line to the rest.

    Please find some of the CSS code i've applied to this area below to help diagnose the problem

    Code:
    #webcomic_border {
    	background:url(images/comic_bg.png) no-repeat;
    	width:706px;
    	height:1090px;
    	margin-left:auto;
    	margin-right:auto;
    	}
    #webcomic_nav {
    	float:left;
    	padding-top:5px;
    	padding-bottom:10px;
    	width:698px;
    	height:25px;
    	margin-left:auto;
    	margin-right:auto;
    	}
    	
    #webcomic {
    	width:700px;
    	height:1000px;
    	margin-left:auto;
    	margin-right:auto;
    	margin-bottom:5px;}
    	
    #webcomic_nav ul {
    	display:inline;
    	list-style:none;}
    	
    #webcomic_nav li {
    	list-style:none;
    	margin:0px;
    	padding:0px;
    	display:inline;
    	height:25px;
    	}
    
    #webcomic_nav a {
    	text-align:center;
    	display:block;
    	float:left;
    	width:116px;
    	height:25px;
    	text-decoration:none;}
    	
    .previous {
    	margin-left:2px;
    	margin-right:2px;
    	background:url(images/previous_bg.png) no-repeat;
    	display:block;
    	height:25px;
    	}
    	
    .previous:hover {
    	background:url(images/previous_hv.png) no-repeat;
    	display:block;
    	height:25px;}
    	
    .latest {
    	display:block;
    	margin-left:2px;
    	margin-right:2px;
    	background:url(images/latest_bg.png) no-repeat;
    	width:116px;
    	height:25px;
    	}
    	
    .latest:hover {
    	background:url(images/latest_hv.png) no-repeat;
    	display:block;
    	height:25px;}
    	
    .next {
    	margin-left:2px;
    	margin-right:2px;
    	background:url(images/next_bg.png) no-repeat;
    	display:block;
    	height:25px;}
    	
    .next:hover {
    	background:url(images/next_hv.png) no-repeat;
    	display:block;
    	height:25px;}
    	
    .first {
    	margin-left:2px;
    	margin-right:2px;
    	background:url(images/first_bg.png) no-repeat;
    	display:block;
    	height:25px;}
    	
    .first:hover {
    	background:url(images/first_hv.png) no-repeat;
    	display:block;
    	height:25px;}
    	
    .twitter_comic {
    	margin-left:2px;
    	margin-right:2px;
    	background:url(images/twitter_bg.png) no-repeat;
    	display:block;
    	height:25px;}
    	
    .twitter_comic:hover {
    	background:url(images/twitter_hv.png) no-repeat;
    	display:block;
    	height:25px;}
    	
    .facebook_comic {
    	margin-left:2px;
    	margin-right:2px;
    	background:url(images/facebook_bg.png) no-repeat;
    	display:block;
    	height:25px;}
    	
    .facebook_comic:hover {
    	background:url(images/facebook_hv.png) no-repeat;
    	display:block;
    	height:25px;}
    Not sure how much of that will be relevant but i figured i'd post the lot just incase the mistake lies within there someone.

    Full disclosure: I'm a self taught CSS'er, so if you could keep your answers easy to understand i would fully appreciate it.

    Thanks

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    You've got your <ul> and <li> tags the wrong way around on that menu. The <ul> should enclose the <li>, not vice-versa. You probably need to fix that first.

    <ul> - unordered list
    <li> - list item

  • Users who have thanked SB65 for this post:

    Retrocalypse (03-01-2012)

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    You've got your <ul> and <li> tags the wrong way around on that menu. The <ul> should enclose the <li>, not vice-versa. You probably need to fix that first.

    <ul> - unordered list
    <li> - list item
    Thanks, this seems to have resolved the problem


  •  

    Posting Permissions

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