Showing posts with label HTML and CSS. Show all posts
Showing posts with label HTML and CSS. Show all posts
Validation
I used the W3C Markup Validation System to validate my code by uploading my HTML files and it passed as HTML 4.01 Strict. The only thing it didn't pass on was character encoding, but Andrew said that I could ignore that.
Bug Log - 26/01/09
Bug Log
---------------------------
26/01/09
-----------
Problem:
* 'align' would not be accepted by w3c validator.
Solution:
* Added 'float: right;' to external CSS for #content img tag.
- - - - - - - - - - - -
26/01/09
-----------
Problem:
* Image gallery broken by floating the img tag right.
Solution:
* Added CSS in the head 'float: none;' just for that page.
- - - - - - - - - - - -
26/01/09
-----------
Problem:
* '/>' not accepted by the validator for HTML 4.0 strict.
Solution:
* Used find and replace to change '/>' just to '>'.
---------------------------
26/01/09
-----------
Problem:
* 'align' would not be accepted by w3c validator.
Solution:
* Added 'float: right;' to external CSS for #content img tag.
- - - - - - - - - - - -
26/01/09
-----------
Problem:
* Image gallery broken by floating the img tag right.
Solution:
* Added CSS in the head 'float: none;' just for that page.
- - - - - - - - - - - -
26/01/09
-----------
Problem:
* '/>' not accepted by the validator for HTML 4.0 strict.
Solution:
* Used find and replace to change '/>' just to '>'.
Testing Across Different Browsers
I tested my site across 3 different browsers available on PC to see whether my code was strong enough to display correctly across them, and I was very pleased to find that the differences were practically non existant except for Safari's tendency to make text appear bold on PC.
Here it is in IE:

Here it is in Firefox:

Here it is in Safari:
Here it is in IE:

Here it is in Firefox:

Here it is in Safari:
Bug Log: 24/01/09
Bug Log
---------------------------
24/01/09
-----------
Problem:
* H1 tag creating too much space.
Solution:
* Inserting CSS modifying the margin values.
- - - - - - - - - - - -
24/01/09
-----------
Problem:
* After adding padding to img tag in Gallery the outline for a link area would show.
Solution:
* Created css to display this as white, so it won't show against the white background.
- - - - - - - - - - - -
24/01/09
-----------
Problem:
* Tested gallery in IE7, ignores CSS changing the linking colour of the images.
Solution:
* changed selector from 'color' to 'border-color:
#content a:visited img{
border-color: #fff;
}
#content a:link img{
border-color: #fff;
}
---------------------------
24/01/09
-----------
Problem:
* H1 tag creating too much space.
Solution:
* Inserting CSS modifying the margin values.
- - - - - - - - - - - -
24/01/09
-----------
Problem:
* After adding padding to img tag in Gallery the outline for a link area would show.
Solution:
* Created css to display this as white, so it won't show against the white background.
- - - - - - - - - - - -
24/01/09
-----------
Problem:
* Tested gallery in IE7, ignores CSS changing the linking colour of the images.
Solution:
* changed selector from 'color' to 'border-color:
#content a:visited img{
border-color: #fff;
}
#content a:link img{
border-color: #fff;
}
Bug Log: 23/01/09
Bug Log
---------------------------
Problem:
* Issue with repeating body background:
background-image: url(images/background.gif);
background-repeat: repeat-x;
Wasn't working in external style sheet, so I solved this by inserting it in the head of the document.
Solution:
* Adding '../' sends it back to the root folder and is able to link correctly.
- - - - - - - - - - - - - - - - - - - - - - - - - - -
Problem:
* Using the paragraph tag adding spacing at the top of the first paragraph.
Solution:
* Redefined the paragraph tag in the style sheet so there was no margin on top.
---------------------------
Problem:
* Issue with repeating body background:
background-image: url(images/background.gif);
background-repeat: repeat-x;
Wasn't working in external style sheet, so I solved this by inserting it in the head of the document.
Solution:
* Adding '../' sends it back to the root folder and is able to link correctly.
- - - - - - - - - - - - - - - - - - - - - - - - - - -
Problem:
* Using the paragraph tag adding spacing at the top of the first paragraph.
Solution:
* Redefined the paragraph tag in the style sheet so there was no margin on top.
Bug Log - 22/01/09
Bug Log
- - - - - - - - - - - -
Problem:
* Issue with repeating body background:
background-image: url(images/background.gif);
background-repeat: repeat-x;
Wasn't working in external style sheet.
Solution:
* Seems to work by inserting it inside the head of the HTML page.
Will try to get it working in external sheet, otherwise just leave it.
0
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Problem:
* Issue with the header.
Created a header, sliced in 2 3 parts. Inserted next to each other inside a fixed width div, and space is created between the images.
Solution:
* Put all of the '< img src="...' tags on the same line.
- - - - - - - - - - - -
Problem:
* Issue with repeating body background:
background-image: url(images/background.gif);
background-repeat: repeat-x;
Wasn't working in external style sheet.
Solution:
* Seems to work by inserting it inside the head of the HTML page.
Will try to get it working in external sheet, otherwise just leave it.
0
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Problem:
* Issue with the header.
Created a header, sliced in 2 3 parts. Inserted next to each other inside a fixed width div, and space is created between the images.
Solution:
* Put all of the '< img src="...' tags on the same line.
New Project: HTML & CSS
We have begun a new project where we are going to learn how to build web pages in HTML & CSS, with the aim of producing a website on a chosen subject writing the code by hand rather than using a program such as Dreamweaver. I am excited to begin this project, as it will give me a greater insight in to how the coding behind websites work.
Subscribe to:
Posts (Atom)