jacked up layout in IE, looks fine in FF & Chrome

Viewing 8 replies - 1 through 8 (of 8 total)

  • Have you modified html code?

    Thread Starter redheadedninja

    (@redheadedninja)

    Yes, there was no white box to match my theme, so I added:

    .wpg2content {
        width: 840px;
	background-color: #fff;
	margin-top: 0;
	margin-bottom: 0;
        margin-left: auto;
        margin-right: auto;
	border-top: 10px solid #C0C0C0;
	border-left: 10px solid #C0C0C0;
	border-right: 10px solid #C0C0C0;
	border-bottom: 10px solid #C0C0C0;
}

    to the .css file and template file for the gallery is now

    <body class="gallery">
 <div class="wpg2content">  <div {g->mainDivAttributes}>
      {*
       * Some module views (eg slideshow) want the full screen.  So for those, we don't draw
       * a header, footer, navbar, etc.  Those views are responsible for drawing everything.
       *}
      {if $theme.useFullScreen}
	{include file="gallery:<code>$theme.moduleTemplate</code>" l10Domain=$theme.moduleL10Domain}
      {elseif $theme.pageType == 'progressbar'}
	<div class="header"></div>
	<div class="content">
	  {g->theme include="progressbar.tpl"}
	</div>
      {else}
      <div class="header"></div>
      <div class="content">
	<div class="breadcrumb">
	  {g->block type="core.BreadCrumb" skipRoot=true separator="/"}
	</div>

	{* Include the appropriate content type for the page we want to draw. *}
	{if $theme.pageType == 'album'}
	  {g->theme include="album.tpl"}
	{elseif $theme.pageType == 'photo'}
	  {g->theme include="photo.tpl"}
	{elseif $theme.pageType == 'admin'}
	  {g->theme include="admin.tpl"}
	{elseif $theme.pageType == 'module'}
	  {g->theme include="module.tpl"}
	{/if}

	<div class="footer">

	</div>
      </div>
      {/if}  {* end of full screen check *}
    </div>

    {*
     * Give Gallery a chance to output any cleanup code, like javascript that needs to be run
     * at the end of the <body> tag.  If you take this out, some code won't work properly.
     *}
    {g->trailer}

    {* Put any debugging output here, if debugging is enabled *}
    {g->debug}
  </div></body>

    There are errors in your XHTML. There is one too many </div> ‘s and a bunch of other little errors that cascade from there. You can check it at https://validator.w3.org/
    There are also quite a few errors in the CSS. Check it at.
    https://jigsaw.w3.org/css-validator/

    I’d love to help you when you get stuck on a particular problem or when you’d like to know how to do something, but there are too many problems here that I can’t really give you a quick fix. Sorry.

    If you want to learn basics XHTML & CSS or need a reference that is easily understandable, visit Patrick Griffiths’ https://www.htmldog.com/

    Thread Starter redheadedninja

    (@redheadedninja)

    well, i got it to pass xhtml validation (for the moment) and removed the white box – it is DEFINITELY NOT the whte box i added. i can’t believe i didn’t see it before, i guess i just didn’t check ie. i checked on browsershots, it is ONLY ie that is a problem.

    Yeah well it usually is. In fact IE is one of the problems. Even when the code validates you still need to design around IE. I usually design for FireFox, Opera and Safari in the standard style.css and create a separate stylesheet for IE6 and earlier versions. I add the following code to my header.php:

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<!--[if lte IE 6]>
<link href="<?php bloginfo('template_url'); ?>/style_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

    As in this example you have to have the IE stylesheet come after the all other stylesheets you may link to because it needs to override the standard CSS in IE. The styles in style.css will still be rendered in IE but the styles in style_ie6.css will conflict with those styles and IE will render the conflicts according to the style_ie6.css because it comes after the other stylesheets in the file.

    Looking at the the generated XHTML (view source in firefox) I see you are currently using the @import method of attaching the stylesheets. There is nothing wrong with this method but when using WordPress I personally recommend to use the <link> method. The reason for this is that the @import method is placed within an internal stylesheet [ <style type="text/css"... ], WP plugins can also add their own internal stylesheet, and you end up having numerous internal stylesheets at different places in the <head> which not only can become confusing, but older browsers don’t support or recognize the @ and therefore displaying the page without any styles at all.

    Try the separate style sheet for IE that has always been the least complicated in my experience. Since IE will still pick up the styles from the style.css you’ll only have to write conflicting rules for the selectors that send IE out of whack. So no need to copy all the CSS from your style.css into the style_ie6.css.

    It’s looking great in IE7 now.

    Unfortunately, no matter how many dreamcatchers you make, designing around Internet Explorer will always be a bit of a nightmare.

    Thread Starter redheadedninja

    (@redheadedninja)

    Thank you so much, I got mad and hired a guy to fix it late last night and just woke up to a fixed page. SWEET! So now I just gotta mess with the fonts, I think I can handle that. How do I mark this solved?

    I hope you didn’t have to pay him too much ??

    Usually there is a option to change the status to resolved in the little column to the right at the top of the page. But sometimes it has mysteriously disappeared. There are a couple of posts of mine out there that have been resolved for months but that I can’t close because they’re not in my Threads Started column in my profile.

    Thread Starter redheadedninja

    (@redheadedninja)

    oh, hehe. thanks

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘jacked up layout in IE, looks fine in FF & Chrome’ is closed to new replies.