By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,338 Members | 1,596 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,338 IT Pros & Developers. It's quick & easy.

List Item Background Colour in Internet Explorer

KeredDrahcir
100+
P: 426
I'm using a list as a menu and it works fine in Firefox, Google Chrome, Safari and Opera but there are wierd results in Internet Explorer.

There is one problem in IE 8 and IE 9 which I can live with but in IE 8 the selected menu item is supposed to be white and it appears white for about a second and then goes to blue.
Expand|Select|Wrap|Line Numbers
  1. <div style="width: 980px; height: 42px;">
  2. <div class="mainmenu">
  3. <ul>
  4.     <li style="background-color: #ffffff; color: #7dc5f1; font-size: 11pt; font-weight: bold; height: 31px; padding: 11px 17px 0 16px; text-decoration: none; -moz-border-radius: 8px 8px 0 0; -webkit-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; behavior: url(/path/border-radius.htc); float: left;"><a href="link">Menu</a></li>
  5.     <li style="clear: both;"><a href="link">Menu</a></li>
  6.     <li><a href="link">Menu</a></li>
  7.     <li><a href="link">Menu</a></li>
  8.     <li><a href="link">Menu</a></li>
  9.     <li><a href="link">Menu</a></li>
  10.     <li><a href="link">Menu</a></li>
  11.     <li><a href="link">Menu</a></li>
  12.     <li style="float: right;"><a href="link" style="padding: 11px 16px 0;">Menu</a></li>
  13. </ul>
  14. </div>
  15. </div>
Expand|Select|Wrap|Line Numbers
  1. .mainmenu{
  2.     background-color:#3ca9e7;
  3. }
  4. .mainmenu li{
  5.     background-color:#3ca9e7;
  6. }
  7. .mainmenu li a{
  8.     color:#ffffff;
  9. }
  10. .mainmenu li:hover{
  11.     background-color: #3ca9e7;
  12. }
Does anyone know why this is?
Sep 14 '12 #1
Share this Question
Share on Google+
9 Replies


KeredDrahcir
100+
P: 426
Can anyone help? I am completely at a loss of what is causing this and I'm finding it's occuring more often. I seems to make no sense.
Oct 1 '12 #2

Rabbit
Expert Mod 10K+
P: 12,430
Did you specify a doctype?
Oct 1 '12 #3

KeredDrahcir
100+
P: 426
Yes. I always specify it as XHTML.
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Oct 3 '12 #4

P: 3
probably because the background-color:#3ca9e7; within your external css style sheet is a blue colour if you wanted it to be white then background colour in your css should be white. have you tried changing the colour within the external style sheet also can i ask why you have use inline css to style your <li> tag ??
Oct 3 '12 #5

Rabbit
Expert Mod 10K+
P: 12,430
Yeah, the code works fine for me on IE8. I just changed the hover color so that it's not the same as the background.
Oct 3 '12 #6

KeredDrahcir
100+
P: 426
I thought that inline styles overwrite the style sheet which was part of the reason I was using them.
Oct 11 '12 #7

Rabbit
Expert Mod 10K+
P: 12,430
It does. But you only applied the inline style to that first li element. Not all of them.
Oct 11 '12 #8

KeredDrahcir
100+
P: 426
That's becuase the first li element is the one that is selected. I've got it applied to second one on the second page, the third one on the third page and so on.
Nov 2 '12 #9

Rabbit
Expert Mod 10K+
P: 12,430
Yes, but that's exactly what I'm saying. Your inline style will only override that one element. That's why I had to change the hover color so it's not the same as the background to see that the code works fine.
Nov 2 '12 #10

Post your reply

Sign in to post your reply or Sign up for a free account.