IE CSS Question...

Discussion in 'Site / Search Engine Optimization' started by baldidiot, Sep 26, 2017.

  1.  
    baldidiot

    baldidiot Affiliate Guard Dog Member

    Messages:
    496
    Likes Received:
    97
    Joined:
    Feb 23, 2011
    I have a css issue that I can't figure out, wondering if anyone CSS gurus could give it a once over.

    We're in the process of merging a lot of our old offers sites into one larger one: https://www.betting-offers.com/ - still setting it up so a bit rough around the edges at this point so ignore the half-finished look.

    Anyway, the headers one the home page are wrapped in divs and displayed inline to put a a background colour behind the text, but not the full width (ie: only on the text - we'll be adding an ASA disclaimer next to it in time). The div then has a border on the bottom.

    Works on all browsers and mobile except for bloody IE. For some reason the left hand side of the H2 and div are missaligned: https://snag.gy/G3XbjK.jpg

    Any ideas?
     
  2.  
    Frank

    Frank Affiliate Guard Dog Member

    Messages:
    381
    Likes Received:
    169
    Joined:
    Jan 7, 2015
    I notice in IE or.. Edge.. images dont align and leave a massive gap if anywhere near the h2.. annoying as I design my site around chrome
     
  3.  
    jopaa

    jopaa Affiliate Guard Dog Member

    Messages:
    375
    Likes Received:
    58
    Joined:
    Jun 3, 2011
    The only way you can achieve this is by using browser specific hacks.

    Here is a pretty detailed post:

    hxxps://css-tricks.com/snippets/css/browser-specific-hacks/
     
  4.  
    slotplayer

    slotplayer Affiliate Guard Dog Member

    Messages:
    1,730
    Likes Received:
    260
    Joined:
    Aug 8, 2008
    It used to be that you'd reset padding, margin to zero via css for this problem. However adding it to the style sheet after the page has been laid out could totally mess things up.

    There are a bunch of variations of it, this particular one uses the wildcard character (*) to reset padding/margin on all html elements.

    * {
    margin: 0;
    padding: 0;
    }
     
  5.  
    baldidiot

    baldidiot Affiliate Guard Dog Member

    Messages:
    496
    Likes Received:
    97
    Joined:
    Feb 23, 2011
    Cheers... problem with that is that I haven't got a clue what's causing it to output like that in IE. Even looking at the computed output in IE there doesn't seem to be anything out of place. o_O
     
  6.  
    baldidiot

    baldidiot Affiliate Guard Dog Member

    Messages:
    496
    Likes Received:
    97
    Joined:
    Feb 23, 2011
    That's interesting. The computed output has them all set as zero already but I tried it anyway. Didn't seem to do anything unfortunately.
     
  7.  
    TheGooner

    TheGooner Affiliate Guard Dog Member

    Messages:
    389
    Likes Received:
    292
    Joined:
    Dec 31, 2013
    I have found that the old microsoft explorer was infuiriating for trying to get CSS working correctly.
    It was as if Microsoft had an investment or royalty payment in the tables html syntax !
    :p

    I have not tried the new edge browser - but really you are dabbling in the margins with both browsers now.

    According to my latest Analytics for September (around 150,000 sessions) :
    42% Chrome
    20% Safari
    16% Opera Mini (African phone users)
    7% Firefox
    6% Samsung interent
    2% Opera
    2 % Microsoft Explorer
    1% Edge
    1% Android Explorer.

    PLus 20 other rats and mice ... things like Blackberry, Puffin?, Coc Coc (I am NOT making this up), Maxthon, Nokia Browser (really - a Nokia phone still?) .. seaMonkey and many others.

    Checkout your own Google Analytics - it's a weird and wacky list!
    :D
     
  8.  
    Engineer

    Engineer Super Moderator

    Messages:
    2,443
    Likes Received:
    200
    Joined:
    Dec 14, 2006
    Maybe try increasing the bottom margin or padding of the H2, for IE only? I'm not sure exactly how to do that, though.

    [​IMG]
     
    bettingappguide likes this.
  9.  
    slotplayer

    slotplayer Affiliate Guard Dog Member

    Messages:
    1,730
    Likes Received:
    260
    Joined:
    Aug 8, 2008
    Well that code is put at the very top of the css and then you set margins/padding on individual element. Put it as the last style in the css and it would override all the previously defined css rules.

    If you want to see the effect paste it in on the css under the opening style tag on this site https://www.w3schools.com/css/tryit.asp?filename=trycss_list-style-type_ex and click run. You'll see how it clears the default padding on unordered lists. Watch the bullet points dissappear.

    What are we supposed to look at in the snagy jpg around the green border? I don't see anything not rendering too bad unless I'm missing it.
     
  10.  
    baldidiot

    baldidiot Affiliate Guard Dog Member

    Messages:
    496
    Likes Received:
    97
    Joined:
    Feb 23, 2011
    Very true! It'll bug me though knowing it's there...



    Weirdly it's only affecting the ones on the left most side though, not the others with the exact same classes. I've fiddled with the padding for ages though to no avail...


    It's the 'Free Bets' header on the left hand side. The left most part of the background behind the text is missaligned with the border underneath by a pixel or two.
     
  11.  
    slotplayer

    slotplayer Affiliate Guard Dog Member

    Messages:
    1,730
    Likes Received:
    260
    Joined:
    Aug 8, 2008
    I thought that is what you meant.

    Have you tried display: inline-block instead of display: inline
     
  12.  
    baldidiot

    baldidiot Affiliate Guard Dog Member

    Messages:
    496
    Likes Received:
    97
    Joined:
    Feb 23, 2011
    Unfortunately, yes...
     
  13.  
    AussieDave

    AussieDave 17 years & still going!

    Messages:
    2,877
    Likes Received:
    1,381
    Joined:
    Nov 28, 2013
    TBH, I don't even bother checking out IE layouts anymore. My user stats on it are so low, I couldn't be bothered. However, have you tried something like this:

    .alignleft {
    display: inline;
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;

    or

    .alignright {
    display: inline;
    float: right;
    margin-right: 20px;
    margin-bottom: 10px;

    Would need to fiddle around with the margin sizes...
     
  14.  
    AussieDave

    AussieDave 17 years & still going!

    Messages:
    2,877
    Likes Received:
    1,381
    Joined:
    Nov 28, 2013
    I just checked it out in IE 11, and it's not producing the border issue. Unless you've disabled that for the time being, till you can fix it?

    One thing I did notice, you've got 747 lines CSS in the header. Maybe this is only there while your testing etc. I'm sure your aware of this, but just in case your not, this could slow down your above fold loading. Realistically, I only include CSS which is 100% needed straight up, The rest is either imported or even deferred, to load later, which has been minified to the max.
     
  15.  
    baldidiot

    baldidiot Affiliate Guard Dog Member

    Messages:
    496
    Likes Received:
    97
    Joined:
    Feb 23, 2011
    Hmmm. That's weird, I'm using IE11 as well but happens for me. I wonder if it's my computer. Resolution issue perhaps?



    Cheers, yeah it's for testing. The new live css editor on wordpress is actually pretty useful for setting things up. Once we're happy with it I'll move to a css file.
     
  16.  
    slotplayer

    slotplayer Affiliate Guard Dog Member

    Messages:
    1,730
    Likes Received:
    260
    Joined:
    Aug 8, 2008
    optimized for speed. I like it.
     

Share This Page