2 replies [Last post]
kmann
Offline
newbie
Last seen: 5 years 7 weeks ago
Timezone: GMT-4
Joined: 2009-09-02
Posts: 3
Points: 0

Hello,

This is my first time posting here. I have browsed the forums before and they are great!! Sadly I can not find the answer to the problem that I am having now so hopefully you guys will be able to help me figure it out!

I am building this within a content management system called KenticoCMS ( kentico.com This is the first time that I have come across this issue. Any browser on my mac is rendering differently from the one in windows. It is only in regards to the menu system. I have 2 menus. The primary over the banner which is a "mega menu". The second is just a regular horizontal menu with a small accent (A yellow bullet). It seems like the padding is larger on the pc then the mac. On the pc they align perfectly across but on the mac one menu is not fully stretched out like it should be. If I fully stretch it out then the pc browser's menu drops to the next line because it is too big.

In the past if I render something in firefox mac it renders the same on firefox win. (and vise versa, there are some small things that are a bit different with the font, but when it comes to aligning things they align properly)

The mega menu code was taken from the following site. It was altered visually to work with my site.

http://www.sitepoint.com/blogs/2009/03/31/make-a-mega-drop-down-menu-with-jquery/

These are the following things that I did (Maybe I missed something??)

- I verified the version of Firefox, Opera and Safari on both my mac and pc and they are the same versions
- I verified that all my divs were properly closed
- I put my code through the css validator and the only issues it brought up were the underscore "_" IE6 hacks. I put them there because they were small padding changes etc. (would that cause the issue, there were about 8 of them?) The rest of the css was considered to be correct with no errors.
- I have tried to find some sort of way to trigger only the mac browsers but there was no luck. They are all intertwined with their pc counterpart.
- have tried it with em, % and px form but that did not change how it rendered

here are a few screen shots of what I am talking about. I used firefox but this difference with how the css is rendered between the two operating systems is the same for Safari and Opera.

How it is rendered on the pc platform

How it is rendered on the mac platform

Here is html code for the top menu

<div class="wrapper">
<ul id="menu">
    <li class="mega">
    <h2><a href="#">Solutions</a></h2>
    <div>
    <h3>Transportation</h3>
    <p></p>
    <h3>Construction</h3>
    <p></p>
    <h3>Oil And Gas</h3>
    <p></p>
    <h3>Distribution Centres</h3>
    </div>
    </li>
    <li class="mega">
    <h2><a href="#">Products</a></h2>
    <div>
    <h3>Fleet Assistant</h3>
    <p></p>
    <h3>Fixed Asset Assistant</h3>
    <p></p>
    <h3>Remarketing Assistant</h3>
    <p></p>
    <h3>Parts Assistant</h3>
    <p></p>
    <h3>Sales Config Assistant</h3>
    <p></p>
    <h3>Software As A Service</h3>
    </div>
    </li>
    <li class="mega">
    <h2><a href="#">Services</a></h2>
    <div>
    <h3>Training/Support</h3>
    <p></p>
    <h3>Implementation Services</h3>
    <p></p>
    <h3>Integration Services</h3>
    <p></p>
    <h3>Professional Services</h3>
    <p></p>
    <h3>Hosting Services</h3>
    </div>
    </li>
    <li class="mega">
    <h2><a href="#">Technology</a></h2>
    <div>
    <h3>Our Technology</h3>
    <p></p>
    <h3>System Integration Framework</h3>
    <p></p>
    <h3>Mobile Technology</h3>
    <p></p>
    <h3>Security</h3>
    <p></p>
    <h3>Barcoding</h3>
    </div>
    </li>
    <li class="mega">
    <h2><a href="#">Clients</a></h2>
    <div>
    <h3>About Our Clients</h3>
    <p></p>
    <h3>Case Studies</h3>
    <p></p>
    <h3>Testimonials</h3>
    </div>
    </li>
    <li class="megaRight">
    <h2><a href="#">About</a></h2>
    <div>
    <h3>Who We Are</h3>
    <p></p>
    <h3>What We Do</h3>
    <p></p>
    <h3>The Difference</h3>
    <p></p>
    <h3>Our Partners</h3>
    <p></p>
    <h3>Join Our Team</h3>
    </div>
    </li>
</ul>
<p><a name="content" id="content"></a></p>
</div>

CSS - Pri Menu

ul#menu {
	width: 900px;
	color: #fff;
	margin: 0;
	padding: 5px 0px;
	position: relative;
	padding-top: 15px;
}
 
 
ul#menu li {
	display: inline;
	margin: 1px 12px;
	position: relative;
	z-index: 2000;
}
 
ul#menu h2 {
	font-size: 14px;
	font-weight: bold;
        text-transform: uppercase;
	display: inline;
	padding-left: 17px; 
}
 
ul#menu h3
{
	font-size: 100%;
	font-weight: normal;
	display: inline;
}
 
ul#menu li a {
	color: #fff;
	text-decoration: none;
	padding: 0 5px;
}
 
ul#menu li a:hover {
	text-decoration: underline;
}
 
ul#menu li.mega a {
	/*background: transparent url(arrow.gif) center right no-repeat;*/
	padding: 0 14px;
}
 
ul#menu li.mega a:hover {
	text-decoration: underline;
}
 
ul#menu div {
	display: none;
}
 
ul#menu li.mega div {
	border: 1px solid #dda;
	width: 216px;
	position: absolute;
	top: 35px;
	left: 0px;
	padding: 16px;
	background: #ffc;
	color: #930;
}
 
ul#menu li.megaRight div {
	border: 1px solid #dda;
	width: 216px;
	position: absolute;
	top: 35px;
	left: -125px;
        left: -115px\9; /*IE8*/
	padding: 16px;
	background: #ffc;
	color: #930;
}
 
ul#menu li.hovering div {
	display: block;
}
 
ul#menu li.mega div a {
	color: #300;
	padding: 0;
	background-image: none;
	text-decoration: underline;
}
 
ul#menu li div a.more {
	color: #960;
	font-weight: bold;
}
 
ul#menu div h3 {
	color: #000;
	font-weight: bold;
	font-size: 13px;
}
ul#menu div p {
	margin: 0 0 10px 0;
	padding: 0;
}

Html Code for Secondary menu

<div class="wrapper">
<ul class="secNav">
    <li><a href="#">Executive</a></li>
    <li><a href="#">Fleet Manager</a></li>
    <li><a href="#">Shop Supervisor</a></li>
    <li><a href="#">Functional Manager</a></li>
    <li><a href="#">Technician</a></li>
</ul>
</div>

CSS - Sec Menu

ul.secNav {
	width: 900px;
	padding-top: 16px;
	list-style: none;
        margin-left: 0px;
        padding-left: 42px;
}
 
ul.secNav, x:-moz-any-link, x:default {
	/*text-align: center;*/ /*Firefox 3*/
	margin-left: 4px;
}
 
* html ul.secNav {
	margin-left: 1px; /*IE6, IE5*/
}
 
*:first-child+html ul.secNav { 
	margin-left: -20px;  /*IE7*/   
}
 
@media screen and (-webkit-min-device-pixel-ratio:<img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" /> {
	ul.secNav {margin-left: -2px;} /*Safari, Chrome*/
}
 
ul.secNav li{
	display: inline;
}
 
.secNav li{
	background: transparent url(../App_Themes/CetarisSite/Images/yellowBullet.gif) no-repeat 0 2px;
	padding-left: 17px;
	padding-right: 45px;
}
 
.secNav li, x:-moz-any-link, x:default {
	padding-right: 52px; /*Firefox 3*/
}
 
*:first-child+html .secNav li { 
	padding-right: 45px;  /*IE7*/   
}
 
* html .secNav li {
	padding-right: 45px;  /*IE6, IE5*/
}
 
@media screen and (-webkit-min-device-pixel-ratio:<img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" /> {
	.secNav li {padding-right: 51px;} /*Safari, Chrome*/
}
 
 
 
ul.secNav a {
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
}

.wrapper code css

.wrapper {
        width: 900px;
	margin: 0 auto;
	padding: 0px;
	text-align: left; /* IE5 wrapper center fix - "text-align: center" found in body */
	border-left: #000 solid 1px;
	border-right: #000 solid 1px;
}

Thanks a bunch!!

Kristina

kmann
Offline
newbie
Last seen: 5 years 7 weeks ago
Timezone: GMT-4
Joined: 2009-09-02
Posts: 3
Points: 0

forgot to add something!

here is the javascript code

 <script type="text/javascript" charset="utf-8">
//<![CDATA[
    $(document).ready(function() {
 
      function addMega(){
        $(this).addClass("hovering");
        }
 
      function removeMega(){
        $(this).removeClass("hovering");
        }
 
    var megaConfig = {
         interval: 500,
         sensitivity: 4,
         over: addMega,
         timeout: 500,
         out: removeMega
    };
 
    $("li.mega").hoverIntent(megaConfig)
 
    $("li.megaRight").hoverIntent(megaConfig)
 
    });
 
 
    //]]>
 </script>

I used the jquery files that were in the tutorial for the primary menu - "jquery-1.3.2.min.js" and "jquery.hoverIntent.minified.js"

kmann
Offline
newbie
Last seen: 5 years 7 weeks ago
Timezone: GMT-4
Joined: 2009-09-02
Posts: 3
Points: 0

forgot to add something!

here is the javascript code

//<![CDATA[
    $(document).ready(function() {
 
      function addMega(){
        $(this).addClass("hovering");
        }
 
      function removeMega(){
        $(this).removeClass("hovering");
        }
 
    var megaConfig = {
         interval: 500,
         sensitivity: 4,
         over: addMega,
         timeout: 500,
         out: removeMega
    };
 
    $("li.mega").hoverIntent(megaConfig)
 
    $("li.megaRight").hoverIntent(megaConfig)
 
    });
 
 
    //]]>

I used the jquery files that were in the tutorial for the primary menu - "jquery-1.3.2.min.js" and "jquery.hoverIntent.minified.js"