Managed to fix the last visible bug in which when the browser window was at certain sizes a small gap between the right hand side of the menu and the main content area showed up.

I managed to fix this by changing:

ul#menu li {
padding: 0.3em 0.3em 0.3em 0.3em;

to:

ul#menu li {
padding: 5px 5px 5px 5px;

Evidently ems aren’t entirely consistent and it may have been a problem of it trying to round to the correct number of pixels but being just under. Pixels are more precise so this way is much better.

I finally worked out how to sort out my validation problem with the light gray to darker gray gradient. It was failing because of it being inside of the tags of the menu without having ‘li’ tags around it. But whenever the tags were added a gray border displayed around it as it was part of ul#menu in the stylesheet. Moving the image outside of the menu resulted in it appearing to the right of the menu instead of below it. So using ‘div id=”container”‘ to hold both the menu and the image and in ul#menu moving float:left; to it.

Using paint.net(I don’t have photoshop) I made up some rounded corners for my site’s header. I butchered some example code and eventually got it to do exactly what I wanted.

After this I set to work getting the rest of the site to pass by using the W3C validator to find the errors on each page. The irony being that having gotten the site to pass validation it now doesn’t work properly in internet explorer 7 on windows XP. Seeing as I only need to develop for firefox for this project it shouldn’t be a problem but its still annoying.

Oh well.

Probably something todo with this guy:

Working on:
Vista/Windows 7 with Firefox 3.5
Vista/Windows 7 with Internet explorer 8
Windows XP with Internet explorer 8
Windows XP with Firefox 3.5
Windows 98SE(for the 0.10% of people still using it) with Firefox 2
Mac OSX 10.5 with Firefox 3.5.3
Mac OSX 10.5 with Safari 4

Not working on:
Windows 98SE with Internet Explorer 6(fairly obvious that this wouldn’t work)
Windows XP with Internet Explorer 6
Windows XP with Internet Explorer 7

To test
Vista with Internet Explorer 7

I’m also currently trying to come up with a decent domain name for my server. For now at least I’m still using this rubbish free one, [removed], I’ll probably get one in the next couple of days.

At least I get a special badge.

I was having some problems with my website, I test on various platforms and eventually discovered that part of my site doesn’t work properly. Its a .png image that sits on the left of the page to blur the bottom of the menu into the background to balance the page. The gradient moves from the light grey of the menu to a darker grey. The only browser this worked on was Firefox on Windows.

After some head scratching, Florian suggested that it was that I had usesd the .png file format and a different colour profile for the image.

Switched to GIF.

I thought I’d get an early start in building my own website for assessment as part of IDAT102. Using trial and error(mostly error) I’ve been putting together a basic website using CSS.

I will update this with little pieces here and there in no particular order.

I used the work from the previous session as a starting point as it had the basic structure that I wanted. I added additional pages by duplicating the original index.html, which contained links to each page, and renaming each accordingly.

After this I started playing with the cascading style sheet of which the current version is here [removed]. I tidied up the interface of the site by tweaking the margins, padding, fonts and colours, ect. I added new features such as buttons becoming lighter on mouseover and the border around the menu link for the currently selected page to turn light blue. I also set a minimum length for the white content area and padding to make it so there is always an empty space between the content and the end of the page.

body {
background-color:#999999;
}

#content {
     width: 800px;
     margin: 0 auto;
     background-color: #CCCCCC;
}

#main {
     width: 600px;
     background-color: #FFFFFF;
     float: right;
     color:#000066;
     font-family:sans-serif;
     font-size:14px;
     padding-left: 40px;
     padding-right: 10px;
     min-height: 600px;
     padding-bottom: 100px;
}

#header {
     height: 124px;
     background-image: url(componant3.png);
     background-repeat:repeat-x;
}

h3 {
     color:#000066;
     padding-left: 15px;
     font-family:Verdana;
     font-size:14px;
     margin-bottom: 20px;
}

h1 {
     color:#B1C8E0;
     font-size: 40px;
     font-family:monospace;
     padding-top: 10px;
     padding-left: 10px;
     margin-bottom: 0px;
}

ul#menu {
     float: left;
     list-style: none;
     text-align:center;
     padding-left: 0px;
     margin-top:0px;
}

ul#menu li {
     padding: 0.3em 0.3em 0.3em 0.3em;
     background-color:#cccccc;
     width:140px;
}

ul#menu li a {
     text-decoration:none;
     display:block;
     color:#CCCCCC;
     background-color:#0066FF;
     font-family:Arial, Helvetica, sans-serif;
}

ul#menu a:hover {
     color:#ffffff;
     background-color:#3399FF;
}

input, textarea {
     border: 2px solid #999999;
     width: 400px;
}

input[type="submit"] {
     background: #666666;
     color:#FFFFFF;
     width: 80px;
     border-bottom: 2px solid #999999;
     border-right: 2px solid #999999;
     border-left: 1px solid #999999;
     border-top: 1px solid #999999;
}

#form {
     background-color:#CCCCCC;
     padding-bottom: 10px;
     padding-top: 5px;
     font-size:10px;
     text-align:center;
}

ul#menu [class="selected"] {
   background-color:#99BFDF;
}

Using Adobe Illustrator I made several versions of a fading 10 x 124pixel texture for the site to give it a smoother appearance, eventually settling on this one.

And in the css file:

#header {
height: 124px;
background-image: url(componant3.png);
background-repeat:repeat-x;
}

This repeats the image across the length of the heading, which uses less bandwidth and is more flexible then using a single image. The file is named componant3 because it is the 3rd major version.

I wanted a smoother transition from the menu down the page so I created another fading texture from the colour of the menu background to the overall background but instead decided to have it written into the HTML itself rather then the CSS. This image for some reason doesn’t blend in properly in internet explorer 8 and is clearly visible so either the hexidecimal value is read differently by firefox and IE or the rendering engine of one of them displays .png incorrectly.

For the favicon I used this online tool I converted a simple pattern I drew in mspaint (windows 7 version) into a .ico file. I then added the code

<link rel="shortcut icon" href="favicon.ico" />

between the head tags on every page to instruct the browser to load the favicon.

I’ve also been looking into server side scripting for storage of data inputted into the form but have been mostly unsuccessful, hopefully I’ll work it out in next week’s session.

Design wise I will probably alter the appearance significantly before completion. The site is viewable in its current form at [removed], please bear in mind that it has only been developed for use with firefox and that certain things don’t work properly on other browsers.

Here is a rough sketch of my design: