Menu doesnt show in ie7

HTML & CSS
1

the menu where i have “Home Section1 Section 2” doesnt appear in ie7. it works will all other browsers but it comes up blank in ie7.

Here is my ie7 css file for ie7 fixes:

div#popup_login,
div#popup_register{
   margin-left:480px;
}
div#menu{
   margin-left: 120px;
}
.us_width-20{ width:19.99%!important; }
.us_width-25{ width:24.99%!important; }
.us_width-33{ width:32.99%!important; }
.us_width-33:first-child{ width:33.99%!important; }
.us_width-50{ width:49.99%!important; }
.us_width-100{ width:100%!important; }
 
ul.gk_tab_ul-style1 li span span span{
   padding:0 0 5px 5px;
}
ul.gk_tab_ul-style1 li span span span span{
   margin:0 0 -5px 0;
}
div#popup_login .button{
   line-height:16px!important;
   padding:0 14px 2px 14px!important;
}
div#popup_login,
div#popup_register{
   margin:0 auto!important;
}
.button,
.button_blue,
.button_lightblue,
.button_white,
.button_green{
   line-height:20px!important;
}

If anyone could help that would be great

The home page can be found at http://www.survivemycollege.com

2

oo sorry i forgot! But thanks sooo much! its fixed now

3

I was hoping you’d say that as it does badly need a re-write but I just didn’t have the time at the moment :slight_smile:

4

Paul is being a bit polite about it being ‘fragile’ - hat is a buggy bloated train wreck I wouldn’t even TRY throwing silver bullet fixes at since the methodology is flawed right to the core. That it’s even dicking with z-index on such a simple layout is just one of many tells that really, you need to throw that out and start over… as evidenced by the CSS inlined in the markup, redundant CSS on empty elements, outdated presentational markup techniques, presentational images in the markup…

Let’s put it this way - when you have a 35k HTML file for 2.9k of plain text? You’re doing it all wrong. Nothing even worth TRYING to save on that page. Lemme guess, some wysiwyg saddled you with that trash?

Little tip - if you have 4k of markup before you even get to the BODY tag… if you have more than three link tags, more than two script tags,… if you are resorting to that IE conditional comment garbage for CSS - you are probably doing it ALL WRONG.

35k of markup, two external documents, 401k in images, 16 javascripts totalling 263k, 100K of CSS in 10 FILES!?!?! Mein gott.

I’ll show you what I mean… since this is “rewrite sunday” for me. I’ll do a rewrite of your main page after dinner to illustrate what I mean. First thing on the lesson plan is probably pitching ALL of the javascript for nothing in the trash.

– edit – or not, I’d have to throw out or remaster all the images too since it’s all done with that alpha transparency nonsense for no good reason… with large sections of content still as images.

Yeah, do yourself a favor, pitch the entire mess and start over.

5

Hi,

That page is a bit fragile with text pasted on top of fixed size graphics and is not really the best approach for a solid layout.

One of the problems with the menu is the way it has been set up and IE doesn’t like the absolute menu following a float.

A quick fix is to add a hard clearer before the menu.

e.g.


       [B] <div style="clear:both"></div>[/B]
        <div id="menu">

Then set a stacking context on #top and use co-ordinates for the absolute menu.


[B] html,body{min-width:996px}[/B]/* stop background sliding away*/
[B]#top{position:relative;}[/B]/* stacking context */
/* menu */
div#menu {
    position:absolute;
    z-index:1001;
    width:660px;
[B]    margin:0;
    top:37px;
    left:350px[/B];
    text-align:left;
}

Then remove the IE7 styles for that element because browsers will now be the same.

You really should have built a background around the menu itself and not put the menu on the background of a distant parent as that is a fragile approach that breaks on text resize.

6

yea i understand that there is a lot of stuff that could be rewritten, but it runs fine so its not really one of my concerns atm. but thanks paul, the menu now shows up in ie7, however it is shifted to the right by about 100 pixels. it works fine in firefox and safari though.

7

Did you delete the ie7 style in the ie7 CC as I mentioned above?