HTML and CSS

While continuing to practice further more after the weekend, I tried my design in different browsers and came across some annoying problems which I felt the need to discuss.

In my design I used border-radius to round-up corners of some coloured boxes. I knew that this kind of styling differs from browser to browser therefore I included different code that would work in different browsers. To my surprise some Internet explorer versions do not support this feature, only IE 9 supports it. Another way to obtain this feature is by setting an image with round borders in the background which obviously involves much more work.

Other Problems I encountered were margin related. While testing in Chrome I set up some margins to position some text areas. Internet Explorer Positioned the text areas differently from chrome and therefore my design was slightly messed up. As some of my friends suggested, adding * { margin:0; padding:0;} in the beginning of the CSS file solves this margin problem.

I also encountered other minor issues due to features that work in chrome but do not work in Internet explorer. I used the corresponding Internet Explorer code to solve these issues.

The website http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx contains an interesting list of supported CSS functionality for IE.

It was more difficult than expected to create a style that looks that same in all browsers, fortunately these differences are being reduced as the newer browsers have much more features in common.

Introduction to Client/Server Web Development

As this is my first post, I should introduce my self properly. My name is Mark Galea and I am currently studying at STC Malta doing my BSc (Hons) in Internet Application Development degree with Middlesex University. As a part of my “Client/Server Web Systems Development” module I am required to blog my experiences during this year.

In the first week we tackled HTML and CSS technologies. Although I had prior knowledge of some HTML features, I never really learned it nor had I previously used CSS. This week I was involved in some research to learn about these technologies. Currently I also work on WPF browser applications, which generate similar code called XAML using GUI tools. This made it much easier for me to learn HTML and CSS as I could easily read all the code and understand it although I could not write anything from scratch.

For experimenting in CSS technologies, I visited http://www.csszengarden.com/. There one can download an HTML file and its CSS file. By altering the CSS file, the appearance of the webpage can be altered. To start experimenting I preferred altering a ready made CSS file, instead of creating a new one, as it is easier for me to learn this way. CSS is quite readable so I had no problems at all tweaking the design.

To get a good result, a simple design or idea of how the final website will look like is needed so I tried to find ready made designs on the internet. In the mean time I continued to edit the blog’s appearance. Here I found a template which seemed suitable to what I was doing in the CSS garden project. I decided to recreate the same template in my project. I used Google chrome’s inspect element feature to find the exact hash color codes used in the template.

Finally I started creating my CSS file, keeping some of the code from the original source. I decided to base my theme on technology, so I called the website Technological Garden. Most of the features implemented were obtained by trial and error, while other features were taken from other sources using the inspect element to view the code. The website http://www.w3schools.com/ was very helpful as it contains some examples and explanations. To make the page more visually appealing I added some pictures in the CSS Design. Since the original titles in the HTML files cannot be tweaked, I set these titles’s appearance to none and inserted pictures containing the respective titles.

To complete my design I needed to alter fonts including those of links. I tried various fonts in an office application before the actual implementation in the CSS file. The page needed further editing after this step such as text padding and margins to control the text areas.

Editing the site seamed easy but creating one from scratch is a different story. While editing I wanted to put all the text into one box with a different colour from the background but this was not possible. This couldn’t be done due to the way content was grouped. The CSS separates the content from the layout, but in the end the layout must match the content, meaning that the way in which content is grouped in HTML tags must also be given a lot of thought. Eventually I managed to accomplish the task by creating separate boxes and with the use of negative margins they looked as one. I also used text padding such that the text in the overlapping area remains visible.