0

As I need to display menu list items as horizontal in IE7 but it is displayed vertically.

Menu list items: enter image description here This is the image where menu list items are displayed vertically. If I use the float:left property then also it will not be displayed horizonatlly. What to do for this problem?

CSS is as follows:

.swMain ul.anchor {
  display: inline-block;
  list-style: none;
  padding-left: 0px;
  margin-top: 3px;
  float:left;
}
.swMain ul.anchor li{ 
  position:relative; 
  margin: 0;
  padding: -10px; 
  padding-top:0px;
  padding-bottom: 0px;
  clear:both;
  display:inline;
  float:left;   

}
.swMain ul.anchor li a {
  display:inline;
  margin:0;
  padding:0px;
  text-decoration: none;
  outline-style:none;
}
Antony
  • 14,900
  • 10
  • 46
  • 74
jeevan
  • 1
  • 1
  • 4
    IE 7? wow you are breaking your head for that 1.7% worldwide users! – Jorge Y. C. Rodriguez Jul 03 '13 at 05:44
  • 3
    You should only consider IE 9 / 10 and if you are a tough guy, then also consider IE 8. If you wanna suicide, then try IE 7 – Altaf Hussain Jul 03 '13 at 05:46
  • 2
    Maybe you could be a little more specific as to which CSS is not working? pasting the whole CSS file isn't very helpful. Also jycr753 is spot on! Forget IE7, its more than 10 years old.. – dcarson Jul 03 '13 at 05:46
  • http://stackoverflow.com/questions/6544852/ie7-does-not-understand-display-inline-block/6545033#6545033 – kapa Jul 05 '13 at 10:29

1 Answers1

0

The problem is, that IE7 does not support inline-block. Luckily there is an easy fix for that:

.swMain ul.anchor {
   *display: inline;
   zoom: 1;
}

The * infront of the display propertie makes sure, that it's understood only by IE7 and ignored by every other browser.

elveti
  • 2,316
  • 4
  • 20
  • 27