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 Coder
    Join Date
    Jan 2005
    Location
    Northern California
    Posts
    13
    Thanks
    1
    Thanked 1 Time in 1 Post

    CSS Disaster in IE; Placement of navigation and content is wonky

    I'm trying like heck to wean myself off of using tables, but it sure isn't easy, especially when weird problems such as I'm having are happening.

    I'm trying to use the CSS styling for the navigation in the middle of the page (the set that starts with "Chevalia Home" and ends with "Blog". While I am still learning this technique, through trial and error I got it to work in Firefox and Safari. But when I checked it in IE I was dismayed to see the navigation bar pushed over to the right.

    I'm also trying to use a jquery scrolling effect and, again, works fine in FF and Safari, but it has the same issue when viewing in IE...pushed over to the right. Except if you start to use the navigation for the scrolling content, it then will position itself correctly.

    I'm a newb, so I'm not sure what exactly to post, but here's the link for the page: http://www.chevalia.net/chevalia/index2.html

    And here's the code that I'm using for the navigation:
    Code:
    #nav-home {
    	width:999px; height:92px;
    	position:relative;
    	z-index:5000;
    	}
    
    	#nav-home-wrap {
    		}
    
    		#nav-home ul {
    			margin: 0; padding: 0;
    			list-style: none;
    			position:absolute;
    			}
    
    			#nav-home li {
    				margin: 0; padding: 0;
    				float: left;
    				}
    
    				#nav-home a {
    					height:92px;
    					float: left;
    					display:block;
    					overflow:hidden;
    					text-indent:-999em;
    					background:url(images/bg-nav-chevaliahome.jpg) no-repeat;
    					}
    
    					#nav-home a#nav-chevalia-home {
    						width:166px;
    						background-position: 0 0;
    						margin-left:0;
    						}
    						
    						#nav-home a#nav-chevalia-home:hover {
    							background-position: 0 -92px;
    							}
    							
    					#nav-home a#nav-cast {
    						width:136px;
    						background-position:-166px 0;
    						}
    						
    						#nav-home a#nav-cast:hover {
    							background-position:-166px -92px;
    							}
    							
    					#nav-home a#nav-gallery {
    						width:123px;
    						background-position:-302px 0;
    						}
    						
    						#nav-home a#nav-gallery:hover {
    							background-position:-302px -92px;
    							}
    							
    					#nav-home a#nav-video {
    						width:154px;
    						background-position:-425px 0;
    						}
    						
    						#nav-home a#nav-video:hover {
    							background-position:-425px -92px;
    							}
    					
    					#nav-home a#nav-store {
    						width:214px;
    						background-position:-579px 0;
    						}
    						
    						#nav-home a#nav-store:hover {
    							background-position:-579px -92px;
    							}
    							
    					#nav-home a#nav-sponsors {
    						width:134px;
    						background-position:-793px 0;
    						}
    						
    						#nav-home a#nav-sponsors:hover {
    							background-position:-793px -92px;
    							}
    							
    					#nav-home a#nav-blog {
    						width:72px;
    						background-position:-928px 0;
    						}
    						
    						#nav-home a#nav-blog:hover {
    							background-position:-928px -92px;
    							}

    Also, I can post the code for the jquery scrollable if people want. The actual website for the coding is here: http://flowplayer.org/tools/scrollable.html. I should also mention, that I will eventually be trying to combine both the horizontal AND vertical scrolling techniques, but right now, only the horizontal one is working.

    And yes, there are two tables in the design. Don't kill me, okay? Like I said, I'm trying to wean myself off. But when stuff like this happens..well, it makes me want to run back to all that is familiar

    Thank you in advance for any advice.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by Carolynne View Post

    I'm trying to use the CSS styling for the navigation in the middle of the page (the set that starts with "Chevalia Home" and ends with "Blog". While I am still learning this technique, through trial and error I got it to work in Firefox and Safari. But when I checked it in IE I was dismayed to see the navigation bar pushed over to the right.
    Try getting rid of that ap on your ul. Like this -
    Code:
    	#nav-home-wrap {
    		}
    
    		#nav-home ul {
    			margin: 0; padding: 0;
    			list-style: none;
    			}
    
    			#nav-home li {
    				margin: 0; padding: 0;
    				float: left;
    				}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Carolynne (11-12-2009)

  • #3
    New Coder
    Join Date
    Jan 2005
    Location
    Northern California
    Posts
    13
    Thanks
    1
    Thanked 1 Time in 1 Post
    Ahh! That worked. Thank you!

    And I also fudged around with my scrollable CSS. There was a position:absolute in there. I changed it to relative and that fixed the positioning problem, BUT there's still an issue. And only in IE again. When I click on "The Show" link, that content slides over horizontally like it should, but it doesn't scroll vertically like it should. There is a big gap between the "The Show" heading and the bottom of the curtain. In FireFox it works correctly...scroll down to see the bottom of the text, scroll up and it stops at the bottom of the curtain. In IE, "The Show" scrolls down until it ends half way down the page. Is this related to my CSS again?

    Here's the code for the scrollable section:
    Code:
    #flowtabs {
    	
    	/* dimensions */
    	width:425px;
    	height:31px !important;
    	margin:0 !important; 
    	padding:0;	
    	
    	/* IE6 specific branch (prefixed with "_") */
    	_margin-bottom:-2px;
    }
    
    /* single tab */
    #flowtabs li { 
    	float:left; 
    	margin-left:7px; 
    	padding:0; 
    	text-indent:0; 
    	list-style-type:none;
    }
    
    /* a- tag inside single tab */
    #flowtabs li a {
    	display:block;
    	height: 31px;   
    	padding:30px 12px 10px 0;
    	margin:0px;
    	
    	/* font decoration */
    	text-align:center;
    	text-decoration:none;
    }
    
    	
    	/* style for horizontal flow */
    	#flowpanes {height:468px; width:924px; position:relative; overflow:hidden; clear:both;}
    	#flowpanes ul.items {width:20000em; position:relative; clear:both; margin:0; padding:0;}
    	#flowpanes ul li {float:left; display:block; width:924px;}
    
    	/* style for vertical flow */
    	/* root element for scrollable */
    	#scrollvert {
    		/* required settings */
    		position:relative;
    		overflow:hidden;	
    	
    		/* vertical scrollers have typically larger height than width */	
    		height: 450px;	 
    		width: 924px;
    	}
    	
    	/* root element for scrollable items */
    	#scrollvert ul {	
    		position:relative;
    		
    		/* this time we have very large space for height */
    		margin:0;
    		padding:0;
    	}
    	
    	/* single scrollable item */
    	#scrollvert ul li {
    		margin:0 0 0 0;
    		padding:0 0 0 0;
    		font-size:12px;
    		height:auto;
    		display:block;
    	}
    Also, does anyone know how to get the vertical scrolling to work for more than just one section? I've tried just about everything I can think of. Or does this need to go over to the Javascript forum?

    Thanks so much!
    Last edited by Carolynne; 11-12-2009 at 01:47 AM. Reason: Incoherency. :S


  •  

    Posting Permissions

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