webbo69 Posted October 27, 2011 Share Posted October 27, 2011 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 More sharing options...
Ingolme Posted October 27, 2011 Share Posted October 27, 2011 The problem is that you've set the line-height to 0 in your navbar element. Just remove that line-height declaration. Link to comment Share on other sites More sharing options...
webbo69 Posted October 28, 2011 Author Share Posted October 28, 2011 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 Link to comment Share on other sites More sharing options...
Ingolme Posted October 28, 2011 Share Posted October 28, 2011 Judging by the image I'd say there are also line-height declaratins for those elements. Link to comment Share on other sites More sharing options...
webbo69 Posted October 28, 2011 Author Share Posted October 28, 2011 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 More sharing options...
Ingolme Posted October 28, 2011 Share Posted October 28, 2011 But the reason your text is squashed is because you have line height declarations on your text elements. Link to comment Share on other sites More sharing options...
webbo69 Posted October 29, 2011 Author Share Posted October 29, 2011 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 More sharing options...
Ingolme Posted October 29, 2011 Share Posted October 29, 2011 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.