my website looks rubbish in safari

Page 1 of 1

2 Replies - 416 Views - Last Post: 31 January 2012 - 02:26 PM

Topic Sponsor:

#1 dudelucas  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 31-January 12

my website looks rubbish in safari

Posted 31 January 2012 - 05:12 AM

Hi all,

im new to creating websites so i appear to be making plenty of mistakes, some i can fix others i cant.....

please can you check the coding on my website to see where the problem is?

I am unable to get my website to look as nice as it does in IE in Safari(Looks bad)

Here is a link to my site

www.unicorn-huntersband.co.uk/home.html

Please could someone check the code and get back to me

Regards

Is This A Good Question/Topic? 0
  • +

Replies To: my website looks rubbish in safari

#2 Atli  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 1759
  • View blog
  • Posts: 2,693
  • Joined: 08-June 10

Re: my website looks rubbish in safari

Posted 31 January 2012 - 12:59 PM

Hey.

There are plenty of errors in there. Run your site through the W3C Markup Validation Service. It'll show you such errors. - Try your best to fix EVERYTHING they list.

A few of you most major mistakes:

  • There is no DOCTYPE declared. There a lot of different versions of HTML/XHTML markup available. You need to tell the browser which one you are using, or it will default to "Quirks Mode", which is a compatibility mode made for ancient markup. That's the last thing you want if you intend your site to look anything alike in different browsers.

    Check out the W3C's Recommended Doctype Declarations to use in your Web document.. If you are unsure of which one you are using, the HTML4 Transitional type may be your best choice:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

    This should go in the top line of all HTML pages, before the <html> tag.

    Note that this is likely to cause things to stop displaying like the do now. This is a good thing, because now the browser will show you what your markup should really look like, rather than what it looks like after the browser has attempted to patch it up for you. Don't remove the doctype because of this, but rather try to fix the appearance with the doctype still there.


  • There are a few tags in there that have major syntax errors in them. Your <body> element, and the <font> tag, for example. - Read through your markup carefully. Make sure that tags are properly opened and closed, and that they match up. - It's a good idea to use proper Indentation, to make it easier to see mistakes like those. Just look at what happens when I take your markup and attempt to indent it:
    <HTML>
<head>
	<TITLE> Home </TITLE>
	<meta name="keywords" content="A, website, for, the, music, group from, doncaster, called, Unicorn Hunters, uk"/>
	<meta name="keywords" content="Heavy, rock, music, universal records, adele, sky television, Kings of Leon"/>
	<meta name="description" content="Videos, Images, text, clocks Music, sounds, email" />
</head>
<div align="center">
	<body background="./Uh1.jpg" bgcolor="#333333"</>
		<table id="" title="" height="750" width="900" border="dotted" bgcolor="black" cellspacing="1" cellpadding="2">
			<tr height="100">
				<td bgcolor="background <color> #F00">
				<table align="center" title="" id="">
					<tr>
						<td><IMG SRC="./enter.jpg"></td>
					</tr>
				</table></td>
			</tr>
			<tr height="25">
				<td bgcolor="Black">
					<div align="center">
						<table title="" id="">
							<!-- All contents of a table MUST go into cells. -->
							<a href="./home.html" style="text-decoration: none">HOME</a>
							<a href="./news.html" style="text-decoration: none">NEWS</a>
							<a href="./about.html" style="text-decoration: none"> ABOUT </a>
							<a href="./pictures2.html" style="text-decoration: none"> PICTURES </a>
							<a href="./Music.html" style="text-decoration: none"> MUSIC </a>
							<a href="./gigs.html" style="text-decoration: none"> SHOWS </a>
							<a href="./Contact.html" style="text-decoration: none"> CONTACT</a>
						</table>
				</td>
			</tr>
			<tr>
				<td bgcolor="Black">
					<font face="helvetica"
					<font color="#990000">
						<P align="center"No shows currently available, Keep checking back</P>
							<table align="center" title="" id="">
								<IMG SRC="./UH.jpg" height="400" width="600">
							</table>
				</td>
			</tr>
			</FONT>
		</DIV>
	</body>
	<table id="" title="" height="50" width="900" border="solid" bgcolor="black" cellspacing="1" cellpadding="1">
		<tr height="50"><td bgcolor="background <color> #F00">
				<table align="Center" title="" id="">
					<tr>
						<td><i>Website (c) Dude Lucas - Web Basic 2012</i></td>
					</tr>

					<g:plusone annotation="inline"></g:plusone>

					<script type="text/javascript">
						(function() {
							var po = document.createElement('script');
							po.type = 'text/javascript';
							po.async = true;
							po.src = 'https://apis.google.com/js/plusone.js';
							var s = document.getElementsByTagName('script')[0];
							s.parentNode.insertBefore(po, s);
						})();
	
					</script>
</HTML>

    Do you see how the structure is all messed up? This needs to be fixed, or the browsers will be forced to attempt their own fixes to make this presentable, and none of the browsers is likely to apply the same fixes as the next one, which is bound to cause things to display improperly.


  • You use a lot of tables to set up your layout. This is not unusual for a beginner, but keep in mind that a table is meant to display rows of data. If you are putting elements into a table, you must put them into table cells. They can't just go directly between the <table> tags. There must be <tr> and <td>/<th> elements around them, defining their position in the table.

    A more modern method of setting up the layout of your site is to use CSS, but I suppose that's something you can worry about later.

Was This Post Helpful? 2
  • +
  • -

#3 Lemur  Icon User is offline

  • OpenBSD Head
  • member icon

Reputation: 683
  • View blog
  • Posts: 2,519
  • Joined: 28-November 09

Re: my website looks rubbish in safari

Posted 31 January 2012 - 02:26 PM

http://www.blog.bawe...html-the-basics

Start here and read back up on HTML and continue on to the CSS and other tutorials. That should give you a pretty decent base to start from.
Was This Post Helpful? 1
  • +
  • -
Page 1 of 1