Member Avatar for isotope

Hi everybody,
I'm trying to restyle the Kubrick css for a blog I'm creating, but I'm quite a noob with css and I cant' figure out why the page's structure appears to be broken in some browsers.

The website is:
http://www.incorde.it/
The css file:

For previews I'm using:

I guess full compatibility with every browser would be too hard for me, but I would have the website shown in the same way at least on firefox, with every OS, with ie 6 and 7 on Windows, with Safari on Mac OS X.
Is that too much?

Thank you all,
s

  • 4 Contributors
  • 6 Replies
  • 119 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by kanaku

Dani AI

Generated

This is a classic small-layout / font-metrics issue rather than a mysterious CSS bug. found the menubar constrained by a fixed height while the link text had vertical padding and bolding, and ’s screenshots show the kind of off-by-a-pixel shifts that are common between Windows and macOS. Fonts have different ascent/descent metrics and browsers round subpixel values differently; that, plus baseline alignment for inline elements, is the usual cause of a few “missing” pixels.

Practical fixes that work reliably across browsers:

  • Avoid locking a small fixed height and also using nonzero vertical padding. Either let padding determine height, or make the element include padding in the height with box-sizing: border-box.
  • For single-line nav links, vertically center by using line-height equal to the bar height or by making the anchors block-level and using vertical padding.
  • If anchors stay inline-block, set vertical-align: middle to avoid baseline shifts.

Example patterns (change numbers to suit your design):

/* include padding inside a fixed height */
.nav { box-sizing: border-box; height: 36px; }
.nav a { display: inline-block; vertical-align: middle; line-height: 36px; padding: 0 16px; }

/* OR let padding define height */
.nav { height: auto; padding: 8px 16px; }
.nav a { display: block; }

A few clarifications to the thread: the advice in about “never use 0px” is incorrect—CSS accepts 0 with or without units (using 0 is common). Also pixels are perfectly fine for web layouts; percentages/em/em/rem are alternatives for fluid designs. See the spec and practical notes on box-sizing, line-height, and zero length handling: box-sizing, line-height basics, zero length values.

For cross-browser testing use a normalize/reset and test on real engines (BrowserStack or local VMs). Absolute pixel-perfect parity across OSes isn’t realistic because font rendering differs, but the above will get the layout stable and consistent in all major browsers.

Recommended Answers

All 6 Replies

Member Avatar for isotope

I managed to solve the problem but I couldn't tell what the problem was, , even if I found where it was...

the menubar under the header had a fixed height of 30px.
I assigned to the text in it:

margin: 0px;
padding: 8px 18px 7px 14px;
font-size: 12px;
font-weight: bold;

this means that text+padding = 27px
but 30px-27px = 3px

First questions:
Where are those 3px gone?
Are those because of the bold text?

the problem was that most (all?) browsers on Win renders the text field one pixel higher than the menubar, compared to browsers on Mac OS.
Now the structure works, even if the bar on Win is 1px higher than on Macs.

I would ask, also: is there a workaround to show the page in all browsers, exactly the same way?

Member Avatar for cfajohnson

Is this really how you want it to look?


Member Avatar for MidiMagic

I see several errors, if you want compatibility:

- Don't set sizes (width, height) and nonzero surrounding styles (margin, border, padding) in the same style or tag. IE crams the surrounding styles inside the sizes. Other browsers put the surrounding styles outside the sizes.

- Do not use 0px (or any other unit of measure with 0). Firefox throws away the style if it has this. Just put a 0 for zero values.

- Don't define sizes in pixels if you want compatible pages. Use points or percentages.

Member Avatar for isotope

Hi cfajohnson and thanks for your reply
definetly not what I wanted, which browser is this? on the ones I checked, they're now working pretty fine...
s
p.s.
I can't test on linux, yet

Member Avatar for isotope

Hi MidiMagic,
thanks for replying and for being so clear.
As I said I'm not looking for great compatibility, just because I'm still too noob for that. And I had to publish the website quickly.
I will correct those errors as soon as I can and, at the same time, I would ask you if you can suggest any resource on the web where I can find guidelines and best practices for cross-browser css stylesheets.
Thanks again,
s

Member Avatar for kanaku

- Do not use 0px (or any other unit of measure with 0). Firefox throws away the style if it has this. Just put a 0 for zero values.

Now I'm confused. I've seen someone somewhere in Daniweb say that even if the value is zero, I had to specify if it's px, pt, em etc.

Which is confusing me. Anyway, I've been doing with a plain 0. I just wanted some clarifications... =)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.