Logo not showing in IE8 and on iPAD

[joej]

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?

[Paulie_D]

Probably the absolute positioning.

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

Just don’t forget the clearfix.

[joej]

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

[Paulie_D]

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.

[joej]

Its in IE8 when you turn on compatibility mode

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

[joej]

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″> ?

[Paulie_D]

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.

[joej]

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

[Senff]

@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.

[Paulie_D]

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

Actually, I suggested floating it RIGHT.

[joej]

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

[Paulie_D]

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.

[Paulie_D]

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.

[Author]

Posts