Website with some graphical glitches - help me eradicate them please

MarcLister

MarcLister

MarcLister

Soldato
Joined
7 Mar 2005
Posts
19,606
Location
LU7
I work for a local school and putting it bluntly the website is rather nasty and 90s-esque, not surprising considering I have to use Frontpage 2000 to maintain it. It uses frames which I find incredibly frustrating to manage when I need to add new pages to the menu list.

I've taken it upon myself to design a new website for the school using hand-coded XHTML and CSS so that the code is as concise as possible. To show what I mean, I was asked to re-write a page because a paragraph at the top of the page caused the a table immediately below it to shift to the right. I couldn't fix it without redoing the page. I re-did the page and once I'd finished the new page looked loads better. It was also a smaller page, being 12KB compared to its ancestor's 120KB or so. The number of surplus tags on every page is just ruddy ridiculous and means if I need to change a date or correct a typo I end up cross eyed and with a headache looking for the actual text I need in a haystack of tags.

I think at some point in the future I might be able to deploy a CMS, probably Wordpress as it'll be me doing the work so I hope I get a say in the CMS we'd use. Until then I want a new site that keeps the colours of the current site but does away with frames, surplus tags and has a nice dropdown menu so you can see what content is in a section of the site without having to actually enter that section of the site as people do now since we have a static menu. So over the last 2-3 weeks I've spent a few minutes a day just putting together something to show a colleague for his opinions and to form a base from which to implement a new site.

I've decided that since the menu links might change I want a menu that I can change once and have replicated on every page, for this reason I've chosen the PHP include() method/class. I've done the same with the footer so eventually the only part of each page that will be unique will be the actual content div. I've posted my XHTML and CSS code below so people can critique it/me, constructively I hope. :) I'm not an expert on XHTML/CSS by any means but I can tell you that the look, layout, UI of this site is miles better than the current site. :p

I've also got some graphical glitches that I'd like to try and eliminate so the site looks as professional and clean as it possibly can considering my skills and talents.

In Opera the submenu items highlight align nicely with their parent li. For example, go to Clubs, Sport clubs, Netball. The highlight on hover align precisely. In Firefox and IE however the highlights for the submenu items are a few pixels down. I can correct this by changing:
Code: 
#nav li ul ul {
margin: -26px 0 0 9em;
}
to
Code: 
#nav li ul ul {
margin: -28px 0 0 9em;
}

Naturally by doing that the highlights don't align in Opera anymore. I just can't see what I'm doing wrong as I would have thought that Opera and Firefox would render the page nearly identically to each other not that Firefox and IE would look the same and different to Opera's rendering. :confused: I have notice that if I mouse over the first item in any list the first item highlight has a few pixels of blue between it and the parent item. I think if I can get the two white highlights to touch here then Opera, Firefox and IE will be on the road to rendering identically. :)

I've used the code from http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page to force the footer to the bottom of the page, no matter how much content there is. I was hoping the yellow of the content div would fill the whole of the page down to the footer. It doesn't. Any ideas why and can I fix it? I'm using the yellow as the pages on the school website were white and I was asked to find a colour that would liven the pages up. I found a nice yellow since the standard HTML yellow was too bright and overpowering. The yellow I'm using here is #ffe600 and I think it contrasts quite well with the dark blue, it certainly looks better than the dark blue and white which just looked too much like a boring company website. Since we are, in effect, a primary school we've decided that the #ffe600 yellow livens the site up a bit. :) I might decide for the final site to have the whole page use #000033. I've used #000033 as that is the same blue on the school site and forms part of the school colours.

I hope people will agree that the XHTML is exquisitely coded as is possible. :D I'm a bit OCD and I like my XHTML to be as sleek and lean as possible. The header, menu and footer divs are where I've used PHP include to import the generic menus. The content div is unique to each page. I've included the PHP code at the bottom of this post. If there are any improvements I can make to the PHP/XHTML code I'll gladly take them on board but I think that the CSS code is the weakest part of the site and I can probably tidy it up a lot before I deploy the site. The CSS is kind of the work in progress and so it can probably be pruned a fair bit once I've got a theme I'm happy with.

If anyone could also comment on how the site will scale on smaller resolution screens I'd love to hear from you. I made a website for a lecturer at Uni for my final year project about 2 years ago and this website is the first major site I've done since then. I've learned quite a bit since then, including the PHP include trick which could have said me about 8 years worth of work if I'd known about it when I was doing my final year project. :p

Apologies for the length of the post and all the code to read through. On the bright side though, once you've read this you'll have the stamina to read Tolkien's The Hobbit in one sitting! :cool: I've use
Code: 
 tags for the XHTML and CSS and [PHP] tags for the PHP code at the bottom. If people can think of better tags to use for the code, so it shows more of it, let me know and I'll make the changes.

[B][U]XHTML[/U][/B]
[code]
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>Overstone Combined School</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<div id="wrapper">
<div id="header">
<p>Welcome to Overstone Combined School's website.<br/> The time is 10:13 PM and the date is Friday the 11th of December 2009.</p></div>
<div id="menu">
<ul id="nav">
		<li><a href="#">About Us</a>
			<ul>
				<li><a href="#">The School</a></li>
				<li><a href="#">Curriculum</a></li>
				<li><a href="#">Nursery</a></li>
				<li><a href="#">Infant</a></li>
				<li><a href="#">Junior</a></li>
				<li><a href="#">Results</a></li>
				<li><a href="#">Homework</a></li>
				<li><a href="#">Progress in Calculation</a></li>
				<li><a href="#">Pupil destination</a></li>
				<li><a href="#">OFSTED</a></li>
				<li><a href="#">SEN</a></li>
			</ul>
		</li>
		<li><a href="#">Clubs</a>
			<ul>
				<li><a href="#">After School Club</a>
					<ul>
						<li><a href="#">Registration form</a></li>
						<li><a href="#">Newsletter</a></li>
						<li><a href="#">Policy</a></li>
					</ul>
				</li>
				<li><a href="#">Sport clubs</a>
					<ul>
						<li><a href="#">Netball</a></li>
						<li><a href="#">Football</a></li>
					</ul>
				</li>
				<li><a href="#">Musical clubs</a>
					<ul>
						<li><a href="#">Dance</a></li>
						<li><a href="#">Music</a></li>
						<li><a href="#">Choir</a></li>
						<li><a href="#">Orchestra</a></li>
						<li><a href="#">Recorders</a></li>
					</ul>
				</li>
				<li><a href="#">Other clubs</a>				
					<ul>
						<li><a href="#">Art</a></li>
						<li><a href="#">Gardening</a></li>
						<li><a href="#">Newspaper</a></li>
						<li><a href="#">Library</a></li>
						<li><a href="#">Shop</a></li>
						<li><a href="#">Cookery</a></li>
						<li><a href="#">Mind Bogglers</a></li>
						<li><a href="#">Nature Detectives</a></li>
					</ul>
				</li>
			</ul>	
		</li>
		<li><a href="#">Diary &amp; Activities</a>
			<ul>
				<li><a href="#">Diary</a></li>
				<li><a href="#">The School day</a></li>
				<li><a href="#">PE &amp; Games</a></li>
				<li><a href="#">School trips</a></li>
				<li><a href="#">Activity days</a></li>
				<li><a href="#">Sporting fixtures</a></li>
			</ul>
		</li>
		<li><a href="#">Healthy Schools</a>
			<ul>
				<li><a href="#">Walk to School</a></li>
				<li><a href="#">Go for Gold</a></li>
				<li><a href="#">Travel plan</a></li>
				<li><a href="#">Energy</a></li>
				<li><a href="#">Solar panels</a></li>
				<li><a href="#">Solar water</a></li>
				<li><a href="#">Healthy Breakfast</a></li>
				<li><a href="#">JRSOs</a></li>
			</ul>
		</li>
		<li><a href="#">Links &amp; Contacts</a></li>
		<li><a href="#">ParentMail</a></li>
		<li><a href="#">PTA</a></li>
		<li><a href="#">Pupils page</a></li>
		<li><a href="#">School lunches</a></li>
		<li><a href="#">Policies</a>
			<ul>
				<li><a href="#">Admissions</a></li>
				<li><a href="#">Home/School agreement</a></li>
				<li><a href="#">Attendance</a></li>
				<li><a href="#">Rules &amp; discipline</a></li>
				<li><a href="#">Health</a></li>
				<li><a href="#">Assessment</a></li>
				<li><a href="#">Other policies</a>
				<ul>
				<li><a href="#">Physical activity</a></li>
				<li><a href="#">Disability equality scheme</a></li>
				<li><a href="#">Gender equality scheme</a></li>
				<li><a href="#">Teaching &amp; learning</a></li>
				<li><a href="#">Inclusion policy</a></li>
				<li><a href="#">Electronic equipment</a></li>
				<li><a href="#">Uniform</a></li>
				<li><a href="#">Jewellery</a></li>
				<li><a href="#">Behaviour &amp; anti-bullying</a></li>
				<li><a href="#">Swimming</a></li>
			</ul>
			</li>
			</ul>
		</li>
		<li><a href="#">Staff &amp; Governors</a>
			<ul>
				<li><a href="#">Teaching staff</a></li>
				<li><a href="#">Staff</a></li>
				<li><a href="#">Governors</a></li>
			</ul>
		</li>
	</ul></div>
<div id="content">
<br/>
<h1>Hello</h1>
<p>This is our new website. We hope you like it! We've redesigned our site to keep the colours from the old site but with a new easier to use layout. Let us know what you think of the redesign.</p>
</div>
<div id="footer">
<p>This website uses valid XHTML &amp; CSS.</p></div>
</div>
</body>
</html>

CSS
Code: 
*, html, body, #nav li{
margin:0;
padding:0;
}

#wrapper {
min-height: 100%;
position: relative;
}

body{
font-family: Arial, Helvetica, sans-serif;
background-color: #000033;
}

#nav a {
line-height: 1;
}

#content {
padding-bottom: 60px;   /* Height of the footer */
height: 100%;
}

#header h1, #header h2, #header h3, #header h4, #header h5, #header h6, #header p, #header a, #footer p, #nav a {
color: #fff;
}

#header {
border-bottom: 2px solid #fff;
margin-bottom: 5px;
}

#header p {
text-align: center;
margin: 5px 0;
}

#content {
clear: both;
background-color: #ffe600;
}

#content h1, #content h2, #content h3, #content h4, #content h5, #content h6, #content p, #content a {
margin: 0 5px;
}

#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
}  

#footer p {
text-align: center;
margin: 5px 0;
}

#nav{
font-size: 100%;
}

#nav a {
padding: 5px 0;
}

#menu {
width: 84%;
margin: auto;
}

#nav a {
display: block;
text-align: center;
text-decoration: none;
margin: 5px 0px;
}

#nav li {
background-color: #000033;
}

#nav a, #nav li, #nav li ul {
width: 9em;
}

#nav li {
float: left;
margin-top: -5px;
}

#nav li ul {
position: absolute;
left: -999em;
}

#nav li ul ul {
margin: -26px 0 0 9em;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}

#nav a:hover, #nav li:hover > a {
background-color: #fff;
color: #000033;
}

/* New stuff to keep footer at bottom of screen */

html,
body {
margin:0;
padding:0;
height:99%;
}
#wrapper {
   min-height:99%;
   position:relative;
}

#body {
   padding: 10px;
   padding-bottom: 20px;   /* Height of the footer */
}

#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;   /* Height of the footer */
/* border-top: 2px solid #fff; */
}

PHP
PHP: 
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>Overstone Combined School</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<div id="wrapper">
<div id="header">
<?php include("header.php");?>
</div>
<div id="menu">
<?php include("menu.php");?>
</div>
<div id="content">
<br/>
<h1>Hello</h1>
<p>This is our new website. We hope you like it! We've redesigned our site to keep the colours from the old site but with a new easier to use layout. Let us know what you think of the redesign.</p>
</div>
<div id="footer">
<?php include("footer.php");?>
</div>
</div>
</body>
</html>
 
Oh right. Nah, been developing with WAMP. :p

That's pretty close. I've been trying to get the menu items to be on one line and not broken over into two lines like you've got. :( I might have to merge some menus into each other.
 
Yeah, that's the first thing I was going to suggest. I'm no pro but I'll take a look at it for you, see if I can figure out how to get your sub-menus to align.
 
Cheers. Like I said I'm not an expert at this but I'm easily the best at the school. Even if you can only offer opinions, thoughts and suggestions from a different perspective to mine I'd be most grateful. :)

If I feel I can't condense the menu items more than they are now; have already done a bit of that, I might abandon the idea of a horizontal menu and go back to a vertical one but still with the dropdowns. :)
 
Been playing about and didn't solve your problem. But the more I used the menu I realised it would probably be easier to use, code and style if you used what's called a "Mega-Drop Down Menu"

I did a very quick mock-up for you and you can find out more about them and examples in this Smashing Magazine article.

e1dulv.jpg


I think you should trim down the amount of menus as well like you mentioned. For example Staff & Governors, Policies and PTA could be under the About Us section.
 
I had a quick read of the Smashing Magazine article and the link from that to the Mega Drop Down Menu article but I couldn't find any sample code to look at. It does look good and if I can get more links into a menu drop down like you've done with the Clubs then I think I can make some progress.

Do I just google Mega Drop Down Menus then? Is it a common thing that I'll find plenty of example code for?
 
Well this morning I decided to try again and looked at the HTMLDog.com Son of Suckerfish Dropdowns. I took the original HTML and CSS code, pasted them into Notepad++ and made a very basic HTML file. I opened it up in Opera and it looked OK. I added some basic CSS changes of my own such as using Arial as the font, removing text decoration from the links and centering the text.

Then I tried the page in Firefox and IE8 and lo and behold the page looked exactly the same in all three browsers! I then added some borders to the #nav ul's so I could see how they were aligned in each browser. Again in all three browsers the borders seemed to show that the 2nd dropdowns were the same distance down from their parent dropdown. So I changed the 1em in
Code: 
#nav li ul ul {
	margin: -1em 0 0 7em;
}
to -10px. The second dropdowns were now further down in all three browsers. So I made changed the value to -15px. Much better but still a few pixels off being correctly aligned. I tried -16px before -17px looked spot on. I checked the page in all three browsers and it seems everything is now rendering the same in all three browsers. :)

I will subsitute the code I used last night for this one and see if I can get the menus lining up properly. I'll think about merging ParentMail into Links & Contacts and PTA, Policies and Staff & Governors into About Us. That should take me from 11 top level menu items to 7 which should be a lot easier to manage and keep in a single row.
 
Right I've made some progress. :) I've got the menu sorted up to a point. There aren't any borders on the dropdowns as it is. I think a border would help to "mark" where the menus are. When I put a border on I get some 1px glitches that I've struggled to fix.

Below are 6 links. Opera/Firefox/IE before and after I applied the borders. The after pics have red circles around the glitches that I need fixed if I'm going to have borders on the dropdowns. Any volunteers? :p

Opera without borders
Opera with borders
Firefox without borders
Firefox with borders
IE without borders
IE with borders
 
I feel sorry for you that you have to use frontpage :(

Anyway, i agree that there should be a border edge around the menu, without it, its harder to look at and navigate. But then you are getting the off pixel with it.

Html is not really my style so cannot help with this im afraid.

Just an idea, but could you not download some example Frontpage web templates with menu's etc?
 
toon_mad said:
I feel sorry for you that you have to use frontpage :(
Click to expand...
Ta. :)

toon_mad said:
Anyway, i agree that there should be a border edge around the menu, without it, its harder to look at and navigate. But then you are getting the off pixel with it.
Click to expand...
Yep. It focuses the eye more and makes it easier to use I think. The site will use the dark blue from the current site but I'm thinking of keeping the menu a different colour so that it stands out. If I do this, say white or grey menu, contrasting with the dark blue background I may not need a border. But with a white menu on a white background I do need a border. :p

toon_mad said:
Just an idea, but could you not download some example Frontpage web templates with menu's etc?
Click to expand...
Would rather not. As mr.sly says I'm not really using Frontpage. I just use it to maintain the site and clean the code up where I can. There are so many tags and Frontpage antiquities that it is much easier to use Frontpage to maintain the site. However this means I rarely update the site from home as I wouldn't want to screw the site up by using Notepad++ to do things. If I'm allowed to use this new site I'm working on it'll be much easier for me to do things from home because a) I'll have designed the site so I'll know the layout and coding like the back of my hand and b) I'll use valid code and use the bare minimum code needed.

mr.sly said:
I don't think he's using Frontpage anymore, he just has to use it to maintain the old site that was created.
Click to expand...
Yep. And even that's painful. If I have to add new menu items, After School Club, Health Schools, ParentMail and School Lunches for example, it is so much faffing around to add a new link to the menu index frame and get the other pages to load properly. This new site will be much easier to look after. If I want to add a new item to the menu, or re-organise a current one, then I can just do that once and let the php include() do the work of updating each page's copy of the menu for me. :) I'm going to make the site easier to use and navigate, nicer to look at (and hopefully make people want to use it more) but also easier and QUICKER for me to update/maintain as the amount of time I have to spend updating things on the site is getting silly and I need to make it manageable. :)
 
You must log in or register to reply here.
Back
Top Bottom