How do I remove white space?

[MelodyW]

Does anyone know how to remove the white space between the navigation buttons at the top. I would like them to blend into each other. I have removed all comments and spaces from Act_NavigationItem.html and Act_NavigationImage.html and the same in the brochure templates.

Also, I have a white gap appearing between each of the section buttons on the left of the page.

Any help would be much appreciated.

Link to site here

Thanks

Mel

[ChrisL]

To answer the second question first, the .gif images you are using have a white bottom border:this may explain it, although there is a known 'bug' in IE where any white space in a navigation list btween the end of one tag and the start of the next will cause white space to appear between the links. The problem you want to solve also occurs in Firefox, so I think you need to edit the .gif's.
As to the first problem, CSS is interpreted differently by different browsers and browser versions -a nightmare. It may help to 'level the playing field' by making a top-level declaration to set all margins and padding for all selectors 0.
This snippet is one I use, and is courtesy of CSS guru Eric Meyer.

/* set default namespace to HTML */
* {
padding:0;
margin:0;
}

html, body, p, div, h1, h2, h3, h4, h5, h6,
ul, ol, dl, dt, dd, blockquote, address, pre,
listing, plaintext, xmp, menu, dir, isindex, hr, map,
multicol, center, frameset, marquee {display: block;}

li {display: list-item;}

area, base, basefont, head, meta, script, style, title,
noembed, noscript, param, noframes {display: none;}

table {display: table;}
caption {display: table-caption;}
tr {display: table-row;}
col {display: table-column;}
colgroup {display: table-column-group;}
tbody {display: table-row-group;}
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
td {display: table-cell;}
th {display: table-cell;}

/* My CSS begins here */
If you insert this at the top of actinic.css, it may cure the problem.

[MelodyW]

Re: Removing White Space

Hi Chris

Thanks for that. It never even crossed my mind it could be the images - I spent hours yesterday messing with the templates!

Thanks again

Mel

[ChrisL]

You're welcome!

[mac-man]

Just noticed your site doesn't fit the screen very well.

EDIT: It's 1024 pixels wide. Have a look here for browser stats.

http://www.w3schools.com/browsers/browsers_stats.asp

I still design 90% of my sites to fit 800 x 600

[ChrisL]

Default Screen Size

I agree, it's generally better to design for 800x600 (although you need to declare a main width (div or table) of about 768 pixels max to get a site to fit).

A VERY useful utility to achieve precise window sizes for your browser (or any other app.) when testing a site, is Sizer.
This can be downloaded at http://www.brianapps.net/sizer.html
and is indispensable for ensuring your browser window is exactly 800x600 -or 1024x768 or anything else that you may want to try.