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 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE and firefox problems

    Hey, im making a website, which looks how i want in firefox, but not in ie.

    For some reason ie isnt allowing the navigation box to overlap the content.

    here is the html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Gear Ilfracombe</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    
    </head>
    <body>
    	<center>
    			<div style="width:750px; height:auto; " align="left">
    	<div style="width:193px; height:auto; float:left;">
    
    		<img src="novelty.png" alt=""/><br />
    		<img src="HEAD.png" alt=""/><br />
    		<img src="PC.png" alt=""/>
    	</div>
    	<div style="width:197px; height:auto; float:left; padding-left:10px;">
    		<img src="GEAR.png" alt=""/>
    	</div>
    </div>
    			
    			<div id="container">
    
    				<div style="background-color:transparent"><img src="images/top_content.png" alt=""/></div>
    
    					
    					
    						<div class="nav"><img src="images/nav_top.png" alt=""/>
    													
    							<div id="navigation">
    
    					
    								sdfsdfsdf
    								<br />
    								sdfsdfsd
    								<br />
    								sdfsdfsdf
    								<br />
    
    								<img src="images/nav_divide.png" alt=""/>
    								<br />
    								sdfsdfsdf
    								<br />
    								sdfsdf
    								<br />
    								<img src="images/nav_divide.png" alt=""/>
    								<br />
    		
    							</div><img src="images/nav_bottom.png" />					</div>
    
    						
    <div class="content">
    		<div style="height:auto;width:638px;overflow:auto;position:relative;z-index:1;background-color:white;border-top:0px;border-left:1px;border-bottom:0px;border-right:1px;border-style:solid;border-color:#000000;padding-left:109px;">
    				
    		</div>
    			  </div>
    		  </div>
    			<img src="images/bottom_content.png" alt=""/>
    		</center>
    </body>
    </html>
    here is the css
    Code:
    /* CSS Document */
    
    body 
    	{
    		background-color:#990000;
    
    	}
    .content
    	{
    		height:auto;
    		width:748px;
    
    		position:relative;
    		z-index:1;
    		background-color:transparent;
    
    
    
    	}
    #container
    	{
    		width:780px;
    		height:900px;
    		
    
    	}
    #navigation
    	{
    		height:300px;
    		width:118px;
    		background-color:#CCCCCC;
    		z-index:auto;
    		border-top:0px;
    		border-left:1px;
    		border-bottom:0px;
    		border-right:1px;
    		border-style:solid;
    		border-color:#000000;
    	}
    .nav
    	{
    
    
    		position:absolute;
    		z-index:2;
    
    	}
    here is the actual site

    any help will be much appreciated

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You don't seem to ever close your nav div. Validating would have told you this. Learn to use the validator. Then read the link in my sig titled "Why we won't help you?".
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Aug 2006
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    You don't seem to ever close your nav div. Validating would have told you this. Learn to use the validator. Then read the link in my sig titled "Why we won't help you?".
    Sorry, i did check and the div nav was closed. But following a xhtml validation there was the error that there was no alt to nav_bottom.png. The wrap doesnt seem to of helped, which meant you must of missed the end div next to </div><img src="images/nav_bottom.png" /> </div>

    but please help me, i would appreciate it
    Last edited by haveacigar; 12-30-2006 at 01:17 AM.

  • #4
    Regular Coder xconspirisist's Avatar
    Join Date
    Jun 2006
    Location
    Great Britain.
    Posts
    138
    Thanks
    1
    Thanked 6 Times in 6 Posts
    From what I can tell from your code, you are telling your "nav bar" to float, but not in any position. "float" in css can bring about many many problems when used in the fashion that you demonstrate. I suggest you change the navigation to position:relative; and specify its top and left values from there.

    Also: Don't use <center> tags. Especially not for the whole page body as you have done. If you really want everything centered like that you can:

    1) Do it in css

    Code:
    body {
        text-align: center;
    }
    2) Do it using div's with margins set to auto.

    HTML
    Code:
    <div>
        <div style = "width: 50%; margin: auto;">
        This text will be in a box, centered.
        </div>
    </div>
    Obviously you could replace the inline CSS from the seccond example into a separate .css file when it goes to production.
    If I have been helpful, use the "thank" button - It makes me happy!

    xconspirisist.co.uk - homepage of my online alias
    technowax.net - a community for people interested in all forms of modern technology.


  •  

    Posting Permissions

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