Announcement

Collapse
No announcement yet.

Styles work great in FF and Chrome, but are a disaster in IE

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • [vB4] Styles work great in FF and Chrome, but are a disaster in IE

    Website: www.madcastgaming.com

    Everything looks and functions 100% as desired when viewing the site in Firefox and Google Chrome. Viewing the website with Internet Explorer displays a very different picture. This looks entirely like a CSS issue, but I am at a loss as to how to fix it. I can clearly see the various ***-ie.css files within the templates, but I never bothered to touch or edit those.

    For a few days I was using the setting of "Store CSS Stylesheets as Files?" as Yes. However I fully figured out the finding and adjusting of the StyleVars within the AdminCP of VB and have turned that setting back to No. The styles are working and holding when viewing from FF and Chrome, but I cannot account for what happened to the IE view of the site.

    I see the option in Maintenance > General Update Tools > Rebuild Styles

    I haven't ran that for fear of potentially ruining the current working browsers.

    If it were a problem with the templates then the issue would be present across all browsers, but since it's only within IE that the site looks the way it does, it then tells me that it's a CSS issue somewhere.

    Any ideas or steps to go about figuring out how to fix the IE version of the site?

    Edit: Sorry forgot to include that this is version 4.2.0
    Last edited by jfmaday; Thu 12 Jul '12, 6:52pm.

  • #2
    First you have to decide what version of IE... Each one can do things radically different. We don't officially support IE6 or IE7 anymore so those would have the most problems. What version of IE are you using?

    The biggest issue that I see though is that you removed the </div> from the navbar template that closes the above_body DIV opened in the header template.
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud demonstration site.
    vBulletin 5 API

    Comment


    • #3
      I am viewing in IE 8/9. I will get that bit in the navbar fixed asap.

      Here is the entirety of the navbar template code:

      Code:
      <div id="navbar" class="navbar">
      	<ul id="navtabs" class="navtabs floatcontainer<vb:if condition="$show['member'] AND $notifications_total"> notify</vb:if>">
      		{vb:raw template_hook.navtab_start}
      		{vb:raw navigation}
      		{vb:raw template_hook.navtab_end}
      	</ul>
      	<vb:if condition="$vboptions['enablesearches']">
      		<div id="globalsearch" class="globalsearch">
      			<form action="search.php?{vb:raw session.sessionurl}do=process" method="post" id="navbar_search" class="navbar_search">
      				<vb:comment><input type="hidden" name="s" value="{vb:raw session.sessionurl}" /></vb:comment>
      				<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
      				<input type="hidden" name="do" value="process" />
      				<span class="textboxcontainer"><span><input type="text" value="" name="query" class="textbox" tabindex="99"/></span></span>
      				<span class="buttoncontainer"><span><input type="image" class="searchbutton" src="{vb:stylevar imgdir_button}/search<vb:if condition="$stylevar['textdirection'] == 'rtl'">_rtl</vb:if>.<vb:if condition="is_browser('ie') AND !is_browser('ie', 7)">gif<vb:else />png</vb:if>" name="submit" onclick="document.getElementById('navbar_search').submit;" tabindex="100"/></span></span>
      			</form>
      			<ul class="navbar_advanced_search">
      				<li><a href="search.php{vb:raw session.sessionurl_q}" accesskey="4">{vb:rawphrase advanced_search}</a></li>
      				{vb:raw template_hook.navbar_advanced_search}
      			</ul>
      		</div>
      	</vb:if>
      </div>
      </div><!-- closing div for above_body -->
      
      
      <div class="body_wrapper">
      <div id="breadcrumb" class="breadcrumb">
      	<ul class="floatcontainer">
      		<li class="navbithome"><a href="index.php{vb:raw session.sessionurl_q}" accesskey="1"><img src="{vb:stylevar imgdir_misc}/navbit-home.png" alt="{vb:rawphrase home}" /></a></li>
      		{vb:raw navbits.breadcrumb}
      		{vb:raw navbits.lastelement}
      	</ul>
      	<hr />
      </div>
      
      
      {vb:raw ad_location.ad_navbar_below}
      {vb:raw ad_location.global_below_navbar}
      
      
      <vb:if condition="$show['notices'] AND THIS_SCRIPT != 'register'">
      	<form action="profile.php?do=dismissnotice" method="post" id="notices" class="notices">
      		<input type="hidden" name="do" value="dismissnotice" />
      		<input type="hidden" name="s" value="{vb:raw session.sessionurl}" />
      		<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
      		<input type="hidden" id="dismiss_notice_hidden" name="dismiss_noticeid" value="" />
      		<input type="hidden" name="url" value="{vb:raw return_link}" />
      		<ol>
      			{vb:raw notices}
      		</ol>
      	</form>
      </vb:if>
      There should be zero things wrong with the navbar code as I had to revert that code to default so that the Navigation Manager would get full control over it.
      Last edited by jfmaday; Thu 12 Jul '12, 8:27pm.

      Comment


      • #4
        Make sure you didn't activate the MSIE 9 to display things in the MSIE 7-mode. Push F12 to open the developertools. Look, if "Browsermode" and "Documentmode" are both set to IE9. If one of them is on IE8 or worse on IE7 things start to look weird.

        Comment


        • #5
          Alright so apparently it got straightened out, although I have no idea what was done to fix it. I literally created a new child off the default skin and went through a rebuilt our entire style by hand. I was about to transfer our other child style to the newly built style, but decided to refresh the views one last time to see if they were still FUBAR. Somehow, everything got fixed, without my having really touched the affected style.

          Is there some form of CSS Cache that the VB software holds? Or perhaps the rebuild style's option in the Maintenance > General Update Tools might have been the solution all along? I have no idea. All I know is that for the moment the site is finally displaying properly across FF, Chrome, and IE. Except for needing to do a little bit of graphics work since I widened the body a bit, things seem to be where they should be.

          Thanks for the info on Dev mode in IE, I woulda never known, I hate IE with a passion.

          Comment


          • #6
            Originally posted by jfmaday View Post
            Thanks for the info on Dev mode in IE, I woulda never known, I hate IE with a passion.
            You are not the only one

            Comment


            • #7
              Originally posted by jfmaday View Post
              Is there some form of CSS Cache that the VB software holds? Or perhaps the rebuild style's option in the Maintenance > General Update Tools might have been the solution all along? I have no idea. All I know is that for the moment the site is finally displaying properly across FF, Chrome, and IE. Except for needing to do a little bit of graphics work since I widened the body a bit, things seem to be where they should be.
              We don't cache CSS or templates. However your server might depending on its configuration and any proxies on the network.
              Translations provided by Google.

              Wayne Luke
              The Rabid Badger - a vBulletin Cloud demonstration site.
              vBulletin 5 API

              Comment

              widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
              Working...
              X