Forums

matt3000

Hi,

I've got a problem with my jpeg and my nav buttons.
I just followed the instructions of one of the videos, so its probably very easy to solve:

The problem is the difference between firerefox and IE

In firefox my jpeg doesn's even show
The jpeg is supposed to be filling just a page. But its centered to much to the right
The nav buttons also react different to padding left in firefox and IE

See pics

My Body :


<body>

	  <div id=\"page-wrap\">

     	  <ul id=\"nav\">
     	  	  <li><a href=\"#\">Home</a></li>
     		  <li><a href=\"#\">Iets dat nog komt</a></li>
     		  <li><a href=\"#\">Nog iets dat</a></li>
     		  <li><a href=\"#\">Over mezelf</a></li>
     		  <li><a href=\"#\">Contact</a><li/>
     		  <li><a href=\"#\">Tarieven</a></li>
     	  </ul>
     	  
	</div>
	
</body>

My CSS:



* {
	margin:0;
	padding:0; 
}

body {
	 font-size:62,5%;
	 font-family: Helvetica, sans-serif; 
	 background: #ffffff;
}

li {
   font-size: 1.0em;
   }

div#page-wrap{
	width: 800px;
	margin: 0 auto;
	}

ul#nav {
	height: 534px; width: 1144px;
	background: url(pics/Header 1.jpg) no-repeat;
	list-style: none;
	padding-left: 150px;
	}
	ul#nav li {
		float: left;
		margin-top: 300px;	
	}
	
	ul#nav li a {
		display: block; 
		width: 125px;
		color: black;
		font-weight: bold;
		text-decoration: none; 
	} 
	ul#nav li a:hover, ul#nav li a:active {
		   color: #CCCCCC;
	}

Hope you guys can help out

Matt

apostrophe

You have a page wrap that is 800px wide and inside that is your ul which is 1144px wide + 150px padding.

See the problem?

matt3000

Oke, that solved of the problems, thanks very much!

But i'm still not able to see my image in firefox.
How is that possible?

Matt

apostrophe

Without a link I can only guess. Try re-naming your image, instead of "Header 1.jpg" change it to "header_1.jpg" and then update your CSS.

matt3000

That problem solved as well

thanks! :)

Matt

treehouse : what would you like to learn today?

Forums

Nav and jpeg