Skip to main content

Forums

Forum Replies Created

Viewing 15 posts - 16 through 30 (of 157 total)
  • Author
    Posts
  • in reply to: [Solved] Last-of-type fix for IE8 #173670
    paulob
    Participant

    Hi,

    The example I gave in the codepen above is working in IE8 fine :)

    in reply to: [Solved] Last-of-type fix for IE8 #173664
    paulob
    Participant
    in reply to: [Solved] Last-of-type fix for IE8 #173662
    paulob
    Participant

    can you explain what this does? I don’t really get why calling 2 selectors

    As James said except he meant all but the first one (not the last):)

    The adjacent sibling combinator (the plus symbol (+)) selects an immediate sibling so p + p would select any paragraph that is preceded by a paragraph. If you have ten sibling paragraphs then all but the first would be selected.

    In this case it has much the same effect as using first- child (which is supported in IE8) and allows you to negate the margin from the first element instead of negating it on the last element as in your example. Very often first-child can be used instead of last-child if you change the logic a little and then you get support in IE8 without hacks.

    The adjacent sibling selector however has support back to IE7 so can be used if that browser needs support.

    As in most cases a certain structure is expected for these things to work but in a grid situation that would seem to be a pre-requisite anyway.

    http://codepen.io/paulobrien/full/ezsIu/

    in reply to: Custom "Button" – need help with some details #173599
    paulob
    Participant

    Hi,

    Perhaps this might render more consistently.

    http://codepen.io/paulobrien/full/GohcK/

    It seems ok at first glance.

    in reply to: [Solved] Last-of-type fix for IE8 #173585
    paulob
    Participant

    Hi,

    How about using first-child which ie8 understands and have a left margin instead of a right margin and then negate the margin on the first item.

    
    <!--[if lte IE 8]>
    <style>
    [class*='col-'] {
     margin-left: 1.6%;
     margin-right:0;
    }
    [class*='col-']:first-child {
        margin-left: 0;
    }
    </style>
    <![endif]-->
    
    

    Or perhaps just change this:

    [class*='col-'] {
      float: left;
    }
    
    [class*='col-'] {
      margin-right: 1.6%;
    padding:10px;
    }
    [class*='col-']:last-of-type {
      margin-right: 0;
    }   
    

    to this:

    [class*='col-'] {
     float: left;
     padding:10px;
    }
    [class*='col-'] + [class*='col-'] {
     margin-left: 1.6%;
    }
    
    
    paulob
    Participant

    Yes that’s now working fine in my Firefox 29 :)

    Sorry for the run-a-round.

    paulob
    Participant

    Hi,

    Hold that thought :)

    I think the error is caused by the text-indent in .subtitle.

    .subtitle {
        width:150px;
        height:150px;
        display:block;
        /*text-indent:-9999px;*/
        color:#F9F9F9;
        text-align:center;
        font-weight:bold;
    }
    

    You have text-align:center and text-indent which doesn’t make sense and seems to confuse Firefox 29. I tested locally and removing the text-indent makes the scrollbar go away (testing in Firebug did not give the same results as local testing so I need to see it n place in your site to test fully). (My Firefox version is about to update to 30 (when I restart it) so I’ll only be able to test this for a while.)

    paulob
    Participant

    Hi,

    Actually I just noticed that the fix I suggested clips the element when it spins so may not be the best solution. Perhaps adding overflow to a parent may be better but you may still get a clip at the bottom of the screen unless you add a little bit of bottom padding.

    .vierkantBox{overflow:hidden;padding-bottom:10px}
    
    paulob
    Participant

    Hiding the overflow should solve the problem with any luck.

    .flip-container{overflow:hidden}
    
    in reply to: [Solved] How to hide text that doesn't have its own tag #172448
    paulob
    Participant

    It should be remembered that some of these solutions will only hide the text. They will still leave a space for it on the screen.

    That won’t be an issue with my method in this case and the space will be collapsed because the following div is floated and therefore the inline text will wrap the float and no extra space will appear above the image. It will be as if the text did not exist.

    paulob
    Participant

    Or you could try:

    #slideshow-4{text-indent:-999em}
    #slideshow-4 div{text-indent:0}
    

    Assuming no other elements are in that section.

    in reply to: [Solved] Trouble with animated svg in Chrome #172426
    paulob
    Participant

    Don’t forget the vendor pre-fixes:

    .path {
      stroke-dasharray: 99%;
      stroke-dashoffset: 2500;
      -webkit-animation: dash 16s linear forwards infinite;
      -moz-animation: dash 16s linear forwards infinite;
        animation: dash 16s linear forwards infinite;
    }
    
    .path stroke {
      stroke-width:15px;
    }
    
    @-webkit-keyframes dash {
      to {
        stroke-dashoffset: 0;
      }
    }
    @-moz-keyframes dash {
      to {
        stroke-dashoffset: 0;
      }
    }
    @keyframes dash {
      to {
        stroke-dashoffset: 0;
      }
    }
    
    in reply to: Fix website for IE 6-9 #172317
    paulob
    Participant

    You’ll need the html5shiv for ie8 and under or they won’t recognise the new html5 elements that you are using.

      
    <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
    

    Don’t forget the html5 doctype or that will render ie9 and under as though they were almost ie5.

    It may be worth forcing the issue with the edge meta tag at the top of the head of the page.

     
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    

    You can’t wrap block elements in a span so change the element to a div instead. This is where you have closed the span:

            </div>
     </footer>
    </span> 
    

    IE8 and under doesn’t suport media queries so you need to add support via a script. Combine it with the shiv:

    
     <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    

    More info on the bootstrap home page.

    The above should get ie8 and 9 back into shape but IE7 is likely to need specific tweaks and I don’t believe ie7 and under is supported in bootstrap anyway (which is what you seem to be using).

    in reply to: Animating Gradient Color BG #171826
    paulob
    Participant

    Hi,

    If you use a long gradient and then manipulate the background-position you can create the effect you are after (more or less).

    http://codepen.io/paulobrien/full/buqFg/

    I’m not sure how useful it will be as it uses : after to add some content. You could use a span instead and avoid duplicating the text but then you would need to fix widths and heights.

    I’m sure there’s a better solution in there somewhere.

    in reply to: First RWD – Media Queries not working on some phones #170965
    paulob
    Participant

    That looks way to complex for what is essentially a simple site.

    Forget about devices and device width and make your layout work throughout the range on the desktop first (device width and layout width are not the same thing and bear no relation to each other anyway).

    At the moment on the desktop anything below 1000px width in the browser is either broken or has a large vertical scrollbar.

    What you are essentially interested in is layout width and this essentially covers all devices automatically. No need to target handheld in your media queries as indeed that probably confuses the situation even more. No need to cater for min and max width in the same media query but just over-ride in successive media queries.

    Simplify and then simplify some more :)

    Don’t target devices but create a design that goes from small to large in your desktop browsers and in most cases that will collect all devices on the way. Apply breakpoints with media queries at points where the design needs it and not where you think a device will sit. There are too many devices and too many widths to cater for individually so cater for them all with a design centric approach and collect them all on the way automatically. If you use max-width (or min-width if mobile first) media queries you cater for all devices automatically including their orientation changes.

    See my answer here to a similar problem in another thread.

Viewing 15 posts - 16 through 30 (of 157 total)
icon-link icon-logo-star icon-search icon-star