Review our website design... Need some tips!

Hey guys, we're in the process of finalizing everything, just wanted some advice in terms of fonts and that sort of stuff. Please let me know what you honestly think, thanks.

www.5thRound.com/test.php

 

Apart from the inconsistant fonts, abundance of images and the 82 warnings its not that bad. But it can definately use a lot of work.

 

so many images!!!???

 

Toss onto that non-semantic markup, lack of graceful degredation, use of outdated javascript techniques that could be done more responsive and with less code in CSS, multiple redundant CSS property declarations, endless amounts of inline styling, use of breaks as spacers, use of spacer .gif's.

As I've said about a few other sites lately, it's very 1997.

Sad part is, 34k of HTML for a page that probably doesn't need to be more than 8-12k.

 

Haha! Made me giggle. I wanted to be more motivational rather than break him down completely... But hey, whatever works for you.

 

I figure it's better to list what's wrong then try to help fix it, than to sugar coat it or ignore problems outright.

Besides, it's what I do.

@5thround - what you should probably do is start over by putting JUST the content of your page - links, styling, images that are content NOT presentation, into your HTML using what are called 'semantic' tags. Headers get header tags, lists go in list tags, paragraphs in paragraph tags - do not worry about how it looks at this point, just put the objects in the order they would appear on the page into your HTML.

THEN, once that is done, you use CSS to create the layout and add the presentational images. You may have to add a div or table here or there, but the net result will be less code, lower bandwidth use, and ease of maintennance.

If I have time later, I'll toss your design into one of my 'example' templates so you can see what I mean. I'll use one of the table ones since I'm guessing it's a bit early to be teaching you complex float models.

 

Hi friend i saw your post by accident but i went to the website to see if i could help and my opinion is the next: Just don´t do anything more. In my opinion the website is really fantastic.

Good luck

 

Thanks for the response guys, I appreciate it. I wanted to get into CSS but it's a little bit beyond where I am knowledge wise, I stopped web designing right when it was getting popular and I never learned using layers.

 

Aside from having to take a whole course on css, your site is fine for right now because you specified a loose dtd, but eventually it will have to be translated into css. As far as asthetics, perhaps your links could be a little less honkin big and that drop shadow far more subtle and not so wide. and your link at the bottom need more contrast with the background. How did you read these when you looked at it? I really had to strain. Anyway, I'd say it's pretty good and well organized and easy to navigate. These are the most important issues above all. Remember, users often just don't care about artistic aesthetics and it's often artists who fool themselves to believe that they do.

 

Ok, I'm going through and writing up a 'crash course in CSS' for you - because that really should be what you do with it... and I found some problems in your code.

<p style="text-align: center;"><span style="font-family: Verdana,Tahoma,Arial,Helvetica,Sans-serif; font-size: 10px;"><br><br><br><br><br><div class="TWIIGSPOLL"> <script type="text/javascript" src="http://www.twiigs.com/poll.js?pid=2522&color=bluedarkest"></script> <div class="TWIIGSPOLLpolllink" style="background-color: transparent; background-image: none; border-style: none; clear: none; display: block; float: none; position: static; visibility: visible; height: auto; line-height: normal; width: auto; margin-top: 8px; margin-right: 0; margin-bottom: 0; margin-left: 0; outline-style: none; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; clip: auto; overflow: hidden; vertical-align: baseline; z-index: auto; letter-spacing: normal; text-align: right; text-decoration: none; text-indent: 0; text-shadow: none; text-transform: none; white-space: normal; word-spacing: normal;"> <a class="TWIIGSPOLLmorelink" href="http://www.twiigs.com/poll/Entertainment/Television/2522" style="background-color: transparent; background-image: none; border-style: none; clear: none; display: inline; float: none; position: static; visibility: visible; height: auto; line-height: normal; width: auto; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; outline-style: none; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; clip: auto; overflow: hidden; vertical-align: baseline; z-index: auto; letter-spacing: normal; text-align: left; text-indent: 0; text-shadow: none; text-transform: none; white-space: normal; word-spacing: normal; font-weight: bold;"></span>&nbsp;</p>

Inlining five tons of CSS aside (in properties that could be reduced) - that anchor and DIV are never cleared in the document - which while they SHOULD be assumed when the TD is closed, it's still invalid HTML and could be causing problems. (probably the reason for the 'blank' line between the bottom of this section and the blogumentary area)...

I need to look at the poll script closer to see what that's doing.

 

Alright, let me walk you through what should be there for HTML - basically, this is part 1 of 2. The process I'm going to outline is how I handle writing every page I tackle. In a way this is a 'dry run' for a tutorial website I'm in the planning stages on launching, I'm just using your page as an example.

The key to clean coding is to only use what you HAVE to use to identify the bits and pieces of the page. In this 'tutorial' I'll be opening a lot of containers, and assuming you know enough to close them as appropriate. Another key is proper indenting and spacing. I personally use 'Wirth style' spacing, because I find it very clean and at the same time not as wasteful as AT&T style (which is what most other coders use). In either case consistant even spacing of your code prevents you from making a lot of mistakes in the first place.

I see that you are working in php - when doing so I write a HTML template first, which I then slice up into the php... Much as you do a .psd first to slice up into HTML. If you work in stages like that you will have a lot less headaches - and you can eliminate php as your possible cause of problems. Get a template.html working FIRST, then add your php to it.

For this example I'll be designing in HTML 4.01 Strict. NORMALLY I design in XHTML 1.0 strict just because it works better with XSLT backends, can be auto-parsed in php via the XML_parser functions, and in general the strict doctype results in cleaner code and better coding habits (IMHO) - being you've got a javascript poll you've got no control over and are embedding a flash video, HTML 4 Strict is the better choice. Even so, the validators are going to complain about BOTH those elements... but that's only 8 errors which we can ignore - Five 'no such properties', one undefined element, and two cases of the validator being a dink about the use of certain characters inside a anchor... No big deal. The first six are the cost of embedding flash, the last two are out of your hands (the poll). (and before anyone pipes up about getting rid of those errors by switching to loose, they still show up there so we might as well use strict)

First thing we see on the design is that it's fixed width in the center of the screen. As such we should have a 'containing' div to do that.

<div id="container">

When we get to CSS, we'll use that to center the page. TECHNICALLY we could do that without the containing div except for IE 5.x doesn't handle 'margins' properly.

Next, we see that you have a shadow around the page. Since the bottom part of the shadow could be put after our content as a separate block, we'll just define the parts we 'have' to... You have a smooth rounded in opposite corners with shading on both sides, doesn't make a lot of 'optical' sense and for simplification we'll just make it a even shading on each side.

<div class="shadow_wrap1"><div class="shadow_wrap2">

Finally, we get to the header. Your big logo is one big image, treat it as one. Right now it's sliced up into a bunch of images actually costing you pageload time... This is the problem with a lot of 'automatic slicing' programs and why you're best off doing your 'crops' of images by hand.

One of the problems with image headers is search engines just don't pay the least bit of attention to them, and that people browsing with images off or using screenreaders can't read your page. As such, we should use a H1 tag for the header... I use a technique called 'image replacement' to put the H1 text in place, then put the image after it and 'slide it up' over the text... Putting the image on the page is done as the background of a empty SPAN making 'graceful degredation' quite easy. To really make the search engines sit up and beg you should also include the full text that would be in the header in a H1. Since you have a 'subtext' "Where Champions are Born" we'll include that as emphasized text, and to round it off we'll include what page it is as well.

<h1>5thRound <em>Where Champions are Born</em> - Homepage<span></span></h1>

Next is the menu. Menus are little more than a list of links, so we run it out as a list... One really shouldn't use images for menus, and if you do image replacement techniques like above are the order of the day. For now we'll mark that up as just text - when we get to styling the page we may end up adding a few containers or spans, but for now this is all we need.

<ul id="menu">
	<li><a href="#">Home</a></li>
	<li><a href="#">News</a></li>
	<li><a href="#">Results</a></li>
	<li><a href="#">Forums</a></li>
	<li><a href="#">Interviews</a></li>
	<li><a href="#">Knock Out</a></li>
	<li><a href="#">Commentaries</a></li>
	<li><a href="#">Contact Us</a></li>
</ul>

Code (markup):

Now we get to the actual content area... To keep it simple for you we'll use a table, and being we're using the table to make columns, we'll name the table... 'columns'. Given the nature of your data I'd not be TOO worried about things like 'source order'... Still, we have to name the columns - since the first two seem to be content, we'll call them content1 and content2, and since the last one is a sidebar for videos and polls, we'll call it sidebar.

<table id="columns">
	<tr>

		<td id="content1">
		</td>

		<td id="content2">
		</td>
		
		<td id="sidebar">
		</td>
		
	</tr>
</table>

Code (markup):

We do NOT call them 'left, middle, right' because that's presentational names. TECHNICALLY if you have a word that describes those columns better, use that instead... MOST of my pages have the menu on the side, so my three columns are called "navigation, content, sidebar"

WHY do we not use presentational names? because at some future point we may want to rearrange the column order - in which case it gets a little confusing... When you get to the point of doing non-table layouts, already being in the habit of naming things what they are and NOT how they look. MIND YOU, naming the table 'columns' violates that, but it is the only reason we are using the table so that's ok... When/if you switch to non-table layouts it won't be there anyways

In the content areas it's best to put each section in it's own DIV named exactly what it is the section... is. By separating sections by group and using 'semantic' tags that describe each item we can use a LOT less classes.

In the content1 column you have a featured news item... So we name it's DIV 'featured news' - it has a header... Since we've already used H1 to describe the entire page, this should be the next priority down, an H2.

One of the big concepts one should keep in mind when writing a web page the 'modern' way is the separation of content (HTML), presentation (CSS) and behavior (Javascript). The biggest of these is the separation of presentational images (borders, shadows, background) from content images. One should only be using an IMG tag if the image is content... The UF5 banner image IS content, so that gets an image tag - Because our images are always going to be content, one should use the alt tag and put in a nice description of what the image is.

Then there's the text at the bottom. It's not quite a paragraph, but it's the only text in the box so we'll use one anyways just to get a block-level container around it.

<div id="featured_news">
	<h2>Gster was Here</h2>
	<img src="images/tuffinale.jpg" width="260" height="150" 
		alt="Ultimate Fighters 5 &bull; Live Finale &bull; Saturday June 23 &bull; 9PM ET/PT &bull; Only on SPIKE" 
	/>
	<p>Gster doesn't want to let Sandro go. <a href="#">Read More.</a></p>
</div>

Code (markup):

Then comes the recent headlines - again we will mark this as it's own box named... 'recent headlines'. It is a sibling to the first box so it too get's a H2, you're using an image for that H2 so again we'll dig out the <span> image replacement technique, and it's a list of links so we'll use a list.

<div id="recent_headlines">
	<h2>Recent Headlines<span></span></h2>
	<ul>
		<li>
			<a href="http://www.5thround.com/news/truck_you.php">
				Gster was here
			</a> (6/26/07)
		</li><li>
			<a href="http://www.5thround.com/news/manny_nate_tuf_finale.php">
				Manny vs. Nate in TUF Finale
			</a> (6/25/07)
		</li><li>
			<a href="http://www.5thround.com/news/manny_nate_tuf_finale.php">
				Manny vs. Nate in TUF Finale
			</a> (6/25/07)
		</li><li>
			<a href="http://www.5thround.com/news/manny_nate_tuf_finale.php">
				Manny vs. Nate in TUF Finale
			</a> (6/25/07)
		</li><li>
			<a href="http://www.5thround.com/news/manny_nate_tuf_finale.php">
				Manny vs. Nate in TUF Finale
			</a> (6/25/07)
		</li><li>
			<a href="http://www.5thround.com/news/manny_nate_tuf_finale.php">
				Manny vs. Nate in TUF Finale
			</a> (6/25/07)
		</li><li>
			<a href="http://www.5thround.com/news/manny_nate_tuf_finale.php">
				Manny vs. Nate in TUF Finale
			</a> (6/25/07)
		</li><li>
			<a href="http://www.5thround.com/news/manny_nate_tuf_finale.php">
				Manny vs. Nate in TUF Finale
			</a> (6/25/07)
		</li>
	</ul>
</div>

Code (markup):

Fairly simple... and that's the end of content1. next we go to plugging in content2.

You've only got one thing here, a list with a image header just like the bottom of content1 for 'the forum latest' so we'll call it 'forum_latest'

<div id="forum_latest">
	<h2>Latest @ The 5thRound Forums<span></span></h2>
	<ul>
		<li>
			<a href="/forums/viewtopic.php?p=18&sid=2#18">
				Any top tier striker vs. Lesnar?
			</a>
		</li><li>
			<a href="/forums/viewtopic.php?p=17&sid=3#17">
				Is Brock Lesnar going to get KTFO?
			</a>
		</li><li>
			<a href="/forums/viewtopic.php?p=16&sid=1#16">
				GSP: Making excuses or giving an ex
			</a>
		</li><li>
			<a href="/forums/viewtopic.php?p=15&sid=1#15">
				GSP: Making excuses or giving an ex
			</a>
		</li><li>
			<a href="/forums/viewtopic.php?p=14&sid=2#14">
				Johnnie Morton got KTFO!
			</a>
		</li><li>
			<a href="/forums/viewtopic.php?p=13&sid=2#13">
				Johnnie Morton got KTFO!
			</a>
		</li><li>
			<a href="/forums/viewtopic.php?p=12&sid=2#12">
				Johnnie Morton got KTFO!
			</a>
		</li><li>
			<a href="/forums/viewtopic.php?p=11&sid=5#11">
				Floyd Mayweather scared of MMA!
			</a>
		</li><li>
			<a href="/forums/viewtopic.php?p=10&sid=1#10">
				GSP: Making excuses or giving an ex
			</a>
		</li><li>
			<a href="/forums/viewtopic.php?p=9&sid=3#9">
				Is Brock Lesnar going to get KTFO?
			</a>
		</li><li>
			<a href="/forums/viewtopic.php?p=8&sid=11#8">
				Erik Lest needs to stop tubing us
			</a>
		</li><li>
			<a href="/forums/viewtopic.php?p=7&sid=11#7">
				5thround.com getting closer to open
			</a>
		</li>
	</ul>
</div>

Code (markup):

Which brings us to the sidebar. You've got a youtube video, so we'll call this one youtube_video. This one is simple, just wrap a div around the object. TECHNICALLY we could style the object directly, but given how... twitchy videos can be about CSS styling we'll just save ourselves the headaches and wrap it.

<div class="youtube_video">
	<object width="233" height="170">
		<param name="movie" value="http://www.youtube.com/v/gkhxIa8qV_w">
		<param name="wmode" value="transparent">
		<embed src="http://www.youtube.com/v/gkhxIa8qV_w" 
			type="application/x-shockwave-flash" wmode="transparent" 
			width="233" height="170"
		></embed>
	</object>
</div>

Code (markup):

Then comes the poll. This too is sibling to the other items so again, we'll use a h2 and give it a empty span for image-replacement... You have a dropshadow that's harsh-bordered meaning we can do that in CSS so just add a single wrapper for that, and we'll toss the script inside a DIV as well for 'good measure'.

<div class="poll">
	<h2>5thRound Web Poll<span></span></h2>
	<div class="dropshadow">
		<div class="TWIIGSPOLL">
			<script type="text/javascript" 
				src="http://www.twiigs.com/poll.js?pid=2522&color=bluedarkest"
			></script> 
		</div>
	</div>
</div>

Code (markup):

Now comes the 'blogumentaries' area... Since it spans the page we'll put this AFTER our table as a flat DIV. While it has three items we'll use this as our first attempt at using floats on the page (when we get to CSS). Again, we'll use a H2, this time plain because there's no reason to waste a image on the header text for this (unless you plan to make it fancier at a later date)

Three identical boxes, with three corner dropshadows. Because the shadow is narrow enough and the boxes fairly small, we'll use the 'sliding doors' technique to make the dropshadows, meaning we only need two 'sandbag' wrapping divs. The term 'sandbags' refers to wrapping extra div's to apply image styling. The advantage to using them is you quite often end up using smaller images and can use less images - the problem is they are more HTML. As a rule though it's better to use this route since it means the boxes can be DYNAMIC in size instead of fixed width/height, making adding odd-sized content later less of a headache.

That first one looks like it's going to be a link, and it's got text - so again we'll prep the image-replacement techniques for it. The other two are blank, so we'll treat them minimalist.

<div id="blogumentary">
	<h2>5thRound Blogumentary</h2>

	<div class="blog"><div><div>
		<a href="#">The WebMaster's REVENGE<span></span></a>
	</div></div></div>

	<div class="blog"><div><div>
	</div></div></div>

	<div class="blog"><div><div>
	</div></div></div>
</div>

Code (markup):

Then you have the 'designed by' text - waste of an image, so we'll keep that one simple.

<p id="design_by">
	ErikX-Designs &copy; 2007 5thround.com
</p>

Code (markup):

This is the point where the two 'shadowraps' should be closed before we start the footer... The footer is again a list, so it should be styled as a list. The transition from the above content area with the harsh wide-black line doesn't quite look as good as the dropshadow you've got in place - because of that we'll toss in two extra 'shadow' div's which we can use to apply a gradient shadow to the bottom of the content area... 'shadowtop' and 'shadowtopspan'. Because it's so wide, we'll use three images for that, one of them applied to #footer.

	
<div id="footer"><div class="shadowtop"><div class="shadowtopspan">
	<ul>
		<li>
			[5thRound.com -Home-]
		</li><li>
			[<a href="./html/contact.php">contact</a>]
		</li><li>
			[<a href="./html/interviews.php">interviews</a>]
		</li><li>
			[<a href="./html/knockout.php">knockout</a>]
		</li><li>
			[<a href="./html/commentaries.php">commentaries</a>]
		</li>
	</ul>
</div></div></div>

Code (markup):

Close the #container DIV, and for the most part that's 99% of the html we should be using for that page design... (some people, yes DAN I'm looking at you) would even argue it's MORE HTML than we need. I'm tossing a full copy of the source up at:
http://battletech.hopto.org/for_others/fifthround/bare.html

5697 bytes, which is about right. Usually I like to bring in my HTML under 15k.

Which doesn't look like much yet, but we've not done CSS or images - that's part two. (which I'll probably be able to tackle and post up in a few hours after I get some actual WORK done on my own stuff). I always wait on doing my presentational image slicings until AFTER the HTML is done - so I'm focused on making the HTML as minimal as possible and dividing up the sections in a sensible manner. As it is I've included some things in the HTML already 'from experience' like the shadow borders that normally I wouldn't add until I was working on the CSS.

Gimme a few hours, and I'll start working on part two.

 

Wow, that's awesome. I'm going to start playing around with all of this right now. I really appreciate you taking the time to do this.

 

I'm a firm believer in teaching a man to fish, so no problem.

Only problem is, the next 'part' is too long... time to split it into two posts.

Alright, let's dig into the CSS.

CSS can seem REALLY overwhelming to those new to it, even those with a reasonable understanding of HTML... when in fact it is remarkably simple.

All you really need to know is the syntax:

item {
property:value;
}

Where item can be a tag, a class, or an ID... property is the appearance you want to set, value being that appearance. For example:

b {
color:red;
}

makes all your bold tags red. Simple, huh?

You can even give multiple items properties at once thus:

b,
div {
color:red;
}

From there it's all just a matter of degree.

The thing about 'item' is that you can mix classes, ID's and tagnames thus:

#menu .first a {
border-left:none;
}

What that says, is all anchors (A) in the class 'first' in the ID 'menu' are to not have a left border.

You can even nest tags that way - which takes some care if you are nesting the same tag...

.blog div {
color:red;
}

for example sets ALL div's inside the .blog class to have red text... if you want a div inside that div to have a different behavior, say... black text, you'd have to set it as

.blog div div {
color:black;
}

Which will make only the FIRST div nested inside .blog have red text, the rest will be black.

For the most part, that will be the most complex form we'll be using here... Though I should also mention psuedoclasses. We will only be using two of them in our CSS, :active, and :hover - and when we set them, we'll be doing both at once.

Some values - margins, padding, border-width can be set to all four sides of an item in one line. When you do so the numbers are separated by spaces and go clockwise from the top. If you leave one out at the end, it defaults to the opposite side.

padding:4px; - Sets all four sides to 4px

padding:4px 0; - sets top and bottom to 4px, sides to 0px;

padding:4px 0 8px; - sets top to 4, sides to 0, bottom to 8

padding:4px 0 8px 2px; - top=4, right=0, bottom=8 left=2

We'll be using all four of those.

Should also cover margins and padding... Even when an container has 'no border', it still has a 'imaginary border'. Padding is space inside the border, while margin is space OUTSIDE the border - It's worth noting that margins overlap - if you have item with a 4px margin next to a item with an 8px margin, the total margin is 8px.

It's also worth mentioning that when you declare the 'width' of a container, that is just the width WITHOUT the padding and borders - the total width is border-width + padding + width.

You probably were wondering from the HTML, and wondering looking at the css - class, ID, what's the difference? Well, ID's are for unique items - you can only use an ID once in your HTML... because they are unique they make a quick easy way to access elements via javascript if need be... classes are whores, you can use them on anything...

Why choose one over the other? Personal preference really if javascript is not involved. For the most part I use ID's for header, footer, and the middle, things that are only appearing once on the page. (duh)... anything I might use more than once, gets a class.

I think that covers the basics, let's get coding...

First off, I always include the following:

* {
	padding:0;
	margin:0;
}

table {
	border-collapse:collapse;
	table-layout:fixed;
}

img {
	border:none;
}

Code (markup):

That asterisk is called the 'universal selector' - it basically says "All elements"... as you can see we're setting the padding and margins to zero... Why? Because not all items start out with the same margins and paddings cross browser - royal pain in the backside that one. Doing this gives us a nice even baseline in all browsers. Some people argue against it's use because it can make styling some items, form elements for example, a bit more tricky. Still it's fast, easy and works - so I use it.

Border-collapse - the normal behavior of tables is... unpredictable at best. It's why you see so many tables with "cellpadding=0 cellspacing=0 border=0". This is the CSS equivalent, and we just hit ALL tables at once... Likewise table-layout:fixed makes table behavior a bit more predictable, and in some cases causes tables to render faster.

... and assigning border:none to all images means that pesky 1px border you get around certain images, like inside anchors for example, is NOT there unless you say for there to be one.

Ok, 'defaults' out of the way, lets take a look at the desired page.

First up we style the body - setting the default font size, line-height and family is a good start...

We know we want the page centered - there are two ways of doing this - IE 5.x, and everything else. IE5.x centers ANY element with text-align:center; so if we set that in the body, we're good for that... then IE 6 and all other browsers use margin:0 auto; - remember from above that's setting both left and right to automatic - if both automatically expand to their maximum width, your content ends up in the center. While we are going to take the time for a few minor fixes to get IE 5.x working 'after a fashion' there will likely still be some elements that just don't work - being we're approaching IE 5.0 being over a decade old and that we're 5 years past M$ officially supporting it, this is 'close enough'.

You also seem to want a grey background, the page content to be 856px wide (at least that's what I came up with - 800px + two 28px borders). We'll set that in #container

body {
	font:normal 14px/16px tahoma,helvetica,sans-serif;
	background:#CCC;
	text-align:center; /* IE 5.x centering */
}

#container {
	width:856px;
	margin:0px auto;
	text-align:left; /* return to normal behavior after IE 5.x fix */
}

Code (markup):

That gets our page content right where we want it... Notice after the text-align:center I set it back to left - since that's the normal behavior it's just easier to do it here and not worry about it later on.

Notice I declare all the font properties on one line - the number one question you get from people on this is "what's that second size (16px) mean?". That is the line height, or how tall the LINE is, as opposed to how big the font is. This is a important number and the 'default' in various browsers can be wildly different.

Oh, and before anyone gets their panties in a wad about my declaring a px font size - this is a pixel perfect fixed width layout - While you could attempt dynamic fonts for the content area, it's going to look like crap if you do so. If people are THAT worried about resizing, they can get a browser that DOESN'T suck at resizing like Opera... instead of one like Firefox which still resizes text like Netscape 3's sweetly retarded crack-addict cousin.

Next on deck is the shadow - We've got two DIV's ready to recieve that. By creating an image 1 pixel high and 56px wide, containing both sides of the shadow, we can quickly apply it thus:

.shadow_wrap1 {
	background:url(images/outer_shadow_sides.png) top left repeat-y;
	height:1%; /* haslayout */
}

.shadow_wrap2 {
	padding:0px 28px;
	background:url(images/outer_shadow_sides.png) top right repeat-y;
	height:1%; /* haslayout */
}

Code (markup):

that puts the shadow on both sides - don't worry that the shadow is 'doubled' on each side, when we assign a background-color to our various content area's it will hide the extras. The padding left and right forces those content area's inward to show the parts of the shadow we want shown. Best part of this technique is it's one image file, not two. That means faster page loads since that removes the extra 'handshake' from the equation.

You'll notice the 'holly hack' - aka height:1%. Trips a thing in IE called 'haslayout' - without it, IE doesn't do this right.

*** A bit about image optimization ***
I use JASC's Paint Shop Pro to save all my images because it has the best 'save time' image optimizer I've ever dealt with. Just "Save As", choose file type, hit "Options" then "Image Optimizer". Let's you set color depth, color selection, encoding, palette transparancy, and a whole host of other options with not just a preview of what it looks like, but also how big the file is going to be BEFORE you hit 'save'. I run through this in .png, .gif and .jpg and go with whichever one does what I need (like transparancy) with the smallest filesize - as such you'll find a mix of .png, .gif and .jpg - usually resulting in MUCH smaller filesizes than other people end up with.

Oh, and people keep saying "IE doesn't support transparant .png" - that's not quite true. IE 6 and earlier does not properly support ALPHA transparancy .png... and for all the ranting and raving about how wonderful alpha transparancy is, the files are FREAKING HUGE. (Sorry, someone had to say it)... on the other hand if you drop to a 8 bit (or less) color palette, you can use Palette transparancy, where one color on the image is treated as transparant... Those work JUST FINE in IE - or at least, the ones from Paint Shop Pro do... (I've seen photoshop botch this)

Ok, enough about images - Next thing on our page is the header... This is tricky and where image slicing comes into play. (ok, so much for "enough about images") Ideally the logo should be a 'standalone' item as a single image, but with that little bit overlapping the menu it's kinda tricky and ends up with too large a file as .png or .gif. The solution, cut the image into two files, a .png for the part that has color and overlaps, and a high compression .jpg for the parts that are black and white - Thankfully being that section is monochrome, we can get up towards 70% encoding without noticable loss.

So these are our two images:
http://battletech.hopto.org/for_others/fifthround/images/logo_5.png
http://battletech.hopto.org/for_others/fifthround/images/logo_round.jpg

First thing we need to do is set the height of our header to the height of our tallest image. While there we'll set the font alignment and sizes of our text that will show when images are turned off. We can style the H1 directly and not waste a class because we are paying attention to the usability standards and the logical flow of headers, so there should only ever be ONE H1 on the page.

h1 {
	height:176px;
	text-align:center;
	font:bold 24px/30px arial,helvetica,sans-serif;
}

h1 em {
	display:block;
	font:normal 16px/20px arial,helvetica,sans-serif;
}

Code (markup):

You'll notice I set "h1 em" to display:block - this will put the emphasized text 'Where Champions are Born' on it's own line - and we set it's text smaller. This will result in three lines of text, two that are 30px high and one that's 20px high... for a total of 80px - Now, that number IS important.

We need to get BOTH images in there, that means we need TWO spans, and not the one like I originally wrote... so in the HTML we're changing that to:

<h1>
	5thRound 
	<em>Where Champions are Born</em>
	Homepage
	<span><span></span></span>
</h1>

Code (markup):

Now to style the spans...

h1 span {
	display:block;
	height:176px;
	position:relative;
	margin-top:-80px;
	background:url(images/logo_round.jpg) top right no-repeat;
}

h1 span span {
	margin-top:0;
	background:url(images/logo_5.png) top left no-repeat;
}

Code (markup):

The first declaration hits ALL spans inside H1 tags, so a lot of the values for our second span we're hitting on the first one. We set them to display:block and set the height. All items set to display:block by default expand to the width of what they are in (unless floating, but we're dodging that bullet for the moment) which in our case is 800px (the original 856 minus the two 28px side paddings). position:relative lets the browsers know we are going to be moving our images, and sets them to a higher 'priority' than other content... meaning that usually they will appear atop anything else.

The next line... needs some explanation. Negative margin - by setting a negative top margin the content will 'move up' the page... combined with the position:relative this puts the first image logo_round atop the text hiding it...

and by loading it top-right we could make the page dynamic width or wider just by making logo_round a wider image if desired.... and make it narrower with the existing image auto-cropping on the left side.

The next one inherits most of the properties of the previous one - but we DON'T want this one to 'ride up' the page since it's inside the one we already moved, so we zero the margin... then we make sure we're loading the image we want and setting said image to top left.

The menu is fairly simple to implement if you know some tricks - I'm gonna teach you those tricks.

#menu {
	list-style:none;
	font:normal 16px/18px "Trebuchet MS",Helvetica,Sans-serif;
	text-transform:uppercase;
	margin:-10px -4px 0;
	border:solid #000;
	border-width:4px px;
}

Code (markup):

First, we say the list should not display bullets...

font setting should be self explanatory, I chose "TB MS" as the primary because that looked closest to what you were using in your image based version. I also do a text-transform because it's simpler than remembering to type uppercase all the time.

...and again, a negative margin. Because we DON'T set position:relative on the menu, this rides the menu up UNDER the little bit of logo you had. It makes the top ten px of the menu not 'work', but it's a small price to keep it simple... we also 'widen' the menu out past the edges of the container with negative side margins on both sides. This gives us 'room' should a browser render text slightly wider (yes safari, I'm looking at you) to keep it on one line. If it ends up too big, it will go to multiple lines.

The white-space nowrap SHOULD prevent the menu from wrapping, but it does not do so in anything other than IE6... which for some reason gets... overzealous about splitting into multiple lines.

and a top/bottom border lets us not use images for those nice black separators. 'Keeps it clean'.

... continued in next post

 

... continued from last post

Now we actually can start styling the 'buttons'

#menu li {
	display:inline;
}

#menu li a {
	display:-moz-inline-block;
	display:-moz-inline-box;
	display:inline-block;
	padding:6px 14px;
	text-decoration:none;
	color:#FFF;
	background:#00F;
	border-left:1px solid #FFF;
}

Code (markup):

By making the LI's display:inline they will all appear - on one line.

The anchor though we need to be a block... that displays inline. Most people would use floats for this, but there are issues with using floats, not the least of which being clearing them that make them less than desirable here. inline-block is normally the ideal solution, but with firefox having it's head up it's backside you end up having to use mozilla specific hacks to make it work there... oddly enough, all inline elements in IE are pretty much inline-block, so we're saved on that count.

By playing with the padding we come up with roughly the width of the page - it's over by two to three px (2px FF/Opera/Saffy, 3px IE)... how to fix that? We also end up with a left border on the first one we don't want...

In the HTML I've changed the first one too:
<li class="first current"><a href="#">Home</a></li>

also marking the current page so we can style that one differently. Then we add:

#menu li.first a {
	padding:6px 13px;
	border-left:none; 
}

#menu li a:active,
#menu li a:hover {
	background:#68F;
	color:#DEF;
}

#menu li.current a {
	background:#888;
}

Code (markup):

Which decreases the width of the first one by 3px, making our total width perfect. We also toss in active and hover states, meaning when someone moves to it with the keyboard or does a mouseover the colors change. We also set the 'current' options background a different color - which brings up another point about CSS

It's a 'top down' parser - meaning if you set a value twice, whichever one is furthest down in the source takes precedance... as such the background-color set in ".current a" will preven the background-color of that element from changing on a mouseover.

This menu does not render 100% perfect in IE 5.x, but it's servicable enough. You can't bend over backwards supporting decade old rendering engines forever - so if it works but doesn't look right, oh well.

So that's our menu... on to the content area.

I noticed you have a slight grey border on one side, that is tricky to do because of a quirk in Firefox that calculates the table width 1 pixel off from everybody else... even if we say 800px, we get 799. (and they wonder why the 'more standards compliant' doesn't pass Acid2)... Normally this isn't a big deal, but with the shadow styling we're doing it is... problematic as the shadow shows through. To get around this, we'll just toss an extra wrapping div around our table. It means in FF we get an extra 1px on the right side - oh noes, whatever will we do

<div id="columnwrap">

#columnwrap {
	background-color:#CCC;
	padding:0px 2px;
}

#columns {
	width:100%;
	font:normal 14px/16px tahoma,helvetica,sans-serif;
}

#columns td {
	vertical-align:top;
}

Code (markup):

tables usually shrink to the minimum needed width, but constrain to the width of what they are in. Just to be 100% sure, we set the width to 100%. Finally we set all TD's to align their content to the top of the table - same as inlining valign="top" in the HTML, difference is we only need to do it once in the CSS, instead of three times.

Next up I set the style of links for the content area - I know a lot of people like to set a global link style - frankly I prefer the global to stay the defaults 'just in case' - fact is doing it this way we're not declaring it more than you would the other way.

#columns a {
	color:#DEF;
}

#columns a:visited {
	color:#BCE;
}

#columns a:active,
#columns a:hover {
	color:#FFF;
}

Code (markup):

Now we need to format our columns.

#content1 {
	width:280px;
	border-right:1px solid #444;
	background:#888;
}

#content2 {
	border-right:4px solid #444;
	background:#888;
}

#sidebar {
	width:238px;
	background:#CCC;
}

Code (markup):

Set our widths, set some simple borders... the 4px #444 is set because it seemed like you were aiming for a drop shadow, I formalized it as such. (which we'll do more of later on).

The next thing we hit is the featured_news box. Because the background is a even slow fade, I just cut that out as 1px wide and tile it in the background on the Y axis. I also made the image a wee bit taller so if you decide to put more stuff in that box, there's room.

#featured_news {
	background:#249 url(images/featured_background_gradient.png) repeat-x;
	text-align:center;
	padding:16px 0;
	border:2px solid #000;
	border-top:none;
}

#featured_news h2 {
	font:bold 18px/24px tahoma,helvetica,sans-serif;
	margin-bottom:1em;
}

#featured_news p {
	color:#FFF;
	padding-top:0.5em;
}

#featured_news a {
	white-space:nowrap;
}

Code (markup):

I centered all the text, set some padding top and bottom... and gave it the border. Notice the trick, set all four sides, then undo the one side we don't want set. A lot less code than declaring the three sides each.

The header is simple... font size and a little padding... likewise on the paragraph. I set the anchor to no-wrap because it just looked silly when occasionally it would put the read on one line and the more on the other. With the font sizes I chose it's loading just right.

Next up, we'll hit BOTH #recent_headlines and #forum_latest because they share remarkably similar styling.

#recent_headlines h2,
#forum_latest h2 {
	font:bold 14px/18px tahoma,helvetica,sans-serif;
	height:18px;
	text-align:center;
	margin:0.5em 0;
}

#recent_headlines h2 span,
#forum_latest h2 span {
	display:block;
	height:18px;
	position:relative;
	margin-top:-18px;
}

#recent_headlines h2 span{
	background:url(images/recent_headlines.png) center center no-repeat;
}

#forum_latest h2 span {
	background:url(images/forum_latest.png) center center no-repeat;
}

#recent_headlines ul,
#forum_latest ul {
	list-style:none;
	padding:0 0.5em;
}

#recent_headlines li,
#forum_latest li {
	color:#FFF;
	margin-bottom:0.5em;
	padding-left:12px;
	background:url(images/bullet.gif) 0px 5px no-repeat;
}

Code (markup):

For the H2's, we use the same image replacement technique used for the header. We set the line-height and height the same as the image height, center the text, in this case we center the images, and then slide them up over our text with a negative top margin. Only difference between the two is the image being loaded.

For the unordered lists I do something kind of wierd - instead of using the normal bullets, or using a character, I pad the content on one side and then put a background-image there. The reason for this is the appearance of bullets cross-browser, both in size and placement varies so wildly that any attempt at consistant appearance is an effort in futility. If you leave it 'list-style-positionutside' you have no control over how far they are from the content and it's not the same in any browser (and it's absurdly far away most of the time) - if you use 'list-style-position:inside' you can fake it with padding and text-indent, but should your content word-wrap the result is ugly at best... This is a quick and dirty solution that works great.

The youtube video box is also fairly simple. You had the fade diagonally from upper left to bottom-right, which just uses too big an image for something that's not even visible on 2/3rds the space... so I made the gradient an even fade on the horizontal - which looks much the same and uses a tiny tiny image.

.youtube_video {
	overflow:hidden;
	padding:0.5em 0;
	background:url(images/youtube_video_background.png) top left repeat-y;
	margin-left:2px;
	border:2px solid #000;
	border-top:none;
}

Code (markup):

Again, nothing too fancy there... The poll took a bit of thinking on my part because of how you wanted to place the logo. First, I turned the logo and JUST the logo into a transparant .png

http://battletech.hopto.org/for_others/fifthround/images/poll_header.png

We then load it via the same image replacement technique we've been using all along.

.poll h2 {
	font:bold 14px/48px tahoma,helvetica,sans-serif;
	height:48px;
	text-align:center;
	margin:0.5em 0;
	position:relative;
	z-index:500;
}

.poll h2 span {
	display:block;
	height:48px;
	position:relative;
	margin-top:-48px;
	background:url(images/poll_header.png) center center no-repeat;
}

Code (markup):

One new wrinkle is making the h2 itself position:relative and giving it a really high z-index. This forces the h2 atop all other content no matter what else is going on...

The poll box itself has a drop shadow, and is ridden up under the header.

.poll .dropshadow {
	background:#444;
	position:relative;
	margin:-16px 4px 0px 12px;
}

Code (markup):

The negative top margin rides it right up under the logo... the side margins puts the shadow where we want it.

.poll .TWIIGSPOLL {
	position:relative;
	top:-4px;
	left:-4px;
	color:#FFF;
	background:#139;
	padding:24px 2px 0.5em 6px;
	border-right:1px solid #000;
	border-bottom:1px solid #000;
}

Code (markup):

This is the next div in, the poll itself. Notice two new properties we're trying out, top and left. When a container is set to position:relative top and left move it from where it would normally render... In this case we're doing 4px up and to the left. Because the sizing of the box remains as it normally would, moving this box and giving it a background-color results in our drop shadow effect... no images involved.

I also add a black right and bottom border - this subtle line makes the shadow effect more pronounced.

For the content of the poll, that took some reverse engineering and some wrangling since that poll script inlines a bunch of properties that don't seem to want to be overrridden. (TECHNICALLY classes are supposed to override inlines... not sure why it's not working here)... thankfully CSS gives us a way to say "Do this above all else!" - !important... which is confusing to programmers since ! means not... Not important? Apparantly for CSS it means MORE important. (this one drove me nutters when first learning CSS)

For everything inside the poll, we have to state !important for the property to work.

.TWIIGSPOLLanswerselectionitem {
	display:block !important;
	padding-left:1.5em !important;
	margin-bottom:0.5em !important;
}

.TWIIGSPOLLanswerselectionitem input {
	vertical-align:middle !important;
	position:relative !important;
	margin-left:-1.5em !important;
}

Code (markup):

This is a cute 'trick' to make the radiobuttons work much like the bullets on a LI, so everything lines up fairly nicely when the text wordwraps... you pad the entire LI on the left, then use margin-left to move the inputs into our padded area. It's not perfect, but it's better than most alternatives given we've got no access to recode the poll.

The vertical-align:middle on the INPUT also helps make it not look so goofy, moving the radiobutton down to the middle of the line it's on, instead of being flush top (or higher - yes FF, I'm looking at you!)

Next is the submit button - it looked so... plain jane and out of place, so I spiced it up a little.

.TWIIGSPOLLsubmit {
	display:block !important;
	width:100% !important;
	padding:2px 0 !important;
	border-top:1px solid #ACE !important;
	border-right:2px solid #004 !important;
	border-bottom:2px solid #004 !important;
	border-left:1px solid #ACE !important;
	color:#FFF !important;
	background:#00F !important;
	font:bold 14px/18px tahoma,helvetica,sans-serif !important;
}

Code (markup):

The display:block helps older version of IE size it right, it looks much better at 100% width, a little padding top and bottom makes it look better in FF/Safari/Opera - it ends up a wee bit taller in IE because of it, but that's acceptable... rest of that is just more FAC - fonts and colors.

Now, up above I mentioned making the first two table columns have a dropshadow - to do this we have to insert one classed DIV right after we close #columnwrap.

<div class="table_bottomborder"></div>

Which we will style thus:

.table_bottomborder {
	font:normal 1px/1px sans-serif;
	height:4px;
	margin:-4px 240px 0 2px;
	position:relative;
	border-left:4px solid #CCC;
	background:#444;
}

Code (markup):

The font declaration is to get around this strange IE bug where IE 5.2/5.5 and 6 won't let you make a DIV shorter than the font-size, and where IE 5.0 won't let you make it shorter than the line-height or font-size.

The negative top margin rides it up over the table - this gives the illusion that it's part of the table. Since most of our content would have bottom margins ANYWAYS, there'll always be room to move it up like that... The right and left margins cover the area we don't want to draw our background-color, while the border-left actually erases the background of the bottom left edge of the table so it looks like an actual drop shadow.

#blogumenatary - This is going to be our first use of floats... These boxes are all the same size, and we DON't want them centered because they include their drop shadow - actually centering them with a table would make them look incorrectly placed to the left.

Floats mean that all content after it should appear to the opposite side it's floating... much like 'align=' behaves on images. (though there are minor differences of behavior between the two in some browsers).

First, let's set up our container.

#blogumentary {
	background:#CCC;
	width:100%;
	overflow:auto;
}

Code (markup):

A 'quirk' of floats is that a container around them ignores their height unless it itself is floating, or has overflow:auto turned on. Either float or overflow:auto will make the div shrink in size to fit it's content, so we have to add width:100% to make sure we draw the whole area.

Next is the header.

#blogumentary h2 {
	font:bold 16px/18px "trebuchet ms",helvetica,sans-serif;
	color:#00C;	
	padding:0.5em 0;
	text-align:center;
}

Code (markup):

No need to waste an image on this... Again I used Trebuchet MS to try and mimick your image. Some top/bottom padding helps spread things out.

Now for the boxes and their shadows. We'll use a simple but effective variant of 'sliding doors' so should you want/need to make them taller, you can.

#blogumentary .blog {
	float:left;
	padding-bottom:16px;
	margin-left:28px;
	background:url(images/blog_shadow_bottom.png) bottom right no-repeat;
	display:inline; /* fix IE double margin */
}

#blogumentary .blog div {
	padding-right:16px;
	background:url(images/blog_shadow_right.png) top right no-repeat;
}

#blogumentary .blog div div {
	width:216px;
	height:148px;
	overflow:hidden;
	border:2px solid #000;
	padding:0;
	background:#FFF url(images/blogumentary_background.png) top left repeat-x;
}

Code (markup):

... and there's our float. Because we make them all float, they'll 'stack' one atop the other making our three columns... a bit of margin on one side helps evenly position them - I'm only using margin on one side because if we did both, we'd have to worry about it wrapping since we actually WANT our shadow to approach the right side of the screen...

The padding-bottom on the first one makes room for the bottom aligned shadow image, while the padding-right on the second one makes room for the right aligned image.

The last one sets our 'final' dimensions for content and gives it a background - the padding:0 is to override the padding-right we set in the first one... We also set the background, a 1px wide tile across the whole thing.

There is also a problem in IE where even if you tell it not to put a border around a image inside a anchor, it still makes room for one - by setting overflow:hidden we 'kind of' dodge that bullet.

This style all THREE of those boxes identically without having to declare each one differently in the HTML.

I changed gears on the HTML side of that so that the 'webmasters revenge' image is inlined as a img tag. Again, it's content, so it should be a IMG tag.

<div class="blog"><div><div>
	<a href="#">
		<img src="images/webmasters_revenge.png" width="216" height="148" 
			alt="The Webmaster's Revenge"
		>
	</a>
</div></div></div>

Code (markup):

I made the image palettized transaparancy because it actually means less colors and more runs of the same color in a row - smaller image results.

http://battletech.hopto.org/for_others/fifthround/images/webmasters_revenge.png

After using floats when you have an element you want NOT to float, it's a good idea to 'clear' them... since the design_by text is right there, we'll use it.

#design_by {
	clear:both;
	text-align:center;
	color:#000;
	background-color:#CCC;
	font-size:10px;
	padding:3em 0 1em;
}

Code (markup):

Now for the footer - if you remember from the HTML part I said we'd be using the top of the footer to put the dropshadow under the content.

#footer {
	width:100%;
	background:url(images/outer_shadow_bottom.png) top left no-repeat;
}

#footer div {
	background:url(images/outer_shadow_bottom.png) top right no-repeat;
	padding:0px 28px;
}

#footer div div {
	padding-top:40px;
	background:url(images/outer_shadow_bottom_tile.png) top left repeat-x;
}

Code (markup):

That width:100% shouldn't be necessary, but it fixes IE 5.x... Again, we use one image to do both the left and right sides of the shadow, pad inwards then use another image to fill out the rest of it. The padding-top makes sure that our footer content is pushed down past the shadow.

All that's left, is to style the footer content, which is pretty much a no-brainer.

#footer ul {
	list-style:none;
	text-align:center;
	color:#468;
}

#footer li {
	display:inline;
	padding:0px 4px;
}

#footer a {
	color:#23A;
}

#footer a:visited {
	color:#46C;
}

#footer a:active,
#footer a:hover {
	color:#00F;
}

Code (markup):

Turn off the list style, make them display inline... set your colors. I used different colors because I couldn't read that yellow and white you were using, but you can play with that until blue in the face

That's it, our CSS is complete. You can see a full demo working at:

http://battletech.hopto.org/for_others/fifthround/template.html

As with all my examples, the directory:

http://battletech.hopto.org/for_others/fifthround

is unlocked so you can get at all the bits and pieces. It's all new images in the /images directory so you'll want those, especially since I re-encoded them to be a bit less... large... tuffinale.jpg for example - 34k is nuts for a 260x150 image - I got that down to 9k and you really can't see the difference.

The code validates except for the flash and poll javascript, works flawless in IE 6&7, FF, Opera and Safari, and while it has some minor layout issues in IE 5.x windows and one major issue in IE 5.2 mac, they don't make it so the page is unusable so... close enough for people five years to a decade behind the rest of us.

Some comparisons:

Your original:
HTML: 33k
Images: 325k in 53 files
CSS: 7k in 2 files

This version:
HTML: 6k
Images: 43k in 16 files
CSS: 6k in 1 file

That's quite a reduction.

I'm sure you have lots of questions - assuming you have the time to go over this. Take your time, and fire away... Remember, the only dumb question is one you already know the answer to.

 

Wow, how the heck did you do all that? LOL. I mean, I know HTML but I can't completely re-design someone's code that quickly. With CSS, the only problem I forsee since I barely know the language is if I want to add something new to the site, it's going to take a lot of tinkering, any recommendations on how to learn without making a lot of mistakes?

 

If you break everything down by section, and work one section at a time, it actually goes by fairly quick. People try to do all their styling at once instead of just working from the top down...

Well, tinker is the name of the game - and asking other people when you have a problem also helps. I didn't learn all this overnight, and it was a healthy mix of both.

What I said above about breaking it down by section goes hand in hand with one of the cornerstones of testing for me - Test in EVERY browser you can lay your hands on... Bare minimum you want three examples of trident (IE 5.x, 6 and 7), at least one gecko (Firefox), the latest Opera, and where possible, Safari. Technically you can drop IE 5.x support at this point, I have on all my 'production' work, but I still make the attempt when helping others... fact is IE 5 is horribly painfully broken to code around, even compared to IE6...

... and don't write the whole page and hope it will work in other browsers, or write the page in one browser and 'hack' for another. If you test each section in each of the browsers listed as you go, you can avoid a lot of the pitfalls - if you are diving for a hack to fix a problem, ask yourself 'is there another way of coding this?' - if you can't think of one, go online and ask 'is there another way of coding this?' People too often look for magic bullet fixes for code that 'works in one browser but not the others'... Sometimes it's something minor like haslayout - other times people will list 5k of hacks and 15k of javascript for something that is as simple as just using a table instead of floating DIV's.

ALL of the browsers are free - and with Safari now available for windows, we've got no excuse to not be testing that as well.

One BIG pitfall to watch out for - one that even experienced programmers mess up on from time to time, is font metrics - A compendium of web fonts covering all the nuances would probably fill a book twice the size of the King James... The big thing to remember on those is:

If the width of the container is fixed, and word wrapping would break your layout, use the same metric for the width as you do the font.

If the height of the container is fixed, and the font being 25% larger would break the layout, use the same metric for the height as you do the font.

Follow those two rules, and you can use whatever font you like... play mix and match, and the garden will be made available to you.

I made a quick little test page (that I link to in almost every thread these days - I should put that in my sig once this lets me have one) that shows the various 'quirks' of certain fonts across different browsers and using different font metrics.

http://battletech.hopto.org/for_others/font_test.html

As you can see, declaring a font size does not mean you'll always get the same size... THAT is the number one mistake people new to CSS make.

 

why is horizontal scrolling available when the site is fitting perfectly when it's centered?

There is a small square under your bulleted list item? Any reason for this? I think without would be better IMHO

Also I think there should be clear distinction between your links and the normal text since for the time being, one can't really distinguish between the two, especially for the Read more links. Try putting an arrow after the read more and using a different colour for that text.

Have you thought about a favicon? I think your site could have a nice one and this could really give it another boost.

Clearly you're using tables for your design which is highly, really highly not advised since this will affect many future aspects which you might consider like upgrading the design, getting some search engine juice, making the blog standard and accessible to a large public on lots of browser and interfaces.... always use CSS for laying out things.

I think converting your current design into one using CSS should be pretty quick.

Do get in touch if you need any kind of help for a professional design or for any issue.

 

WOW, I think deathshadow provided the whole answer. Didn't got over before posting my reply

 

What browser? Firefox, right? Oddly enough with his page that might be the firefox table model quirk - a bug almost as nasty as the IE box model... But then there's a reason they still haven't got colgroups anywhere near working... (love that they brag about standards compliance but still don't have a bug free inline-block and are missing entire sections of the 9 year old HTML 4 specification)

It could also just be that his side-images for the shadows are 'padded' out about 100 pixels wide... making the content wider than it's appearance.

He was trying to use spacer .gif's... that particular one wasn't present, so you get the image not found box.

Damned good suggestion that - especially with browsers like opera letting you drag and drop favicons for sites as quick-link buttons. (perhaps my favorite feature)

 

http://www.5thround.com/TEST/testcss.php

That's what I've done so far with your CSS. I'm just playing around to see what works, no graphics on it yet.