6 replies [Last post]
holylime
holylime's picture
Offline
newbie
Last seen: 11 years 9 weeks ago
Timezone: GMT-4
Joined: 2009-11-16
Posts: 4
Points: 5

Okay so here is the issue. I'm new to web design. I have read several books and taught myself HTML, CSS, and tabbled in javascript. This is my first big project. Our library website badly needs and overhaul and I've been tasked to do it on the cheap. *whee for me* This is the website as it currently stands. It was designed by the previous director using Frontpage, and Frames.
http://library.briarcliffe.net

This is the prospective replacement.
http://webtestspace.awardspace.us - Source of Problem
As it is this looks and words fine in Opera, Firefox, and IE8. When viewed in IE7 is when things fall apart. The links across the top of the page somehow misalign throwing off the alignment, and staggering the content for the rest of the page. I would like to thank the community for any help that I may receive.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 29 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Doctype first

Before donning your armour and hunting bugs to slay, you'll need a proper doctype. You currently have this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>

Even though it's "a" Doctype, it's not complete. You need the second line with the reference url (no, browsers don't actually look it up— they only look to see that it's there).

Safest thing to do is copy-pasta:
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Find your HTML4.01 Strict doctype and get both lines in there.

Even other browsers can go into "almost standards" mode with this incomplete doctype. Meaning, yeah, even FF is going to have small issues possibly.

Second, we're going to fix your invalid code. Currently after opening your body tag you have some inlines sitting there (the anchor to index.html). Law-abiding webizens do not put inlines as direct children of the body. The body is one of those blocks who require a block as a direct child. Easiest way to do this is to wrap your whole page in a div (and ideally this div could also be used to center your page if you were thinking of centering it).

Third, we're going to put you on the right track regarding menus: a menu is semantically considered a list of links. What you have is the equivalent of a box of random pills. What you want is a pill-box. That means a nice list.

<div class="navigationBlock">	
		<a href="./About Us.html" class="menuItem">About Us</a> 
		<a href="./Library Services.html" class="menuItem">Library Services</a>
		<a href="http://aristotle.briarcliffe.net/" class="menuItem">Look For Books</a>
 
		<a href="http://www.cecybrary.com" class="menuItem" target="_blank">CECybrary</a>
		<a href="./Site Map.html" class="menuItem">Site Map</a>
		<a href="http://sites.google.com/site/libraryemailhelprequest/" class="menuItem">Email a Librarian</a>
	</div>
	<div></div>

As a general rule, you know you're doing something wrong if you're giving every sibling a class. Classes and id's are for those who are special from their siblings. You're doing the George Foreman thing: he named all his kids George. Might as well leave them called "George's kids" then. Less code.

Empty divs for spacing should go. You can always CSS that.

<ul id="navigationBlock">	
  <li><a href="./About Us.html">About Us</a></li> 
  <li><a href="./Library Services.html">Library Services</a></li>
  <li><a href="http://aristotle.briarcliffe.net/">Look For Books</a></li>
  <li><a href="http://www.cecybrary.com" title="off-site">CECybrary</a></li>
  <li><a href="./Site Map.html">Site Map</a></li>
  <li><a href="http://sites.google.com/site/libraryemailhelprequest/">Email a Librarian</a></li>
</ul>

Your div became another type of block, a ul. Other than the fact that ul's can only have li's as children, they're blocks like divs and can do all divs do.

Target="blank" is the #1 leading cause of annoyance, confusion and hair loss on teh innerwebz. People who are new often miss that they have a whole new window (esp if that new window sits completely over the old one) with a suddenly-broken back button. There are a very few number of cases where a new window is a Good Thing, but this is not one of them. You could add a title (which should display as a tooltip) stating the link goes off-site, but if people find themselves on a new page, they know how to hit the Back button to get back to the library. Without having to fiddle with closing new windows (Oh how often have I accidentally closed the old window as well!).

Maybe you had bottom margins on your navigationBlock and didn't see anything. The anchors being floated would have meant that the div's height was collapsed to nothing, since it would not see floats inside it and would think it was empty.

So instead of this:

.menuItem { float:left;
            width:16%;
            color:#A82A42;
            text-align:center;
            background-color:#FFFFFF;
            border-left:solid;
            border-right:solid;
            text-decoration:none;}

you'd have this:
.navigationBlock {
  width: 100%; /*Haslayout IE*/
  margin-bottom: however much space you want under the menu;
  overflow: hidden; /*wrap floats*/
}
.navigationBlock li {display: inline;} /*IE */
.navigationBlock a { 
            float:left;
            width:15%;
            color:#A82A42;
            text-align:center;
            background-color:#FFFFFF;
            border:solid #a82a42;
            border-width: 0 3px;
            text-decoration:none;
}

Borders got more explicit because just saying "solid" doesn't guarantee the colour you want in all browsers. Looks like Firefox is taking it from the colour, but some browser somewhere is going to use the lack of explicitness as an excuse to make a black border. Bleh.

Looks like more code, but it means your HTML is more semantic, and in the case of menus, it means more accessible (browsers and some assistive devices allow users to ask for all lists on a page).

I'm not sure, because the doctype was incomplete, but possibly 16% was too wide for IE, or maybe "medium" border meant 3px in one browser and 4px in another? Floats will wrap like text if they don't have enough room to all stay in a line, and so a menu can fit in one browser and be a hair too wide in another.

<tr class="alternateRow"><th rowspan="7">Bethpage</th><td>Sunday</td><td>Closed</td></tr>
				<tr class="alternateRow"><td>Monday</td><td>8:00am to 10:00pm</td></tr>

Excellent that you used a th for the left-side header. To increase the acccessibility of the table, you can add the scope attribute:
<tr class="alternateRow"><th rowspan="7">Bethpage</th><td scope=row">Sunday</td><td>Closed</td></tr>
				<tr class="alternateRow"><td scope="row">Monday</td><td>8:00am to 10:00pm</td></tr>

What this does is make Sunday, Monday etc the "heads" of the rows, making the td's after them "belong" to them.

So "Closed" refers to Sunday, the times on the next row belong to Monday, etc.
A hidden header before the table might be nice (pulled offscreen and saying "Branch times" or "Schedule" or something). Or a hidden <caption> with that name. If you want.

But anyway first thing is, fix the doctype, then see what IE and the others look like. Regardless your menu should be a ul, but visually your problems might be solved just by having the full doctype.

I'm no expert, but I fake one on teh Internets

holylime
holylime's picture
Offline
newbie
Last seen: 11 years 9 weeks ago
Timezone: GMT-4
Joined: 2009-11-16
Posts: 4
Points: 5

Your Help

You have given me a lot of help and a lot to think about. And I also know about time. The amount of time it will take me to 'debug this CSS' >, by an order of magnitude, 'than doing it right the first time'. So I'm going to reformat my HTML to bring it inline with your suggestions, and hopefully standard conventions, then start over with the CSS formatting. Would it be possible for me to PM you for help when I need it??

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 44 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

holylime wrote: Would it be

holylime wrote:

Would it be possible for me to PM you for help when I need it??

No, this is a public forum and should be used as such. This way, others can learn from your trials.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

holylime
holylime's picture
Offline
newbie
Last seen: 11 years 9 weeks ago
Timezone: GMT-4
Joined: 2009-11-16
Posts: 4
Points: 5

Well I have effected a

Well I have effected a reorganization. Fixed the doctype. Gotten the freaking thing validated. And now the error has been pinned down to how IE7 interprets border widths as compared to Firefox, IE 8, and so on. So I used the suggestion to use absolute definitions to nail down the width using (border-width:3px)

Here is the link to the site with all necessary code.
http://webtestspace.awardspace.us

Opinions, Comments??

I honestly think I'm back on the right track now. And I've started reading more of the forum posts.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 13 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

On the page pointed to by

On the page pointed to by your link you still have several html errors which you must fix. The highest acceptable number of html syntax errors is zero.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

holylime
holylime's picture
Offline
newbie
Last seen: 11 years 9 weeks ago
Timezone: GMT-4
Joined: 2009-11-16
Posts: 4
Points: 5

Now it has been validated and

Now it has been validated and fixed.