CSS problems/less than optimum code

[donkeyote]

I've only had a two minute look so far at the HTML and CSS for the new look site, and I was wondering why there is a strange white gap at the top of the page, before the actual site starts.

Anyway, from this CSS file:
http://www.ebid.net/css/blueprint/ie7.css

I found these bits:

.biddetails li.left{height:45px;}
.biddetails li.right{height:45px;}
ol {padding-left:30px;}
ul {padding-left:30px;}

which could be reduced to:
.biddetails li.left, .biddetails li.right {height:45px;}
ol, ul {padding-left:30px;}

and then several commented out bits of CSS code:

/* #myebid_subs button,#myebid_subs input[type=submit],#myebid_subs input.submit,#myebid_subs input[type=button],#myebid_subs input.button { width:115px;} */

/*.tip_front {background:transparent url(/icons/black_arrow.gif);}*/
/*.tip_hint {background:transparent url(/icons/black_arrow_big.gif);};*/

/*h5 {line-height:18px;}
.f5 {line-height:18px;}*/

Are these going to be used in the future? They should be removed if they aren't in use, and aren't going to be in use very soon, in the interests of keeping the download as small as possible.

On the homepage, I found this code at the start:

<div id="container" class="ui-corner-top">

Why not just define the id "container" the way you want it, rather than having a class as well?

Then, I hate to say it, the code is worse than the old site, for example:

<div style="position:relative;z-index:5;">
<div style="position:absolute;top:35px;left:59px;width: 121px;height:100px;">

Why aren't they using classes, and instead using inline styles?

The entire homepage (I haven't looked at the rest of the site yet), is full of inline styles!

This one is very bad coding:
<div style="position:relative;" id="tip" class="tip_hint f4">&nbsp;</div>

Why not just make one id with the style "position:relative" plus whatever styles are in the "tip" AND "tip_hint" AND "f4" id/classes? (I can understand using "tip_hint f4", two classes at a time, that's fine if the "f4" style adds something specific to the "tip_hint" style, but the entire homepage is full of inline styles mixed with ids and classes, this is basic CSS stuff and it's wrong.

Then we have another no-no which the old site suffered from - using a description of a property value for the name of a style:
<div class="purple fx_en" style="margin-top:10px;">

If you ever want to change all the purple text to red, you are going to have a lot of messy code to change. Plus the "margin-top:10px;" shouldn't even be there (inline style), it should be in the CSS file in the .purple style. Or make a second style called "auctionhilite1" or something.

There is a mistake here:
<div id= "dropdown-advanced-load">

There shouldn't be a space between the
id=
and the name of the style.

The auctions are laid out using tables:

<TD class="p5 bot center">
and suchlike throughout - very wasteful of space, HTML-wise, and unnecessarily complicated. These are only simple boxes that are being displayed with a photo, and three lots of text.

Anyway, I'm not a professional web designer, but the site code is full of elementary mistakes and bad coding, which shoudn't be there, and are no doubt costing Ebid an arm and a leg in unnecessary bandwidth usage, and server usage. Every extra byte of code costs server time, and costs money.

The actual LOOK of the site is very nice, but I'm surprised to see that yet again, the underlying code is not up to the standard I would expect when paying (presumably) a lot of money.

[JanetB]

Maybe eBid will hire you



x

[donkeyote]

I wonder if Ebid will get another web designer to look at the code on the site, and tell them where it's wrong (that might take a few days...). I am just amazed that after the terrible code of the last site, yet another web developer has managed to produce a site for Ebid, with even worse CSS and HTML! It is really quite unbelievable, that they can produce such bad code and yet be paid for it.

This one line of HTML, which I listed above:
<div style="position:relative;" id="tip" class="tip_hint f4">&nbsp;</div>

says it all. Even a beginner at CSS will know that that is beyond terrible code. All this unnecessary bloat means that every day, Ebid are paying a fortune for unnecessary code to be downloaded to their visitors' computers. Just multiply all the unnecessary code by the number of page hits per day, and you have a big problem, that shouldn't have existed in the first place.

But then, look at Ebay - their code is even worse!

Perhaps the site designers would like to come on and explain themselves.

[johnwash1]

I wonder if Ebid will get another web designer to look at the code on the site,...

Perhaps the site designers would like to come on and explain themselves.

That would be very interesting.

I thoroughly agree with you Donkeyote, peer review is unfortunately not as common as it should be. And yet the additional cost would be a tiny fraction of the budget. Indeed, if the reviewer is hired at the outset, a good reviewer would set out some quality guidelines that might end up actually saving money. It's unreasonable to expect the owners of a business, very often with self-taught computer skills to be able to fill the shoes of a reviewer. (I've no idea of Gazza and Mark's backgrounds, that's not aimed at them.)

Web design is a difficult area to get everything right. Few people are expert programmers AND expert graphic artists. Peer review can be a big help.

G&M should try slipping you a few beers, Donkeyote! Or better still, a wad of beer vouchers!

[astral276]

I've always found it best not to validate either eBid's page code or CSS. It saves having to pay a plastic surgeon to remove the look of horror from my face.

[bykimbo]

I've always assumed that a lot of ebid content is dynamically created, and speed of creation has to be balanced against speed of loading. For example, in the example given I imagine if there was a tip to be displayed for the particular bit of the page referenced, it would appear in place of the nbsp, and would be formatted according to the stored rules. Ease of maintenance and change of those rules is another reason why sub-optimal code might be the end result - the emphasis need not be on tidy css/html, but on minimising the support load and getting results showing before browsers give up.

I think judging others' technical merit on the basis of so many unknown factors is a glass-house I prefer not to lob rocks in.