CSS (Jont?)

[pinbrook]

Cheeky eh!!

Here's the Q - I'm upgrading pinbrook.net see test site at http://test1.pinbrook.net/index.htm

it views ok in IE, but I have a gap at the top of the left hand nav in FF - any ideas how to close it?

Any ideas on a font that looks good (ie not raggedy) when displayed as 18 or 16px bold.

Here's the CSS for the nav.

#navcontainer {
width: 185px;
}

#navcontainer a {
background-color: #F1EDEA;
border-bottom: 1px solid #FFF;
display: block;
width: 185px;

}

#navcontainer a:link, #navlist a:visited {
color: #666;
font-size: 12px;
text-decoration: none;
padding-bottom: 5px;
padding-top: 5px;

}

#navcontainer a:hover {
background-color: #FF8500;
color: #FFF;

}

#navcontainer ul {
list-style-type: none;
margin-left: 0;
padding-left: 0;
font-size: 12px;
}

[fergusw]

CSS fun

Hi Jo,
Your problem in FF stems from the menu DIV displaying slightly lower than in IE.
The gap is between the grey 'block' in the head image and the start of the <UL>.

Not 100% on the resolution, not yet tested, but perhaps explicitly declaring the border/padding properties of the
#navcontainer {
width: 185px;
}

might help
e.g.
#navcontainer {
width: 185px;
padding:0;
border:0;
margin:0;
}

etc.

It might just be the way the browsers are rendering the default properties for this DIV!

Hope this helps.

[fergusw]

OH - by the way Jo.
I like the design.

[wjcampbe]

Jo, to me that gap is coming from this code

<td width="22" rowspan="2" align="center" valign="top">&nbsp;</td> 
<td width="185" align="center" valign="top"> 
<div id="navcontainer">

When I comment out the 22 wide column cell, The nav moves left.

[ChrisL]

It may be better to 'level the playing field' across all browsers by starting your CSS file with this declaration:-

* {
padding:0;
margin:0;
border:0;
}

there is (much) more on this sort of thing, entitled 'Debunking the myth of style defaults' at the following link
http://techrepublic.com.com/5100-22_...ml?tag=nl.e101

[fergusw]

HI Jo,
Just tested and

* {
padding:0;
margin:0;
}

works for me in both IE and FF

[jont]

Hi Jo - that's one way to grab attention

looks like the other guys has resolved for you, another option is adding just 1 line as follows to the UL statement

#navcontainer ul {
	list-style-type: none;
        margin-top: 0;
	margin-left: 0;
	padding-left: 0;
	font-size: 12px;
	}

like the new layout, looks very clean and professional

[pinbrook]

Great Response! Thanks Guys

I used a combination of solutions.

* {
padding:0;
}

using margin:0 in the * declaration resulted in the table going off to the left.

So I added margin-top:0 in #navcontainer ul

thanks for the thumbs up re the design, hosting is the main stay of pinbrook now so we need a better looking site to be able to compete with the big guys!

I'd welcome more comments....

and any ideas on larger type faces that are less raggedy, i don't want to use images in place of text cos it makes changing the site/wording a bigger task than it needs to be.

jonty - I got your attention! but I have also seen your replies to CSS Qs

Bill - sorry wrong gap!!

[jont]

I would remove the italics for starters as this adds to anti-aliasing problems, especially on the page header. Verdana (which you are using) is probably the best option for clarity and cross platform compatability IMHO