Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > html css > answers

Same version of IE giving me issues?

Member
  
Join Date: Apr 2009
Posts: 36
#1: 4 Weeks Ago
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:

Expand|Select|Wrap|Line Numbers
  1. /* Reset */
  2. 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}
  3.  
  4. body {background:#005673; color:#333; font-family:Verdana,Helvetica,Arial,Geneva,Helvetica,sans-serif; font-size:12px;line-height:20px;padding-bottom:5em}
  5. iframe {background-color:;}
  6. a,a:active,a:visited {text-decoration:none; color:#007eaa;}
  7. a:hover {text-decoration:underline; color:#FFF; background-color:#007eaa;}
  8. ul,ol {list-style-type:none}
  9. .left  {float:left}
  10. .right {float:right}
  11. .center {text-align:center}
  12. p {margin: 5px 0}
  13. pre {border:1px dotted #777;background:#ffe;margin:1em;padding:5px}
  14. h1, h2, h3 {font-weight:normal;color:#111;}
  15. h1 {font-size:3em;line-height:1;margin-top:0.5em}
  16. h2 {font-size:2em;margin-top:0.75em}
  17. h3 {font-size:1.5em;line-height:1;margin-bottom:1em}
  18. ul.bullet {list-style-type:square; padding-left:20px; margin:5px 0}
  19.  
  20. /* Header Portion */
  21. #header {background:#005673 url(g/header.png) repeat-x}
  22. #logo {
  23.     position:absolute;
  24.     left:10px;
  25.     top:4px;
  26.     width:318px;
  27.     height:66px;
  28.     background-image:url(g/logo.png);
  29. }
  30. #title {
  31.     color:#fff;
  32.     font-size:1.2em;
  33.     height:3em;
  34.     line-height:3em;
  35.     font-weight:bold;
  36.     padding-left:160px
  37. }
  38. #header_tabs {font-size:1em; padding-left:350px}
  39. #header_tabs li {
  40.     padding:0 1em;
  41.     float:left;
  42.     font-weight:bold;
  43.     height:2.5em;
  44.     line-height:2em;
  45.     color:#007eaa;
  46.     background:#6ae url(g/header.png) 0 -8px;
  47.     border-width:1px 1px 0 1px;
  48.     border-style:solid;
  49.     border-color:#007eaa;
  50.     margin-right:5px;
  51.     cursor:pointer;
  52.     white-space:nowrap;
  53. }
  54. #header_tabs li:hover {text-decoration:underline;}                
  55. #header_tabs li.on {color:#0077eaa; background:#f8f8f8 url(g/nav_bg.gif) repeat-x; text-decoration: underline;}
  56.  
  57. #header_bar {
  58.     clear:left;
  59.     color:#aaa;
  60.     background:url(g/topfade.png);
  61.     padding:0px 6px;
  62.     overflow:hidden;
  63.     height:10px;
  64. }
  65. #header_bar span img {cursor:pointer}
  66. #header_bar .hint {display:none;padding-right:5px}
  67. #header_bar:hover .hint {display:inline}
  68. #expd {display:none}
  69.  
  70. /* Main Content */
  71. #helper {
  72.     margin:12px;
  73.     margin-bottom:0;
  74.     padding:5px;
  75.     border:2px solid #000;
  76.     display:none;
  77.     background-image: url(g/announcement.png);
  78. }
  79.  
  80.  
  81. #main_table {width:100%}
  82. #main {padding:3px; position:relative}
  83. .main_containers {float:left;min-height:5em}
  84.  
  85. /* Footer Attached to Page Bottom */
  86. #footer {
  87.     position:fixed;
  88.     font-weight:bold;
  89.     bottom:0px;
  90.     width:100%;
  91.     height:2;/*this is how close the bar is to the bottom of the window*/
  92.     padding-right: 5px;
  93.     /*background:#007eaa url(g/footer.jpg) 0 /*16px*/;
  94.     /*text-align:right;*/
  95.     /*padding-left: 13px;*/
  96. }
  97.  
  98. #date {
  99.     position:fixed;
  100.     color:#FFF;
  101.     font-weight:bold;
  102.     bottom:5px;
  103.     width:100%;
  104.     height:2;/*this is how close the bar is to the bottom of the window*/
  105.     padding-left: 10px;
  106.     /*background:#007eaa url(g/footer.jpg) 0 /*16px*/;
  107.     /*text-align:right;*/
  108.     /*padding-left: 13px;*/
  109. }
  110.  
  111.  
  112.  
  113. 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}
  114. #footer_bar a {color:#999}
  115. #footer_bar a:hover {color:#333}
  116.  
  117.  
  118. /* Module Components */
  119. .module {background:#fff; border:2px solid #000; margin:10px 6px;}
  120. .moduleFrame {border:1px solid #4E8EE2; overflow:hidden;}
  121. .moduleHeader {
  122.     height:1.6em;
  123.     background:#4E8EE2 url(g/module-header.gif) repeat-x;
  124.     border-left:1px solid #A7D0F6;
  125.     border-top:1px solid #A7D0F6;
  126.     color:#007eaa;
  127.     cursor:move;
  128.     overflow:hidden;
  129.  
  130. }
  131. .moduleIcon, .moduleTitle {
  132.     line-height:1.4em;
  133.     float:left;
  134.     padding-left:2px;
  135.     font-weight:600
  136. }
  137. .moduleActions {display:none; float:right; height:16px; padding:0 2px}
  138. .moduleActions img {cursor:pointer;width:16px;height:16px}
  139.     .action_refresh {background:url('g/action-refresh.png')}
  140.     .action_max        {display:none;background:url('g/action-max.png')}
  141.     .action_min        {background:url('g/action-min.png')}
  142.     .action_close    {background:url('g/action-close.png')}
  143. .moduleHeader:hover .moduleActions {display:block}
  144. .moduleContent {border-top:1px solid #ddd; background:#fff url(g/nav_bg.gif) 0 -5px repeat-x; padding:5px}
  145.  
  146. /* Drag-drop placeholder */
  147. .ui-sortable-placeholder { border: 1px dotted red; visibility: visible !important; height: 50px !important; }
  148.  
  149. /* Light Theme Definitoin for Modules */
  150. .red .moduleHeader{background:#e24e61 url(g/module-orange.gif) repeat-x; border-color:#F6A7B8;}
  151. .red .moduleFrame{border-color:#E2584E;}
  152. .orange .moduleHeader{background:#E2584E url(g/module-red.gif) repeat-x; border-color:#F6A7A8}
  153. .orange .moduleFrame{border-color:#E2584E;}
  154. .yellow .moduleHeader{background:#E2904E url(g/module-yellow.gif) repeat-x; border-color:#F6C4A7;}
  155. .yellow .moduleFrame{border-color:#E2904E;}
  156. .green .moduleHeader{background:#66B161 url(g/module-green.gif) repeat-x; border-color:#ABCFA5}
  157. .green .moduleFrame{border-color:#66B161;}
  158. .white .moduleHeader{background:#9E9E9E url(g/module-white.gif) repeat-x; border-color:#D9D9D9}
  159. .white .moduleFrame{border-color:#9E9E9E;}
  160.  
  161. /* For NavIcon */
  162. .navdiv {float:left; margin:2px; border:1px solid #ccc; text-align:center; width:70px; height:90px; overflow:hidden}
  163. .navdiv img {width:64px; height:64px}
  164. .navdiv a {display:block; padding:1px; height:88px}
  165. .navdiv a:hover {text-decoration:none; background:#14f; color:#eee}
  166.  
  167. /* For NavLi */
  168. .navli {cursor:pointer; padding-left:28px; height:24px; line-height:24px; background:url(icon/link.gif) 0 0 no-repeat}
  169. .navli:hover {background-image:url(icon/link1.gif); font-weight:bold}
  170.  
  171. /* For RSSLi */
  172. .rssli a {display:block; height:24px; line-height:24px; padding-left:28px; background:url(icon/rss.gif) 0 0 no-repeat}
  173. .rssli a:hover {background-image:url(icon/rss1.gif); font-weight:bold}
  174.  
  175. /* Tabs Control */
  176. .tabs {border:1px solid #ccc}
  177. .tabsul {overflow:hidden;;padding-top:1px;background:#ccc}
  178. .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}
  179. .tabsul li:hover {background:#f0f0f0;color:#333}
  180. .tabsul li.on {background:#fff url(g/nav_bg.gif) repeat-x; border-bottom-color:#fff; color:#333; padding-bottom:6px}
  181. .tabsdiv {padding:4px}
  182.  
  183. /* Accordion Control */
  184. .accordion {background:#fff}
  185. .accordion dt {font-weight:bold; color:#777; border:1px solid #bbb; padding:4px 6px; cursor:pointer; margin-top:2px}
  186. .accordion dt:hover {background:#f0f0f0;color:#333}
  187. .accordion dt.on {background:url(g/nav_bg.gif) repeat-x; color:#333}
  188. .accordion dd {overflow-x:auto; padding:3px; border-width:0px 1px 1px 1px; border-style:solid; border-color:#bbb; display:none}
Member
  
Join Date: Apr 2009
Posts: 36
#2: 4 Weeks Ago

re: Same version of IE giving me issues?

and here is the code for the quick links menu:

Quick links menu css:

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" src="ADxMenu.js"></script>
  2.  
  3. <style type="text/css">
  4. .menu, .menu ul {
  5.     margin: 0;
  6.     padding: 0;
  7.     border: 0;
  8.     list-style-type: none;
  9.     display: block;
  10.  
  11. }
  12.  
  13. .menu li {
  14.     margin: 0;
  15.     padding: 0;
  16.     border: 0;
  17.     display: block;
  18.     float: right;    /* move all main list items into one row, by floating them */
  19.     position: relative;    /* position each LI, thus creating potential IE.win overlap problem */
  20.     z-index: 5;        /* thus we need to apply explicit z-index here... */
  21. }
  22.  
  23. .date li {
  24.     float:left;
  25. }
  26.  
  27. .menu li:hover {
  28.     z-index: 10000;    /* ...and here. this makes sure active item is always above anything else in the menu */
  29.     white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
  30.                             see http://www.tanfa.co.uk/css/articles/...popups-bug.asp for other stuff that work */
  31. }
  32.  
  33. .menu li li {
  34.     float: none;/* items of the nested menus are kept on separate lines */
  35. }
  36.  
  37. .menu ul {
  38.     visibility: hidden;    /* initially hide all submenus. */
  39.     position: absolute;
  40.     z-index: 10;
  41.     left: 0;    /* while hidden, always keep them at the bottom left corner, */
  42.     bottom: 0;        /*         to avoid scrollbars as much as possible */
  43. }
  44.  
  45. .menu li:hover>ul {
  46.     visibility: visible;    /* display submenu them on hover */
  47.     bottom: 100%;    /* 1st level go above their parent item */
  48. }
  49.  
  50. .menu li li:hover>ul {    /* 2nd+ levels go on the right side of the parent item */
  51.     bottom: 0;
  52.     left: 100%;
  53. }
  54.  
  55. /* -- float.clear --
  56.     force containment of floated LIs inside of UL */
  57. .menu:after, .menu ul:after {
  58.     content: ".";
  59.     height: 0;
  60.     display: block;
  61.     visibility: hidden;
  62.     overflow: hidden;
  63.     clear: both;
  64. }
  65. .menu, .menu ul {    /* IE7 float clear: */
  66.     min-height: 0px;
  67.     padding-right: 60px;
  68. }
  69. /* -- float.clear.END --  */
  70.  
  71. /* sticky submenu: it should not disappear when your mouse moves a bit outside the submenu
  72.     YOU SHOULD NOT STYLE the background of the ".menu UL" or this feature may not work properly!
  73.     if you do it, make sure you 110% know what you do */
  74. .menu ul {
  75.     background-image: url(empty.gif);    /* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
  76.     padding: 30px 30px 10px 30px;
  77.     margin: 0 0 -10px -30px;
  78.     /*background: #f00;*/    /* uncomment this if you want to see the "safe" area.
  79.                                 you can also use to adjust the safe area to your requirement */
  80. }
  81. .menu ul ul {
  82.     padding: 30px 30px 30px 10px;
  83.     margin: 0 0 -30px -10px;
  84. }
  85.  
  86.  
  87. /* - - - ADxMenu: DESIGN styles - - - */
  88.  
  89. .menu, {
  90.     background:#6666 /*16px*/;
  91.     background-image: url(http://www.intranet.com/newintranet/...u/footer.jpg);    
  92.  
  93. }
  94.  
  95. .menu ul li {
  96.     background:#999 /*16px*/;
  97.  
  98.     }
  99.  
  100. .menu ul {
  101.     width: 11em;
  102.  
  103. }
  104.  
  105. .menu a {
  106.     text-decoration: none;
  107.     color: #fff;
  108.     padding: .4em 1em;
  109.     display: block;
  110.     position: relative;
  111. }
  112.  
  113. .menu a:hover, .menu li:hover>a {
  114.     color: #fff;
  115. }
  116.  
  117. .menu li li {    /* create borders around each item */
  118.     border: 1px solid #ccc;
  119.  
  120. }
  121. .menu ul>li + li {    /* and remove the top border on all but first item in the list */
  122.     border-top: 0;
  123. }
  124.  
  125. .menu li li:hover>ul {    /* inset 2nd+ submenus, to show off overlapping */
  126.     bottom: 0px;
  127.     left: 90%;
  128. }
  129.  
  130. /* special colouring for "Main menu:", and for "xx submenu" items in ADxMenu
  131.     placed here to clarify the terminology I use when referencing submenus in posts */
  132. .menu>li:first-child>a, .menu li + li + li li:first-child>a {
  133.     color: #fff;
  134. }
  135.  
  136. /* - - - ADxMenu: DESIGN styles - - - */
  137.  
  138. .menu ul a {    /* fix clickability-area problem */
  139.     zoom: 1;
  140. }
  141.  
  142. .menu li li {    /* fix white gap problem */
  143.     float: left;
  144.     width: 100%;
  145. }
  146.  
  147. .menu li li {    /* prevent double-line between items */
  148.     margin-top: -1px;
  149. }
  150.  
  151. .menu a:hover, .menu .adxmhoverA {        /* li:hover>a selector */
  152.     color: #fff;
  153. }
  154.  
  155. .menu .adxmhoverUL .adxmhoverUL {    /* inset 2nd+ submenus, to show off overlapping */
  156.     bottom: 0px;
  157.     left: 90%;
  158. }
  159.  
  160.  
  161.  
  162. </style>
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,561
#3: 4 Weeks Ago

re: Same version of IE giving me issues?

None of that does us any good without the html.
Member
  
Join Date: Apr 2009
Posts: 36
#4: 4 Weeks Ago

re: Same version of IE giving me issues?

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

« previous question | next question »

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,295 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved