Browser incompatibility: fonts and positioning

  • Resolved neuroplastic

    (@neuroplastic)


    14 years, 3 months ago

    This is my site:

    http://neuroplasticrecords.com/home

    It looks fine in Safari and Chrome but for some reason in Firefox some of the headers are being made bold and the whole thing looks very ugly (see the artists page for example). The word bold doesn’t occur once in the CSS, why is it doing this? I tried adding ‘font-stretch: condensed’ to the css and that worked okayish when i didn’t have any other fonts in the font family, just arial, (which i don’t want… I picked those fonts for a reason), but as soon as i put other fonts in the font family it went ugly again.

    Also, you’ll notice if you open the site in Firefox, the text of the top header has been shunted down. I can’t think of any reason for that, but it means I’ve had to remove the page titles in the black band across the top of the main part to accomodate it. The sidebar looks horrible in Firefox too.

    IE7: I used netrenderer which I’m going to assume is accurate. The font in that is disgusting. I’m sure I never picked it. In IE6 it’s an enormous mess and I don’t even know where to start!

    I tried everything: truetype, Google font directory, font-stretch in the CSS… FF and IE7 seem hellbent on me using fonts wider than a fat ass and it’s not cool.

    Hopefully someone can help a brother out.

    Thanks.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Gary Darling

    (@garydarling)

    14 years, 3 months ago

    Every browser is capable of interpreting an instruction and rendering it according to their own standards – I know that sucks, but welcome to the internet. That’s why Chrome’s font-weight: normal looks different than Firefox’s. You can spend days trying to code around them or just assume their users are used to it.

    Other than the font being bolder in Firefox, I’m not seeing any differences between the three browsers on a Mac. Truly, they are pixel perfect – have you fixed the other things that ‘are an enormous mess’?

    Mark Ratledge

    (@songdogtech)

    14 years, 3 months ago

    You have some code errrors and some html that simply isn’t correct, like text-align:right See [Invalid] Markup Validation of neuroplasticrecords.com home – W3C Markup Validator. Scroll down in the validation report to see line numbers and source code.

    Thread Starter neuroplastic

    (@neuroplastic)

    14 years, 3 months ago

    Thanks songdogtech. I’ve resolved all of those now.

    Garydarling; Chrome, Safari and Firefox (ignoring fonts for the minute) look half-decent but throw the thing into IE6 or 7 and all the positioning of text and elements goes completely out of whack. In IE6 everything has been shunted about 2 inches left! In IE7 it’s about 1 inch left. In IE8 it’s acceptable.

    So I guess I should muck about with the IE CSS stylesheets? I’ll give it a go now. Is it possible to make a command in the CSS for firefox only (e.g. a negative top margin for my site title and tagline)? that would solve quite a bit and I’d be able to get my page titles back. I hope I’m not being stupid.

    Gary Darling

    (@garydarling)

    14 years, 3 months ago

    Before you dive into all that browser-specific css, try letting Modernizr do it for you. Although Modernizr is optimized for HTML5, it is supposed to work on xhtml as well. It’s worth trying at least.

    Thread Starter neuroplastic

    (@neuroplastic)

    14 years, 3 months ago

    It’s actually a theme problem so I’m jacking in the whole theme. And it’s not a browser problem, it’s a mac/pc problem. Goddamn internet.

    But big big big up to john overall from johnoverall.com for taking so much time to help me out. this isn’t a commercial plug but a friendly one. he’s really nice and smart.

    word of warning: if you ever want to customise a theme beyond the defaults, for the love of god don’t use pixel.

    abosaleh

    (@abosaleh)

    14 years, 3 months ago

    It’s actually a theme problem so I’m jacking in the whole theme. And it’s not a browser problem, it’s a mac/pc problem. Goddamn internet.

    bezaat.com

    Dawwrcom

    (@dawwrcom)

    14 years, 1 month ago

    You may need to review your HTML code and make sure the close of your tags. also review CSS file.

    [sig moderated as per the Forum Rules]

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Browser incompatibility: fonts and positioning’ is closed to new replies.