Cross compatible browser

Tell us what’s happening:
I have made a tribute page and i had noticed that it only display the image when i use chrome but if i use Safari and Firefox it does not display the image.
I have written my code in brackets compiler.
I believe the problem is caused by the css code but i have no clue where to start if anyone could help me thank you.
Your code so far

     <html>
  <head><title>Muhammad Ali</title>
    <script defer src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js">
	  
	</script>
	  
  	<style>
		html{
		font-size: 15px;	
		}
		
		/*styling-the-body-start*/
		body{
		font-family: "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
		font-size: 1.6em;
		text-align: center;
		line-height: 1.5;
		margin: 0;
		background-color:hsl(0, 0%, 100%);
		}
		/*styling-the-body-end*/
		
		/*styling-the-main-start*/
		#main{
		background:hsl(0, 0%, 93%);
		margin: 30px 8px;
		padding: 15px;
		text-transform: capitalize;
		border-radius: 10px;
		}	
		@media (max-width:460px;)
		#main{
		margin: 0;
		
		}
		/*styling-the-main-end*/
		h2{
		font-size:4.3rem ;
		margin-bottom: 0;	
		}
		
		@media (max-width:460px)  {
		h2{
		font-size:4.5rem;
		line-height:1.2;	
		}	
		}
		/*styling-the-image-start*/
		#image{
		max-width: 100%;
		display: block;
		height: auto;
		margin:0 auto;}
		
		
		#img-caption{
		margin: 15px 0 5px 0;
		font-size: 20px;
		
		}
		@media (max-width:460px){
			img-caption{
			font-size: 1.4rem;
			}
		}
		
		#img-div{
		padding: 10px;
		background:hsl(0, 0%, 100%);
		margin: 0;
		border-radius:10px; 	
		}
		/*styling-the-image-end*/
		
		/*--styling-the-section-area-start*/
		#headline{
		margin: 50px 0;	
		}
		
		ul{
		max-width: 550px;
		text-align:left;
		line-height: 1.6;
		margin: 0 auto 50px auto;
		text-align: justify;
		}
		
		}
		li{
		margin: 16px 0;	
		align-content: center;	
		}
		/*--styling-the-section-area-end*/
		/*--styling the blockquotes and footer--*/
		blockquote{
		font-style: italic;
		}
		a{
		color:skyblue;	
		}
		/*--styling-the-blockquotes-and-footer-end*/
	</style>	  
  </head>
  <body>
    <main id="main">
      <h1 id="title">muhammad ali</h1>
      <p>The People's Champion</p>
      <figure id="img-div">
       <img id="image" src="/image/time-100-influential-photos-neil-leifer-muhammad-ali-vs-sonny-liston-56.jpg" width="1024px" height="623px" >
        <figcaption id="img-caption">
		   Ali radiating the strength and poetic brashness that made him the nation’s most beloved and reviled athlete.
		  </figcaption>
	   </figure>
		  <section id="tribute-info">
			 <h2 id="headline">the life of mohamed ali </h2>
			  
			  <ul>
				  
			  <li> <strong>1942</strong>-Born in Louisville, Kentucky His name at birth was Cassius Clay</li>
				  
				  <li> <strong>1954</strong>-His bicycle was stolen and he told the policement, Joe Martin, that he wanted to "whup" whoever had stolen his bike. Martin trained young boxers and started to train Clay.</li>
				  
				  <li> <strong>1956</strong>-He wins the novice Golden Gloves Championship as a light heavyweight.</li>
				  
				  <li> <strong>1959</strong>-He wins the the AAU light heavyweight title at the Golden Gloves Tournament of Champions.</li>
				  
				  <li> <strong>1960</strong>-In September he won the light heavyweight gold medal at the Rome Olympics, his first major success in athletics.In October he wins his first professional bout with Tunney Hunsaker.</li>
				  
				  <li> <strong>1964</strong>-February 25, he knocked out Sonny Liston. This defeat allowed him to become the heavyweight champion.</li>
				  
				  
				  <li> <strong>1967</strong>-August 14, he married his first wife Sonji Roi.Ali is drafted and he files for conscientious objector status as a Muslim minister.</li>
				  
				  <li> <strong>1970</strong>-In April, the government denies his filing for conscientious objector status and he was drafted into the Army. He attends the induction ceremony, but he refused to step forward.</li>
				  
				  <li> <strong>1971</strong>-in a famous match called "The Fight of the Century," Joe Frazier knocked Ali down, but Ali got up. However, after 15 brutal rounds, it was still ruled that Frazier won.In June, the Supreme Court reverses its 1967 conviction and ruled that he was not guilty of evading the military, since he should not have been drafted in the first place due to his religious beliefs.</li>
				  
				  <li> <strong>1974</strong>-He defeated George Foreman and reclaimed the title of Heavyweight Champion of the World. This fight was known as the "Rumble in the Jungle" since the fight was at a stadium in Zaire.</li>
				  
				  <li> <strong>1996</strong>-Ali lit the Olympic flame in Atlanta, Georgia.</li>
				  
				  <li> <strong>2005</strong>-He is awarded the Presidential Medal of Freedom.</li>
				  
				  <li><strong>2016</strong>-Muhammad Ali dies on June 3, 2016 as the result of septic shock due to unspecified natural causes. He was 74 years old.He was buried in Louisville, Kentucky.</li>
			 </ul>
			  
			  <blockquote cite="https://www.usatoday.com/story/sports/boxing/2016/06/03/muhammad-ali-best-quotes-boxing/85370850/">
				  <p>“Braggin' is when a person says something and can’t do it. I do what I say.”</p>
			  </blockquote>
			 
		<footer id="footer-link"> 
			  <h3>
			 See some more great photos of muhammad ali  <a id="tribute-link" href="http://100photos.time.com/photos/neil-leifer-muhammad-ali-sonny-liston" target="_blank">Times</a>
		     </h3> 
		 </footer>
		</section>
		  
    </main>
    
    
  </body>
 
  
  
  
  
</html>   

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1 Safari/605.1.15.

Challenge: Build a Tribute Page

Link to the challenge:

Hey @lachi001,
can you maybe link your project?

Thats the link to a google drive file :
https://drive.google.com/drive/folders/13iKefG-ZEMgKnYs2pKgmu8oHQoPIls3w?usp=sharing

Thank you

Well what you did is having a folder for the image, what you should do for projects is use JSFiddle, or CodePen

Codepen.io

and use online links instead of downloading the image file and using it. Here’s the link to the original image.

https://dujye7n3e5wjl.cloudfront.net/photographs/1080-tall/time-100-influential-photos-neil-leifer-muhammad-ali-vs-sonny-liston-56.jpg

So you can do


<image src="https://dujye7n3e5wjl.cloudfront.net/photographs/1080-tall/time-100-influential-photos-neil-leifer-muhammad-ali-vs-sonny-liston-56.jpg">

instead of using local files

Also don’t do image width and height in html using px. If you want to use px on your image use CSS. Instead of this:


<img id="image" src="https://dujye7n3e5wjl.cloudfront.net/photographs/1080-tall/time-100-influential-photos-neil-leifer-muhammad-ali-vs-sonny-liston-56.jpg" width="1024px" height="623px" >

just do this

#image {
  width: 1024px;
  height: 623px;
}
1 Like