Jump to content
webgyrl

Header Shows Up In Firefox But Not Ie

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Didn't notice it was a .png. That's right - .png display in IE is really hit and miss.

Edited by stevesh

Share this post


Link to post
Share on other sites

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 by webgyrl

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites

Here is what I see in IE7

iama.jpg

 

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.

Share this post


Link to post
Share on other sites

For me they look identical in both FF and IE7...

 

just loads really slowly in IE

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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 by webgyrl

Share this post


Link to post
Share on other sites
Here is what I see in IE7

post-1405-1216230839_thumb.jpg

 

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! :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

OOPS -- looks like you figured out a solution while I was composing a post.

Share this post


Link to post
Share on other sites
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 by webgyrl

Share this post


Link to post
Share on other sites
Do you think I should still make the maincontainer height: 100% ?

 

 

Only if you have the disappearing div problem without it.

Share this post


Link to post
Share on other sites

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 by webgyrl

Share this post


Link to post
Share on other sites

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 by webgyrl

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...