Corporate Site Template - Originally Posted by aazad I think I am having some kind of developers block today as I am so lost.

aazad · 1st April 2009, 08:25 PM

Quote:

Originally Posted by aazad

I think I am having some kind of developers block today as I am so lost.

Well scrap the above, I think I have managed to sort out my site regarding the layout and columns. Check the link below to have a look at a test model. I have only done the first page. Just wanted to check I did it right and my code is correct before doing every page.

Company Name Here - CSS Template

shalom_m · 1st April 2009, 08:42 PM

Quote:

I think I have managed to sort out my site regarding the layout and columns.

BRAVO !!!!

For IE6

I have an old PC around with IE6 on it - this is the best solution

If you only have one PC see:

IE7: Using IE6 and IE7 together | Internet Explorer IE7 | Tech-Recipes

Install multiple versions of IE on your PC | TredoSoft

There may be other solutions out there.

The basic cause of your problem in the menu line is part of the BOX MODEL issue.

See: http://webprocafe.com/design-and-lay...le-sheets.html (Tutorial needed on CSS Box Model)

aazad · 3rd April 2009, 09:55 PM

Thanks very much for the info Shalom. Managed to get IE6 and read up on the box model. I have some questions and issues.

Firstly, could you check the site in IE7 as for some reason it isn't displaying properly and I have no idea why. I'm guessing its maybe to do with the float but really not sure.

Relating to the nav bar in IE6 I am confused. I read up on the box model and my understanding is...

IE measures total width by adding the margins left and right and the width. In my case a total of 928px.

W3C measures total width by adding the margins left and right, borders left and right, paddings left and right and width. In my case 1002px.

So do I need to add on like an extra something to make up the difference? and if so where? I'm really lost with this.

shalom_m · 4th April 2009, 07:13 PM

There is no need for the:

Code:

overflow: auto;    /* Fix for IE */

it is not a fix, more a source for additional problems.

There is no reason why a column on one side should not be longer than the other,

For additional FAUX examples see:
index
http://mandelbaumonline.net/csspop/pink/

Your understanding of the BOX MODEL is fine.
A simple way to add for IE6 is:

Code:

     width: 200px       /*for W3C compliant browsers*/
     _width: 230px      /*for IE6*/

A lot of my colleagues here will not like this solution but it works!!!

aazad · 4th April 2009, 09:16 PM

Ok, I think I have this now. Sorted out the layout problem that I was having in IE7. Just unspecified the height in #header.

Regarding the nav bar, I believe I am making progress...

I have the 2 different widths specified...

Code:

#navHome, #navCompany, #navClients, #navOurteam, #navContact {        
    height: 23px;            
    margin-bottom: 10px;                        
    text-align: center;                
    color: #fff;
    text-decoration: none;    
    float: left;
    width: 928px;      /* for W3C compliant browsers */
    _width: 929px;    /* for IE6 */
}

but I also had to specify the width and height of the banner in each page as for some reason it was 930px by 162px on 2 of the pages. Not sure why this happened though. Any ideas?

Code:

<img src="images/bannerHome.jpg" alt="Banner" width="928px" height="164px" class="border" />

Now in firefox and IE7 when you hover over "contact us" there is like half a pixel missing on the end. Not sure how much of a big deal this is but I notice it.

In IE6 the nav bar seems to be too long with an extra 3 or so pixels on the end.

shalom_m · 4th April 2009, 11:27 PM

I think you have it as good as one can expect.

Nav bar is fine - the delinquent pixel in FF and IE7 is because of the way you defined the hover. If you move the CONTACT US one pixel to the left it may solve the problem.

The extra pixel in the IE6 nav bar, is acceptable - it does not alter the general look.

Now to some other matters:
Consider changing the shading (light blue - #F1F9FF) on the right, to shades that complement the the look of the specific page.

Consider changing the font colors on different pages to stand out a little more (especially the nav bar on the "Some of our Clients" page). Also make sure your copyright notice is seen, add a symbol (the HTML equivalent is ‘©’ or the Unicode for the character ‘©’) and make the amawebdesign.co.uk into an unobtrusive link.

aazad · 6th April 2009, 04:01 PM

Thanks very much for your help on this one Shalom. Very much appreciated!

I'm very happy with the way the site looks now so I think I'm going to leave it as it is. Might make a few changes later on when I have some more time.

I wanted to ask.....

If you had created this site for a client say and they picked up on the half a pixel out on the nav bar what would you do? Would you try and fix the problem? What happens if there isn't a solution? Would you inform the client that there is nothing more you can do? Or is there always a solution in web design?

shalom_m · 6th April 2009, 05:03 PM

With a little bit of imagination and a lot of redesign you should be able to find more than one solution.

3rd April 2009, 09:55 PM	#13
aazad Member Join Date: Jan 2009 Posts: 97 Blog Entries: 1 Thanks: 1 Thanked 0 Times in 0 Posts Expertise: (X)HTML / CSS Experience: Quite Good	Thanks very much for the info Shalom. Managed to get IE6 and read up on the box model. I have some questions and issues. Firstly, could you check the site in IE7 as for some reason it isn't displaying properly and I have no idea why. I'm guessing its maybe to do with the float but really not sure. Relating to the nav bar in IE6 I am confused. I read up on the box model and my understanding is... IE measures total width by adding the margins left and right and the width. In my case a total of 928px. W3C measures total width by adding the margins left and right, borders left and right, paddings left and right and width. In my case 1002px. So do I need to add on like an extra something to make up the difference? and if so where? I'm really lost with this. __________________ Too Kool for Skool

4th April 2009, 07:13 PM	#14
shalom_m Join Date: Jan 2009 Posts: 437 Thanks: 1 Thanked 20 Times in 20 Posts Expertise: (X)HTML / CSS Experience: Quite Good	There is no need for the: Code: overflow: auto; /* Fix for IE / it is not a fix, more a source for additional problems. There is no reason why a column on one side should not be longer than the other, For additional FAUX examples see: index http://mandelbaumonline.net/csspop/pink/ Your understanding of the BOX MODEL is fine. A simple way to add for IE6 is: Code: width: 200px /for W3C compliant browsers/ _width: 230px /for IE6*/ A lot of my colleagues here will not like this solution but it works!!!

4th April 2009, 09:16 PM	#15
aazad Member Join Date: Jan 2009 Posts: 97 Blog Entries: 1 Thanks: 1 Thanked 0 Times in 0 Posts Expertise: (X)HTML / CSS Experience: Quite Good	Ok, I think I have this now. Sorted out the layout problem that I was having in IE7. Just unspecified the height in #header. Regarding the nav bar, I believe I am making progress... I have the 2 different widths specified... Code: #navHome, #navCompany, #navClients, #navOurteam, #navContact { height: 23px; margin-bottom: 10px; text-align: center; color: #fff; text-decoration: none; float: left; width: 928px; /* for W3C compliant browsers / _width: 929px; / for IE6 */ } but I also had to specify the width and height of the banner in each page as for some reason it was 930px by 162px on 2 of the pages. Not sure why this happened though. Any ideas? Code: <img src="images/bannerHome.jpg" alt="Banner" width="928px" height="164px" class="border" /> Now in firefox and IE7 when you hover over "contact us" there is like half a pixel missing on the end. Not sure how much of a big deal this is but I notice it. In IE6 the nav bar seems to be too long with an extra 3 or so pixels on the end. __________________ Too Kool for Skool

6th April 2009, 04:01 PM	#17
aazad Member Join Date: Jan 2009 Posts: 97 Blog Entries: 1 Thanks: 1 Thanked 0 Times in 0 Posts Expertise: (X)HTML / CSS Experience: Quite Good	Thanks very much for your help on this one Shalom. Very much appreciated! I'm very happy with the way the site looks now so I think I'm going to leave it as it is. Might make a few changes later on when I have some more time. I wanted to ask..... If you had created this site for a client say and they picked up on the half a pixel out on the nav bar what would you do? Would you try and fix the problem? What happens if there isn't a solution? Would you inform the client that there is nothing more you can do? Or is there always a solution in web design? __________________ Too Kool for Skool

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

4th April 2009, 11:27 PM	#16
shalom_m Join Date: Jan 2009 Posts: 437 Thanks: 1 Thanked 20 Times in 20 Posts Expertise: (X)HTML / CSS Experience: Quite Good	I think you have it as good as one can expect. Nav bar is fine - the delinquent pixel in FF and IE7 is because of the way you defined the hover. If you move the CONTACT US one pixel to the left it may solve the problem. The extra pixel in the IE6 nav bar, is acceptable - it does not alter the general look. Now to some other matters: Consider changing the shading (light blue - #F1F9FF) on the right, to shades that complement the the look of the specific page. Consider changing the font colors on different pages to stand out a little more (especially the nav bar on the "Some of our Clients" page). Also make sure your copyright notice is seen, add a symbol (the HTML equivalent is ‘©’ or the Unicode for the character ‘©’) and make the amawebdesign.co.uk into an unobtrusive link.

6th April 2009, 05:03 PM	#18
shalom_m Join Date: Jan 2009 Posts: 437 Thanks: 1 Thanked 20 Times in 20 Posts Expertise: (X)HTML / CSS Experience: Quite Good	With a little bit of imagination and a lot of redesign you should be able to find more than one solution.