Forums

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

Home Forums CSS Logo not showing in IE8 and on iPAD

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #145681
    joej
    Participant

    Hi

    My site http://www.ocelotdigital.com works well in Chrome, Firefox etc but in IE8 and on iPAD for some reason the text and telephone number which is contained in an image in the header bar covers the site logo.

    Can any experts shed any light on what could be causing this in the CSS and a possible resolution?

    #145682
    Paulie_D
    Member

    Probably the absolute positioning.

    Why not just float the #search div right, after all you floated the logo?

    Just don’t forget the clearfix.

    #145683
    joej
    Participant

    Ok thanks will try that.

    Could it be that the image is too large? I positioned it in the CSS exactly where I wanted it to appear in the header within the #search div. It’s strange how its looking fine in Chrome and Firefox yet in IE8 and on iPad its causing the problem

    #145684
    Paulie_D
    Member

    I can’t see any issues in IE10 (in IE8 mode) myself and I can’t test Ipad.

    However, I would say that using a image there at all seems unnecessary…it’s only text after all so why not use text elements and align/style them as you need?

    Also, since the image is there your telephone number and email links are unclickable.

    #145688
    joej
    Participant

    Its in IE8 when you turn on compatibility mode

    Good point about the image will look at doing it as text

    #145785
    joej
    Participant

    There is one other issue I have found

    When viewing on ipad mini and ipad the site does not seem to fitting the browser window, when you turn from portrait into landscape mode you then have to pinch and zoom to get the site to fit the iPad browser screen properly

    The site should just be responsive just for mobile phone devices (I want iPads to see the same site as you would on a desktop PC)

    Hope someone can see where in my CSS is causing this or is it <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″> ?

    #145797
    Paulie_D
    Member

    Just for a test try just this

    <meta name=”viewport” content=”width=device-width″>
    

    BTW…I am firmly of the opinion that you should never do this…maximum-scale=1″.

    Not everyone has perfect vision and some of us need to zoom.

    #145801
    joej
    Participant

    Ok thanks will report back to the forum

    I also tried floating the #search div (now called #ban) left has you suggested in the 2nd post but it’s now appearing below the logo? in IE8 compatibility mode?

    And one iphone view I have tried to hide #ban div from appearing on mobile devices

    i.e.

    @media screen and (max-width:320px)
    
    #header #ban (display:none;}
    

    but its still appearing and breaking the design due to the large image, that why I just want to hide the div?

    It will be great to get these issues cleared up so really appreciate any insight into finally solving the above issues

    #145802
    Senff
    Participant

    @media screen and (max-width:320px)

    …means “for all screens that are less than 320px wide”. You’ll have to change that to 480px or 576px or something to make it disappear on mobile screens.

    #145803
    Paulie_D
    Member

    I also tried floating the #search div (now called #ban) left has you suggested in the 2nd post

    Actually, I suggested floating it RIGHT.

    #145804
    joej
    Participant

    Senff thanks will change there is also an entry in the CSS for @media screen and (max-width:480px)

    What devices would a @media screen and (max-width:600px) {.. target?

    Paulie_D Apologies I stand corrected

    #145830
    Paulie_D
    Member

    What devices would a @media screen and (max-width:600px)

    Don’t think devices..think “does my design need a break at a certain width”.

    Trying to design for all the various widths and devices that are out there….that way leads to madness.

    #145837
    Paulie_D
    Member

    I should also mention that you bannerinfo.gif is 629px wide.

    Unless you can make it scale or responsive media queries are still not going to help much.

    Try adding something like

    img {
    max-width:100%;
    }
    

    It seems to solve a few of the issues you may be having.

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.