[Solved] Internship as Web Designer

[ak-i]

Hello! I’ve started my first day as an intern today at a well known bank as web designer. They want me to build and design a web portal for one of the department. On my first day today, all I was asked to do is to view their intranet site and they want me to noted the advantages of their intranet and want me to understand what is the importance of intranet for communication. I need to make a presentation about that.

The thing is right now, I was given a horrible desktop with horrible hardware. To load their webpage took me some time even some of it is internal website. And most of their design look nice, but the mark up is horrible. And most importantly, they using IE6. I was planning to use some CSS3 and HTML5 stuff, since I guess it maybe only viewed by the employee. But with their standard browser is IE6, I may need to reconsider the technology that i want to use. I never in my life on my experience designing and developing site in IE6. I honestly don’t know what should I be wary of, and what should I take note things that necessary for me to do, so my design would look normal as planned. I don’t really know right now whether the portal will be accessed by the employee only or the customer too, but if its only for the employee, I must do focus on IE6 than.

Any advice on what should, or what shouldn’t I do. Should I stick with the same template used in other intranet page they have or should I suggest a better look? And on the intranet side, what is other advantages of it in a bank department, other that speed?

[jamygolden]

I would suggest sticking to the older templates if you’re not familiar with IE6. Also, you should start doing PSD to HTML examples for practice and make it look good in IE6+ and the later browsers.

[ak-i]

Thanks! As i aware that IE6 got problem with image with transparency? As i viewed my friend’s site i created last month in IE6, it looks horrible. How can i fix that?

[TheDoc]

There is a wealth of information on the web about making sites work in IE6. Chances are, you won’t get one specific bug, but quite a few.

For transparency, you can use the iepngfix, or something like the ie7.js. Search for either of those and you’ll get lots of results.

[Argeaux]

Webdesigner internship .. and you are supposed to design for ie6?

If i were you i would get out of there fast and find something better. Internships are supposed to be fun and interesting, so you can learn new things before you get a real (maybe boring) job.

[TheDoc]

Argeaux, I disagree.

Normally internships are jobs where you do the dirty work that nobody else wants to do.

[ak-i]

Yeah Doc. I have to be agree with that. Although, internship is where you would learn to face the real working world, but I think here, I am on my own, cause the people around me is all sales executive and manager, which have almost zero knowledge about designing or web dev.

Right now they ask me to design a portal for them, not really just design, the want me to do some apps too, but that a different matter. Right now I’ve been told to do the portal, referring to the standard parent site, but with a different fun touch bla bla.

See this page as reference for the look of the parent site. They don’t let me do anything with the header, so i’ll be working with the main content. The left side link also I will be allowed to play just a bit. Easy to say if I could make it almost the same look as the the main site, I would be fine. The thing is, I feel hard to design and refer to the IE, as they don’t have such web inspector or code inspector like Chrome does.

[zackw]

pretty much anything can be achieved in ie6, its just harder and will take alot more tweaking – whenever i design sites i generally design in firefox then test in ie6 – transparent png’s will not work in ie6 (they will show a light gray where the transparency should be) – u can try using an ie6 transparent png hack but somtimes i find they mess up other images – i would just stay away from them if you have to build for ie6 so keep that in-mind when designing

[ak-i]

I’ve tried to do something like accordion link. The script i took from Chris snippet.
I wanna make two sided Accordion list, while in Chrome thing works fine, but in IE it mess up.

This is the html for the accordion.

Asia Pacific








Lorem ipsum dolor sit amet








Lorem ipsum dolor sit amet








Lorem ipsum dolor sit amet












Group








Lorem ipsum dolor sit amet








Lorem ipsum dolor sit amet








Lorem ipsum dolor sit amet












Sales Library








Lorem ipsum dolor sit amet








Lorem ipsum dolor sit amet








Lorem ipsum dolor sit amet
























Latest Promotion








Lorem ipsum dolor sit amet








Lorem ipsum dolor sit amet








Lorem ipsum dolor sit amet










What's New?








Lorem ipsum dolor sit amet








Lorem ipsum dolor sit amet








Lorem ipsum dolor sit amet








Citigold Special








Lorem ipsum dolor sit amet








Lorem ipsum dolor sit amet








Lorem ipsum dolor sit amet

And this is the code.

[Rob MacKay]

When working with IE I find you really have to stick to the rules – put your code through the W3 validator to catch bugs, because unlike other browsers IE 6 will break the page if tags are used incorrectly. Make sure you don’t use the :hover pseudo class on anything other than an A tag – otherwise it wont work.

Other than that there are loads of other issues… but most can be combated with HTML used correctly.

[ak-i]

Yeah I catch that :hover issues, since I use the h3:hover, I put an exception for IE so it wouldn’t mess the stuff. Btw how about the accordion code I’ve posted above? Anyone can tell me why in IE the #accordion2 all disappear, but only revealed again after I click the “Sales Library” from the #accordion. But when I click on any of its tab, it disappear again.

[ak-i]

I’ve updated my script, but still no luck in IE

$(document).ready(function() {



//HIDE THE DIVS ON PAGE LOAD

$('#accordion dd').hide();

$('#accordion2 dd').hide();

$('#accordion dt a').eq(0).addClass("active");

$('#accordion2 dt a').eq(0).addClass("active")

$('#first, #second').fadeIn();



//ACCORDION BUTTON ACTION

$('#accordion dt a, #accordion2 dt a').click(function() {

$(this).parent().next().slideToggle('normal').siblings("dd:visible").slideUp();

$(this).toggleClass("active");

$(this).siblings("a").removeClass("active");



return false;

});

});

This are the global CSS for accordion:

#accordion, #accordion2 { margin: 0; padding: 0; border: 1px solid #ededed; *border: none;}

#accordion dd, #accordion2 dd{ margin: 0 0 5px 0; padding: 0; }





dt.tab{

text-decoration: none;

margin-bottom: 1px;

background: #ccc;

color: #333;

font-weight: bold;

height: 2.5em;

line-height: 2.5em;

text-decoration: none;

text-indent: 1em;

display: block;

width: 100%;

position: relative;

*position: static;

}



#accordion a.tab:hover,  #accordion2 a.tab:hover{

background: #ededed;

}



#accordion  h3, #accordion2 h3{

padding: 10px 5px 5px;

margin: 0;

}



#accordion h3:hover, #accordion2 h3:hover {

background: #ededed;

}



#accordion h3 a, #accordion2 h3 a{

text-decoration: none;

}



#accordion p, #accordion2 p{

color: #444;

margin: -40px 0 40px 80px;

width: 70%;

font-family: "Georgia";

font-style: italic;

font-size: 13px;

}

[ak-i]

Before anyone notice my immature code, let me cover my blushing face with a blanket by letting you know, that I found the culprit which is the closing tag of <dl> :D unfortunately I didn’t notice it. Now it is fix, and the accordion looks awesome even on IE

[ak-i]

I don’t think it suppose to be [SOLVED] since its not actually a topic for specific help, but i guess I’ll just post anything whenever I need help then. ;)

[Author]

Posts