webgyrl Posted July 16, 2008 Share Posted July 16, 2008 Hi all, Just working on a design and I am stumped. I have a CSS layout that has a nice header in it and it shows up in Firefox but not IE. Link to test site: >h##p://www.mbstia.com/iama/test4.htm Replace ## with tt FF latest it works fine... (surprise, surprise). Any ideas how I can get the header to show in IE 7? Thanks! Quote Link to comment Share on other sites More sharing options...
TCH-Dick Posted July 16, 2008 Share Posted July 16, 2008 They both look the same to me, a large image of a guitar and IAMA in big blue letters. Did you get the problem fixed or am I missing something? Quote Link to comment Share on other sites More sharing options...
stevesh Posted July 16, 2008 Share Posted July 16, 2008 Didn't see it the first time in IE7 (but I was able to save it), but I refreshed and it appeared, but very slowly. The fact that you're pulling your images from imageshack may have something to do with it. Quote Link to comment Share on other sites More sharing options...
TCH-Bruce Posted July 16, 2008 Share Posted July 16, 2008 IE sucks at displaying .png images. Quote Link to comment Share on other sites More sharing options...
stevesh Posted July 16, 2008 Share Posted July 16, 2008 (edited) Didn't notice it was a .png. That's right - .png display in IE is really hit and miss. Edited July 16, 2008 by stevesh Quote Link to comment Share on other sites More sharing options...
webgyrl Posted July 16, 2008 Author Share Posted July 16, 2008 (edited) Hmm this is very strange! I used a PNG to display this image for a MySpace design. It works fine in MySpace: >h##p://www.myspace.com/inacoustic The image does load a bit slow. Then what's funnier is it was actually working and then I changed some code. I'll have to re-trace my steps. There must be something in the Myspace code that makes it work that is not present in my web site code? I am not sure what since the masthead CSS and HTML are the exact same thing. It's coming off of the Imageshack hosting soon, I just had the gfx there to test the design as they are the ones used in the MS design. OK so now my question... why would the PNG display in IE at MySpace and yet not in IE on a page hosted w/ TCH? That makes no sense to me I'm confuzzled! EDIT OK just as a test I put the header image on my own space and still, it won't show up. So this must be a PNG issue, but why it works at MySpace and not on a regular web page is beyond me. Is there some CSS hack to ensure the display of PNG files, or must I resort to using a GIF for the header? Edited July 16, 2008 by webgyrl Quote Link to comment Share on other sites More sharing options...
webgyrl Posted July 16, 2008 Author Share Posted July 16, 2008 They both look the same to me, a large image of a guitar and IAMA in big blue letters. Did you get the problem fixed or am I missing something? Dick, what version of IE are you using? Can you send me screenshots via email? I turned off pop-up blocker and my firewall, but still the same problem. Very odd indeed! Quote Link to comment Share on other sites More sharing options...
TCH-Dick Posted July 16, 2008 Share Posted July 16, 2008 Here is what I see in IE7 However, I was able to make it disappear after multiple refreshes. It returned only after allowing imageshack cookies in the privacy settings for IE7. While the header is not stored at imageshack, I wouldn't right it off as the source of the problem. Personally I would host the background locally to eliminate imageshack and convert the png to another format. Quote Link to comment Share on other sites More sharing options...
OJB Posted July 16, 2008 Share Posted July 16, 2008 For me they look identical in both FF and IE7... just loads really slowly in IE Quote Link to comment Share on other sites More sharing options...
stevesh Posted July 17, 2008 Share Posted July 17, 2008 Might also be timing out in IE - I've noticed some strange behavior since the last update. Quote Link to comment Share on other sites More sharing options...
webgyrl Posted July 17, 2008 Author Share Posted July 17, 2008 Might also be timing out in IE - I've noticed some strange behavior since the last update. It's strange you mention that. I've been having terrible problems with some of the main programs I use since the last XP update. IE is wonky, programs wonky. ZoneLabs got totally screwed up and they have a big warning on their page. I can't tell you how frustrated I am with Microcrap right now. I'm re-doing the layout trying to use JPEGs and hope that I can slice it so the layout works. Really frustrating! Quote Link to comment Share on other sites More sharing options...
webgyrl Posted July 17, 2008 Author Share Posted July 17, 2008 For me they look identical in both FF and IE7... just loads really slowly in IE What OS and version are you using? Just curious. Quote Link to comment Share on other sites More sharing options...
webgyrl Posted July 17, 2008 Author Share Posted July 17, 2008 (edited) Ok this has become even more curious! I am now using a JPEG and I can see it in FF but not in IE 7. Is my CSS screwey? Here is the CSS and HTML that pertain to the masthead: HTML ><div class="masthead"><a href="http://www.inacoustic.com" target="_blank"> <img src="http://www.mbstia.com/iama/layout/IAMA-Header.jpg" alt="International Acoustic Music Awards" width="1020" height="356" border="0" usemap="Map"></a> <map name="Map"> <area shape="rect" coords="2,27,1008,432" href="http://www.inacoustic.com" target="_blank" alt="International Acoustic Music Awards"</map> </div> CSS >.masthead { width: 1020px; height: 350px; position: absolute; margin-left: -508px; left: 50%; top: 0px; background-image: url(http://www.mbstia.com/iama/layout/IAMA-Header.jpg); } The image for the header is now hosted on my site instead of Imageshack. I am very puzzled. Popup blocker is off and I also tried to turn my Firewall off just in case. Nada.... Any ideas? I am going nuts with this! LOL I will keep posting what I've tried. ATTEMPT 1: I went back and thought, hmmm, maybe it's the map I'm using to link the header to the home page that is causing the issue. So I changed the code thusly: HTML ><div class="masthead"><img src="http://www.mbstia.com/iama/layout/IAMA-Header.jpg" alt="International Acoustic Music Awards" width="1020" height="356" border="0 ></a></div> CSS >.masthead { width: 1020px; height: 350px; position: absolute; margin-left: -508px; left: 50%; top: 0px; background-image: url(http://www.mbstia.com/iama/layout/IAMA-Header.jpg); } CSS stayed the same. OK so now the header shows up, but making this changed totally hoses the design of the site and I lose the left side navigation for some reason as welll as the main column is now off and going past where I want it. See the test page here with the amended code: >h##p://www.mbstia.com/iama/test5.htm Replace #'s with t's Edited July 17, 2008 by webgyrl Quote Link to comment Share on other sites More sharing options...
webgyrl Posted July 17, 2008 Author Share Posted July 17, 2008 Here is what I see in IE7 However, I was able to make it disappear after multiple refreshes. It returned only after allowing imageshack cookies in the privacy settings for IE7. While the header is not stored at imageshack, I wouldn't right it off as the source of the problem. Personally I would host the background locally to eliminate imageshack and convert the png to another format. Dick, Thanks so much for posting a SC. It's very interesting that the image dissapeared. I have hosted the image on my site here at TCH and even changed it to JPEG and I got the same non-displaying image problem. See my post above for the way I was able to actually see the image... however the entire rest of the design is messed up and I can't figure out why since I only deleted the part of the code that refered to the map to make the header clickable: > usemap="Map"></a> <map name="Map"> <area shape="rect" coords="2,27,1008,432" href="http://www.inacoustic.com" target="_blank" alt="International Acoustic Music Awards"</map> Curious! LOL I am a bit stumped... but will keep trying to see what's going on. Thanks for being so helpful, as always! Quote Link to comment Share on other sites More sharing options...
webgyrl Posted July 17, 2008 Author Share Posted July 17, 2008 ATTEMPT 2: Ok I went back to the base code I was using and just played with the header. I was able to get it to show, but it is covering over the other parts of the layout. See: >h##p://www.mbstia.com/iama/test3.htm Replace #'s with t's Ok so now I have to find a way to push everything down so it begins past the header. Would this have to do with the CSS for the top margin? I am really not sure as I'm new to using CSS purely for laying out a site. I am assuming I need to push the maincontainer down and will try that and see if it works. Quote Link to comment Share on other sites More sharing options...
Bob Crabb Posted July 17, 2008 Share Posted July 17, 2008 Reading about this problem, it sounds really similar to something that I experienced when I was designing a new style template for my message board. I think that it is an IE problem related to a child element div having background properties and not rendering in the proper height, making the background sometimes disappear. I chased my tail for a few days trying to figure it out, but finally solved the riddle. I don't know if your problem is the same, but this might be worth a try. I would try a couple of things. First, go back to square one. Then add a height: 100% declaration to maincontainer. If that alone doesn't work, change the height declaration of masthead to 100%, and add a div inside masthead, with a single CSS declaration of height: 350px (or whatever was the original height property of masthead). I hope that this helps. Quote Link to comment Share on other sites More sharing options...
Bob Crabb Posted July 17, 2008 Share Posted July 17, 2008 OOPS -- looks like you figured out a solution while I was composing a post. Quote Link to comment Share on other sites More sharing options...
webgyrl Posted July 17, 2008 Author Share Posted July 17, 2008 (edited) OOPS -- looks like you figured out a solution while I was composing a post. Yes part of one. Now I just have to remove the top part and I'm thinking to do that I just delete ><div id="topsection"></div> and the corresponding CSS... I will let you know if it works! Do you think I should still make the maincontainer height: 100% ? Thanks Bob! Edited July 17, 2008 by webgyrl Quote Link to comment Share on other sites More sharing options...
Bob Crabb Posted July 17, 2008 Share Posted July 17, 2008 Do you think I should still make the maincontainer height: 100% ? Only if you have the disappearing div problem without it. Quote Link to comment Share on other sites More sharing options...
webgyrl Posted July 18, 2008 Author Share Posted July 18, 2008 (edited) OK! Looks like things are going much better. I used a JPEG instead of the PNG and changed some of the code about. Bob: the maincontainer height variable was not needed as it displayed fine w/o it. I have 2 other questions. 1 is about the left side navigation. How do I declare the pixel height of the nav links? I would like to space them closer together but when I try to do this: >#leftcolumn{ float: left; width: 200px; /*Width of left column*/ margin-left: -840px; /*Set left margin to -(MainContainerWidth)*/ background: transparent; border-right-color: #BFA86D; border-right-style: solid; border-right-width: 1px; line-height: 1.5em; } But it doesn't change the spaces to be closer. The CSS for the links in the nav is: >div#leftcolumn a:link {color: #6B2324; size: 16px; text-decoration: none; font-variant: small-caps; font-weight: bold } div#leftcolumn a:hover {color: #000059; size: 16px; text-decoration: underline; font-variant: small-caps; font-weight: bold} div#leftcolumn a:visited {color: #333333; size: 16px; text-decoration: none; font-variant: small-caps; font-weight: bold} Where do I declare the line height to affect this area? 2 is about the part where the left side right border of the navigation side div meets the footer top border. How can I make a 5 pixel space where the navigation side border meets the footer. I don't want the lines to look like they are joining. Thanks all for the help. I'm learning so much! Edited July 18, 2008 by webgyrl Quote Link to comment Share on other sites More sharing options...
webgyrl Posted July 19, 2008 Author Share Posted July 19, 2008 (edited) OK just in case this might be helpful to someone else, I found a way to declare the line height and I did is using this: line-height: 1em; >#leftcolumn{ float: left; width: 200px; /*Width of left column*/ line-height: 1em; margin-left: -840px; /*Set left margin to -(MainContainerWidth)*/ background: transparent; border-right-color: #BFA86D; border-right-style: solid; border-right-width: 1px; } Now my only issue is trying to figure out how to get a space between the right side navigation border and the top of the footer area border. If anyone has any idea how I can do this I'd appreciate finding out how to do it! Thanks again! Edited July 19, 2008 by webgyrl Quote Link to comment Share on other sites More sharing options...
TCH-Bruce Posted July 19, 2008 Share Posted July 19, 2008 Try using margin-bottom: nnpx; where nn is the number of pixels. Quote Link to comment Share on other sites More sharing options...
webgyrl Posted July 19, 2008 Author Share Posted July 19, 2008 Try using margin-bottom: nnpx; where nn is the number of pixels. YAY that worked. For some reason I kept trying to use padding! DUH! LOL Thanks Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.