Oh no! Cross browser problem.

I was going along happily working on 3rd web page and things are looking pretty good  - till I noticed tonight that my page that looked so good in Safari has a couple of the bottom info boxes all 'out of alignment' and looking wonky in Opera and Firefox.  Angela was sooo kind to help me load that up on my Mac today.  Started Google searching and found there is a code validator that supposedly checks on potential problems?  Splash and lotus shoes did not present any red flags....hmmmm....so what could be the problem?

Here's link to what was validated.
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.palosverdes.com%2Froseannah%2Fred%2Flotus_shoe.html&profile=css21&usermedium=all&warning=1&vextwarning=&lang=en

Need to check on 3rd page to see if that code checks out.  It does, but I believe I'm still having problems with how it looks in Firefox.

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.palosverdes.com%2Froseannah%2Fred%2FThe_Red_Shoe.html&profile=css21&usermedium=all&warning=1&vextwarning= or http://jigsaw.w3.org/css-validator/check/referer (for HTML/XML document only)

Red - Lotus Shoe Roughs

This will be 1st page after splash/home page.  After Prof Angela's input - I'm trying to limit the written info to key points and give web visitor links for pursuing more details.  The photo will link to page to include other photos.

I think I like this version better the warm/cool colors seem more dynamic.  I will start laying out my boxes.  Finally!  NO more roughs.

Red - More Shoe Lore roughs

Prof Angela viewed this rough yesterday and did not seem too pleased.   Seems like it reads too much like print vs web where we need to capture viewer's attention quickly.  What!  They don't like to read this most interesting material???  The vertical bars is ok.  Maybe bigger 'Lotus Shoes' header.

I think the bigger font size which matches the splash page looks more interesting.  I added the red h1 and worked with the leading in the body type per Angela's suggestion.  Is it back to the drawing board to make yet another rough??  I NEED to start making my container boxes...

Boxes - Absolute & Fixed Re-do

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>absoluteBox</title>
<style type="text/css">
<!--
.bigBox 
{
 background-color: #FFFF99;
 height: 600px;
 width: 600px;
 left: 50px;
 top: 50px;
 position: absolute;
}

.middleBox
 {
 background-color: #FF9933;
 height: 400px;
 width: 400px;
 position: absolute;
 top: 100px;
 left: 100px;
}

.smBox 
{
 background-color: #CC0000;
 height: 50px;
 width: 50px;
 top: 160px;
 position: absolute;
 left: 160px;
}

.bigBox2
 {
 background-color: #FF3333;
 height: 600px;
 width: 600px;
 position: fixed;
 margin-left: 1000px;
 margin-top: 50px;
}

.middleBox2 
{
 position: fixed;
 height: 400px;
 width: 400px;
 background-color: #FFFF66;
 left: 1100px;
 top: 150px;
}

.smBox2
 {
 position: fixed;
 height: 50px;
 width: 50px;
 background-color: #FF9900;
 top: 300px;
 left: 1250px;
}
-->

</style>
</head>

<body>


<div class="bigBox2"></div>
<div class="middleBox2"></div>
<div class="smBox2"></div>

<!--need to select from code and move to inside big box div class to be in the box-->


<div class="bigBox">
<div class="middleBox">
<div class="smBox"></div>
</div>
</div>
</body>
</html>

Wireframe & Site Architecture

The green marker outlines the wireframe and the blue marker indicates six information architecture layouts.  Refer to write up with more specifics for info architecture in earlier post.

Red - Shoe Lore roughs

This rough for my 'splash' home page is 'boring' says Angela.  She also said each word or so would need it's own box to enable client to change things around more easily.

This rough for 'splash' home page met with more approval from Angela & I was able to work out the header and tagline in Dreamweaver.   The header 'ShoeLore' along with the strip behind it was worked in psd and saved as png to allow for transparent area behind strip  (Yea!  Now, how to work out the menu (do as links??  rollovers??)

Websites - may consider for inspiration

http://www.hopeunlimited.org/fiveforten.html

I like the simplicity of this home page.  Simple layout - the menu bar - scrolls horizontally.  The place holder for the web pages has consistent jagged edges look.

The above website is recognized for it's design.  Great use of colors.  KISS!

http://www.hail-stone.co.uk/

Check out the above link for some cool (flash?) - she has links to other 'good' websites.