Joomla! Menu breaks in IE-HELP!-N00b!

[patg7590]

Hello all,

This is my first visit here so bear with me.

I am completely stumbling my way through css as I am going to school for web but it's only my first year and have never been formally taught any.

Thanks so much for any help.

This site I'm working on

http://www.amsdme.com/

looked great in FF3, I changed some of the positioning in the css to get everything lined up, but it completely fell apart in IE7-(the clients browser )

I have restored the defualt css that came with the template-with a tiny change to get the logo to line up correctly

but...as you can see... the menu (mainly the submenus) is completely wack in both ff and ie-and the spacing is all messed up.

I'm using the swMenuFree module for the menu, i'm waiting for help from the author here:

http://www.swmenupro.com/index.php?o...2&topic=6623.0

There is an offset option in the component where I can line it up manually, but if i resize the browser window or use a different machine it doesn't line up anymore, so that wasn't really any help

I'm all for finding a different menu module or whatever but since I don't know what's wrong with it I don't know if that will help.

I have 4 CSS sheets saved:
1.everything works and looks great in FF (spacing and menu)
2.spacing is good in IE-menu is broken
3.Default-spacing and menu broken in both FF and IE
4. compromise css-spacing ok- using default menu-no rollovers-looks lame

**The site is live (obviously) and has been delivered...so I need to keep it on the presentable-although not ideal layout (meaning css number 4) as often as possible-but if anyone at all is interested in helping me troubleshoot it I can do whatever-whenever. **

Ok I'm putting up the broken css (number1) for tonight, hopefully someone will answer my plea...

I'm also hoping for help on here:
http://csscreator.com/node/34857

Like I said I'm completely new to CSS but if anyone would help me troubleshoot this it would be greatly appreciated.
**and remember-css number 1 is up right now...so it looks ideal in ff and SUCKS in IE7 :-)

***EDIT*** ok now the submenus are working in IE...but the right col is broken.

maybe someone could just help me look at my css and figure out why it sucks?

thanks again.

thank you very much.
thank you so much.
thank you very so much.


Patrick

[Jaxo]

Hey there, welcome to TSF!

In your template stylesheet take a look at below code. See if removing bold code will help with IE7.

#maincol-broad-800 {
margin-top: 7px;
width: 422px !important;
float: left;
margin-left: 120px !important;
}

If I get some more time tonight all look into it even more.

Let me know if that helps at all.

[patg7590]

Originally Posted by Jaxo

Hey there, welcome to TSF!

In your template stylesheet take a look at below code. See if removing bold code will help with IE7.

#maincol-broad-800 {
margin-top: 7px;
width: 422px !important;
float: left;
margin-left: 120px !important;
}

If I get some more time tonight all look into it even more.

Let me know if that helps at all.

i took out the code you suggested...
ff is now off centered, and ie has overlap issues

Thanks so much for your help and speedy reply!

[Jaxo]

If no one else responds by today I'll take a look at it tonight.

Busy day :)

Joomla is a "fun" beast to tame.

[patg7590]

Jaxo?
Your taming help is appreciated...:)

[Jaxo]

Question for you - What is the purpose of <div id="leftcol"> code in your web design?

If you remove above element from your index.php template and add the margin left 120px back into your stylesheet (suggested to be removed in my previous post) like you had before everything seems to balance out.

I have confirmed this on firebug and IE8 developer (IE7 standard as well).

Let me know.

[patg7590]

Its just a template I downloaded- I would assume its for the "left" module postion...but that seems really simple so it's probably not what you're asking....
and could you tell me exactly what lines I need to remove t get rid of that element?
I don't trust myself to not screw it up worse haha
Thanks for your help

[patg7590]

ok I think that did it!
one last question.... there is a gap at the top...only in ie...
can you show me why that happens in ie and not ff?
...and how to fix it without screwing up how it looks in ff.
THANKS SO MUCH FOR YOUR HELP

EDIT: moving the outer 800 col down using

position: relative;
top: 13px;

kills the menu :-(

How else can I line up the top in ie?

[Jaxo]

Hey there!

Sorry took so long to get back to you.

Alright, for the gap in IE check out your css_color_green.css stylesheet. There is a background image in the id #outer-800. Not sure what the purpose this image is, but removing it in IE developer for IE7 fixes your gap issue.

#outer-800 
background: url(../images/content-top.gif) no-repeat 50% top;
}

Hope that helps. Let me know if it doesn't work or if you have any other questions.

[patg7590]

Hey Jaxo-I love you and I owe you an organ.
These are my new favorite forums
I can't express how thankful I am.
Thanks