CODEWITHSUNDEEP
htmlinternet-explorergoogle-chromefirefox
Andre Smith
Andre Smith

Reputation: 207

Webpage is only displayed correctly in IE and not in Chrome and Firefox

Here is my .css file. (Please bear in mind that I am a second year IT student studying Web Design 1!):

<style>

h1 {background: #48a627;} 
h1 {text-decoration:none;}
h1 {font-family: Ariel, Halavetica, sans-serif;}
h1 {color: white;}
h1 {font-size: 50px;}
h1 {text-align: center;}

body {background-color:#48a627} 
body {text-decoration:none;}
body {color: black}
body {font-family: font-family: Ariel, Halavetica, sans-serif}
body {font-style: normal}
body {font-size: 20px;}

p {background-color: #48a627}
p {text-decoration:none;}
p {color: #181818}
p {font-family: Ariel, Halavetica, sans-serif}

a:link {color: #FFFFFF; text-decoration: none;}
a:visited {color: white; text-decoration: none;}
a:hover {color: #FF0000; text-decoration: overline underline;}
a:active {background-color:#0d82df;}

ul 
{
 list-style-image:url('http://icons.iconseeker.com/png/32/vista-style-sport/golf-ball-   1.png');
}

</style>

Here is my Assignment link to the .css file for my Home webpage! I have not included the rest of the code as I don't believe that is the problem. Another problem I have is that my images are supposed to display a red border around them when mouse is hovered over them. This only works in Internet Explorer and not in the other 2 web browsers specified. I have tried changing the DOCTYPE declaration, but with no success.

<!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>
<link rel ="stylesheet" type = "text/css" href = "D:\NMMU\Second Year\InternetProgramming 2\Assignments\Assignment 2\Assignment 2.css">                       
</head>

Thank you for your help. Please don't recommend using <div> or scripts or any other things because the assignment states that we are not allowed to use that. My knowledge is not so great so please be patient! Thanks.

Here is my 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">


<title>Home Page</title>

<head>

<link rel ="stylesheet" type = "text/css" href = "D:\NMMU\Second Year\Internet Programming 2\Assignments\Assignment 2\Assignment 2.css">
   </head>
<table align = center>
<tr>
<td colspan = "2"><img src = "http://logopond.com/logos/6f9f36e05089d690709ec2ac837ada82.png" width="400" height="344" alt = ""></td>
<td><img src = "http://t3.gstatic.com/images?q=tbn:ANd9GcQiNOQS9CNd9bKW92ZQDw7mh1Qjz-_XUcKRKRlsqB2ln0SyaMMg" width = "400" height = "344" alt = ""</td>
</tr>

<tr>
<td colspan = "3" align = center><h1> Hole In One Club </h1></td> 
</tr>
</table>

<body>
<table align = center>
<tr rowspan = "4">
<td >

    <p>Congratulations on your hole-in-one and welcome to the world of golf’s most prestigious achievers! Do you know that only 4% of golfers ever have the satisfaction of a hole-in-one?</p>

    <p>This is the official page for the hole in one club.</p>

      <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzV8i9tkZv04EgGB4K2MLtVQgKl7B_cLtIanbawul0Dp_iQ0TXEw" width="250" height="200" align = "left" alt=""/>

    <p>We welcome all members and visitors to our website. We are a type of insureance club that offers golfers all around South Africa the oppertunity to "obtain hole in one insurance" 
   for a yearly fee of only <strong>R150</strong></p>

    <p>The odds of a golfer achieving a hole-in-one on any specific hole on any given day are 43 000:1. That makes a hole-in-one golfer a very special and unique person!</p>
 <img src = "http://www.framingedge.ca/images/sports/hole-in-one.jpg" width = "400" height = "200" align = "right"/>

    <p>The Hole In One Club is widely regarded as the most successful and most active society of its kind in South Africa.</p>

   <p>Launched in 2013, the Society has grown steadily over the past year and has 
   rewarded a staggering 500 South African golfers for their unique achievement during this year.</p>

    <p>We offer you with the prize of YOUR choice for every hole in one that you hit! To see all the prizes available please click on the link located to the right of the page.   </p>

</td>

<td valign = top>
    <ul>
        <li><a href = "C:\Users\THETANK\Desktop\page gallery.html"  ><strong>Prize's Gallery</strong></a></li>
        <li><a href = ><strong>Contact Us</strong></a></li>
    </ul>
 </td>

<tr align = center>
<td colspan = "2">
<br>
<br>
    <font size = "6"><strong>Sponsorships:</strong>
</td>
</tr>


<tr align = center>
<td colspan = "2">
    <a href = "http://www.nike.com/us/en_us/c/golf"><img src = "http://www.golf-isc.co.uk/wp-content/uploads/2013/01/9abd755b_nikegolf_logo_2.jpg" width = "200" height = "100"/></a>
    <a href = "http://www.ping.com/"><img src = "http://www.golfpitstop.com.au/Images/Brands/ping.jpg" width = "200" height = "100"/></a>
    <a href = "http://taylormadegolf.com/"><img src = "http://sosgolf.co.za/wp-content/uploads/2013/04/taylormade.jpg" width = "200" height = "100"/></a>
</td>
</tr>


<tr>
<td align = center colspan = "2"><a href = "[email protected]" ><strong>  <italics>E-Mail: Andre Smith</italics></strong></a></td>
</tr>
</body>

</table>

</html>

Upvotes: 0

Views: 3476

Answers (4)

KaraokeStu
KaraokeStu

Reputation: 768

Your CSS font names are incorrect and you have "font-family" specified twice:

font-family: font-family: Ariel, Halavetica, sans-serif;

Should be

font-family: arial, helvetica, sans-serif;

Another thing is that fonts inherit, therefore you should only need to set the font-family on the root element, in this case your "body" tag.

You'll probably find that Internet Explorer, in its infinite wisdom has ignored the double-specification of the font-family selector.

The safest thing is to ensure that your CSS is ordered in the same order that your elements will appear on the page, therefore it is usually best practice to order as follows:

  1. HTML (html)
  2. Body (body)
  3. Paragraphs (p)
  4. Headings (h1, h2, h3 etc)
  5. Anchors (a, a:hover etc)

Then you can use classes or selectors to override specific elements within your HTML.

To get the image to work on hover in IE8, Chrome, FireFox and above:

body { background-color: navy; color: white; }
a img { border: 1px solid transparent; }
a:hover img { border: 1px solid red; }

As shown here: http://jsfiddle.net/khcb4/1/

I hope this helps!

Upvotes: 0

osmanraifgunes
osmanraifgunes

Reputation: 1468

Href attribute of style link should be relative to your page. If you have a hierarchy like this:

folder0-> page.html folder0-> folder1-> style.css folder0-> folder2-> script.js

Your link to styles:<link rel ="stylesheet" type = "text/css" href = "folder1/style.css">

Your one is probably like this: <link rel ="stylesheet" type = "text/css" href = "Assignment 2.css">

Here is the jsfiddle and it works if you can import style properly.

Upvotes: 0

shubendrak
shubendrak

Reputation: 2068

You need to keep image like this

<ul>
    <li> <img src=""> </li>
    <li> <img src=""> </li>
</ul>

and write css for img:hover like

img:hover {
//display border
}

Upvotes: 0

Hadi
Hadi

Reputation: 2905

Problem is here - 

<link rel ="stylesheet" type = "text/css" href = "D:\NMMU\Second Year\InternetProgramming 2\Assignments\Assignment 2\Assignment 2.css">

use this only - 

<link rel ="stylesheet" type = "text/css" href = "Assignment 2.css">

and make sure Assignment 2.css and your html file is in same directory

Upvotes: 1

Related Questions