Same version of IE giving me issues?

[jrod11]

Hi everyone,
I'm working on creating a company intranet or my company and having trouble with IE.

I have a navigation bar at the bottom of my page that is a quick links bar and is a fixed position. the background image is a .jpg. Depending on the computer, the background image will appear or not show up at all.

The weird part is that the SAME version of IE 8 will show it on one computer, but another computer that has IE 8 will not.

I would expect issues from different versions, but not the same version right?

here is some code for how i set it up. I don't think it is the best way because i have a main css file and i had to do an inline style for the quick links bar in order for it to work at all.

main css:

/* Reset */
html,body,div,span,applet,object,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:2;font-size:100%;font-weight:normal;font-style:normal;font-family:inherit;vertical-align:baseline}
 
body {background:#005673; color:#333; font-family:Verdana,Helvetica,Arial,Geneva,Helvetica,sans-serif; font-size:12px;line-height:20px;padding-bottom:5em}
iframe {background-color:;}
a,a:active,a:visited {text-decoration:none; color:#007eaa;}
a:hover {text-decoration:underline; color:#FFF; background-color:#007eaa;}
ul,ol {list-style-type:none}
.left  {float:left}
.right {float:right}
.center {text-align:center}
p {margin: 5px 0}
pre {border:1px dotted #777;background:#ffe;margin:1em;padding:5px}
h1, h2, h3 {font-weight:normal;color:#111;}
h1 {font-size:3em;line-height:1;margin-top:0.5em}
h2 {font-size:2em;margin-top:0.75em}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em}
ul.bullet {list-style-type:square; padding-left:20px; margin:5px 0}
 
/* Header Portion */
#header {background:#005673 url(g/header.png) repeat-x}
#logo {
    position:absolute;
    left:10px;
    top:4px;
    width:318px;
    height:66px;
    background-image:url(g/logo.png);
}
#title {
    color:#fff;
    font-size:1.2em;
    height:3em;
    line-height:3em;
    font-weight:bold;
    padding-left:160px
}
#header_tabs {font-size:1em; padding-left:350px}
#header_tabs li {
    padding:0 1em;
    float:left;
    font-weight:bold;
    height:2.5em;
    line-height:2em;
    color:#007eaa;
    background:#6ae url(g/header.png) 0 -8px;
    border-width:1px 1px 0 1px;
    border-style:solid;
    border-color:#007eaa;
    margin-right:5px;
    cursor:pointer;
    white-space:nowrap;
}
#header_tabs li:hover {text-decoration:underline;}                
#header_tabs li.on {color:#0077eaa; background:#f8f8f8 url(g/nav_bg.gif) repeat-x; text-decoration: underline;}
 
#header_bar {
    clear:left;
    color:#aaa;
    background:url(g/topfade.png);
    padding:0px 6px;
    overflow:hidden;
    height:10px;
}
#header_bar span img {cursor:pointer}
#header_bar .hint {display:none;padding-right:5px}
#header_bar:hover .hint {display:inline}
#expd {display:none}
 
/* Main Content */
#helper {
    margin:12px;
    margin-bottom:0;
    padding:5px;
    border:2px solid #000;
    display:none;
    background-image: url(g/announcement.png);
}
 
 
#main_table {width:100%}
#main {padding:3px; position:relative}
.main_containers {float:left;min-height:5em}
 
/* Footer Attached to Page Bottom */
#footer {
    position:fixed;
    font-weight:bold;
    bottom:0px;
    width:100%;
    height:2;/*this is how close the bar is to the bottom of the window*/
    padding-right: 5px;
    /*background:#007eaa url(g/footer.jpg) 0 /*16px*/;
    /*text-align:right;*/
    /*padding-left: 13px;*/
}
 
#date {
    position:fixed;
    color:#FFF;
    font-weight:bold;
    bottom:5px;
    width:100%;
    height:2;/*this is how close the bar is to the bottom of the window*/
    padding-left: 10px;
    /*background:#007eaa url(g/footer.jpg) 0 /*16px*/;
    /*text-align:right;*/
    /*padding-left: 13px;*/
}
 
 
 
footer_bar {color:#999; background-color:#fff; border-top:1px solid #ccc; border-bottom:1px solid #ccc; padding:4px 6px; height:1.2em; margin-bottom:10px}
#footer_bar a {color:#999}
#footer_bar a:hover {color:#333}
 
 
/* Module Components */
.module {background:#fff; border:2px solid #000; margin:10px 6px;}
.moduleFrame {border:1px solid #4E8EE2; overflow:hidden;}
.moduleHeader {
    height:1.6em;
    background:#4E8EE2 url(g/module-header.gif) repeat-x;
    border-left:1px solid #A7D0F6;
    border-top:1px solid #A7D0F6;
    color:#007eaa;
    cursor:move;
    overflow:hidden;
 
}
.moduleIcon, .moduleTitle {
    line-height:1.4em;
    float:left;
    padding-left:2px;
    font-weight:600
}
.moduleActions {display:none; float:right; height:16px; padding:0 2px}
.moduleActions img {cursor:pointer;width:16px;height:16px}
    .action_refresh {background:url('g/action-refresh.png')}
    .action_max        {display:none;background:url('g/action-max.png')}
    .action_min        {background:url('g/action-min.png')}
    .action_close    {background:url('g/action-close.png')}
.moduleHeader:hover .moduleActions {display:block}
.moduleContent {border-top:1px solid #ddd; background:#fff url(g/nav_bg.gif) 0 -5px repeat-x; padding:5px}
 
/* Drag-drop placeholder */
.ui-sortable-placeholder { border: 1px dotted red; visibility: visible !important; height: 50px !important; }
 
/* Light Theme Definitoin for Modules */
.red .moduleHeader{background:#e24e61 url(g/module-orange.gif) repeat-x; border-color:#F6A7B8;}
.red .moduleFrame{border-color:#E2584E;}
.orange .moduleHeader{background:#E2584E url(g/module-red.gif) repeat-x; border-color:#F6A7A8}
.orange .moduleFrame{border-color:#E2584E;}
.yellow .moduleHeader{background:#E2904E url(g/module-yellow.gif) repeat-x; border-color:#F6C4A7;}
.yellow .moduleFrame{border-color:#E2904E;}
.green .moduleHeader{background:#66B161 url(g/module-green.gif) repeat-x; border-color:#ABCFA5}
.green .moduleFrame{border-color:#66B161;}
.white .moduleHeader{background:#9E9E9E url(g/module-white.gif) repeat-x; border-color:#D9D9D9}
.white .moduleFrame{border-color:#9E9E9E;}
 
/* For NavIcon */
.navdiv {float:left; margin:2px; border:1px solid #ccc; text-align:center; width:70px; height:90px; overflow:hidden}
.navdiv img {width:64px; height:64px}
.navdiv a {display:block; padding:1px; height:88px}
.navdiv a:hover {text-decoration:none; background:#14f; color:#eee}
 
/* For NavLi */
.navli {cursor:pointer; padding-left:28px; height:24px; line-height:24px; background:url(icon/link.gif) 0 0 no-repeat}
.navli:hover {background-image:url(icon/link1.gif); font-weight:bold}
 
/* For RSSLi */
.rssli a {display:block; height:24px; line-height:24px; padding-left:28px; background:url(icon/rss.gif) 0 0 no-repeat}
.rssli a:hover {background-image:url(icon/rss1.gif); font-weight:bold}
 
/* Tabs Control */
.tabs {border:1px solid #ccc}
.tabsul {overflow:hidden;;padding-top:1px;background:#ccc}
.tabsul li {float:left; font-weight:bold; color:#777; background:#fff; border:1px solid #bbb; text-align:center; margin-left:2px; padding:4px 6px; cursor:pointer; white-space:nowrap}
.tabsul li:hover {background:#f0f0f0;color:#333}
.tabsul li.on {background:#fff url(g/nav_bg.gif) repeat-x; border-bottom-color:#fff; color:#333; padding-bottom:6px}
.tabsdiv {padding:4px}
 
/* Accordion Control */
.accordion {background:#fff}
.accordion dt {font-weight:bold; color:#777; border:1px solid #bbb; padding:4px 6px; cursor:pointer; margin-top:2px}
.accordion dt:hover {background:#f0f0f0;color:#333}
.accordion dt.on {background:url(g/nav_bg.gif) repeat-x; color:#333}
.accordion dd {overflow-x:auto; padding:3px; border-width:0px 1px 1px 1px; border-style:solid; border-color:#bbb; display:none}

[jrod11]

and here is the code for the quick links menu:

Quick links menu css:

<script type="text/javascript" src="ADxMenu.js"></script>
 
<style type="text/css">
.menu, .menu ul {
    margin: 0;
    padding: 0;
    border: 0;
    list-style-type: none;
    display: block;
 
}
 
.menu li {
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    float: right;    /* move all main list items into one row, by floating them */
    position: relative;    /* position each LI, thus creating potential IE.win overlap problem */
    z-index: 5;        /* thus we need to apply explicit z-index here... */
}
 
.date li {
    float:left;
}
 
.menu li:hover {
    z-index: 10000;    /* ...and here. this makes sure active item is always above anything else in the menu */
    white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
                            see http://www.tanfa.co.uk/css/articles/...popups-bug.asp for other stuff that work */
}
 
.menu li li {
    float: none;/* items of the nested menus are kept on separate lines */
}
 
.menu ul {
    visibility: hidden;    /* initially hide all submenus. */
    position: absolute;
    z-index: 10;
    left: 0;    /* while hidden, always keep them at the bottom left corner, */
    bottom: 0;        /*         to avoid scrollbars as much as possible */
}
 
.menu li:hover>ul {
    visibility: visible;    /* display submenu them on hover */
    bottom: 100%;    /* 1st level go above their parent item */
}
 
.menu li li:hover>ul {    /* 2nd+ levels go on the right side of the parent item */
    bottom: 0;
    left: 100%;
}
 
/* -- float.clear --
    force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
    content: ".";
    height: 0;
    display: block;
    visibility: hidden;
    overflow: hidden;
    clear: both;
}
.menu, .menu ul {    /* IE7 float clear: */
    min-height: 0px;
    padding-right: 60px;
}
/* -- float.clear.END --  */
 
/* sticky submenu: it should not disappear when your mouse moves a bit outside the submenu
    YOU SHOULD NOT STYLE the background of the ".menu UL" or this feature may not work properly!
    if you do it, make sure you 110% know what you do */
.menu ul {
    background-image: url(empty.gif);    /* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
    padding: 30px 30px 10px 30px;
    margin: 0 0 -10px -30px;
    /*background: #f00;*/    /* uncomment this if you want to see the "safe" area.
                                you can also use to adjust the safe area to your requirement */
}
.menu ul ul {
    padding: 30px 30px 30px 10px;
    margin: 0 0 -30px -10px;
}
 
 
/* - - - ADxMenu: DESIGN styles - - - */
 
.menu, {
    background:#6666 /*16px*/;
    background-image: url(http://www.intranet.com/newintranet/...u/footer.jpg);    
 
}
 
.menu ul li {
    background:#999 /*16px*/;
 
    }
 
.menu ul {
    width: 11em;
 
}
 
.menu a {
    text-decoration: none;
    color: #fff;
    padding: .4em 1em;
    display: block;
    position: relative;
}
 
.menu a:hover, .menu li:hover>a {
    color: #fff;
}
 
.menu li li {    /* create borders around each item */
    border: 1px solid #ccc;
 
}
.menu ul>li + li {    /* and remove the top border on all but first item in the list */
    border-top: 0;
}
 
.menu li li:hover>ul {    /* inset 2nd+ submenus, to show off overlapping */
    bottom: 0px;
    left: 90%;
}
 
/* special colouring for "Main menu:", and for "xx submenu" items in ADxMenu
    placed here to clarify the terminology I use when referencing submenus in posts */
.menu>li:first-child>a, .menu li + li + li li:first-child>a {
    color: #fff;
}
 
/* - - - ADxMenu: DESIGN styles - - - */
 
.menu ul a {    /* fix clickability-area problem */
    zoom: 1;
}
 
.menu li li {    /* fix white gap problem */
    float: left;
    width: 100%;
}
 
.menu li li {    /* prevent double-line between items */
    margin-top: -1px;
}
 
.menu a:hover, .menu .adxmhoverA {        /* li:hover>a selector */
    color: #fff;
}
 
.menu .adxmhoverUL .adxmhoverUL {    /* inset 2nd+ submenus, to show off overlapping */
    bottom: 0px;
    left: 90%;
}
 
 
 
</style>

[drhowarddrfine]

None of that does us any good without the html.

[jrod11]

I just figured it out. I had a typo right before one of my css statements and it was causing the problems. thanks