IE = problems

[srface]

hey everyone, my first post here – brake it to me gently.. :)

not only my first post, but also my first clients web-page, and it causes me trouble. I have made a wordpress-site and tested it on both FireFox, Safari and my girlfriend´s laptop (running Vista with IE 7 or 8, she didn’t have time helping me out right now.. :? ), and it worked great. Until my client noticed that some text were cutted on top and that the drop-down menu dissapered behind the galleries. Also, some text shows up bigger in IE than in the other browsers.

I would be very greatful if someone here could have a look at my site and maybe find a sollution. After what I’ve read in this forum, I’m quite surtain that won’t be a problem :)

Link: http://www.eddaprofil.no
(if you enter ‘idébank’ and roll over ‘produkter’ you may see the drop-down behind the gallery).

in advance, thank you guys. also, I would like to thank Chris for CSS-tricks. I’ve learned a lot about web-design, keep up the great work..:)

[ikthius]

checked it out in IE, Safari & FF and it goes in front of your gallery…… if you think you got your code corret, why not make your doctype strict to iron out any IE quirks.

[srface]

thanks for your reply. I’ve stricted the doctype, but I am not able to see any difference myself. I’ll get my client to check it out.

[Soh Tanaka]

Your client is probably using IE6 aka the funk lord.

Be sure to install IE tester so you can check throughly : http://www.my-debugbar.com/wiki/IETester/HomePage

I didn’t have a chance to look closely at your CSS, but make sure you have a ‘z-index’ property that is higher than your content.

http://www.w3schools.com/Css/pr_pos_z-index.asp

Hope thats a good start :-)

[davesgonebananas]

I see the problem in IE is the headings are "cut off" at the top.
[img]http://img19.imageshack.us/img19/262/eddaprofil.jpg[/img]
This is because in your body {} selector you have line-height: 13px. Line height should preferrably be specified in ems so it scales, otherwise every time you specify a font size you need to remember to redefine the line-height as well.

[srface]

thanks for all help.
I have made some changes in the z-index but my client still gets the gallery over the drop-down menu. Also, the text shows up a bit tight and tracked. I have changed the text into em’s and uses Helvetica as site-font, why the text shows up like that, I don’t know.

Do I have to change the z-index on the entire drop-down menu or just parts of it? I’ll need to get it in with tea-spoons :D

[srface]

Is it possible for one of you guys to check out my site (http://www.eddaprofil.no) and see if the gallery in ‘idébank’ still gets on top of the drop-down menu? I believe I’ve changed the z-index on ‘all’ elements, but it hasn’t made any difference yet.

Does any of you get pixly fonts? On my screen (running FireFox) the fonts turns out smooth and clean but not on my clients screen running IE. I tought helvetica was a quite secure web-font.

Thank you.

[ikthius]

does IE6 not have a problem with z-indexing ??

as in it automatically makes it negative so you trying to bring it to the front means it may not work….

I think I read that somewhere do a google on ie6 z-index issues

this may be your problem

what about making your gallery z-index lower?

[Rob MacKay]

I have not actually looked, but you do have to set position for z-index to work properly. I think in IE it might even be position:absolute …

[srface]

I still can’t get it right. I’ve managed to get the drop-down over the text on all pages, but the gallery still lays on top. I’ve googled some IE6 bug-fixes and tried to make the z-index negative but that won’t do. Am I missing something? obviously yes, but I just don’t understand where.

Any solutions?

thanks for all help so far.. :)

[srface]

should all positions be ‘relative’? Whats the difference between inherit and relative?

does anyone get a grungy text on the site? I have uses a plain helvetica, but my client commented that it’s all pixly and grungy.
how come?

[Rob MacKay]

"srface" wrote:

should all positions be ‘relative’? Whats the difference between inherit and relative?

Well firstly inherit is not a position. lol

You have 4 Static, Absolute, Fixed and Relative. To cut a long story short, relative is the most useful passive one (meaning you dont have to set a top/left) – anyway im just finishing off a tutorial about it I will link to it when its up :)

[srface]

I actually did it!! I can’t belive it.
after trying and trying and trying..it suddenly worked. I just removed some position:relative..c",
I got so eager with this ‘positioning’ that I added it to all parts of the gallerys CSS-file.. :lol:

I hope the site works on everybodys screen now.

link: http://www.eddaprofil.no

[Author]

Posts