www.webdeveloper.com
Results 1 to 14 of 14

Thread: Problem with cross-browser CSS consistancy

  1. #1
    Join Date
    May 2014
    Posts
    4

    Problem with cross-browser CSS consistancy

    How would one make an image with a particular margin-top value have a fixed position across all the main browsers (IE, FF and Chrome)? i.e. the image in question won't stay in one place from browser to browser....anyone know if there's a global css property that eliminates this vertical positioning variation?

  2. #2
    Join Date
    May 2014
    Posts
    1,020
    Hard to diagnose without seeing what you have so far and where you are placing it... though I have to ask by "fixed" do you mean "position:fixed" where the element doesn't scroll while the rest of the page does (an annoying waste of space) or just have it positioned consistently in relation to other elements in the layout.

    If the former, I REALLY advise against that as it's usability trash (particularly on smaller displays)... if the latter, sounds like you might be hitting up against margin-collapse issues; with can be fixed by setting overflow:hidden on the outer container, padding an outer container instead of using margins, etc, etc...

  3. #3
    Join Date
    May 2014
    Posts
    4
    Hey Deathshadow, thanks for replying! So basically the issue I'm having is with the margin-top value of a particular element on my page. I'm building a web page which, among other things, contains a picture frame in the very center of the page. As I've been working on the layout, I've been running it only in Chrome. After the layout was finished, I ran it in IE and Firefox and amazingly enough everything looked the way it did in Chrome, except for that picture frame, which was positioned about 25-30px north of the center. When I change the margin-top value to push it down to the center in Firefox & IE, it becomes off center in Chrome - it's a zero sum game!!! How do I format the CSS for this element in such a way that it's positioned in the center in every one of these browsers?

  4. #4
    Join Date
    Mar 2012
    Posts
    1,643
    Include the following at the beginning of your style sheet:
    Code:
    * {
    margin:0;
    padding:0;
    border:0;
    }
    It's not guaranteed to sort out all compatibility issues, but it often helps! Note: It goes at the beginning to set the default margin, padding and border to zero. This is then overridden for specific tags.

  5. #5
    Join Date
    May 2014
    Posts
    1,020
    Quote Originally Posted by sviner1 View Post
    How do I format the CSS for this element in such a way that it's positioned in the center in every one of these browsers?
    Couldn't tell you without seeing the page in question's code -- any number of things could cause what you describe, THOUGH...

    Centering something height-wise is an old struggle, and there's a reason you don't see it on sites a whole lot; It's just not something HTML and CSS were meant to do in the first place. You could have an inconsistent height caused by font rendering differences (though you said image so that's likely NOT the problem), you could have the issue of the image being too large to even fit some screens... there's a reason in most cases I'd tell someone NOT to try and position it centered and instead put it back in flow.


    That said, if it is JUST an image with no text that you want centered, let's use 512x256 as an example:

    Code:
    .plateOverlay {
      position:absolute;
      top:50%;
      left:50%;
      margin:-128px 0 0 -256px;
    }
    Top margin is negative half the height, left margin is negative half the width. That SHOULD work consistently cross-browser so long as the element has a fixed height... (though fixed height elements, particularly if positioned are garbage accessibility)

    Another approach would be a fixed wrapping container set to display:table-cell, since vertical-align on a table cell would work, it just wouldn't position right in legacy IE.

    Still, not sure this is something I'd even allow on a website as there are a LOT of problems with it that results in buggy broken sites and cross-browser headaches.

    Oh, and jedaisoul has it kind-of right in that you should use a 'reset' -- though the 'universal reset' he listed runs the risk of making form elements like INPUT and TEXTAREA a pain in the ass to style since old versions of IE and FF treat give them internal paddings over which you have no control; so assuming padding:0 on those is going to work is... not going to work.

    Still, as a quick test it might reveal part of your problems... and again, without seeing what you have for a page and code (ALL of it, not just some little snippets) makes it impossible to REALLY say what could be biting you on this layout.

    Though you did use broken methodology -- you should be testing in EVERY browser AS YOU GO, not waiting until you have what might not even be viable to deploy as a website completed, and then having to go back and possibly even throw it all away. It's the same problem people using rubbish like Dreamweaver have where they trust the stupid "preview pane" nonsense. There's a reason I have all the latest iterations of browsers installed on my workstation, as well as VirtualBox VM's of four different OS (Winblows 98, Winblows XP, Linsux and OSuX) for testing legacy browsers.

    Alt-tab F5 is your friend.

    You code the entire thing before testing, you can very quickly find yourself so buggered you can end up having to start over from scratch due to things you can do in one browser that you can't in others... which sucks. Same problem as starting out drawing goofy pictures in Photoshop as there are a LOT of things you can do in a PSD you can't or shouldn't be doing on a website. (if you care about visitors actually using it and accessibility)

  6. #6
    Join Date
    May 2014
    Posts
    4
    Thanks again, man! This is probably the most detailed and thoroughly thought out response to a web design query I've ever received, - it's greatly appreciated!! The issue still persists, unfortunately. The only way to show you what I mean is to send you the code and along with it a screen shot of my page in any one of the browsers where the positioning of that image is clearly out of whack! But this site doesn't allow for sharing emails, but if you have an extra email account that you hardly ever use and wouldn't mind sharing it, let me know!!

  7. #7
    Join Date
    May 2014
    Posts
    4
    Oh, the ol' "*" CSS format clearing effect - that was actually the first thing I tried and alas....it didn't work But thank you for responding to my question, nonetheless!! These things so individualized in terms of the issue that needs solving that some potential solutions which work a lot of the time, but not all the time.

  8. #8
    Join Date
    May 2014
    Posts
    1,020
    Huh, this forum doesn't allow private messages either?

    Well, if you want to send it, my throwaway is deathshadow60@gmail.com -- I don't use it a whole lot thanks to their classic "Opera user? Well **** you buddy!" attitude.

  9. #9
    Join Date
    Mar 2012
    Posts
    1,643
    The forum does allow PMs, but not to/from new members. Don't ask how many posts you need to make to no longer be considered "new". The site admins control that, and keep it to themselves.

  10. #10
    Join Date
    Mar 2012
    Posts
    1,643
    @ deathshadow

    I think your advice on browser compatibility is an excellent addition to the resources of the site. Well done you! However, to clarify the difference between my and your suggestions: I do not consider coding for versions of IE lower than IE7 to be generally worth the effort. They were s**t browsers that are not even supported by Microsoft. Now there are still pockets of IE6 users around the globe, so your knowledge of how to code for pre-IE7 browsers may be invaluable in some circumstances. However I think that it would be helpful if you indicate when your comments relate to IE6 and below, so we can then make an informed choice whether to continue to implement work-arounds for such obsolete browsers.

  11. #11
    Join Date
    May 2014
    Posts
    1,020
    The thing about supporting legacy IE is to NOT waste time making it perfect, just make it functional. That's what progressive enhancement leading to graceful degradation is FOR. It's not hard to make a page that gracefully degrades functional to legacy IE, unless you waste time doing stuff that has no business on websites in the first place or wastes bandwidth while not adding anything of real value to the site.

    Making it perfect in anything less than IE10? Waste of time. Making it WORK in those browsers? That's why we're supposed to be developing with semantic markup, separation of presentation from content, and enhancing functionality with js instead of supplanting it. Hence that pesky "content first!" attitude I'm always on about.

    JUST as a properly written page on a normal website if done PROPERLY should be functional and usable without CSS or presentation in the markup - again, the whole "if you are choosing your tags based on what they look like instead of what they mean, you're choosing the wrong tags for the wrong reasons".

    Also, don't let people use percentages to lie to you. I love how most people are saying 4% for IE isn't worth worrying about, when the numbers from different sites range anywhere still from 1% to a whopping 25%; but it's IE, people only want the smallest number because "rah, rah, Microsoft is evil".

    But think on this: 1% of WHAT? Well... 2.8 billion Internet users is what. So that's... 28 MILLION potential visitors being neglected. It's easy to dismiss a percentage as a percentage, but not when you ask "of what"

    See the outright lies and bunko bull people have about IE usage overall; they constantly tout how much 'share' they've 'lost' in the market... Yeah, sure, they've gone from 95% in early 2004 to somewhere between 24% and 52% depending on who's numbers you used. See how NetApplications weighs their values by country resulting in that 52%, since if you're developing for first world nations you don't give a flying purple fish how many Chrome and FF users there are in China.

    But, again, a percentage of what? News flash, the pool size grew from 2004 to 2014, let's use the mythical 95% of Jan 2004 to the average across the different stat sites of 25% as of Jan 2014... Well, how many Internet users were there at the start of 2004? 720 million. How many were there at the start of this year? 2.8 billion -- now I'm no mathematical genius, but I'm pretty sure that 95% of 720 million is ~684 million... and 25% of 2.8 billion is 700 million... meaning that while they 'lost' market share, they gained 16 million new users!

    Really if you were to graph it by users instead of percent, you'd realize IE use has been pretty flat, mostly just seeing slow gains. Of course, nobody wants to hear that, so they use percentages to card stack their facts.

    Opera see's similar stats -- It's easy to dismiss 2%, it's not easy to dismiss 56 million potential users.

    It's why I use the term "percenters" -- people who use percentages to push false conclusions without saying "a percentage of what?" It is one of the best lies to promote an agenda. Don't let people use percentages to lie to you. Web devlopers are guilt of this **** all the time -- people browsing with scripting disabled is only 3%, user agents who don't see CSS or style are only 2%, Opera users are only 3%, Safari users are now less than 4%... until they've alienated so many potential users in justifying their sleazy, broken, ignorant practices, they no longer have an audience.

  12. #12
    Join Date
    Mar 2012
    Posts
    1,643
    @deathshadow

    I do not need a lesson on mathematics, and please do me the courtesy of respecting my views, even if you disagree with them. There is little point in coding for legacy browsers, unless:
    a) You have the facility to test against them. And...
    b) It is commercially worthwhile testing against them.

    It seems clear that you have as little regard for commerce as you have for design, but both are inescapable factors of life for many/most professional developers. So I merely ask that you distinguish code that is relevant to IE6 and below, so that others can decide FOR THEMSELVES what is relevant in their circumstances. Is that too much to ask???

  13. #13
    Join Date
    May 2014
    Posts
    1,020
    Quote Originally Posted by jedaisoul View Post
    a) You have the facility to test against them. And...
    Which for MOST situations thanks to VM software there's no excuse for; VirtualBox is free, VMWare Player is free... that just leaves finding old install media (hey pal, can I borrow that CD) and product keys (you gotta know someone with a dead laptop in a drawer somewhere)... at least for Windows; OSX is trickier (unless you happen to be on a system that supports it) but OSX Server runs just fine on VirtualBox; lousy $99 purchase; which in the grand scheme of setting yourself up to build a website properly should be pocket change. You could also bootleg using a hackintosh build like iAtkos or force the issue with unibeast -- NOT that I'm saying to do that... nope, not at all.

    Of course, IE11's new legacy emulation is great too, since it nabs you IE 5 and 7 through 10... and unlike 10/earlier you get legacy scripting restrictions on it too. (shame it doesn't provide a real '6' mode, but again, VM's).

    To me that's just one of those things that if you can't bother doing, you have no business building a website.

    Quote Originally Posted by jedaisoul View Post
    b) It is commercially worthwhile testing against them.
    Which is the entire point of my talking about percentages vs. users; you know, that post you seem to have taken offense to for Christmas only knows what reason? Seriously, what gives with that? I'm trying to figure out how/why you seem to think that wasn't "respecting your views" -- teh OTHER thread? Sure... I think your views there were nonsense. This thread? Unless you're taking offense to something I wasn't even aiming directly at you.... no, even then. Yut da?

    Quote Originally Posted by jedaisoul View Post
    It seems clear that you have as little regard for commerce as you have for design
    I'M NOT AGAINST EITHER!!! What the **** are you just bear baiting now?

    I have a problem when actual commerce is interfered with by decisions that are going to COST money or lead to failure. I have problems when design becomes the be-all end-all at the COST of success thanks to alienating potential customers; such "design first" nonsense used to prey upon the ignorance of "suits with checkbooks" who don't know any better. I'M NOT SAYING YOU CAN'T HAVE SUCCESSFUL COMMERCE OR GOOD DESIGN, I'M SAYING DON'T SHOOT YOUR HORSE IN THE FOOT BEFORE THE GATE OPENS!

    Quote Originally Posted by jedaisoul View Post
    So I merely ask that you distinguish code that is relevant to IE6 and below, so that others can decide FOR THEMSELVES what is relevant in their circumstances. Is that too much to ask???
    To be frank, I'm not even sure what the devil that even MEANS... "distinguish code"? Since the four or five lines of code I posted applies to every browser from IE 5.2 mac upwards, just what in blazes are you even on about?!? Seriously, I can't even figure out what you are asking for with that.

  14. #14
    Join Date
    May 2014
    Posts
    1,020
    My bad, apparently you can't buy OSX server separately as of Mountain Lion.... and now it's $20 instead of $100.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles