first person 2 fix my CSS problem gets $5 via paypal

i have a problem with IE browsers. my site is bankaholic.com

in IE, the TOP TABBED MENU is not continuous. however, in safari and firefox, the tabs are shown correctly. this seems like a CSS problem.

the first person to reply to this thread with a WORKING FIX will get $5 via paypal.

 

i don't know what you talking about. it looks the same to me in both IE and firefox.

 

there is a gap in the tabbed navigation bar for IE.. isnt there?

 

Looks the same for me in both IE and firefox also.

 

I see what you're talking about.

The menu has about a 1-2 pixel gap where there shouldn't be one & the text's top margin doesn't display the same.

I've looked at your style sheet and think you might be able to try this:

#content{position:relative;height:-1px; padding-top:1em;}

#page > #content{position:relative;}

(I'm still new at this, but I think that will fix the gap problem and hopefully your top margin.)

That should at least get you on the right track. You'll have to play around with the parameters of course, but it should get you close.

You'll probably have to code your column settings for i.e.specifically either through hacks or the method shown above.

 

where do i put in that code? (CSS newbie)

 

1. That CSS is a MESS!!!
2. IF you're absolutely positioning that Menu, why don't you use exact "from top" height in px?
3. That's probably the most advanced "let'sdothatthehardestway" method to build that menu
4. I'd suggest something like that:

----------8<-----
All to do in your main CSS file (style.css)
find: ul.menu { .. }
replace: bottom:0; -with-> top:70px;
Just after whole ul.menu { .. } thing add:
*html ul.menu{
top:69px;
}
----------8<-----

Should work now..

IE seems to add 2 px somewhere.. probably a padding or a border, but can't actually locate where...

Anyway, tell me if it works for you (should)..

Kindly regards,
Lichurec

PS
I've registered, specially, to help you - please appreciate that ;p

 

By making it relative positioning, he wouldn't have to re-align everything, and setting the top:-1px; would have corrected the problem.

Besides, by creating a seperate entry for #content using:

#content{position:relative;height:-1px; padding-top:1em;} /*I.E. code*/

#page > #content{position:relative;} /*netscape and firefox*/

he would have been able to fix the text display problems with I.E. by coding the margin information where stated above.

He also would have avoided the *html hack which may not be supported later on.

 

1. He does not have to re-align "everything".. he already uses the absolute positioning for the ul.menu elements :| And that particular element should rather be positioned from top of the site, not the bottom.. or are we looking at different CSS's
2. -1px might / should work, although I've been told several times not to use negative heights, even for IE hacks.. don't ask why..
3. He uses the *html tag several times anyway..
3. b) I'd assume IE will ignore such tags ONLY after beeing able to correctly "use" at least basics of CSS2 standard :| not sooner..

L.

Damn, my english is worse than I thought :|

 

The problem still lies that the *html hack won't correct the text display problem, unless he performs one for every single element inside the #content container, which will eventually get very tedious.

#content{position:relative;height:-1px; padding-top:1em;} /*I.E. code*/

#page > #content{position:relative;} /*netscape and firefox*/

Code (markup):

By placing the height at -1px; all it is doing is moving all the body content up one pixel, and the #container tag will allow him to adjust the top, bottom, left and right margins rather easily.