PDA

View Full Version : IE issues


jc1cell
08-01-2009, 04:15 PM
Hello to all,

I have created my second website and the display and functionality works well on FFX. Some display issues with the footer section in Safari, Chrome and Opera. And finally just complete disarray in IE7,IE6 and IE5. With IE 8 everything looks great except for the border around the flash file in the gallery pages and the fact that the quote button in the footer doesn't see it as a link and doesn't rollover when it should.

I'm here to see if anyone can maybe take a look and see where my mistakes are. CSS validates and the HTML gives me errors with the embed of the slideshows.

The site is www.krystalsign.com

Thanks in advance for any help you may be able to offer.

jc

domedia
08-01-2009, 04:50 PM
What are the issues jc? It looks fairly good to me.

jc1cell
08-01-2009, 05:06 PM
We're you able to check it in IE5,6,7? On my end all the type is bigger than it should be. On Safari and Opera the footer type has more space vertically than in FFX. And in IE8 the link and CSS rollover for the footer button is not working.

Keep in mind that I'm using IEtester to check the older versions of IE. Although I have checked on other systems that have IE7 installed and am getting the same problems.

Thanks
jc

DWcourse
08-01-2009, 05:30 PM
Definitely see issues in IE7. The roolover works but a lot of type is getting chopped off at the top and bottom of the footer.

jc1cell
08-03-2009, 07:57 PM
I know you are all very busy people so any help you could provide on this subject would be great. I have read several items regarding IE issues but can seem to pinpoint the problem.

This being only my second website I'm really clueless as to how to fix since it looks fine on the others except for minor things. Why the type is changing so drastically in IE has me dumbfounded. I don't know if it's in the html or the css.

The weird thing is that on some "IE machines" it looks fine and others not. It's weird because nothing I do on the browser end allows me to get it to look right either.

As stated any help would be very much appreciated.

jc

DWcourse
08-04-2009, 12:31 AM
The weird thing is that on some "IE machines" it looks fine and others not.
jc

there are different versions of IE which is why you're seeing different results. You should test with IE 6, 7 and 8.

Can't nail down what your specific style issue is though. Sorry.

jc1cell
08-04-2009, 02:34 PM
Yes, what I meant by "IE machines" is systems that use IE7 or IE8. What I used to test IE6 and 5 is IEtester app. On my system I used it to test IE7 also. This is where I noticed the issues with IE by looking at it in the specific browsers on different machines including my own. For the most part the text comes out bigger than it should and when I change the text size in the browser it goes way too small.

I'm wondering if this part of the header should be changed since it's suggested when validating HTML.

1.

Warning Byte-Order Mark found in UTF-8 File.

The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported.


Any thoughts? If it is the issue, which one should I use?

Thanks,
jc

domedia
08-04-2009, 03:18 PM
Just call them browsers and remove any confusion about 'IE machines'.
I tested the page in IE8, and the footer looks great.
I'm guessing the Validator complains about the characters you use to fake the bullet list. Use a regular UL, LI list.

jc1cell
08-04-2009, 03:38 PM
Just call them browsers and remove any confusion about 'IE machines'.
I tested the page in IE8, and the footer looks great.
I'm guessing the Validator complains about the characters you use to fake the bullet list. Use a regular UL, LI list.

Point taken on the browser bit. Regarding the quote above. Originally it was complaining when I used the LI but i guess it's because I didn't include it in a UL tag. However, it gave me that validation error even when I had the footer listed without the bullets.

Could you check the functionality of the quote button on the footer in IE8? I'm able to get the image rollovers working for the main nav but not for the quote button on the footer but only in IE8 it doesn't work.

I'm going to check in browsershots.org and see how it looks there. I'll get back to you guys regarding that.

jc

domedia
08-04-2009, 05:27 PM
I see the issue with the mouseover on the button.
Not sure why it's not working for you, but try this and see if it makes any difference.
1. Remove the properties font-size and line-height from both all the anchor pseudo states, :link, :hover etc. They should be redundant in this case.
2. Increase the negative text-indent to make sure it's not appearing in monitors with huge wide resolution. -9999px for example.
3. Use pixel values for background position.

jc1cell
08-04-2009, 05:57 PM
Just tried it and no go. It just seems to me that for some reason it's not seeing it as a link and merely as a background. The code is being ignored or changed or (insert thought here).

jc

domedia
08-04-2009, 08:16 PM
ok, I think I got it.
For :hover, only define the properties that change, background position, remove the rest.

jc1cell
08-06-2009, 03:47 PM
ok, I think I got it.
For :hover, only define the properties that change, background position, remove the rest.

Tried that and it didn't work. For some reason it simply doesn't want to see this as a rollover. But the funny thing is that my menu is setup the same way and it works. I just can't pinpoint the problem with my limited knowledge of CSS.

Thanks for your help. I will keep trying on my end and if I ever solve it I will let you know the solution I found.

jc

domedia
08-06-2009, 05:05 PM
It's still not using pixels for background position.

jc1cell
08-06-2009, 09:02 PM
After testing what you suggested and realizing that it didn't work I reverted back to the way I had it originally and continued testing using other scenarios.

Thanks
jc

jc1cell
08-07-2009, 04:25 PM
So kept checking on the issues I'm having with IE7 and moving type and found that it's having a problem with the margin-top:-27px that I have set for the topContent div. In all other browsers it displays fine even in IE8 but in IE7 it moves up.

I confirmed this by removing the property and then IE7 looked great but all other browsers including IE8 moved down. As with everything else, I have no idea why it does it. I have been looking into including a conditional comment to try and fix this but have had no luck in getting it to work. I don't know if it's the properties I'm including or what.

#topContent .ie7marginTop {
margin-top: 28px;

}

.ptopMargin {
margin-top: 10px;
margin-bottom: -20px;
}

This is the code I'm using in the conditional comment and nothing happens at all. I'm trying to fix the problem of spacing in the footer services list to match FFX better.

Anyone have any experience getting this done?

Thanks
jc

jc1cell
08-07-2009, 04:31 PM
So I kept checking on the issues I'm having with IE7 and moving type and found that it's having a problem with the margin-top:-27px that I have set for the topContent div and also with cutting off the type in the footer list and copyright because of a negative margin-top. In all other browsers it displays fine even in IE8 but in IE7 it moves up.

I confirmed this by removing the property and then IE7 looked great but all other browsers including IE8 moved down. As with everything else, I have no idea why it does it. I have been looking into including a conditional comment to try and fix this but have had no luck in getting it to work. I don't know if it's the properties I'm including or what.

#topContent .ie7marginTop {
margin-top: 28px;

}

.ptopMargin {
margin-top: 10px;
margin-bottom: -20px;
}This is the code I'm using in the stylesheet and nothing happens at all. I'm trying to fix the problem of spacing in the footer services list to match FFX better.

And this is the conditional comment

<!--[if IE7]>
<link rel="stylesheet" type="text/css" href="css/ie7hacks.css" />
<![endif]-->Anyone have any experience getting this done?

I was able to get the footer closer by playing with "class" and getting it to work there but now the spacing is off. Which is why I want to have the conditional comment there.

Haven't been able to figure out the image rollover issue with IE8 yet.

Thanks
jc

jc1cell
08-07-2009, 04:41 PM
So here's something interesting regarding the rollover issue I'm having in IE8.

I knew that my main nav rollovers were working and my footer button was not and the only difference between them is that the main nav is has a place: absolute to it. Of course, I changed the footer button div to place:absolute and now it works. Now I just need to position the copyright and I'm ready to go on that aspect.

All that's left is the spacing and position of the other items.

Thanks for all the help you have offered.

jc

jc1cell
08-10-2009, 06:04 PM
So after some playing around with CSS for the site I have been able to get the footer working properly ( the services section in IE7 still looks a off a bit but acceptable).

I'm wondering if anyone can give me any insight on the Conditional Comments for IE so the top margin issue for the main content in IE7 can be resolved. I haven't been able to get that to work at all and it's obviously something I'm doing wrong.

Any help would be great!!

thanks
jc

DWcourse
08-10-2009, 07:08 PM
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
#content { padding-top: XXpx; }
</style>
<![endif]-->

jc1cell
08-11-2009, 01:00 PM
Thank you all for the time you took to guide me on this issue. This problem can be considered solved.

This last issue turned out to be the fact that I needed a space in the IE 7 conditional statement (I had it IE7). Once that was corrected it was a matter of fine tuning the CSS.

I'm pretty sure my code isn't the cleanest but I'm working my way up little by little and hope to be able to get there sooner or later. Remember, it's only my second site (don't think you'd want to see the first...yuks!!).

Anyway, thank you all.

jc

jc1cell
08-31-2009, 08:23 PM
Hey guys,

After finally getting everything setup looking the same on every browser I saw in IE7 on two different systems the text at a higher size which would move everything to unreadable places. It happened on my system after I reverted to IE7 and on a friends system also. After knocking my head for a while trying to see why it would do it on some and not on others I figured it must be a system setting rather than a CSS issue.

So it turns out that on the systems with the problem the monitor dpi was set to 120 and the others were at 96. Once changed it looks fine, however, my system fonts are a bit small. I'll have to figure out how to get that resolved.

Also. Wanted to share a site ( www.xenocode.com/browsers ) that allows you to run IE8, IE7 and others on the same system. The IE options don't seem to play well with vista but on XP I'm having no issues. Now I can check IE8 and 7 compatibility on the same system.

cheers,
jc

DWcourse
08-31-2009, 08:46 PM
What unit are you using to set your font-size? (Ems, pixels, points, etc.)

jc1cell
08-31-2009, 09:38 PM
Set everything up using Ems. ???

DWcourse
08-31-2009, 09:55 PM
If you set the overall size for your text in the body style using ems, IE 6 and 7 exaggerate the resizing (smaller or larger) of subsequent styles set with ems. You can avoid that by setting the text size in the body style as a percentage and then using ems throughout the rest of the page.

And (someone correct me if I'm wrong) text set in ems shouldn't resize relative to the page based upon monitor resolution (although it would vary depending upon the text zoom setting in the browser).