Feedback please

[James]

Hi,

I'm in the process of building a website for my brother's forthcoming wedding. http://www.barkermackie.co.uk. There's only a holding page at the moment, (so no need to "View Source" just yet (Francis)).

Anyway, I'll be posting updates on this forum as and when I add content (I hope to launch the site this weekend). I'll be asking you folk for feedback on design and content at every step!

Cheers for now.

[James]

... by the way, the picture on the site isn't my future sister-in-law. Shame.

[Shushan]

Like the Kylie image :D

[James]

I've made a start (http://www.barkermackie.co.uk).

I have decided on the following:

- I will code to standards (Francis, feel free to advise)
- I will test the site in Modzilla (haven't yet though)
- I am not worrying about web-safe colours
- I am using a fixed width compatible with 800 width screens, but centered on the page
- Use as much CSS as possible for layout etc
- I will make the site accessible in accordance with Bobby
- There will only be a handful of pages so navigation shouldn't be a big issue, although I'm yet to decide on a navigation style

[Tom]

See my comment (http://www.websitearchitecture.net/forum/index.php?showtopic=108)

[francis]

Modzilla?!

When you test it in Moz, you'll see it looks nothing like you'll expect it to. To save you either:

a: hours of frustration and bad language
b: giving up

I'll point you to my CSS floats post (http://www.websitearchitecture.net/forum/index.php?showtopic=79), which will explain exactly what's going on. Moz is doing the correct thing, although it wouldn't seem to.

You can get rid of that <hr /> element under "Website for David and Lyndsey's wedding". It's purely presentational and so should really be shifted into CSS. You can do this by changing the CSS for .subtitle to:

.subtitle
{
font-size: 0.6em;
margin:0px 0px 10px 0px;
border-bottom:1px solid #999;
padding-bottom:10px;
}

[James]

Cheers - I got rid of the <hr>.

As for the layout problems in Mozilla, I am stuck. This is exactly the problem I had with Green Farm. I know you corrected this as part of your Standards work, but despite looking at the style sheet you did for it, I can't find what changed to make it work.

Can you tell me what changes I should make so it works in Mozilla?

Cheers

[James]

Also Francis - see the stag page - how do I close the spacing in the <LI> ?

[francis]

Hi

The Meyer/ComplexSpiral article (http://www.complexspiral.com/publications/containing-floats/) that I linked to should explain what is happening. To fix this, I had to add another CSS class and some extra XHTML:

In the CSS:

.clearer {
clear:both;
}

and in the XHTML:

<div class="clearer"></div>

Right before the end of your content div.

I've got it all working. Ready?!

Firstly, I moved your #footer div into the main #content div and changed the necessary CSS to make sure the borders still looked the same. Next, I got rid of the .footer class. HTML provides an <address> element (http://www.w3.org/TR/html401/struct/global.html#edef-ADDRESS) that is supposed to be used to markup information to about the site author. Class-itis can be avoided this way. I applied this style to it:

address
{
margin-top: 5px;
font-size: 0.6em;
margin-bottom: 5px;
text-align:center;
font-style:normal;
}

Some of these I took from your original .footer style. I added the font-style because <address> is by default italicised.

This gives us

<div id="footer">
<address>&copy; James Barker Web Design 2004

jim@barkermackie.co.uk</address>
</div>
<div class="clearer"></div>
</div>

*** note the clearer div at the end. The final </div> is the closing content div***

The footer styles became:

#footer
{
text-align:center;
clear:left;
}

The clear statement pushes away from anything floated left (in this case your left div. Without this, your footer div would have stayed at the top on the content area.

Next, I changed your #right and left CSS styles:

#right
{
width:525px;
height:115px;
float:left;
}

#left
{
width:200px;
height:300px;
border:1px solid #000;
float: left;
background-color: #ebebeb;
}

You didn't need the position:relative in there (at least I couldn't see what it was supposed to be relative to and removing it didn't affect anything). Floating the div to the left pushed it to the left of the left div.

I also took out the:

img {
float:right;
}

declaration from your CSS - not sure if you are using that for any of the sub-pages, but unless you want every image floated right, it's best to use CSS' inheritence or specific declarations.

Not sure if that made sense or not. I'll email you my files so you can see what's what.

[francis]

On the stags page, do you mean "why is the list breaking out of the div"? The reason for that is that CSS' 'height' and 'width' declarations are exactly that: the exact height or width - nothing more or less. IE's expansion of a containing element to fit is incorrect. The easiest fix for this would be not to declare a height at all - let the div expand to the size of it's contents.

The ideal fix for this would be CSS' 'min-height', but IE doesn't support it (although that's exactly how it treats 'height'...)

If you want your homepage to have the same sized left div as it has at the moment, but have others expand to the size of their contents ,just group the CSS as follows:

#lefthomepg, #left
{
width:200px;
border:1px solid #000;
float: left;
background-color: #ebebeb;
}

#lefthomepg
{
height:300px
}

This way both left divs will have the same features, but by redeclaring #lefthomepg below with an extra style, that div will be 300px tall. This saves on excess code and makes updating a whole load easier.

[James]

Thanks for all your help, I don't understand it though really, it seems that to write cross-browser compatible code you have to know an awful lot of tricks and fudges, I wish it were more simple!

What I meant by the stags list looking different is that in IE, the bullet points are spaced out vertically, whereas in Mozilla they look the way I want them to. Any ideas how I can close them up a bit in IE?

Thanks

[francis]

Originally posted by: James Barker
Thanks for all your help, I don't understand it though really, it seems that to write cross-browser compatible code you have to know an awful lot of tricks and fudges, I wish it were more simple!

Welcome to CSS <_<

The clearer <div> for clearing floats is, to many people, a hack. It's putting in extra code specifially to get a presentational effect. Unfortunately that's how the W3C wrote the CSS standards for float behaviour, so unless something changes in CSS3, then we're stuck with it. Strangely, IE will honour this rule if there is no width applied to a div. As soon as you do that, it does its own thing. That is really the only trick/fudge involved here - the rest of it is just time spent plugging away at CSS.

As to the bullet points - try playing with line-height on the . That seems to work.

[James]

Francis, thanks for all your help, and the e-mails. It looks good in Mozilla now, although there are still differences in font spacing in some areas but it's not particularly noticable.

[francis]

The pros and cons of using divs over tables is a massive topic. I wouldn't say tables are more compatible. Zeldman's sales of Designing With Web Standards (http://www.amazon.co.uk/exec/obidos/ASIN/0735712018/ref=sr_aps_books_1_1/202-0461226-0427859) and one of Meyer's CSS books (http://www.amazon.co.uk/exec/obidos/ASIN/073571245X/ref=pd_bxgy_img_2_cp/202-0461226-0427859) shows that people are interested.

Have a look through AListApart's "From Table Hacks to CSS Layout: A Web Designer's Journey" (http://www.alistapart.com/articles/journey/) which documents the process Zeldman went through when converting that site to CSS based.

There are so many reasons for not using tables. The WCAG (http://www.w3.org/TR/WCAG10/full-checklist.html) mentions tables in several areas - specifically for both layout and also for their intended use: for displaying tablular data. Have a look at this WCAG techniques section on using tables (http://www.w3.org/TR/WCAG10-HTML-TECHS/#tables-layout). Section 5.3 on Linearizing tables (http://www.w3.org/TR/WCAG10-HTML-TECHS/#tables-layout) will show you how data is read by assistive technology. If you think about using a table to split a page into, for example, two columns, you could well find your content makes no sense at all. This is why there is a whole section on HTML tables (http://www.w3.org/TR/html4/struct/tables.html) that gives specific guidelines on how to mark them up for non-visual user agents (http://www.w3.org/TR/html4/struct/tables.html).

That's just one tiny section of why CSS/divs are better than tables. There are loads more. Does anyone else have any examples?

[David]

We did discuss this issue during one of our sessions last year and it remains a hot topic on the web. I think that just about everyone (including me) has accepted that creating layouts using <div> is the way forward. However, there are currently many problems to resolve - as you have discovered - and this makes this method of layout rather laborious but ultimately rewarding.

Being Mr. Pragmatic, I am still using tables for page layout at the moment but I do aspire to <div> with CSS. Tables are easy, I know how they work and they are (relatively) cross-browser consistent.

I am not keen to return to the days of browser incompatibilities and code hacks. But I applaud your efforts James and believe that what you are doing is right. In fact, following your progress on this is very interesting and informative for the others. Thanks Francis for your excellent advice. I'm sure we'll return to this topic in the future ;)

[James]

Yep, I'll stick with CSS, I just wish it was an exact science!

I'm going to leave the site as is for a few days now, but will start adding more content at the weekend or later in the month.

Once again, thanks for being such a star Francis.

[francis]

No probs - it beats trying to understand that Apache book I got the other week. comp.infosystems.www.servers.ms-windows here I come for help!

You might be interested in the bluerobot (http://www.bluerobot.com/) site. Loads of people use their layout reservoir when starting to play with CSS layouts. There are several ways to achieve a two column layout - you're using floats, but another way is explained there.

If you want some cool CSS, have a look at this demo (http://www.counterculture.co.uk/nu.html). It's a work in progress, so I don't know how long the page will be there. Although impressive, we're sort of getting back to XHTML being used just for presentation (loads of empty divs for the styling). Still pretty impressive though. Oh, and there's this CSS house (http://www.designdetector.com/tips/3DBorderDemo2.html) that has been built using just styled divs. More a proof of concept, "ooh look what I've done" effort.

[James]

I took some digital pictures over the weekend and had added them to the site. Just click on the "Wedding" page.
http://www.barkermackie.co.uk

I was hoping to position the thumbnails using CSS, and I tried this tutorial from alistapart (http://www.alistapart.com/articles/practicalcss/).

However, I just couldn't get them to tile horizontally as in the example, they just tiled vertically as and also the container DIV did not expand round them!

In the end I just positioned them using HTML, with a space in between them. It works fine!

Next, I am going to add a form for on-line best man speech suggestions - will let you know when that's on.

Cheers,

[francis]

Wrap the images in a div called .gallery (or whatever you want). Then add this to your CSS:

.gallery img {
float:left;
margin:3px;
}

Which says that all images inside of something with the class gallery should be floated left and have a margin of 3px on each side. What you'll find after that is that your text goes all over the place again. You need to clear the text "Hartfield", "The Spa Hotel", "copyright". If IE supported adjacent-sibling selectors, you could add this to your CSS:

gallery+p {
clear:left;
padding-top:5px;
}

which means that only the first p tag after a gallery element should have those styles applied to it. The benefit of this is that you don't have to add anything to your XHTML to select that/those elements, so the page weight stays down. But you can't do this. We can however utilise the .clearing class for a similar effect, and mark up the text as such:

<p class="clearer">The Spa Hotel:</p>

I'll mail you the files.