Problem with Internet Explorer — Sorry if it's simple ...

15 replies [Last post]

Mon, 2012-01-30 23:28

dara

Offline

newbie

Last seen: 10 years 28 weeks ago

Joined: 2012-01-30

Posts: 8

Points: 9

Hi, I designed a site on a mac and it looks perfect on my machine. Just tested it on a windows machine and it's all over the place! Can anyone advise?

My HTML is:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Mugendo Kickboxing Maynooth</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mugendo-kickboxing.css" type="text/css" media="all">
<link href='http://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css'>
 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
	background:url(images/mugendo-kickboxing-maynooth-ashbourne-index.jpg) top center no-repeat;
	background-color: #000000;
}
 
body,td,th {
	font-family: "Nixie One", cursive;
}
</style>
 
<script type="text/javascript">
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-28244530-1']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script>
 
<meta name="keywords" content="Mugendo, Maynooth, Kickboxing, Kick, boxing, martial arts">
<meta name="description" content="The official website of Mugendo Kickboxing Club in Maynooth.">
 
</head>
<body>
<div class="mugendo-text">
	<div class="mainbody">
<!-- header -->
		<header>
			<top-menu>
				<ul id="menu">
					<li id="menu_active"><a href="index.html">Mugendo</a></li>
                    <li><a href="about-mugendo.html">About</a></li>
					<li><a href="classes.html">Classes</a></li>
					<li><a href="links.html">Links</a></li>
					<li class="no-pipe"><a href="contact.html">Contact</a></li>
				</ul>
			</top-menu>
		</header>
<!-- / header -->
<!-- content -->
		<main-content id="content">
			<p>&nbsp;</p>
			<article class="left-side">
			  <h1><span>Mugendo Maynooth Kickboxing</span></h1>
<p>Welcome to the official website of Mugendo Maynooth. Mugendo Kickboxing as a martial art can grow with your evolving needs, whether you are initially looking to improve your fitness, learn self-defence or interested in competing, then Mugendo Kickboxing should be seriously considered.</p>
				<p>As you grow in confidence with this martial art why not get into the ring for some light or semi-contact sparring. Then in time you may choose to compete at light, semi or even full contact kickboxing as many others have done before. </p>
				<p>For more information browse this site and please feel free to get in contact.</p>
<p><a href="about-mugendo.html" target="_blank" class="button">Read More</a></p>
			  <h1><span>Find Mugendo on Facebook</span></h1>
				<div class="wrapper">
 
                <p class="padding-bottom"><a href="http://www.facebook.com/pages/Mugendo-Maynooth/173783949333091" target="_blank">Join Mugendo Maynooth Kickboxing Club on Facebook</a> </p>
 
					<p>Keep up with the Mugendo Maynooth Kickboxing's latest news on facebook and keep in touch with other Mugendo club members in Ashbourne, Chanel College in Coolock and Maynooth.</p>
				</div>
   		  </article>
 
<article class="right-side padding-left">
				<h1><span>Mugendo Clubs</span></h1>
				<div class="wrapper">
					<a href="http://www.mugendo-ashbourne.ie" target="_blank">
					<figure class="left mugendo-icon"><img src="images/Mugendo-Ashbourne.jpg" alt="Mugendo Ashbourne Icon"></figure>
					</a>
<p class="padding-bottom padding-top"><a href="http://www.mugendo-ashbourne.ie" target="_blank">Ashbourne Kickboxing Club</a></p>
					<p>Mugendo Ashbourne runs classes for all ages every Monday and Thursday.</p>
			  </div>
				<div class="wrapper">
					<a href="http://www.mugendo.ie/index.php?subsection=hist" target="_blank">
					<figure class="left mugendo-icon"><img src="images/Mugendo-Chanel.jpg" alt="Mugendo Chanel Icon"></figure>
					</a>
<p class="padding-bottom padding-top"><a href="http://www.mugendo.ie/index.php?subsection=hist" target="_blank">Chanel Kickboxing Club, Coolock</a></p>
					<p>Mugendo Chanel runs classes for all ages every Monday and Wednesday.</p>
				</div>
                <div class="wrapper">
					<a href="http://www.mugendo.ie/" target="_blank">
					<figure class="left mugendo-icon"><img src="images/Mugendo-Kickboxing-Clubs.jpg" alt="Mugendo Kickboxing Clubs Icon"></figure></a>
<p class="padding-bottom padding-top"><a href="http://www.mugendo.ie" target="_blank">Mugendo Kickboxing Clubs</a></p>
					<p>Find out more about the history of Mugendo Ireland.</p>
				</div>
 
		  </article>
 
	  </main-content>
 
<!-- / content -->
	</div>
    <!-- footer -->
    <footer>
        <p>Mugendo Maynooth |  Presentation Girls School, Main Street, Maynooth, Kildare | <a href="mailto:[email protected]?subject=Enquiry from website <a href="http://www.mugendo-maynooth.ie" rel="nofollow">www.mugendo-maynooth.ie</a>&[email protected]"> Click here to email Mugendo Maynooth</a>  | Tel: 086 078 2297</p>
		  <h3><a href="http://www.daraoconnor.com/" target="_blank"><span class="footer-color">Site designed by Dara O'Connor</span></a></h3>
		</footer>
 
<!-- / footer -->
</div>
</body>
</html>

My CSS is

@charset "UTF-8";
/* CSS Document */
 
a, body, figure, h1, header, li, top-menu, p, main-content, span, u {
	background:transparent;
	border:0 none;
	font-size:100%;
	margin:0;
	border:0;
	outline:0;
	vertical-align:top;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 25;
}
 
 
ol, ul {
	list-style:none;
	background:transparent;
	border:0 none;
	font-size:100%;
	margin:0;
	border:0;
	outline:0;
	vertical-align:top;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 25px;
	}
 
ul.b {
	list-style-type:katakana;
	font-family:Arial, Helvetica, sans-serif;
	padding-bottom:2px;
	}
 
 
 
.left-side, .right-side {float:left}
.left-side {
	width:500px;
	padding-left: 25px;
	height:495px;
}
.right-side {
width:320px;
padding-top:120px;
height:300px;
}
 
 
article, figure, footer, header, top-menu, main-content {display:block}
.left {float:left}
.right {float:right}
.wrapper {width:100%;overflow:hidden}
body {
	background:url(../images/mugendo-kickboxing-maynooth.jpg) top center no-repeat;
	border:0;
	font:13px 'Nixie One', cursive;
	color:#000000;
	line-height:20px;
}
 
.mainbody {
	margin:0 auto;width:960px}
 
.mugendo-text {
min-height:100%;
height:auto !important;
height:100%;
margin:0
}
body, {height:100%}
a {
color:#383838;
text-decoration:underline;
outline:none
}
a:hover {
	text-decoration:none;
	color: #990000;
}
 
h1 {
	font-size:26px;
	color:#000;
	line-height:34px;
	padding:18px 0 9px 0;
	letter-spacing:-1px;
	font-weight: 500;
}
 
h1 span {
color:#990000
}
 
h1 a:link {text-decoration:none;}
h1 a:visited {text-decoration:none;}
h1 a:hover {text-decoration:underline;}
h1 a:active {text-decoration:underline;}
 
h3 {
	font-size:11px;
	color:#990000;
	vertical-align:top;
	text-decoration:none;
	font-weight:lighter;
	padding-top:10px;
 
}
 
p {
	padding-bottom:10px;
	font-family: Arial;
}
/* header */
header {height:276px;width:100%;overflow:hidden}
#menu {width:100%;overflow:hidden;padding-left: 415px; padding-top:33px}
#menu li {float:left;padding-right:23px;margin-right:22px;background:url(../images/pipe.gif) right top no-repeat}
#menu .no-pipe {background:none}
#menu li a {
font-size:18px;
color:#F2B735;
line-height:28px;
text-decoration:none
}
#menu li a:hover, #menu #menu_active a {
color:#ffffff
}
/* content */
#content {width:100%;overflow:hidden;padding-bottom:9px}
.padding-left {
	padding-left:50px;
}
.mugendo-icon {margin-right:18px}
.padding-bottom {padding-bottom:0px}
.padding-top {padding-top:6px}
.button {border:1px solid #d9d9d9;display:inline-block;line-height:32px;text-decoration:none; top repeat-x #fff;padding:0 15px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px; position:relative}
.button:hover {background:#990000;color:#fff;border:1px solid #990000}
 
/* footer */
footer {line-height:8px;padding:10px 0 0px 0;text-align:center; color:#383838;}
.footer-color {
	color: #990000;
}
footer a{text-decoration:none;}
 
/* contact */
 
#page-wrap {
	width: 500px;
	margin: 20px auto;
	min-height: 500px;
	height: auto !important;
	height: 500px;
}
 
#contact-area {
	width: 550px;
	margin-top: 25px;
 
}
 
#contact-area input, #contact-area textarea {
	padding: 5px;
	width: 375px;
	font-size: 1.4em;
	margin: 0px 0px 10px 0px;
	border: 2px solid #ccc;
}
 
#contact-area textarea {
	height: 90px;
}
 
#contact-area textarea:focus, #contact-area input:focus {
	border: 2px solid #900;
}
 
#contact-area input.submit-button {
	margin-left: 404px;
	width: 100px;
	float: none;
}
 
label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 100px;
	padding-top: 5px;
	font-size: 1.4em;
}

It looks like the css for the body or content is not working in IE but I've done a browser compatibility check with Dreamweaver and removed any problems but nothing changed. Hoping someone can help.

Thanks, D

Tags:

Beginners CSS Questions

Tue, 2012-01-31 01:19

Verschwindende

Offline

Guru

Last seen: 6 days 12 hours ago

Timezone: GMT-4

Joined: 2009-10-09

Posts: 2051

Points: 2283

Looks like you've simply made

Looks like you've simply made up some tags. Where did you come up with <top-menu> and <main-content>? The html5shiv won't even work on that.

Validate your code.

Tue, 2012-01-31 02:45

tjroberts086

Offline

Enthusiast

Last seen: 7 years 10 weeks ago

Timezone: GMT-5

Joined: 2010-01-08

Posts: 138

Points: 177

magic tags,lolcakes

Tue, 2012-01-31 10:28

dara

Offline

newbie

Last seen: 10 years 28 weeks ago

Joined: 2012-01-30

Posts: 8

Points: 9

Helpful Answers!

Thanks for the help, much appreciated.

Tue, 2012-01-31 19:32

gary.turner

Offline

Moderator

Dallas

Last seen: 1 year 24 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

dara wrote:Thanks for the

dara wrote:

Thanks for the help, much appreciated.

I'm not sure whether you're being a bit sarcastic or not. Either way, take the following seriously.

XHTML aware browsers, Safari, Chrome, Opera and Firefox, e.g. make the assumption that you have extended the DTD (eXtensibleHTML) and therefore render your made-up elements according to your css rulesets applicable to them. IE9 does support the application/xhtml+xml MIMEtype, IEs<9 do not, nor do they support DTD extensions. IE<9 then follows the rule that says, if the element tag is unknown, ignore it.

Since you used element tags that are not a part of any current specification, you should not expect general support.

For an example of a very simple DTD extension, see xhtml test doc. View the source and css. You should be aware the even though the markup is well formed, the DTD extension is incomplete; I defined the new elements, but I didn't, for example, redefine the p element as being allowed to contain the new elements, or better to include the new elements in the entity %inline.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tue, 2012-01-31 19:59

dara

Offline

newbie

Last seen: 10 years 28 weeks ago

Joined: 2012-01-30

Posts: 8

Points: 9

Thanks for the advice. I'm

Thanks for the advice. I'm just learning at the moment so thanks for the patience, I think I changed some things a few days ago to make it more "obvious" to me and messed everything up, oops! I have to learn faster!

Thanks again! (not sarcastically) I'm going to go through the code and try and remember what stupid changes I made and fix them.

Cheers, D

Tue, 2012-01-31 22:41

dara

Offline

newbie

Last seen: 10 years 28 weeks ago

Joined: 2012-01-30

Posts: 8

Points: 9

Made a lot of changes ... but ...

Hi folks, I've gone through my code and fixed anything I could see, I think I got everything I stupidly changed but I'm still not getting the right look in IE 6, 7 or 8 — looks okay in IE9.

Any advise is much appreciated!

Most of my changes are to the CSS (obviously, I suppose) but here it is:

@charset "UTF-8";
/* CSS Document */
 
a, body, figure, h1, header, li, nav, p, section, span, u {
	background:transparent;
	border:0 none;
	font-size:100%;
	margin:0;
	border:0;
	vertical-align:top;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 0;
}
 
 
ol, ul {
	list-style:none;
	background:transparent;
	border:0 none;
	font-size:100%;
	margin:0;
	border:0;
	vertical-align:top;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0;
	}
 
ul.b {
	list-style-type:square;
	font-family:Arial, Helvetica, sans-serif;
	padding-bottom:2px;
	padding-left:10px;
	}
 
 
.col1, .col2 {float:left}
 
.col1 {
	width:500px;
	height:495px;
}
 
.col2 {
width:320px;
padding-top:100px;
height:300px;
padding-left:30px;
}
 
 
article, figure, footer, header, nav, section {display:block}
.left {float:left}
.right {float:right}
.wrapper {width:100%;overflow:hidden}
body {
	background:url(../images/mugendo-kickboxing-maynooth.jpg) top center no-repeat;
	border:0;
	font:13px 'Nixie One', cursive;
	color:#000000;
	line-height:20px;
}
 
.main {
	margin:0 auto;width:960px}
 
.extra {
height:auto !important;
height:100%;
margin:0
}
 
a {
color:#383838;
text-decoration:underline;
}
a:hover {
	text-decoration:none;
	color: #990000;
}
 
h1 {
	font-size:26px;
	color:#000;
	line-height:34px;
	padding:18px 0 9px 0;
	letter-spacing:-1px;
	font-weight: 500;
}
 
h1 span {
color:#990000
}
 
h1 a:link {text-decoration:none;}
h1 a:visited {text-decoration:none;}
h1 a:hover {text-decoration:underline;}
h1 a:active {text-decoration:underline;}
 
h3 {
	font-size:11px;
	color:#990000;
	vertical-align:top;
	text-decoration:none;
	font-weight:lighter;
	padding-top:10px;
 
}
 
p {
	padding-bottom:10px;
	font-family: Arial;
}
/* header */
header {height:276px;width:100%;overflow:hidden}
#menu {width:100%;overflow:hidden;padding-top:33px; padding-left:400px;}
#menu li {float:left;padding-right:23px;margin-right:22px;background:url(../images/pipe.gif) right top no-repeat}
#menu .bg_none {background:none}
#menu li a {
font-size:18px;
color:#F2B735;
line-height:28px;
text-decoration:none
}
#menu li a:hover, #menu #menu_active a {
color:#ffffff
}
/* content */
#content {width:100%;overflow:hidden;padding-bottom:9px; padding-top:5px; padding-left:25px;}
.pad_left1 {
	padding-left:50px;
}
.mugendo-icon {margin-right:18px}
.pad_bot1 {padding-bottom:0px}
.pad_top1 {padding-top:6px}
.button {border:1px solid #d9d9d9;display:inline-block;line-height:32px;text-decoration:none; padding:0 15px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px; position:relative}
.button:hover {background:#990000;color:#fff;border:1px solid #990000}
 
/* footer */
footer {line-height:8px;padding:10px 0 0px 0;text-align:center; color:#383838;}
.footer-color {
	color: #990000;
}
footer a{text-decoration:none;}
 
/* contact */
 
#page-wrap {
	width: 500px;
	margin: 20px auto;
	height: auto !important;
	height: 500px;
}
 
#contact-area {
	width: 550px;
	margin-top: 25px;
 
}
 
#contact-area input, #contact-area textarea {
	padding: 5px;
	width: 375px;
	font-size: 1.4em;
	margin: 0px 0px 10px 0px;
	border: 2px solid #ccc;
}
 
#contact-area textarea {
	height: 90px;
}
 
#contact-area textarea:focus, #contact-area input:focus {
	border: 2px solid #900;
}
 
#contact-area input.submit-button {
	margin-left: 404px;
	width: 100px;
	float: none;
}
 
label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 100px;
	padding-top: 5px;
	font-size: 1.4em;
}

My index.html looks like:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Mugendo Kickboxing Maynooth</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mugendo-kickboxing.css" type="text/css" media="all">
<link href='http://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css'>
 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
	background:url(images/mugendo-kickboxing-maynooth-ashbourne-index.jpg) top center no-repeat;
	background-color: #000000;
}
 
body,td,th {
	font-family: "Nixie One", cursive;
}
</style>
 
<script type="text/javascript">
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-28244530-1']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script>
 
<meta name="keywords" content="Mugendo, Maynooth, Kickboxing, Kick, boxing, martial arts">
<meta name="description" content="The official website of Mugendo Kickboxing Club in Maynooth.">
 
</head>
<body>
<div class="extra">
	<div class="main">
<!-- header -->
		<header>
			<nav>
				<ul id="menu">
					<li id="menu_active"><a href="index.html">Mugendo</a></li>
                    <li><a href="about-mugendo.html">About</a></li>
					<li><a href="classes.html">Classes</a></li>
					<li><a href="links.html">Links</a></li>
					<li class="bg_none"><a href="contact.html">Contact</a></li>
				</ul>
			</nav>
		</header>
<!-- / header -->
<!-- content -->
		<section id="content">
			<p>&nbsp;</p>
			<article class="col1">
			  <h1><span>Mugendo Maynooth Kickboxing</span></h1>
<p>Welcome to the official website of Mugendo Maynooth. Mugendo Kickboxing as a martial art can grow with your evolving needs, whether you are initially looking to improve your fitness, learn self-defence or interested in competing, then Mugendo Kickboxing should be seriously considered.</p>
				<p>As you grow in confidence with this martial art why not get into the ring for some light or semi-contact sparring. Then in time you may choose to compete at light, semi or even full contact kickboxing as many others have done before. </p>
				<p>For more information browse this site and please feel free to get in contact.</p>
<p><a href="about-mugendo.html" target="_blank" class="button">Read More</a></p>
			  <h1><span>Find Mugendo on Facebook</span></h1>
				<div class="wrapper">
 
                <p class="padding-bottom"><a href="http://www.facebook.com/pages/Mugendo-Maynooth/173783949333091" target="_blank">Join Mugendo Maynooth Kickboxing Club on Facebook</a> </p>
 
					<p>Keep up with the Mugendo Maynooth Kickboxing's latest news on facebook and keep in touch with other Mugendo club members in Ashbourne, Chanel College in Coolock and Maynooth.</p>
				</div>
   		  </article>
 
<article class="col2 pad_left1">
				<h1><span>Mugendo Clubs</span></h1>
				<div class="wrapper">
					<a href="http://www.mugendo-ashbourne.ie" target="_blank">
					<figure class="left mugendo-icon"><img src="images/Mugendo-Ashbourne.jpg" alt="Mugendo Ashbourne Icon"></figure>
					</a>
<p class="pad_bot1 pad_top1"><a href="http://www.mugendo-ashbourne.ie" target="_blank">Ashbourne Kickboxing Club</a></p>
					<p>Mugendo Ashbourne runs classes for all ages every Monday and Thursday.</p>
			  </div>
				<div class="wrapper">
					<a href="http://www.mugendo.ie/index.php?subsection=hist" target="_blank">
					<figure class="left mugendo-icon"><img src="images/Mugendo-Chanel.jpg" alt="Mugendo Chanel Icon"></figure>
					</a>
<p class="pad_bot1 pad_top1"><a href="http://www.mugendo.ie/index.php?subsection=hist" target="_blank">Chanel Kickboxing Club, Coolock</a></p>
					<p>Mugendo Chanel runs classes for all ages every Monday and Wednesday.</p>
				</div>
                <div class="wrapper">
					<a href="http://www.mugendo.ie/" target="_blank">
					<figure class="left mugendo-icon"><img src="images/Mugendo-Kickboxing-Clubs.jpg" alt="Mugendo Kickboxing Clubs Icon"></figure></a>
<p class="pad_bot1 pad_top1"><a href="http://www.mugendo.ie" target="_blank">Mugendo Kickboxing Clubs</a></p>
					<p>Find out more about the history of Mugendo Ireland.</p>
				</div>
 
		  </article>
 
	  </section>
 
<!-- / content -->
	</div>
    <!-- footer -->
    <footer>
        <p>Mugendo Maynooth |  Presentation Girls School, Main Street, Maynooth, Kildare | <a href="mailto:[email protected]?subject=Enquiry from website <a href="http://www.mugendo-maynooth.ie" rel="nofollow">www.mugendo-maynooth.ie</a>&[email protected]"> Click here to email Mugendo Maynooth</a>  | Tel: 086 078 2297</p>
		  <h3><a href="http://www.daraoconnor.com/" target="_blank"><span class="footer-color">Site designed by Dara O'Connor</span></a></h3>
		</footer>
 
<!-- / footer -->
</div>
</body>
</html>

Please forgive me if it's an obvious mistake! or four obvious mistakes! Really appreciate any help ...

Cheers, D

Wed, 2012-02-01 07:59

dara

Offline

newbie

Last seen: 10 years 28 weeks ago

Joined: 2012-01-30

Posts: 8

Points: 9

W3 Validator

I've tried the css validation on http://validator.w3.org/ but the only problems seem to be with my "Read More" button as follows

137 .button Property border-radius doesn't exist in CSS level 2.1 but exists in [css3] : 5px
137 .button Property -moz-border-radius doesn't exist : 5px
137 .button Property -webkit-border-radius doesn't exist : 5px

I've tried changing the button to the recommended css but my site still looks wrong in IE — any advice? Is there any tool that specifically helps you deal with IE problems?

Thanks, D

Wed, 2012-02-01 20:22

gary.turner

Offline

Moderator

Dallas

Last seen: 1 year 24 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

Clarification?

Can you explain with more detail what this means:

Quote:

Just tested it on a windows machine and it's all over the place!

A particular browser or browsers? Exactly what elements are out of place, and where should they be?

Also, can you provide a live link to the page? Maybe in a testing directory on your site? Or, on the customer's? It's difficult to see a lot of the problems in a site without the expected images.

Do you think it wise to use html5 markup? The specification is in draft status and subject to change at any time. I don't think it'd affect this page, but I'm leery of using draft specs to write a customer's pages.

Look at the footer. Your link markup got out of sync and you left spaces in the href. Do you really think a heading tag is appropriate for your designed-by blurb? I'd use a p element.

<div id="footer">
  <p>Mugendo Maynooth |  Presentation Girls School, Main Street, Maynooth, Kildare | <a href="mailto:[email protected]?subject=Enquiry%20from%20website">Click here to email Mugendo Maynooth</a>  | Tel: 086 078 2297</p>
 
  <p class="footer-color">
    <a href="http://www.daraoconnor.com/"
       target="_blank">Site designed by Dara O&apos;Connor</span></a>
  </p>
</div>

(Gawd, but that target attribute offends me. It stinks that html5 is bringing it back after its being properly invalid for 13 years. Purely personal peeve, as htmll5 is breaking down the separation of structure, behavior, and presentation.)

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Wed, 2012-02-01 21:58

tjroberts086

Offline

Enthusiast

Last seen: 7 years 10 weeks ago

Timezone: GMT-5

Joined: 2010-01-08

Posts: 138

Points: 177

Damn I just made the switch

Damn I just made the switch from XHTML to HTML5.. Is HTML5 the wrong way?

Wed, 2012-02-01 22:13

#10

dara

Offline

newbie

Last seen: 10 years 28 weeks ago

Joined: 2012-01-30

Posts: 8

Points: 9

Main Text in Header in Internet Explorer

Thanks Gary, my problem is the site is not looking right in Internet Explorer, especially the 6, 7 and 8 version. The main content text of the site is going into the header in 7 and 8.

Please click here if you'd like to view the site. I thought showing the code might be more useful as you wouldn't have to look for it, maybe I should have showed both.

I use Dreamweaver and have always used the target attribute "blank" - is that not okay? I wasn't aware there was another option but I am learning!

Let me know what you think of the site please, I'd like your input. I've only seen it on windows OS once, and was horrified by how bad it looked compared to on mac. I obviously hadn't thought enough about browser compatibility but I've been checking it on http://netrenderer.com/ and it still looks terrible.

Thanks for all your help,

Thu, 2012-02-02 01:21

#11

gary.turner

Offline

Moderator

Dallas

Last seen: 1 year 24 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

html5; a foreign laguage

IE<9 (not Éire) does not grok the new html5 elements. Your fix is to use javascript (available on the net) to fake an understanding or to revert to the current standards of html4.01 or xhtml1.0. I recommend refactoring using the current recommendations.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Thu, 2012-02-02 08:20

#12

dara

Offline

newbie

Last seen: 10 years 28 weeks ago

Joined: 2012-01-30

Posts: 8

Points: 9

Revert to HTML 4

Thanks Gary, I'll try reverting to HTML4 and hope that works.

Thanks for all your input.

Thu, 2012-02-02 09:18

#13

gary.turner

Offline

Moderator

Dallas

Last seen: 1 year 24 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

I Missed a point

dara wrote:

I use Dreamweaver and have always used the target attribute "blank" - is that not okay? I wasn't aware there was another option but I am learning!

As of html4 (1999), the target attribute was dropped except for frames. This was a Good Thing® as the attribute took choice away from the visitor. Instead of forcing a new window (or tab in some browser), the choice should be left to the user. He is free to open a link in the existing window or to use right click and open a new tab or window. Forcing a new window does one other evil; it breaks the back button.

Further, target, used to open a new window is creating a behavior. Behavior is in the javascript domain. A simple function will automagically cause every link with the right rel value to open a new window. In fact, you could further simplify this if it mattered to you.

  window.onload = function() {
    var links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
      var rels = links[i].getAttribute("rel");
      if (rels) {
        var testpattern = new RegExp("external");
        if (testpattern.test(rels)) {
          links[i].onclick = function() {
            return !window.open(this.href);  
          }
        }
      }    
    }
  }

It's still a bad idea imnsho. HTML5 is resurrecting this idiocy within the meme of paving the cow-path.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Thu, 2012-02-02 11:27

#14

Hugo

Offline

Moderator

London

Last seen: 7 years 31 weeks ago

London

Joined: 2004-06-06

Posts: 15668

Points: 2806

You have said you're

You have said you're reverting to html4 which is fine, however if you do want to persue the html5 path then you will need something like:

http://www.modernizr.com/docs/

To enable support for many things that IE simply scratches it's head over, especially html5 tags along with something like the normalize.css or boilerplate stylesheet for default styles.

Fundamentally I'm with Gary in all that he states about html5 yet sadly? I realise that it's a tide that we simply can't struggle against, draft or not everyone and their dog are coding html5 layouts and shouting about responsive design with all that entails, for those that wish to follow this route there appears little choice but to use the aforementioned libraries.

I suspect that with the draft specs you will not see huge amount of change, maybe additions but the more sites that go up now using html5 draft specs start to mean that the draft will have to be cautious of making too many changes for fear of causing upsets and suffering the wrath of the development community.

Section, Article, Header, Nav, Aside are imho not likely to change and are predominately the structural elements that get used and as such are likely fairly safe to use.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Thu, 2012-02-02 20:45

#15

dara

Offline

newbie

Last seen: 10 years 28 weeks ago

Joined: 2012-01-30

Posts: 8

Points: 9

Problem Solved – HTML5 enabling script

Hi folks, thanks for all the input. I did another search and found "HTML5 enabling script"

Added it to the header of each page and it worked! My site now looks sound on IE9 and previous. Delighted!

Problem with Internet Explorer — Sorry if it's simple ...

Looks like you've simply made

magic tags,lolcakes

Helpful Answers!

dara wrote:Thanks for the

Thanks for the advice. I'm

Made a lot of changes ... but ...

W3 Validator

Clarification?

Damn I just made the switch

Main Text in Header in Internet Explorer

html5; a foreign laguage

Revert to HTML 4

I Missed a point

You have said you're

Problem Solved – HTML5 enabling script

User login

Navigation