Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › [Solved] Another pseudo border issue in IE8? Replicated in newer versions?

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • February 10, 2014 at 3:07 am #162330
    Anonymous
    Inactive

    I don’t know why I have such difficulty with pseudo elements, but here’s another one it seems.

    I’m not sure if this is an issue with the gradient image I am using in #main:before,#main .before not displaying correctly in IE8, or if it’s a pseudo element issue. Here is a zoomed screen grab of the page. I know IE8 is old school and I was no longer concerned about having coding that would correct any display issues, but a number of people I know still have it for one reason or another.

    If anyone would tell me what the cause is, if the same holds true in newer versions, and the fix, I would appreciate it.

    Best Regards.

    February 10, 2014 at 3:55 am #162332
    Paulie_D
    Member

    IE8 doesn’t support CSS gradients…could that be it?

    February 10, 2014 at 4:29 am #162334
    Anonymous
    Inactive

    Greetings Paulie,

    No. The gradient is an image, see?

    It appears that the image is pushing out the pseudo lines, or that a div or divs are pushing things out of place. If this is the case, I’m not sure if it’s the main div, the content div, or that great 1950’s Hollywood Sci-Fi classic; “The Div that ate Manhattan.”

    Seriously, though, I’m not sure that it might not be a z-index issue with IE8, or a z-index issue with IE in general.

    Best Regards.

    February 10, 2014 at 4:59 am #162337
    Paulie_D
    Member

    Thinking about it logically, the border-image is the bg of a pseudo-element which by definition is inside the actual element so it would push out any border around that element.

    If you see what I mean.

    However, in this case, I think it’s a z-index issue. Try removing the z-index:4 from the pseudo elements and the border-image pops underneath the actual border (at least it does in Chrome)…I don’t support IE8 so I can only test in IE8 mode of IE11.

    February 10, 2014 at 5:13 am #162338
    Anonymous
    Inactive

    Yes, I understand what you mean. That was an issue with this in Mozilla which was the necessity of the z-index. I thought of increasing the index number and even removed it, but no effect in IE8. It might simply be an issue IE8 users will need to live with. I just noticed today that the old site no longer displays as it once did in IE8.

    Do I understand you correctly that the page looks the same in IE11 as it does in Mozilla? If that’s the case, I’m satisfied. I really need to update to IE11.

    Best Regards.

    February 10, 2014 at 5:29 am #162339
    Paulie_D
    Member

    Do I understand you correctly that the page looks the same in IE11 as it does in Mozilla?

    Yep.

    One thing….the bg-image is the background of the pseudo elements (which is fine) BUT they are positioned absolutely with respect to the viewport and not the #main div.

    Zoom in a lot and then drag the bottom scrollbar to the right…you can see that ‘strip’ in the wrong place.

    Ideally (and logically), the #main div (I think) should have position:relative which, unfortunately, means that the strip will pop out of place. You would need to adjust the position values to get it back into place.

    February 10, 2014 at 6:09 am #162344
    Anonymous
    Inactive

    Zoom in a lot and then drag the bottom scrollbar to the right…you can see that ‘strip’ in the wrong place.

    Yes, I noticed that in IE8. I thought it was connected to the black line overriding near the drop-down menu.

    I need more clarification please. The bg-image is within #main:before,#main .before Is this what I need to change to position: relative? If it is the #main element (which currently has no position assignment) then I essentially have the positioning in the wrong element, correct?

    I’m still too green to know what I am doing with pseudo elements and positioning. I read and re-read but still I flub it up.

    Best Regards.

    February 10, 2014 at 6:23 am #162346
    Paulie_D
    Member

    Any pseudo element works like this.

    <div id="main">
<#main:before> </main:before>
<HTML elements inside #main>
<#main:after> </main:after>
</div>

    This is a very rough model of how the pseudo elements are placed inside the DOM purely by CSS. They won’t appear when you “View Source” but the latest browsers now allow you to inspect them using Web Inspector/Firebug/Developer Options etc.

    With no positioning context set, any element / pseudo-element that is given position:absolute will set its position with respect to the viewport/window.

    By establishing a positioning context on #main by adding position:relative you tell the pseudo element to take its positioning information with respect to the #main element.

    So, if you just set top: 50px on the pseudo-element with no context it will always be 50px from the top of the window.

    If #main is given position:relative the pseudo-element will always be 50px from the top of the #main div.

    Does that help?

    Chris did a video on positioning which might assist.: https://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/

    In general, I only use absolute positioning on pseudo elements or to achieve very specific design requirements not solvable by any other means.

    February 10, 2014 at 6:10 pm #162534
    wahhabb
    Participant

    IETester is a great tool for looking at behavior of web pages in multiple versions of IE. If you also install debugbar with it, you can look at HTML and CSS.

    February 11, 2014 at 3:32 am #162568
    Anonymous
    Inactive

    Greetings Paulie,

    The video is fantastic, and dabble is a great help too. I’ve played around with dabble since shortly after you made the post. That said, I have changed the position from absolute to relative, changed the values, moved everything into different #main elements, and all it does is to cause the bg-image to disappear.

    I’m also confused about the coding:

    <div id="main">
<#main:before> </main:before>
<HTML elements inside #main>
<#main:after> </main:after>
</div>

    Are the portions <#main:before></main:before> and<#main:after></main:after> for example only? They are not within the section. Remember that Paulob designed this for the must part and changes I made were around this and the product of trial and error and luck.

    Best Regards.

    February 11, 2014 at 3:37 am #162569
    Paulie_D
    Member

    Are the portions <#main:before></main:before> and <#main:after></main:after> for example only?

    Yes…they are just to demonstrate where :before and :after are placed in relation to the ‘parent’ element.

    February 11, 2014 at 9:42 am #162605
    Anonymous
    Inactive

    Greetings Paulie,

    Yes…they are just to demonstrate where :before and :after are placed in relation to the ‘parent’ element.

    That’s the way they’ve been from the beginning.

    I’ve moved every single thing that can be moved and have placed relative positioning in every place within the #main elements. All that happens is the bg-image disappears. removing the z-index or increasing it value does nothing, and no positioning value shows the background image anywhere. I don’t see there is any way for this to work other than where it is and how it is and is why Paulob designed it that way.

    Best Regards.

    February 12, 2014 at 2:35 am #162659
    Anonymous
    Inactive

    I changed nothing that I can see yet now it is working. Amazing!

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.