Firefox and Chrome Positioning in Windows Works - Mac Doesnt

Question

theonlylos 0 Newbie Poster

12 Years Ago

On my clients website located at cjcdigital.net/clients/andrea I am having an issue with the CSS code where I managed to make the top navigation and sidebar (the social media buttons) work near perfectly with CSS - the top nav uses absolute positioning while the side nav first used absolute and now is relative - when using Firefox, Chrome, Opera, and IE on Windows

When viewed on a Mac however - in particular Firefox and Chrome (the report came from my client so I don't know about other browsers - although Adobe Browserlab showed perfection on Macs) the side navigation is set far to the right while the top nav is pulled to the far left.

Any assistance with this issue is greatly appreciated.

html-css microsoft web-browser web-design

2 Contributors
2 Replies
238 Views
1 Day Discussion Span
Latest Post 12 Years Ago Latest Post by theonlylos

almostbob 866 Retired: passive income ROCKS

12 Years Ago

post code

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

theonlylos 0 Newbie Poster Team Colleague · Answer 1 · 2012-04-09T03:13:58+00:00

Hello sorry for the late reply below is the code,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Musee | </title>

</head>

<div id="header">
        <div id="searchbar">
            <form method="get" id="searchform" action="http://cjcdigital.net/clients/andrea/">

        </div><!-- #searchbar -->
    <div id="branding" class="clearfix">
        <div class="logo">
                                <span class="logo">
                    <a href="http://cjcdigital.net/clients/andrea"><img src="http://cjcdigital.net/clients/andrea/wp-content/themes/musee/images/logo.png" width: "1020px"; height: "218px"; alt="" /></a>
                </span>
                <h2 class="blog-description"></h2>
                        </div><!-- .logo -->

    </div><!-- #branding -->
</div><!-- #header -->

    <div id="main">  <span id="headerMenu">
<ul>
    <li><a id="magazine" href="http://cjcdigital.net/clients/andrea/magazine-components/magazine/" title="Magazine"><span>Magazine</span></a></li>
    <li><a id="features" href="http://cjcdigital.net/clients/andrea/magazine-components/features/" title="Features"><span>Features</span></a></li>
    <li><a id="editorPicks" href="http://cjcdigital.net/clients/andrea/magazine-components/editor-picks/" title="Editor Picks"><span>Editor Picks</span></a></li>
    <li><a id="artOut" href="http://cjcdigital.net/clients/andrea/magazine-components/art-out/" title="Art Out"><span>Art Out</span></a></li>
    <li><a id="questionAnswer" href="http://cjcdigital.net/clients/andrea/magazine-components/qa/" title="Q&A"><span>Q&A</span></a></li>
    <li><a id="photoWeek" href="http://cjcdigital.net/clients/andrea/magazine-components/photo-of-the-week/" title="Photo of the Week"><span>Photo of the Week</span></a></li>
    <li><a id="partners" href="http://cjcdigital.net/clients/andrea/magazine-components/partners/" title="Partners"><span>Partners</span></a></li>
    <li><a id="submit" href="http://cjcdigital.net/clients/andrea/magazine-components/submit/" title="Submit"><span>Submit</span></a></li>
    <li><a id="contact" href="http://cjcdigital.net/clients/andrea/magazine-components/contact/" title="Contact"><span>Contact</span></a></li>
</ul>
</span>

    <div id="container" >

<div id="content" class="section">
<ul class="breadcrumbs clearfix" id="breadcrumbs"><li class="notice">You are Here:</li><li><strong></strong></li></ul><script type="text/javascript">
jQuery('html').addClass('smooth_slider_fouc');
jQuery(document).ready(function() {
jQuery(".smooth_slider_fouc .smooth_sliderb").css({'display' : 'block'});
});
function smooth_slider_initCallback(carousel) {
jQuery('#smooth_slider .jcarousel-control a').bind('click', function() {
var navclass = jQuery(this).attr("class");
var slide = navclass.replace("sldr", "");
carousel.scroll(jQuery.jcarousel.intval(slide));
carousel.startAuto(0);
return false;
});
// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
function smooth_slider_itemFirstInCallback(carousel, jitem, idx, state) {
jQuery("#smooth_slider .jcarousel-control a").css("fontWeight", "normal");
jQuery("#smooth_slider .jcarousel-control a").css("fontSize", "12px");
var curr_slide = idx;
jQuery("#smooth_slider .jcarousel-control a.sldr"+curr_slide).css("fontWeight", "bolder");
jQuery("#smooth_slider .jcarousel-control a.sldr"+curr_slide).css("fontSize", "17px");

};

jQuery(document).ready(function() {
jQuery("#smooth_slider").jcarousel({
size: 2,
scroll: 1,
visible: 1,
auto:7,
wrap:"last",
animation:500,
initCallback: smooth_slider_initCallback,
itemVisibleInCallback:{ onAfterAnimation:smooth_slider_itemFirstInCallback }
,
buttonPrevHTML:null,
buttonNextHTML:null });
});

</script>
<noscript><p><strong>This page is having a slideshow that uses Javascript. Your browser either doesn't support Javascript or you have it turned off. To see this page as it is meant to appear please use a Javascript enabled browser.</strong></p></noscript>
<div id="smooth_slider" class="jcarousel-skin-default smooth_slider">
<ul class="smooth_sliderb">
<li class="smooth_slideri"><div>
<a href="http://cjcdigital.net/clients/andrea/interview-with-trevor-pagien/" title="INTERVIEW with TREVOR PAGIEN"><img src="http://cjcdigital.net/clients/andrea/assets/trev_paglen_slider.jpg" alt="INTERVIEW with TREVOR PAGIEN" class="full smooth_slider_thumbnail" /></a>
</div></li><li class="smooth_slideri"><div>
<a href="http://cjcdigital.net/clients/andrea/interview-with-vincent-wolf/" title="INTERVIEW WITH VINCENT WOLF"><img src="http://cjcdigital.net/clients/andrea/assets/vincente_wolf_slider.jpg" alt="INTERVIEW WITH VINCENT WOLF" class="full smooth_slider_thumbnail" /></a>
</div></li> </ul>
<div class="sldr_clearlt"></div><div class="sldr_clearrt"></div>
</div>
</div>

<div id="primary" class="aside main-aside sidebar">
<ul class="xoxo">
<li><a id="facebook" href="#" title="Friend Us"><span>Facebook</span></a></li>
<li><a id="twitter" href="#" title="Follow Us"><span>Twitter</span></a></li>
<li><a id="tumblr" href="#" title="Tumble Us"><span>Tumblr</span></a></li>
<li><a id="rss" href="#" title="Subscribe to Us"><span>Subscribe via RSS</span></a></li>
<li><a id="email" href="#" title="Subscribe via Email"><span>Subscribe via eMail</span></a></li>
</ul>

</div><!-- #primary -->

</ul>

</div><!-- #secondary --><div class="hfeed news-list clearfix">
<div class="post-190 post type-post status-publish format-standard hentry category-uncategorized clearfix article"       <h1><h4 class="entry-title"><a title="Permalink to INTERVIEW WITH VINCENT WOLF" href="http://cjcdigital.net/clients/andrea/interview-with-vincent-wolf/" rel="bookmark">INTERVIEW WITH VINCENT WOLF</a></h4></h1>
    <div class="entry-summary">Vincent Wolf Interview:

AB: How long have you been collecting?

VW: I’ve been collecting photography for the last 30-35 years. I started collecting when Richard Avedon said to my former partner and I, “Gee! You should start collecting photography because it’s the thing of the future.”

AB: What was the first piece you...</div><a class="more-link" href="http://cjcdigital.net/clients/andrea/interview-with-vincent-wolf/">Read More</a> </div>
<div class="post-129 post type-post status-publish format-standard hentry category-uncategorized clearfix article" <h1><h4 class="entry-title"><a title="Permalink to INTERVIEW with TREVOR PAGIEN" href="http://cjcdigital.net/clients/andrea/interview-with-trevor-pagien/" rel="bookmark">INTERVIEW with TREVOR PAGIEN</a></h4></h1>
<div class="entry-summary">...</div><a class="more-link" href="http://cjcdigital.net/clients/andrea/interview-with-trevor-pagien/">Read More</a> </div>
<div class="post-124 post type-post status-publish format-standard hentry category-uncategorized clearfix article" <h1><h4 class="entry-title"><a title="Permalink to MEET THE PHOTOGRAPHER: ANTHONY GOICOLEA" href="http://cjcdigital.net/clients/andrea/test-post/" rel="bookmark">MEET THE PHOTOGRAPHER: ANTHONY GOICOLEA</a></h4></h1>
<div class="entry-summary">In his well-crafted photographs, Anthony Goicolea explores the concepts of youth, homoeroticism, and identity. He serves as his own model, playing multiple characters who all appear in the same photograph. Goicolea uses digital manipulation in a way that does not call attention to itself but rather reflects his aesthetic and...</div><a class="more-link" href="http://cjcdigital.net/clients/andrea/test-post/">Read More</a> </div>
</div>

</div>

    </div><!-- #main -->

<div id="footerContainer">
<div id="footer">
    <div class="footer-message">
                </div>
</div><!-- #footer -->

<script type='text/javascript' src='http://cjcdigital.net/clients/andrea/wp-content/plugins/contact-form-7/jquery.form.js?ver=2.96'></script>

    <hr class="footerLine" />
    <span id="footerNav"><div class="menu-footer-menu-container"><ul id="menu-footer-menu" class="menu"><li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://cjcdigital.net/clients/andrea/about/">About Us</a></li>

<li id="menu-item-110" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-110"><a href="http://cjcdigital.net/clients/andrea/work/">Work</a></li>
<li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="http://cjcdigital.net/clients/andrea/contributors/">Contributors</a></li>
<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://cjcdigital.net/clients/andrea/press/">Press</a></li>
<li id="menu-item-117" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-117"><a href="http://cjcdigital.net/clients/andrea/media-kit/">Media Kit</a></li>
<li id="menu-item-120" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-120"><a href="http://cjcdigital.net/clients/andrea/privacy/">Privacy</a></li>
</ul></div></span>
<hr class="footerLine" />
<div id="custFooter">
<br /><br />
ALL IMAGES TADEMARKS AND TRADE NAMES ARE THE PROPERTY OF THEIR RESPOECTIVE TRADEMARK HOLDERS<br />
&copy MUSÉE; 2012, ALL RIGHTS RESERVED. PUBLISHED BY MUSÉE<br />
Website built by <a href="http://www.cjcDigital.com">CJC Digital, LLC</a>
</div>
</div>
</div>
</body>
</html>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Served from: cjcdigital.net @ 2012-04-09 03:06:07 -->