For hours, I have been trying to fix a problem where IE 6, 7, and 8 don’t render the background-color of a div. In IE 7 and 8 the border does not get rendered at all.
It started not to work when I used the centering method described in Paul’s sticky http://www.pmob.co.uk/temp/centre-no-width5.htm. I chose Paul’s method as it displayed correctly in all the browsers and my method at the time id did not.
I wish I had a deep enough knowledge to remember all the IE bugs and gottchas!
To view the page the way it should work view it in Firefox.
I know that the script is getting a little div heavy and harder to understand due to the menu-ing however I hope you can recommend a way to resolve this.
The div#mega… sorry missed providing this essential piece.
When rolling over one of the main menu items such as home, benefits of membership… the sub menu div#mega appears. It is this div that the background and borders are not working.
I did correct the commented DTD; however it did not make a difference?
<div id='navigation'>
<ul id='main_menu' >
<li id='mm_home' class='mega'>
<h2><a href='http://www.aaro.ca/2010_new_site/index.php' title='A good place to learn about AARO'>Home<em></em></a></h2>
<div class='mega_menu curved'>
<div class='left_sub_col'>
<p class='shout'>A rich history <br />and bright future!</p>
<ul>
<li><a href='#history'>History</a></li>
<li><a href='#pledge'>Pledge</a></li>
<li><a href='#meet_board'>Meet the Board</a></li>
<li><a href='#contact_info'>Contact Info</a></li>
</ul>
</div>
</div>
</li>
<li id='mm_services' class="mega">
<h2><a href='#services' title='Get Industry influence, cost savings, insurance, advertising, training and events with AARO'>Benefits of Membership<em></em></a></h2>
<div class='mega_menu curved'>
<div class='left_sub_col'>
<h3><a href="#member_benefits_overview">Benefits of Membership</a></h3>
<p class='shout'>The power of a group!</p>
<ul>
<li><a class='bottom' href='#become_a_member'>Become a Member</a></li>
</ul>
<h3><a href="#membership">Features</a></h3>
<p class='shout'>Membership is packed with value!</p>
<ul>
<li><a href='#representation'>Representation</a></li>
<li><a href='#networking'>Networking</a></li>
<li><a href='#cost_savings'>Cost Saving Programs</a></li>
<li><a href='#insurance'>Insurance</a></li>
<li><a href='#training'>Training</a></li>
<li><a href='#marketplace'>Marketplace</a></li>
<li><a href='#events'>Events</a></li>
<li><a href='#advertising'>Advertising</a></li>
<li><a class='bottom' href='#rewards'>Rewards</a></li>
</ul>
</div>
<div class='right_sub_col'>
<h3><a href="#POS">Payment Processing Rates</a></h3>
<p class='shout'>Save Money On Your <br />
Payment Processing Rates!</p>
<ul>
<li><a href='#pos_overview'>Payment Processing Overview</a></li>
<li><a href='#pos_pac_download'>Download PDF Application</a></li>
</ul>
<h3><a href="#free_member_site">Free Member Website</a></h3>
<p class='shout'>Great for your corporate image while saving! </p>
</div>
</div>
</li>
<li id='mm_insurance' class='mega'>
<h2><a href='#training' title='AARO members get savings on group, commercial, home, auto and more insurance coverages.'>Insurance<em></em></a></h2>
<div class='mega_menu curved'>
<div class='left_sub_col'>
<h3><a href="#insurance_overview">Insurance Overview</a></h3>
<h3><a href="#group_benefit_plans">Group Benefit Plans</a></h3>
<p class='shout'>Cost savings on your insurance!</p>
<ul>
<li><a class='bottom' href='#group_benefits'>Health Coverage</a></li>
<li><a class='bottom' href='#commercial_insurance'>Dental Coverage</a></li>
</ul>
<h3><a href="#group_benefit_plans">Commercial</a></h3>
<p class='shout'>Servicing all your commercial insurance needs!</p>
<h3><a href="#POS">Residential & Auto</a></h3>
<p class='shout'>We cover your home and auto <br />
insurance including motorbikes </p>
<ul>
<li><a href='#home_insurance'>Home</a></li>
<li><a href='#auto_insurance'>Auto</a></li>
</ul>
</div>
<div class='right_sub_col'>
<h3><a class='bottom' href='#out_of_province'>Out of Province (only)</a></h3>
<p class='shout'>Going Out of Province or State Side? We have you covered.</p>
<h3><a class='bottom' href='#ad_and_d'>Accidental Death & Dismemberment</a></h3>
<p class='shout'>Protecting you and your family <br />
from unforeseen financial hardship.</p>
</div>
</div>
</li>
<li id='mm_training' class='mega'>
<h2><a href='#training' title='AAROs renowned automotive training'>Training<em></em></a></h2>
<div class='mega_menu curved'>
<div class='left_sub_col'>
<h3><a href="#training_overview">Training Overview</a></h3>
<h3><a href='#home_insurance'>Technical Training</a></h3>
<p class='shout'>Keep you skills sharp with accredited courses</p>
<ul>
<li><a href='#technical_courses'>Technical Courses</a></li>
<li><a href='#additional_courses'>Additional Courses</a></li>
<li><a href='#full_day_workshops'>Full Day Workshops</a></li>
<li><a href='#odp_card_training'>ODP Card Training</a></li>
<li><a href='#emissions_training'>Emissions Training</a></li>
<li><a href='#hybrid_training'>Hybrid Training</a></li>
<li><a href='#diesel_trainings'>Diesel Training</a></li>
</ul>
</div>
</div>
</li >
<li id='mm_marketplace' class='mega'>
<h2><a href='#marketplace' title='Leverage AARO advertising with classifieds, banner ads and traffic to your site.'>Marketplace<em></em></a></h2>
<div class='mega_menu curved'>
<div class='left_sub_col'>
<h3><a href="#insurance_overview">Marketplace Overview</a></h3>
<p class='shout'>Buy and sell goods and services
in one of Ontario's largest auto communities!</p>
<h3><a href="#group_benefit_plans">Aaro Classifieds</a></h3>
<p class='shout'>Many free classified options for AARO members!</p>
<ul>
<li><a href='#equipment_for_sale'>Equipment For Sale</a></li>
<li><a href='#advertise_real_estate'>Advertise Real Estate for Sale</a></li>
<li><a href='#advertise_services'>Advertise Your Services</a></li>
<li><a href='#want_to_buy'>Want To Buy</a></li>
<li><a class='bottom' href='#co-marketing_opportunities'>Co-marketing Opportunities</a></li>
</ul>
</div>
<div class='right_sub_col'>
<h3><a href="#group_benefit_plans">Advertising</a></h3>
<p class='shout'>Your services and products reaching a wider market</p>
<ul>
<li><a href='#banner_ads'>Banner Ads</a></li>
<li><a href='#earn_with_advertising'>Sell Advertising and Earn</a></li>
<li><a href='#request_a_media_kit'>Request a Media Kit</a></li>
<li><a href='#improve_traffic'>Improve Traffic to Your Website</a></li>
</ul>
</div>
</div>
</li>
<li id='mm_events' class='mega'>
<h2><a href='#events' title='AARO provides enriching opportunities to our members, while supporting charities and worthy causes.'>Events<em></em></a></h2>
<div class='mega_menu curved'>
<div class='left_sub_col'>
<h3><a href="#events_overview">Events Overview</a></h3>
<p class='shout'>Keeping our Auto community engaged and giving back!</p>
<ul>
<li><a href='#technical_courses'>Golf - Wallys</a></li>
<li><a href='#additional_courses'>ABM</a></li>
<li><a href='#full_day_workshops'>Women's Car Care Awareness</a></li>
<li><a href='#odp_card_training'>Member Events</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
And the css is:
/*menu widths*/
#mm_services div, #mm_insurance div, #mm_marketplace div {width: 460px}
.shout {
display:block;
font-weight: 600;
font-size: 1.1em;
text-align: left;
color: #f97907;
border-bottom: 1px dotted #274ab0;
margin-left: 5px;
margin-right: 5px;
padding-left: 5px;
margin-bottom: 5px;
}
ul#main_menu li div.mega_menu {
display: none;
text-align: left;
background-color: #ffffff;
}
ul#main_menu li.hovering div.mega_menu {
float: left;
background-color: #ffffff;
text-indent:0;
display: block;
border: 3px solid #0d2a7e;
padding: 10px;
margin-top: 1px;
min-height: 1%;
}
ul#main_menu li div.left_sub_col {
float: left;
width: 220px;
padding-right: 5px;
background-color: #ffffff;
}
ul#main_menu li div.right_sub_col {
float: right;
padding-left: 5px;
width: 220px;
border-left: 1px solid #c4c4c4;
background-color: #ffffff;
}
ul#main_menu li.hovering div a {
height: auto; /*needed to stop inheritance from the upper menu*/
}
ul#main_menu li.hovering div h3 {
font-size: 1.3em;
margin-bottom: 5px;
}
ul#main_menu li.hovering div ul li {
font-size: 1.1em;
display: inline;
visibility: visible;
}
.bottom {
margin-bottom: 5px;
}
ul#main_menu li div h3 a, ul#main_menu li div ul li a {
color: #6c4a55;
}
ul#main_menu li.hovering div ul li a {
color: #6c4a55;
}
ul#main_menu li.hovering div h3 a:link, ul#main_menu li.hovering div ul li a:link {
color: #6c4a55;
}
ul#main_menu li.hovering div h3 a:visited, ul#main_menu li.hovering div ul li a:visited {
color: #6c4a55;
}
ul#main_menu li.hovering div h3 a:hover, ul#main_menu li.hovering div ul li a:hover {
background: #c8b4be;
color: #632127;
}
ul#main_menu li.hovering div ul li {
text-indent: 15px;
position: relative;
height: auto;
}
.shout {
display:block;
font-weight: 600;
font-size: 1.1em;
text-align: left;
color: #f97907;
border-bottom: 1px dotted #274ab0;
margin-left: 5px;
margin-right: 5px;
padding-left: 5px;
margin-bottom: 5px;
}
.curved {
-moz-border-radius:10px;
-webkit-border-radius:10px;
behavior:url(border-radius.htc);
border-radius: 10px;
behavior:url(./scripts/border-radius.htc);
}
I wrote a little javascript that simply puts position:relative and left: ?
function keepMenuLeft(){
var div_width = $("li.hovering div").width();
var screen_width = $(window).width();
var offset = $("li.hovering div").offset();
var left = 0;
if (offset.left + div_width > screen_width) {
left = (offset.left + div_width) - screen_width;
left = 0 -left - 30; //extra 30 (px) account for padding and margins
left = left + "px";
$("li.hovering div.mega_menu").css('left',left);
$("li.hovering div.mega_menu").css('position','relative');
}
}
Posted an image in the previous post. It’s something your php would do, or a script. Look for background: none transparent scroll repeat 0% 0% in them.
I have this javascript and I comment out the keepMenuLeft() function I created and the background is still not working. This keepMenuLeft() function is the only thing I have that puts an inline style as it is designed to see when a menu appears off-screen and shifts it the appropriate distance to the left so it is full seen?
$(document).ready(function() {
function addMega(){
$(this).addClass("hovering");
keepMenuLeft();
}
function removeMega(){
$(this).removeClass("hovering");
removeKeepMenuLeft();
}
var megaShowConfig = {
interval: 300,
sensitivity: 4,
over: addMega,
timeout: 500,
out: removeMega
};
function removeKeepMenuLeft(){
//clear inline styles for next hover new position
$('.mega_menu').each(function(idx,el){
el.style.left='';
});
$('.mega_menu').each(function(idx,el){
el.style.position='';
});
}
function keepMenuLeft(){
var div_width = $("li.hovering div").width();
var screen_width = $(window).width();
var offset = $("li.hovering div").offset();
var left = 0;
if (offset.left + div_width > screen_width) {
left = (offset.left + div_width) - screen_width;
left = 0 -left - 30; //extra 30 (px) account for padding and margins
left = left + "px";
$("li.hovering div.mega_menu").css('left',left);
$("li.hovering div.mega_menu").css('position','relative');
}
}
$("li.mega").hoverIntent(megaShowConfig)
});
In my last post I put the entire javascript function. The only inline styles that it sets are position:relative and left: ?px where ? is a dynamically calculated pixel value.
The problem is that the border-radius.htc won’t work on hovered elements or elements that are moved after they have been drawn. If you initially set the element to display:block instead of display:none (and add the other properties) then the borders will show correctly so you can see it is working. However when you set them to display:none and then display:block on hover they don’t get drawn.
ul#main_menu li.hovering div h3 a {
float: left;
width: 210px;
}
as it too was doing the appear on hover act.
I am not sure, but I may have another bug? On my test machine (a virtual box) that is running IE.8 and IE tester for IE.6 and .7 when I first load the page the div.stretchbg does not show the image. When I scroll the web page so that the menu is not seen and then scroll back the div.stretchbg is displayed.
I say I don’t know if this is a bug as I tested this using remote desktop to a real windows machine and this did not happen on I.E8, yet I have a vague remembrance of a bug in IE like this?
I couldn’t see a problem in IEtester which usually shows all he bugs. I didn’t try clearing the cache so it may a be a first load type of thing but it didn’t sound like you were saying that was the case.
I do see a massive scrollbar in IE6 and 7 caused by your shadow div which has not had a left position set and therefore IE starts it half way across the page and causes a scrollbar.
You also have a couple of typo in the stretchbg rules (extra colon) and position spelled incorrectly in the other rule below.
Thanks for the feedback on the IE.6 -> IE.8 and also for the tidying up!
The menu’s are now working and the rest of the page{s} are cooperating with many thanks to your help.
I will attempt to learn and recognize the types of bugs that tend to plague me, so I don’t ask about them every time as well as continue to try to simplify and make my site more assessable like you {paul}. Stomme poes, Ralph M, Ryan R,… have and do advocate!
