Angry Browsers

Brilliant, I have my design and I'm ready to go. I've sliced my photoshop mock up into useful gifs and I'm ready to code I'm on linux so my working browser is firefox which is handy because because there lots of useful plugins, here few I swear by: -

• Fire Bug - Great tool to show javascript error, post & gets, css ... the list goes on


• Web Developer Tool Bar - This Has Everythink you will ever need when developing a web site structurally and cosmetically

So I'm ready, Firefox is ready and my IDE (sorry note pad fan boys) is ready. I'm using Intellij Idea which is mainly java IDE but the html/css/javascript support is pretty spectacular. I am going to have 3 core files index.html I'm not going to patronise you(in england its s not z stupid spell checker) by telling you what a html file does, structure.css which hold the structural css code and lookandfeel.css surely thats self explanatory.

I've decided to abstract the structure and style of the site as it makes easier to manipulate in development.

I have four different sections in the design the topbar which holds various links I want to display and a search box..

Top Bar



Ok so lets look at the html I'm going be using:

<div class="top-nav" id="topnav">
        <div id="toplinks" class="top-links">
            <ul id="toplinkstt">
                <li class="title">Useful Links ...</li>
                <li>
                    <a title="My blog on crossbrowser development"
                       href="http://angrybrowsers.blogspot.com">
                       Angry Browsers</a>
                </li>
                <li><a title="Where I go for tech news"
                       href="http://news.zdnet.com">
                       ZDNET News</a>
                </li>
                <li><a title="My IDE of choice"
                       href="http://www.jetbrains.com/idea/index.html">
                       Intellij Idea</a>
                </li>
                <li><a title="Ideal place for trac and svn hosting"
                       href="http://www.assembla.com/">Assembla</a>
                </li>
            </ul>
        </div>
        <div id="topsearch" class="top-search">
            <input type="text" class="round2"/>
        </div>
    </div>

So there's the basic html you can see I've used a unordered list <ul> for the links the default behaviour for list is normally vertical elements with bullets e.g.

• list item 1


• list item 2


• list item 3

However thats not what I want it to so I've added some custom css to change the behavior of the list

/** from lookandfeel.css **/

.top-links ul {
    display: inline;
    margin: 0;
    padding: 0;
}

.top-links li {
    list-style: none;
    display: inline;
    padding-right: 20px;
}

By setting the <UL> to display:inline and the <li> to display:inline; list-style:none it renders the list to be in a straight line thus giving us the desired effect. Although I for see issues later when it comes to ie and safari but for now works in firefox so meh!

You may also the very cool round search box with the pretty looking glass, heres css code:

.top-search .round {
    margin-left: 150px;
    -moz-border-radius: 10px;
    padding-left: 20px;
    background-image: url("../images/search.gif");
    background-repeat: no-repeat;
}

For some reason again I can't see this working in ie/safari is this I haven't done before so its going need a bit of thinking and a post :)

The Header

An important of any website as it tells the sites in big bold letters and it has a catchy slogan that makes go wow! and makes you think why the hell didn't I do a marketing degree anyways this is what looks like:



Heres the html code:

<div class="header-back" id="header-container">
        <div class="inner-hdst" id="inner-header">
            <div class="logo" id="logo">&nbsp;</div>
            <div id="languageselector" class="language-selector">
                <p>
                    What takes your fancy?
                </p>
                <ul>
                    <li class="selected"><a href="#asp">ASP.NET</a></li>
                    <li><a href="#jsp">JSP</a></li>
                    <li style="border-right:none"><a href="#php">PHP</a></li>
                </ul>
            </div>
        </div>
    </div>

As you can see I'm using similar rendered unordered lists apart from that its pretty standard stuff. However using floated divs and past experience says not all browsers like floated elements (ie springs to mind) preliminary here's the css

/** from structure.css **/

#header-container {
    width:100%;
    height:101px;
}

#inner-header {
    margin-left:32%;
    width:60%;
    height:187px;
}

#logo {
    float:left;
    width:442px;
    height:101px;
    margin-right:20%;
}

#languageselector {
    float:left;
}

As you can see I'm also using margins to help position elements will this cause me issues in future not sure we shall see :) NEXT ...

Navigation Bar

Firstly I haven't decided how I'm going to do the nav bar I've always struggled to be definitive on look and feel of the navigation components. Structurally I've gone for an unordered list again that has stripped of the style and displayed inline. Html look down :p

    <div id="navbar" class="nav-bar">
        <ul>
            <li><a href="#test">hello</a></li>
        </ul>
    </div>

Main Text Content Area And Footer

The main content area is based upon a two column design therefore requires us to use once again floating divs like I said this is this is likely to cause issue cross browser but that isn't a concern right now, here's the code:

<div id="content" class="contentst">
        <div id="leftcol" class="left_col">
        </div>
        <div id="rightcol1" class="right_col">
        </div>
        <div id="rightcol2" class="right_col">              
        </div>                              
</div>
<div id="footer" class="footerst"></div<

and the CSS:

//from structure.css
#content {
    margin:auto;
}
#leftcol {
    float:left;
    width:70%;
    height:60%;
}
#rightcol1 {
    float:right;
    margin-right:5px;
    width:26%;
    height:29%;
    margin-bottom:16px;
}
#rightcol2 {
    float:right;
    margin-right:5px;
    width:26%;
    height:29%;
}
#footer {
    width:100%;
    height:187px;
}
#dividerbottom {
    width:100%;
    height:4px;
}

So thats then ... hold up thats not right the footers decided it actually wants to be a header, have a look:



Well that's not right so why is that happening? Well if you have a series floating elements e.g. the content area proceeding divs will not recognise and inherit the height/width of the floating divs, therefore causing our footer to have inclinations towards becoming a header. So how can we fix this, we can use a css property to basically "ello mate these divs above need there space so why don't you go below them" this property is called clear which does this for us as we can set the clear property to "both" enable us show the footer in its desired place. I've done this by adding a div below the main content divs with a class that holds the clear property, code below:

 <div id="cleardiv" class="clear-div">&nbsp;</div>
//from lookandfeel.css
.clear-div {
    clear: both;
}

So we fixed that issue and we've finished the initial code so lets go on to the real content of this blog lets make it cross browser compatible, heres the finished product

• View the html source code here


• View the structure.css source code here


• View the lookandfeel.css source code here

So my original idea of retrospectively written posting about cross browsers fixes isn't working out :( as currently posts about cross browser fixes == none :(.

So plan b, I've decide to start a little side ...damn glasses i are smudged and I've lost ruddy glasses cloth ahh it was under desks lets give the a clean that's better I can see ...anyways I've decide to start a little project up antgrimmitt.co.uk which will be my personal geek site and projects site so of course i need to build a website do you see where I'm going with this ...

Well firstly a new site means a new excuse to Photoshop mwuhahaha so I have sat and played about for a bit and this is what I've come up with:

Web sites are apart of every day life, and have been for me since the age of 16, no not 'those' websites I'm a gentleman and would not do such a thing (that was 14 aswell)

A little about me
When I was 16 I start making websites in front page *cringe* and luckily progressing to dreamweaver 4 at school (AVCE IT rocked). I kinda fell in love with process of web design (design came before development see post 2) so then by a bizarre twist of fate or a moment madness depending catch me on a good day or not I decided "hey I like building websites, websites are displayed on computers, I know I do a degree computer science)

In summary of those three years,

year 1:wooo freedom, beer, java,maths,java,maths,java,maths,java,maths,java,maths,java,maths why did i ever do this

year 2: this year im going improve java,maths,java,maths blood tears and bottles of jd java,maths,java,maths, ohhhh I built a webpage finally, java,maths,java,maths,java,maths,java,maths The runtime complexity of a for loop with a single inner operation is nlog(n2) dont know what that means but hey i'll get a mark for it java,maths,java,maths why did i ever do this for 2 yeaes

Year 3: Software engineering the net ejb,jsps and servlets I actually enjoyed this third year project Natural language to database tool with a web front end my most enjoyable project ... wow thats fun why were the first 2 years hell?

Then i thought right lets go get a job as a web developer and do you know what a LITTLE bit of java won't hurt so I'll put I'll do a bit of that.

Hired .......... as a java developer

That kind of went like this:

Hi welcome to job this is your desk and heres a bug at in this class file, so I start skimming the code and see this


public void myMethod(Object<? extends T> myParam) {
if(myParam ? trueOperation() : falseOperation());
}

public void trueOperation() {
System.out.println("This code probably wont compile ... I DON'T CARE");
}

public void falseOperation() {
SolarImperium solar = new SolarImperium("Emporer Grim");

solar.nuke("ed");

}


So I saw that considering that I had just done 3yrs of java at uni my first response "what the fuck is that thats not java" I still dont get generics or the one line if statements.

Anyway lets hurry this breif description of the first year at work

java, java, java, java, java, java, java, java, sql, java, java, java, java, java, xml, java, java, java, (this could a song), I have task to fix a bug thing you need learn python have fun, python, python, python, python, I want to die, python, python, python, java.

That brings to 4months ago, I was giving involved wait for it ... web development woohoo this is going to be sweet I can do this blind folded I'll be done sure boss safari, firefox, ie6/7/8 chrome sure boss it will take a week .... months later

Welcome to Angry Browsers