OK, *Now* I am Going Crazy

OK, Now I am Going Crazy

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Tyrone Slothrop - 28 Nov 2006 16:18 GMT

File under, no favor goes unpunished.

I am doing a simple (!) layout for a friend which is causing me
problems. For some reason, the navigation has a four pixel upward
shift in Firefox but (for once) displays properly in IE.

What am I doing wrong?

http://www.ispbuddy.com/Dobson/index.html

TIA!

Reply to this Message

Beauregard T. Shagnasty - 28 Nov 2006 17:40 GMT

> I am doing a simple (!) layout for a friend which is causing me
> problems. For some reason, the navigation has a four pixel upward
> shift in Firefox but (for once) displays properly in IE.
>
> What am I doing wrong?

Thinking about pixels...

> http://www.ispbuddy.com/Dobson/index.html

By adding

ul#nav {
margin:0;
padding:4px 0; <--- this

...to your stylesheet, your (ahem) 4 pixel problem seems to go away.

However.

Trying to do a "pixel-perfect" layout across many browsers is doomed to
failure. Simply increasing my font size causes your sample to fall
apart. Look into "fluid" layout. Also consider not trying to have a
fixed-width. It looks silly in large browser windows, and in narrow
ones. Oh wait ... if it was fluid, there wouldn't be a problem.

Here is a three-column sample template:
http://benmeadowcroft.com/webdev/csstemplates/3-column.html

New documents should be HTML 4.01 Strict, rather than Transitional (it's
new, after all), and should use the full doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

See: http://www.w3.org/QA/2002/04/valid-dtd-list.html

About font sizing: with your choice of "px" (or pt), IE users will not
be able to resize your small choice, should they be vision-impaired. Use
percentages instead.

body {
font-family: Arial, Helvetica, sans-serif;
font-size:100%;

..and ..

#nav a:link, #nav a:visited{
font-size: 115%;

Everyone benefits.

Signature

-bts
-Motorcycles defy gravity; cars just suck

Reply to this Message

Tyrone Slothrop - 28 Nov 2006 18:59 GMT

>> I am doing a simple (!) layout for a friend which is causing me
>> problems. For some reason, the navigation has a four pixel upward
[quoted text clipped - 15 lines]
>
>Everyone benefits.

I ended up with a compromise that works.

As far as the other advice is concerned, I appreciate it and agree
with it. However, there are only so many hours in a day. I spend
most of my life hacking code in PHP and JS -- it is hard enough to
keep up with that. I try to avoid design whenever possible. ;-)

Reply to this Message

Schraalhans Keukenmeester - 28 Nov 2006 21:45 GMT

>>> I am doing a simple (!) layout for a friend which is causing me
>>> problems. For some reason, the navigation has a four pixel upward
[quoted text clipped - 20 lines]
> most of my life hacking code in PHP and JS -- it is hard enough to
> keep up with that. I try to avoid design whenever possible. ;-)

Is it possible your fix is already in the file pointed to by the
original link?

The layout looks fine to me in FireFox 1.5.0.8 on Linux.
In FireFox 1.5.0.8 on Windows the buttons have an extra -lighter- line
below, which may be intentional. Personally I prefer the "linux" look.

FWIW: In Konqueror the buttons have the same color as the page
background, no images, and the text links turn black on hovering.

In general, the buttons don't go to well with the rest of the page,
imho. This also goes for the embossed header text which appears a bit
too retro for me. Personally I'd do away with the 3d look. In case you
wanna know. Opinions'ey, like errm, well you know.

Kind regards,
Sh.

Reply to this Message

Tyrone Slothrop - 29 Nov 2006 05:23 GMT

>Is it possible your fix is already in the file pointed to by the
>original link?

Yes, I gave up with what I had intended to do. They were on a tight
schedule and needed it done quickly.

>The layout looks fine to me in FireFox 1.5.0.8 on Linux.
>In FireFox 1.5.0.8 on Windows the buttons have an extra -lighter- line
[quoted text clipped - 7 lines]
>too retro for me. Personally I'd do away with the 3d look. In case you
>wanna know. Opinions'ey, like errm, well you know.

Hey, my opinion is that the design sucks, but I didn't design it. ;-)
I am just an old database man who spends his life coding data
interfaces. They just asked if I could do a quick layout from a
PhotoShop image. Unfortunately, I got hung up on the CSS for the
navigation.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / November 2006

OK, *Now* I am Going Crazy

OK, Now I am Going Crazy