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:
http://www.incorde.it/wp-content/themes/incorde/style.css
For previews I'm using:
http://browsershots.org

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

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?

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.

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

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

- 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.