SuckerTree and IE7 problem

[santamesa2]

Greetings,

Was wondering if anyone can point me to the right direction.

I am using SuckerTree and utilizing images for the navigation. Everything is fine with different browsers except IE7 -- I am having a space problem between images.

This link
http://west.interactive.hodes.com/ie7Problem/all_else_ok.html
is an image of what it looks like when viewing from
a) Apple Safari v3.1.1 for PC
b) Firefox v2.0.0.13 for PC and Mac
c) Internet Explorer 6.0 for PC

But as soon as I view it from Internet Explorer 7.0 for PC -- this is what happens
http://west.interactive.hodes.com/ie7Problem/ie7_space_problem.html

This link is the stylesheet for the code that I used:
http://west.interactive.hodes.com/ie7Problem//includes/stylesheet.css

And the working web site with mouseOvers can be viewed from here:
http://west.interactive.hodes.com/ie7Problem/workingSite.html

Would anybody know what else I can do to make it work properly on all browsers.

Thanks in advance.

[Medyman]

Hmm...

I can't tell you what's causing it but I can tell you how to fix it.

Change

.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
border-bottom: 0;
}

to


.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
border-bottom: 0;
*margin-bottom:-4px;
}

[rangana]

....The mess is that IE creates it's own height on the list...
The fix is:


.suckerdiv ul li{
position: relative;
height:22px;
}

[santamesa2]

Thanks Medyman.

Tried your suggestion and it worked on IE7... but... every other browsers are coming out shorter.

Here's the live link.
http://west.interactive.hodes.com/ie7Problem/testFORjdo/

Take Care.

[santamesa2]

Hi rangana,

Tried your suggestion and used 22px but 24px worked better. Had the same outcome as Medyman.

http://west.interactive.hodes.com/ie7Problem/ranganaFix/

Worked for IE7 but when I viewed from other browsers the underline in my nav images disappeared.

Here is the css
http://west.interactive.hodes.com/ie7Problem/ranganaFix/includes/stylesheet.css

This fix is working although not quite universal.

I don't understand how differently IE7 is handling codes from IE6.

Thanks much for the help.

[santamesa2]

Can you guys recommend other programming methods besides SuckerTree that does the same thing?

Just a thought.

[rangana]

Which of these two do you want us to base the fix? :)
http://west.interactive.hodes.com/ie7Problem/ranganaFix/
http://west.interactive.hodes.com/ie7Problem/testFORjdo/

Can you guys recommend other programming methods besides SuckerTree that does the same thing?

Just a thought.

...You should decide for yourself...do you want to keep the SuckerTree or something else...;)

[santamesa2]

rangana,

You're right -- I will stick to SuckerTree because this is where I saw that I can substitute images for the text.

With regards to basing the fix... these links
http://west.interactive.hodes.com/ie...em/ranganaFix/
http://west.interactive.hodes.com/ie...em/testFORjdo/
are just to show the outcome of the recommendations.

My end result is, if I can, use the coding I started
http://west.interactive.hodes.com/ie7Problem//includes/stylesheet.css
and have it work for all browsers.

After doing your recommendation, I was in the assumption that, that was it. Sorry for jumping the gun.:confused:

[rangana]

Does floating your elements instead helps :)


.suckerdiv ul li{
position:relative;
float:left;
}

[santamesa2]

! ? ! ? ! ? ! ? ! ? ! ?

clap! clap! clap! Bow! Bow! Bow!

That was it. I had to do and redo a few times just to make sure it works.

I have been fighting with this for a few days and you solved it in a few minutes.

Am truly thankful.

Take Care Rangana



>>> Daghan salamat sa imong panabang!!! <<<

:-)

[rangana]

You're completely welcome ;)

>>> Way Sapayan <<< :)