Nav Menu is wrapping when browser window is resized

Why are my links wrapping when the table is re-sized? I thought the font size would scale, but instead the text is wrapping. Thank you,



<!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>
	<title>BTS Consulting - Home</title>
	<link href="style-em.css" rel="stylesheet" type="text/css" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

<body>
	<div id="wrapper">
	  <div id="card">
		<div id="logo">
			<a href="index.html"><img src="images/logo2.png" alt="BTSecurity Consulting" /></a>
		</div> <!-- end of logo div -->
		<div id="nav">

			<ul class="top-level">
				<li><a href="about.html">About</a></li>
				<li><a href="#">Services</a><img src="images/arrow.png" alt="arrow down" />
					<ul class="sub-level">
						<li><a href="service1.html">Service 1</a></li>
						<li><a href="#">Service 2</a></li>
						<li><a href="#">Service 3</a></li>
						<li><a href="#">Service 4</a></li>
					</ul></li>
				<li><a href="#">Contact</a></li>								
			</ul>
		</div> <!-- end of nav div -->
	  </div> <!-- end of card div -->
	  <div id="content"><h1 class="tagline">Tagline goes here!</h1>
			<p>Blurb about why they should choose you for there security needs</p>
	  </div> <!-- end of content div -->
	</div> <!-- end of wrapper div -->
</body>
</html>



body {
	margin: 0;
	padding: 0;
	background: #132439;
	font-size: 100%;
}

ul {
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* New Font */

@font-face {
	font-family: navFont;
	src: url('fonts/FUTRFW.TTF');
}
/* Div Layouts */

#wrapper {
	width: 85%;
	height: 41.25em;
	margin: 3em auto;
	background: #03336C; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#03336C', endColorstr='#a2aaaf'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#03336C), to(#a2aaaf)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #03336C,  #a2aaaf); /* for firefox 3.6+ */
	border-radius: 21px;
}

/*#card, #content, #nav {
	border: 1px dotted white;
}*/

#card {
	float: left;
	width: 49%;
	height: 95%;
}
#logo img{
	margin-top: 6.25em;
	margin-left: 1.875em;
	border: none; /*for IE*/
	width: 100%;
}

#nav {
	height: 2.375em;
	padding-top: 5.625em;
	padding-left: 3.75em;
	font-family: navFont, 'lucida console unicode', tahoma, arial, sans-serif;
	width: 100%;
}

#nav ul {
	margin: 0;
	padding: 0;
}

#nav ul li {
	display: inline;
	height: 1.875em;
	float: left;
	margin-left: .938em;
	line-height: 1.875em;
	padding-left: .25em;
	border-left: .063em solid #dce0e5;
	position: relative;
}

#nav li a {
	text-decoration: none;
	color: #dce0e5;
}

#nav li a:hover {
	text-decoration: none;
	color: #891B12;
}

#nav li ul {
	margin: 0;
	padding: 0;
	display: none;
	position: absolute;
	left: .25em;
	top: 1.875em;
}

#nav li:hover ul {
	display: block;
	width: 12.5em;
}

#nav li li {
	display: list-item;
	border: none;
}

#nav img {
	padding-left: .25em;
}

#content {
	float: right;
	width: 40%;
	height: 95%;
	margin: 1.563em 1.563em 0 0;
}

#content p {
	font-family: candara, 'lucida console unicode', arial, sans-serif;
	padding: .75em;
	color: #010f20;
	font-size: medium;
}

#content h1 {
	color: #000e1f;
	font-family: navFont, 'lucida console unicode', tahoma, arial, sans-serif;
}

#content h1.tagline {
	font-size: xx-large;
	text-align: center;
	padding-top: 60%;
}


Hi,

The nav is floated so of course it will wrap when the window is smaller. Font-size is not affected by the width of your window and has no bearing on the issue. If you don’t want your nav to wrap then you’ll need to set a pixel or em width to the parent ul rather than a percentage.

You have some weird stuff going on there and things like this are bound to break:


#nav {
	height: 2.375em;
	padding-top: 5.625em;
	padding-left: 3.75em;
	font-family: navFont, 'lucida console unicode', tahoma, arial, sans-serif;
	width: 100%;
}


It’s 100% wide and then has 3.75em left padding so now it is already 3.75em too wide. Nothing can really be bigger than 100% in normal circumstances. You can omit the 100% in this instance and let the width be auto.

You’ve made the same mistake here:


#logo img {
	margin-top: 6.25em;
	margin-left: 1.875em;
	border: none; /*for IE*/
	width: 100%;
}


It’s 100% wide and then 1.875em from the left so now it can never fit in any container because it is always going to be 1.75em too big.

Avoid setting height on fluid content:


#content {
	float: right;
	width: 40%;
	height: 95%;
	margin: 1.563em 1.563em 0 0;
}

Usually its content that dictates the height so don’t try to second guess it and let content dictate the height. Fixed height sites are usually only good for small graphic type sites but not for sites that will provide textual information.

Get some content into the page and then you can see better how it can be arranged. Don’t try to squeeze the layout into little boxes as the web isn’t made like that and text needs to breathe and flow with the page.

Percentage padding refers to the width of the element and so percentage padding top will vary depending on how wide the window is and the element will move up and down as the window is opened which is not a good effect.


#content h1.tagline {
	font-size: xx-large;
	text-align: center;
	padding-top: 60%;
}

Avoid vertical percentage margin or padding as it won’t work like you expect. It may be ok if that’s the only piece of text you have in that page but otherwise it will end up all over the place.

Thank you so much for replying, Paul. I’m just learning and I was hoping that one of you gurus would reply, because I want to learn to do things the right way. I’ve read some of the stuff on your website and I’m learning a lot from you.

Should I not have the logo and nav in a div (#card)? Maybe I need to put the logo, then the nav and then the content and float it to the right. I’ll work on it tonight and see what happens. I’m trying to get how positioning and floating work cemented into my brain. Thanks again for your help.

If the element has a purpose then you need it. For example there is often no need to wrap a div around a ul as the ul is a perfectly good container. You only need an extra div if perhaps you need a hook for extra background effects or need padding and borders that can’t fit elsewhere.

I’ll work on it tonight and see what happens. I’m trying to get how positioning and floating work cemented into my brain. Thanks again for your help.

Have a try yourself first as you learn a lot more and then when you get stuck or want to check what is the right way then post back.:slight_smile:

The main thing is to think about content and how it will flow rather than drawing a box and then squeezing the content into it.

Paul, I’ve been messing around with this site and I still can’t get it to do what I want. I’m posting screen shots of what I’ve got so far and they show exactly how I want it to look on all browsers at reasonable resolutions (800 x 600 and above). My computer is displaying at 1440 x 900. The image scales reasonably well and the Content div on the right does fine, but the I’m still having problems with the nav. I took it out of the div and just tried laying out the ul itself, but that made things worse.

Here is the homepage:

The content on the right is where I want it, but I’m not sure how to get it there the right way.

Here is the About page:

I used the overflow selector (I hope that is the right word, it’s late) there for the scroll bar as I want to keep the content within the wrapper and before it would just run off. Is that because I specified a height for the wrapper?

Finally here is one of the service pages:

I’m showing my nav menu in this one. Even with my wide screen, the sub-level nav shows as 2 columns instead of one in IE7. I have no clue what’s going on there. And then of course my problem is that the top-level nav wraps when the browser window gets smaller. I’ll work on it more tomorrow, but I wanted you to at least see what I am going for. These shots are exactly how I want them to look, but as you pointed out, they break when the browser window get’s smaller and on PCs with smaller displays.

Hi, I must wait for the attachments to approve first, however I’ll answer your other question.

You specified the height of a wrapper and because overflow was used, once the width and/or height limitations are reached, scrollbars will appear. So yes, it’s because you used a height :).

Thanks, Ryan. So was that a correct solution? I really don’t want the wrapper to be liquid.

Hi,

We’ll need the updated html and css to debug further :slight_smile:

Hey Paul, I’ve worked on this pretty much all evening and here is what I’ve come up with. Please let me know if I’m violating any of the rules of good coding because as I told you before, I want to learn to do it right. And I know this isn’t the place for a review so I just want to know your thoughts on the way I’ve designed this page, not the design itself. Thanks.

HTML for Home

<!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>
	<title>BTS Consulting - Home</title>
	<link href="style-em.css" rel="stylesheet" type="text/css" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

<body>
	<div id="wrapper">
	  <div id="leftColumn">
			<a href="index.html"><img src="images/logo2.png" alt="BTSecurity Consulting" /></a>
		  <div id="nav">
			<ul>
				<li><a href="about.html">About</a></li>
				<li><a href="#">Services<img src="images/arrow.png" alt="arrow down" height="9px" width="9px" /></a>
					<ul>
						<li><a href="service1.html">Service 1</a></li>
						<li><a href="#">Service 2</a></li>
						<li><a href="#">Service 3</a></li>
						<li><a href="#">Service 4</a></li>
					</ul></li>
				<li><a href="contact.html">Contact</a></li>								
			</ul>
		  </div><!-- end of nav div -->
	  </div> <!-- end of leftColumn div -->
	  <div id="rightColumn"><h1 class="tagline">Tagline goes here!</h1>
			<p>Blurb about why they should choose you for their security needs</p>
	  </div> <!-- end of rightColumn div -->
	  <div id="clear"><!-- for clearing floats --></div>
	</div> <!-- end of wrapper div -->
</body>
</html>

HTML for About page (only content in rightColumn div will change from page to page)

<!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>
	<title>BTS Consulting - About</title>
	<link href="style-em.css" rel="stylesheet" type="text/css" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

<body>
	<div id="wrapper">
	  <div id="leftColumn">
			<a href="index.html"><img src="images/logo2.png" alt="BTSecurity Consulting" /></a>
		  <div id="nav">
			<ul>
				<li><a href="about.html">About</a></li>
				<li><a href="#">Services<img src="images/arrow.png" alt="arrow down" height="9px" width="9px" /></a>
					<ul>
						<li><a href="service1.html">Service 1</a></li>
						<li><a href="#">Service 2</a></li>
						<li><a href="#">Service 3</a></li>
						<li><a href="#">Service 4</a></li>
					</ul></li>
				<li><a href="contact.html">Contact</a></li>								
			</ul>
		  </div><!-- end of nav div -->
	  </div> <!-- end of leftColumn div -->
	  <div id="rightColumn" style="overflow: scroll; overflow-y: scroll; overflow-x: hidden;">
		<h1>About</h1>
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
			
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p>

			<p>Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
	  </div> <!-- end of rightColumn div -->
	  <div id="clear"><!-- for clearing floats --></div>
	</div> <!-- end of wrapper div -->
</body>
</html>

Here is the style-sheet:

/* BTS Consulting */

/* CSS Reset */

body {
	margin: 0;
	padding: 0;
	background: #132439;
	font-size: 100%;
}

img {
	border: none; /* for IE */
}

/* New Font */

@font-face {
	font-family: navFont;
	src: url('fonts/FUTRFW.TTF');
}

/* Div Layouts */

#wrapper {
	width: 72.625em;
	margin: 3em auto;
	background: #2B5484; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#03336C', endColorstr='#a2aaaf'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#03336C), to(#a2aaaf)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #03336C,  #a2aaaf); /* for firefox 3.6+ */
	border-radius: 1.313em;
}

#leftColumn, #rightColumn {
	float: left;
}

#clear {
	clear: both;
}

#leftColumn {
	width: 59%;
}
#leftColumn img{
	padding: 4.125em 0 1.25em 2.25em;
}

#nav {
	width: 44em;
	height: 1.875em;
}

#nav ul {
	font-family: navFont, 'lucida console unicode', tahoma, arial, sans-serif;
	font-size: large;
	padding-left: 4em;
	padding-top: 4em;
	margin: 0;	
}

#nav ul li {
	display:inline;
	height: 1.875em; 
	float:left; 
	list-style:none;
	padding-left: .25em;
	padding-right: 1em;
	position: relative;
	border-left: 1px solid white;
}

#nav li a {
	text-decoration: none;
	color: #dce0e5;
}

#nav li a:hover {
	text-decoration: none;
	color: #891B12;
}

#nav li ul {
	margin: 0;
	padding: 0;
	display: none;
	position: absolute;
	left: 1.25em;
	top: 1.25em;
}

#nav li:hover ul {
	display: block;
	width: 11.25em;
}

#nav li li {
	list-style: none;
	display: list-item;
	margin-top: .563em;
	border: none;
}

#nav li li a {
	color: #dce0e5;
	text-decoration: none;

}

#nav li li a:hover {
	color: #891B12;
}

#nav img {
	margin: 0;
	padding: 0;
	padding-left: .313em;
}


#rightColumn {
	width: 29em;
	height: 35em;
}

#rightColumn p {
	font-family: candara, 'lucida console unicode', arial, sans-serif;
	color: #010f20;
	font-size: medium;
	padding: .625em;
}

#rightColumn h1 {
	color: #000e1f;
	font-family: navFont, 'lucida console unicode', tahoma, arial, sans-serif;
}

#rightColumn h1.tagline {
	padding-top: 6.35em;
	font-size: xx-large;
	text-align: center;
}

I tried this in the latest versions of Chrome, FF, Opera, and Safari and in IE7 on a laptop with a display of 1440x900. I’m assuming that with a smaller display a user would have to scroll horizontally. Is that correct? I’ll try it on others displays, but can’t until Monday. If that is true and I’m sure that is a design “no-no”, I’ll have to rework the page so that it is at least viewable in an 800x600 display, right?

Thanks again for all your help. I’ve learned a ton today.

Got your PM asking me to look at this, and I hate to say it, but what you have here is what I would call a non-viable design concept. Unless you’re going to spend a bunch of time using media queries to re-arrange EVERYTHING, it’s just not a good idea from an accessibility or usability standpoint.

Amongst the issues without even TALKING about coding it, is your ‘home page’ concept that isn’t a home page because there’s no content of value on it. That’s a SPLASH page – something that is just another ‘click through’ to annoy visitors; there’s a reason back when they were in vogue they ended up on every ‘bad web design’ list alongside auto-playing music and gif animations. Your home page should include information on who you are and what the site is about-- it’s your pitch. You don’t put anything there, what’ the point of it being it’s own page? What you’re using for an ‘about’ page is probably a better choice for ‘home’.

Likewise you’re wasting a massive chunk of the window on nothing, while shoe-horning the content of the page into a narrow little side column – that’s NOT good usability… in fact it’s the exact opposite… you don’t blow 70% of the screen width on a logo and the menu, then shove the actual content – the part people actually visit websites for – into the remaining 30%. Content is royalty, treat it as such… everything else? Not so much.

I mean, I can see what you did here - you’re trying to be innovative - I applaud the effort… You don’t see websites laid out like this – but like all things that “hey, nobody else is doing it this way”, you really have to ask the question… “Maybe there’s a reason for that?”

The code from your most recent post has some things to point out as well. We’ll just talk the markup since from a coding standpoint, the markup should stand on it’s own without the layout.

The transitional doctype means you are coding ‘in transition’ from 1997 to 1998 – basically 15 year old coding methodologies… it’s saying “this is HTML 3.2 that I’m PRETENDING is HTML 4”. Even if the rest of the document is ‘modern’ you’re throwing up a flag right there. You didn’t include language specs which are required for XHTML, you didn’t declare the MEDIA attribute on your link, content-type should be in there as SOON as possible since it’s re-iterating the encoding type for everything else.

Your logo image should probably be your H1, and it makes no sense for a ‘tag line’ to be the H1; the topmost heading (h1) is unique on a page for a reason - all other headings are subsection of it. H2’s are subsections of the h1 preceeding them. H3’s indicate the start of subsections of the H2 preceeding it – this is why skipping numbers going down is bad, and why when you use different headings you really need to ask yourself “is this a subsection of the heading before it, or kin to the heading before it, or kin to the heading before that”… Because H1 is the topmost heading under which all other things are subsections, The site title/logo is usually the only logical choice for it.

Think of a newspaper – regardless of what they look like, what’s at the top of EVERY page? A heading with the name of the newspaper and the page number. While sure, on the front page you have a massive headline – that doesn’t make all those smaller headlines subsections of the largest one. “MAYOR CAUGHT TAKING MILLION DOLLAR BRIBE” may be the big-ass headline on the page, but that doesn’t mean that “K-6 gets new school building” or “Distressed woman goes on shooting spree” are subsections of it. (at least one would hope not). They’re ALL H2’s… The h1 being the title of the paper – something carried through to every page. A website is like a newspaper or book – you have the the H1 at the top of every page tying all the pages together. SOME people would argue that’s the title tag’s job – but TITLE is not a content element, so it doesn’t actually COUNT towards semantic markup or choosing headings – it’s not even guaranteed to be used by user agents in the first place! That’s why it’s in HEAD and not BODY.

You’ve got a div around your menu ul, that’s probably unnecessary… and – personal opinion warning I really hate the name ‘nav’ – it’s vague, it’s pointless – and even if you know it’s short for navigation, EVERY ANCHOR ON THE PAGE IS NAVIGATION… It’s why I call mine things like ‘topMenu’, ‘cartMenu’, ‘mainMenu’, etc, etc… Say what it is EXACTLY. In general that’s just about writing clear code.

Which at LEAST you seem to be doing a good job indenting… though a few more carriage returns wouldn’t hurt :smiley:

Your comments are placed in a manner that could trip rendering bugs in legacy versions of IE and FF – especially if you start adding floats. Yes, I said COMMENTS can trip rendering bugs… Mindblowingly stupid on the part of browser makers – you betja! In my code you’ll often see things like

<!-- #sideBar –></div>

Moving the comment BEFORE the closing tag prevents it from ending up between sibling elements – which is where comments can trip the various bugs like ‘double render’ or ‘disappearing content’… It also is a waste of time to say “end” because, well… that’s what </div> means. I mean, really… I had no clue </div> was the end of something… You’ll also notice the number sign used to indicate I’m closing a ID, just like in CSS. Helps keep track of things.

You also have a clearing DIV - that’s another outdated/outmoded approach to writing code. Usually an overflow trigger or float on the wrapping element can do the same job without bloating the markup… Now, you might think “but that’s just moving it into the CSS instead of the HTML” – and that’s right – and the point. If you use the same layout and CSS across multiple pages, and it’s in an external file, that CSS is CACHED instead of downloaded again from the server… so if it comes to making your markup bigger or your CSS bigger, choose the CSS because if people visit more than one page on your site, the cached CSS and smaller HTML will save you bandwidth.

… and make all those sub-pages appear to load faster… and faster loading is ALWAYS a plus.

Above I talked about comments and formatting and clear code/names. There’s an article on IBM’s linux developer site that while meant for C coders, I think anyone who is going to write code be it markup, scripting or real programming language should take the time to read.

http://www.ibm.com/developerworks/linux/library/l-clear-code/index.html

Vague/short names and sloppy formatting usually end up being a case of laziness and shortcuts that do nothing but inconvenience everyone in the long run. Oh noes, you might have to type five or six more characters onto that name – not that… :smiley:

Let’s see… what else… Well, that arrow for the menu probably doesn’t belong in a IMG tag. IMG is for content images, that’s presentation that doesn’t even make sense if CSS is disabled – so I’d move that into the CSS. Likewise that logo image is presentational affectation of the text… so make that the H1 and use some form of image-replacement method to put the image version on top of it. If your content with images disabled and CSS disabled (or not even written) doesn’t make sense and isn’t at least halfway decent looking, you most likely messed up on using semantic markup.

I just did a rewrite for another user that has my FULL documentation of the how/why/where – you might want to read it as it may clarify a few of the things I just said above:

Sorry to rain on your plans quite as hard as I did, but you did ask for it via PM. Basically from what I’ve seen of those pics – I’d be backpedaling away from that design so fast a Veyron would have trouble keeping up. It’s a perfect example of everything WRONG with drawing a pretty picture of a website before you’ve even got all the content together and marked up semantically.

Get your content together – semantically mark it up, make your layout using CSS, THEN go to the paint program to make all the graphics you’re going to hang on the layout, THEN add any scripts that will enhance the page without breaking it’s functionality if scripts are missing. It’s called “progressive enhancement” – you start simple (content and markup) and slowly build it up. That way if (ok, when!) all your fancy bits of extra tech like CSS, images and Scripts are not present or disabled on purpose by the user for whatever reason, the page doesn’t fall apart… in other words, it “gracefully degrades”…

Two phrases that typically terrify a lot of people slapping out PSD’s these days and then slathering jquery nonsense on top of it like shellac on a pile. “progressive enhancement” and “graceful degredation”

Because if while “designing” all you are thinking about is what it’s going to look like on a desktop resolution screen, you’ve missed the point of HTML.

Which is more or less what I was rather less eloquently saying in my initial post #2 :slight_smile:

Usually its content that dictates the height so don’t try to second guess it and let content dictate the height. Fixed height sites are usually only good for small graphic type sites but not for sites that will provide textual information.

Get some content into the page and then you can see better how it can be arranged. Don’t try to squeeze the layout into little boxes as the web isn’t made like that and text needs to breathe and flow with the page.

I think Jason has given you enough to think about and once you have digested the comments feel free to post back for more specific help with the layout. You have to remember that if things aren’t working properly then its because you are trying to do something that is not viable for the web. However, ultimately the choice is yours once you have reviewed the information available.

Off Topic:

Surprised at you Paul, not trimming your quotes :smiley:

Off Topic:

I’m getting lazy in my old age :slight_smile: I’ll do it now.

Thanks, guys. You’ve given me a bunch to chew on, but that’s what I need, even if it doesn’t feel good. I’m about a month into learning HTML and CSS and the book I’m reading is Web Designer’s Reference by Craig Grannell and it’s from 2005. That’s where I got the clearing div and some other things. So back to square 1. Thanks again and you guys will be hearing from me again. I still have a lot to learn.