[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2170
  • Last Modified:

Hidding horizontal scroll bar in Joomla template - IE7

Hi everyone, I'm trying to hide an horizontal scroll in Internet Explorer 7 like seen in here:

www.kiddo-safety.com

I'm using a Joomla template for 1.5 version and the template_css.css is in the code section.

Thanks in advance
João Ribeiro
body{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	overflow-x:hidden;
}
 
a, a:link, a:visited{
	color:#DDE941;
	text-decoration:none;
}
 
a:hover{
	color:#0000CC;
}
 
#header ul.menu{
	margin:0px;
	padding:0px 26px 0px 0px;
	float:right;
}
 
#header ul.menu li{
	margin:0px;
	padding:0px;
	list-style:none;
	float:left;
	height:173px;
	width:93px;
	font-size:24px;
	text-align:center;
	color:#FFFFFF;
	text-transform:lowercase;
}
 
#header ul.menu li{
	background-image: url(../images/menu_bg.png);
	background-repeat: no-repeat;
	background-position: center top;
}
 
#header ul.menu li a{
	color:#FFFFFF;
	text-decoration:none;
	padding:80px 0px 0px 0px;
	width:92px;
	height:30px;
	display:block;
}
 
#header ul.menu li.active a{
	color:#ff7c00;
}
 
#header ul.menu li:hover a{
color:#ff7c00;
}
 
 
span#active_language {
	border-bottom:2px solid #DDE941;
}
/*bottom menu*/
#bottom_menu ul.menu{
	margin:0px;
	padding:0px 0px 0px 0px;
	z-index:100;
	/*float:right;*/
}
 
html>body #bottom_menu ul.menu { 
     *margin:-7px;
}
 
#bottom_menu ul.menu li{
	margin:0px;
	padding:0px 0px;
	list-style:none;
	/*float:left;*/
	z-index:100;
}
 
html>body #bottom_menu ul.menu li{ 
     *margin:-7px;
} 
 
#bottom_menu ul.menu li{
	z-index:100;
}
 
#bottom_menu ul.menu li a{
	color:#FF7700;
	font-size:26px;
	text-decoration:none;
	padding:70px 0px 0px 0px;
	width:185px;
	height:79px;
	display:block;
	background-image: url(../images/bottom_mnu_p.png);
	background-repeat: no-repeat;
	background-position: center top;
	text-align:center;
	text-transform:lowercase;
	z-index:100;
}
 
* html #bottom_menu ul.menu li a{
	color:#FF7700;
	font-size:26px;
	text-decoration:none;
	padding:70px 0px 0px 0px;
	width:185px;
	height:79px;
	display:block;
	background-image: url(../images/menu_small.png);
	background-repeat: no-repeat;
	background-position: center top;
	text-align:center;
	text-transform:lowercase;
	z-index:100;
}
 
* html #bottom_menu ul.menu li a:hover{
	/*color:#FF7700;
	font-size:26px;
	text-decoration:none;
	padding:70px 0px 0px 0px;
	width:185px;
	height:79px;
	display:block;*/
	background-image: url(../images/menu_big.png);
	padding:70px 0px 0px 0px;
	width:185px;
	height:79px;
	display:block;
	/*background-repeat: no-repeat;
	background-position: center top;
	text-align:center;
	text-transform:lowercase;*/
	z-index:100;
}
 
 
#bottom_menu ul.menu li a:hover{
	background-position: center -149px;
	padding:100px 0px 30px 0px;
	width:199px;
	z-index:100;
}
 
 
 
 
#bottom_menu .module ul.menu li a:hover{
	margin:0px -15px 0px 0px;
	z-index:100;
}
 
 
#bottom_menu .module-r ul.menu li a:hover{
	margin:0px 0px 0px -13px;
	z-index:100;
}
 
 
 
#bottom_menu {position:relative; z-index:101;}
#pngcontainer {position:absolute; top:0px; left:0px; width:100px; height:80px; z-index:0;}

Open in new window

0
joaocamposribeiro
Asked:
joaocamposribeiro
  • 3
  • 2
1 Solution
 
quincydudeCommented:
Can you try fixing the width of your page?
something like

body{
        font-family:Arial, Helvetica, sans-serif;
        font-size:12px;
        overflow-x:hidden;
        width: 800px;
}
0
 
joaocamposribeiroAuthor Commented:
Hi, thanks for the reply.

I'm afraid that the width property didn't work quite well 'cause the whole page became left aligned and the scroll was still there, so...

Any more help please?
0
 
quincydudeCommented:
does setting width: 100%;
gives the same result?
0
 
joaocamposribeiroAuthor Commented:
Yup. Only this time the template is still centered.

But the problem remains!
0
 
quincydudeCommented:
i have done some googling and find that it may be a bug in IE caused by the doctype tag

http://noscope.com/journal/2004/02/ie-horizontal-scrollbar-bug
http://lists.evolt.org/archive/Week-of-Mon-20020225/104213.html
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now