Jump to content

Ie7 Rendering Problems - Display Ok In Other Browsers


webbo69
 Share

Recommended Posts

Hi I've used W3Schools for a good few years and find it the best educational tool for HTML and CSS. Thanks guys! I was really pleased to discover recently that you have forums, too. I have a problem with the display on my wife's site, which appears to only manifest itself on IE7 (and earlier). The display is as intended on IE8, IE9, Firefox, Safari and Chrome. My concern is obviously for those using IE browsers older than IE8. The site itself (in its current format) was originally built about five years ago, when my knowledge was confined to the use of tables for layout as opposed to using divs and css as I would now; were I to built the site from scratch. Because there are hundreds of photos on the site, I've never had the inclination to re-code it. The Home page, at least, validates - with the exception of a marquee banner, which I know will never validate. The URL is as follows: http://www.hillsntoes.co.uk/ - the css (if required) can be found at: http://www.hillsntoe...ayout/style.css . There are two problems - the first of which is critical. My horizontal menu bar does not display at all in IE7, thus making navigation (almost) impossible. The second problem relates to placement. Line spacing (both on the 'Home' and 'Zumba' tabs) where I'm using the sign for a registered trade mark (coded "®") is "squashed". Additionally, the placement of the 'Zumba Romford' and 'ZIN' logos on the 'Zumba' tab are vertically displaced downwards by about 60px. To reiterate; neither of these problems occur in other than IE7 and earlier (certainly in IE6 - I don't have access to anything earlier). The problems seem to occur irrespective of Windows platforms (tried on XP, Vista and 7). If anybody can shed any light on why I'm getting these problems, I'd be very grateful. Thanks and regards Webbo

Link to comment
Share on other sites

The problem is that you've set the line-height to 0 in your navbar element. Just remove that line-height declaration.
Wow! Ingolme - thank you for such a quick response. Your diagnosis has solved my first problem - that of the "missing" navbar. I'm very grateful. My second problem, however, is still there - albeit that's Ingolme's fix has slightly changed the position of some elements since my post earlier today. I've attached two compressed .jpgs (.pdf file was too large to upload) showing screen dumps of how the page looks in Firefox and others (correct) and how it displays in IE7 (with annotations explaining the issues). Again, any help on this issue would be gratefully appreciated. Thanks and regards Webbo post-86552-0-03675100-1319759914_thumb.jpg post-86552-0-18166400-1319759866_thumb.jpg
Link to comment
Share on other sites

Judging by the image I'd say there are also line-height declaratins for those elements.
Thanks for the further input, Ingolme. I've checked the css and there's no line-height declarations for any images - the only line-height declarations relate to text. I have just realised, I missed a bit of the jigsaw - the 'Zumba' page has its own style sheet due to the different colour layout of that one page. Here's the missing URL if anybody can point me in the right direction: http://www.hillsntoe...style_zumba.css . Thanks again Webbo
Link to comment
Share on other sites

But the reason your text is squashed is because you have line height declarations on your text elements.
Thanks yet again, Ingolme. The line height declarations for the text (and particularly the <p> tags) was deliberate - I wanted the line height to be slightly greater than the font size. Hence: p{ font-size: 18px; line-height: 22px;} But your response got me thinking about the relationship between the two and after playing around with them, realised that it was the <sup>®</sup> that was causing the problems. Because the ® was superscripted, it was assuming a line height of its own (in addition to the line height of the text) and thus pushing that line of text downwards by c. 1/3 of the text's line height. I googled and found two solutions: sup{ /* line-height: 0; DOESN'T WORK IN IE7 */ vertical-align: text-top; /* WORKS IN IE7 */} Strangely, setting the line height to zero for the <sup> didn't work in IE7, but did in other browsers. The second solution (vertical-align) works all round! It aligns the top of the superscript with the top of the text - hence assuming no line height of its own. Two problems solved - one to go! I still haven't worked out why my Content Start (i.e., first paragraph on the page) is higher up the page in IE7 - I've cheated for now and stuffed it with <br>s, but still need to find a solution, as this renders too much blank space on other browsers. Looking at my css, I'm thinking it probably has something to do with the interaction of relative vs absolute positioning for certain elements. Anyway, thanks once more for your valued input. Regards Webbo
Link to comment
Share on other sites

You can set the line-height to "normal" for the <sup> element. I'll look into your last problem. Your "zumba", "romford" and "zin" images are using absolute positioning and that should not.

Edited by Ingolme
Update on a problem
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...