-
My Menu is not functional in IE< or = 6
My menu is fuctional in IE7, with a bug report, functional in Google crome, but malfunction in IE 6.
I have tried solving the problem, but haven't been successful. I know someone out there may have encountered a similar problem, or may just know how to solve it.
I really appreciate if you can view the page, to see the exact nature of the problem in IE, and proffer solution to it. http://www.viict.net
The last link item on the menu has duplicated without my knowledge of how it came about, only in IE6.
Please help, the css for the page, is:
/*
CSS Credit: http://www.templatemo.com/
*/
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
color: #333;
background: #FFF url(images/bg.jpg) repeat-x;
}
a:link, a:visited { color: #e18814; text-decoration: none; font-weight: bold;}
a:active, a:hover { color: #ffffff; }
h3 {
font-size: 14px;
color: #1f2947;
padding: 3px 0 5px 0;
margin: 0 0 10px 0;
}
p {
margin: 0px;
padding: 0px;
}
img {
margin: 0px;
padding: 0px;
border: none;
}
.cleaner {
clear: both;
width: 100%;
height: 1px;
font-size: 1px;
}
.rc_btn a {
float: right;
clear: both;
text-align: center;
display: block;
width: 103px;
padding: 4px 0 5px 0;
background: #333 url(images/btn.jpg) no-repeat;
color: #333;
font-weight: bold;
text-decoration: none;
}
.rc_btn a:hover {
color: #fff;
}
#container {
width: 980px;
margin: 0 auto;
}
#title {
width: 980px;
height: 100px;
background: url(images/title_bg.jpg) no-repeat;
}
#title #title {
color: #FFF;
width: 270px;
font-size: 32px;
margin: 0 0 0 100px;
padding: 60px 0 5px 0px;
font-weight: bold;
text-align: center;
}
#title #title1 {
color: #FFF;
width: 270px;
font-size: 32px;
margin: 0 0 0 100px;
padding: 60px 0 5px 0px;
font-weight: bold;
text-align: center;
}
/* menu */
#menu {
clear: both;
width: 960px;
height: 90px;
padding: 0px 10px;
background: url(images/menu_bg.jpg) no-repeat;
}
#menu ul {
padding: 13px 0 0 0;
margin: 0;
list-style: none;
}
#menu ul li {
display: inline;
}
#menu ul li a {
float: left;
width: 160px;
padding: 10px 0;
text-align: center;
font-size: 20px;
font-weight: normal;
text-decoration: none;
background: url(images/menu_divider.jpg) right no-repeat;
color: #c0790b;
outline: none;
}
#menu li a:hover, #menu li .current {
color: #FFF;
}
#menu li .last {
background: none;
}
#menu li span {
display: block;
margin-top: 10px;
color: #666;
font-size: 12px;
font-weight: normal;
}
/* end of menu*/
/* banner */
#banner {
clear: both;
width: 960px;
height: 320px;
padding: 0 10px;
background: url(images/banner_bg.jpg) no-repeat;
}
/* end of banner */
/* content */
#content {
clear: both;
width: 960px;
padding: 0 10px;
position: relative;
background: url(images/content_bg.jpg) repeat-y;
}
#content .title {
font-size: 18px;
color: #ee9116;
padding: 3 0 10px 0;
margin: 0 0 10px 0;
}
#content #bottom_bg {
clear: both;
width: 980px;
height: 30px;
margin-left: -10px;
left: 0px;
bottom: 0px;
background: url(images/content_bottom_bg.jpg) no-repeat;
}
#content #content_left {
float: left;
width: 265px;
margin: 20px 0 0 35px;
}
#content #content_left p {
text-align: justify;
padding-bottom: 8px;
}
#content #content_centre {
float: left;
width: 265px;
margin: 20px 0 0 35px;
}
#content #content_centre p {
text-align: justify;
padding-bottom: 8px;
}
#content_centre .testimonial_section {
text-align: center;
}
#content_centre .testimonial_section p {
font-size: 14px;
font-style: italic;
text-align:center
}
#content #content_right {
float: left;
width: 280px;
margin: 20px 0 0 30px;
}
#content_right .content_right_box {
width: 240px;
height: 129px;
padding: 20px 20px;
background: url(images/newsletter_box.jpg) no-repeat;
}
.content_right_box .box_title {
font-size: 18px;
color: #333;
padding: 3px 0 5px 0;
margin: 0 0 5px 0;
}
.content_right_box p {
line-height: 16px;
text-align: justify;
padding-bottom: 5px;
color: #FFF;
}
.content_right_box input {
margin-bottom: 10px;
}
/* end of content */
/* content */
#bottom_panel {
clear: both;
width: 930px;
padding: 40px 0 50px 40px;
background: #FFF url(images/bottom_section_bg.jpg) right bottom no-repeat;
}
#bottom_panel .bottom_section {
float: left;
margin-right: 40px;
width: 190px;
}
.bottom_section ul {
margin: 0px;
padding: 0px;
list-style: none;
}
.bottom_section li {
margin: 0px;
padding: 0 0 3px 0;
}
.bottom_section li a, a:hover, a:visited {
color: #333;
text-decoration: none;
font-weight: normal;
}
/* footer */
#footer {
clear: both;
width: 980px;
padding: 5px 0 20px 0;
text-align: center;
color: #333;
background-color: #FFF;
}
#footer a {
font-weight: normal;
}
/* end of footer */
Last edited by Pwisdom; 09-21-2009 at 12:37 PM.
-
-
Hi guys, it was a width problem with the menu.
I reduced the width to contain the list items more.
#menu ul li a {
float: left;
width: 160px;
padding: 10px 0;
text-align: center;
font-size: 20px;
font-weight: normal;
text-decoration: none;
background: url(images/menu_divider.jpg) right no-repeat;
color: #c0790b;
outline: none;
}
was changed to:
#menu ul li a {
float: left;
width: 155px;
padding: 10px 0;
text-align: center;
font-size: 20px;
font-weight: normal;
text-decoration: none;
background: url(images/menu_divider.jpg) right no-repeat;
color: #c0790b;
outline: none;
}
and that is not too bad for now.
Thank you all, surely you would have helped.
-
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
Bookmarks