IE pushing content down (when in compatiblity mode only)

  • Hi all,

    Still having some issues with my new WordPress theme (first time converting!) Theme

    It seems to pushing and breaking up the header sections a bit, creating quite a mess, you can see what I mean here.

    I’ve tried a fixes as well as adjusting my css with a variety of ‘techniques’ I’ve found via Google, but to no aviail.

    Any ideas or direction would be greatly appreciated ~`

    Thank you,
    Jennifer

Viewing 15 replies - 1 through 15 (of 18 total)
  • Thread Starter jennifer420

    (@jennifer420)

    Sorry, css is here, may likely help …

    * { margin: 0; padding: 0; outline: none; }

a:link, a:visited, a:active { color: #630001; }

a:hover { color: #134077; }
html, body {
height: 100%;
}

body { background-color: #f7921e; font-family: Verdana, Arial, Helvetica, 

san-serif; font-size: 12px; color: #666; line-height:1.8; }

.newcampers { background:url(img/campers.png); width:518px; height: 19px; margin-left:58px; cursor: default; top: 230px;position: absolute; }

.bed {background-color: #e4e2d6; width: 960px; margin:auto; border-left: 1px solid #333333;
border-right: 1px solid #333333;}

#wrapper {
position: relative;
width: 960px;
 margin-left: auto;
   margin-right: auto;
} 

.floatleft
{
float: left;
background: url(img/left.png); margin-top: 0;
width:43px; height: 182px;
margin-left: 1px;
}
.floatright
{
float: right;
background: url(img/leaves-top.png); background-repeat: no-repeat; margin-top: 0;
width:488px; height: 334px;
right:-10px;
position:absolute;
}

.photo
{
float:right;
background: url(img/photo.png) no-repeat;
width:275px; height: 263px;
margin-right: 62px;
margin-top:50px;
}

.board
{
float: right;
background:  url(img/bg.png); margin-top: -10px;
width:379px; height: 500px;
}

.board div.video { float:right;background:url(img/video.png); background-repeat: 

no-repeat;width:62px;
height:108px; margin-top:207px; margin-right:175px;} 

.board a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  cursor: pointer;
}

.board div.free { float:right;background:url(img/free.png); background-repeat: 

no-repeat;width:141px;
height:74px; margin-top:-215px; margin-right:135px;} 

.board div.pic { float:right;background:url(img/pic.png); background-repeat: no-repeat;width:61px;
height:13px; margin-top:136px; margin-right:272px;} 

.board div.sign { float:right;background:url(img/sign.png); background-repeat: 

no-repeat;width:138px;
height:46px; margin-top:-203px; margin-right:15px;} 

#header { width: 960px; height: 262px; background: #e4e2d6 url(img/hdbg.jpg);}

a.logo { width: 570px; height: 76px; margin-top: 37px; margin-left: 0px; background: 

url(img/logo.png);  position: absolute; float: left;

 }

a.logo span { display: none; }

#content { width: 520px; float: left;
margin-left: 24px; padding-top: 5px;
clear: both;
padding-left:10px;
margin-top: -52px;
    display: inline;
}

.post { width: 520px; margin-bottom: 50px; margin-top:0px;}

.post h2 a { color: #24446b; font-weight: normal; text-decoration: none; font-size: 24px; }

.post span.post-info { color: #CCCCCC; font-size: 10px; padding-bottom: 10px; width: 560px; float: 

left; }

.post p { line-height: 22px; margin-bottom: 10px; }

.post div.cats { border-top: 1px solid #ececec; padding-top: 10px; }

#sidebar { width: 379px; float: right; margin-right:0px;}

#footer { clear: both; width: 960px;  height: 350px; background: #e4e2d6 url(img/footer.jpg);
margin-bottom: 0px;
padding: 0px; margin-left: 0px;}

/*

	.comments template styles

*/

.comments { float: left; padding: 0; }

.comments input[type=text], textarea { width: 350px; }

textarea { width: 450px; }

.comments fieldset { padding: 20px; border: 1px solid #CCC; margin: 10px 0 20px 0; }

.comments p { padding: 0 0 10px 0; }

.comments h2 { padding: 0 0 15px 0; }

#cdisplay { list-style-type: none; padding: 0; margin: 0; }

	#cdisplay li { padding: 10px;  margin-bottom: 10px; width: 560px; }

	#cdisplay li.first {  background: #f9f9f9; border-bottom: #CCC 1px solid; }

	#cdisplay li.second {  background: #f6f6f6; border-bottom: #dedede 1px solid; }

.aligncenter,

div.aligncenter {

   display: block;

   margin-left: auto;

   margin-right: auto;

}

.alignleft {

   float: left;

}

.alignright {

   float: right;

}

img.avatar {float:right;}

.newspaper {
float:right;background:url(img/newspaper.png) bottom; background-repeat: no-repeat;width:382px; 

height:350px;padding-bottom:0px; margin: 0px;}

.inner {width:382px; height:300px; text-align: center; margin-bottom: 0px; padding-bottom: 0px;
}

#dropmenu, #dropmenu ul {top: -80px;
list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; z-index:200; width:100%; font-weight:bold;}
#dropmenu a {display:block; padding:0.25em 1em; color:#f7921e; text-decoration:none; }
#dropmenu a:hover {background:#711a19; color:#fff;}
#dropmenu li {float:left; position:relative;}
#dropmenu ul {position:absolute; display:none; width:12em; top:1.9em; left:-1px;}
#dropmenu ul a {border-left:1px solid #c8c8c8; background:#10253a;}
#dropmenu li ul {border-top:1px solid #c8c8c8; width:14.1em;}
#dropmenu li ul a {width:12em; height:auto; float:left;  border-bottom:1px solid #c8c8c8;}
#dropmenu ul ul {top:auto;}
#dropmenu li ul ul {left:12em; margin:0px 0 0 10px;}
#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {display:none;}
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {display:block;}

#contact-area {
width: 300px;
margin-left: 320px;
float:right;
position: absolute;
bottom: 40px; 

}

#contact-area input, #contact-area textarea {
background-color: #61502c;
	padding: 1px;
	width: 125px;
	font-family: Helvetica, sans-serif;
	font-size: 1.2em;
	margin: 5px 0px 5px 0px;
border: 2px solid #61502c;
color: #372d24;

}

#contact-area textarea {
	height: 90px;
}

#contact-area textarea:focus, #contact-area input:focus {
	border: 2px solid #630001;
}

#contact-area input.submit-button {
	width: 61px;
height:13px;
	float: right;
background:url(img/submit.png) 0 0 no-repeat;
border:0px;cursor: pointer;
text-indent: -9999px;
}

label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 100px;
	padding-top: 5px;
	font-size: 1.2em;
color: #e4e2d6;

}

#contact-area .formin { background:url(img/form.png);
width:137px;
height: 37px;
position: absolute; top: -53px; left: 50px;
  }
.contactin { background:url(img/contact.png); width:270px; height: 39px;
position: absolute; top: -54px; margin-left:-258px; }

.contactin p {float: left;
	margin: 18%;
	border: 0px ;
	width: 80%;
	display: inline;
	font-family: Helvetica, sans-serif;
	font-size: 1.2em;
line-height: 2.2;
color: #ffffff;
}
.contactin a:link {color: #f6d60b;}

/* rotator in-page placement */
    div#rotator {
	height:245px;
	margin-right: -14px;
margin-top:65px;
float:right;
}
/* rotator image style */
	div#rotator ul li img {
	border:1px solid #ccc;
	padding: 4px;background: #FFF;

}
/* rotator css */
	div#rotator ul li {
	float:right;
	position:absolute;
	list-style: none;
}

    div#rotator ul li.show {
	z-index:500
}

    Jennifer, when I see that it is ok in Firefox and not in IE7 I always do try a validation first. Here for example: https://www.xhtml-css.com/check# You do not have many errors but:

    Then I get this: File not found: https://nageela.einfal.com/wp-content/themes/Camp Negeela/style.css: Not Found
    I would get rid of the space in your theme name first and the Capitals!! Do that on your local PC and then reupload the themefolder with the new name and then through admin select the same theme with the new name. Work from there.

    Thread Starter jennifer420

    (@jennifer420)

    Hi henkholland,

    Thank you for taking the time to help out …

    I’ve done what you suggested, but it doesn’t seem to have made a difference. ?? This is getting very frustrating!

    The few errors I’m getting, I can’t seem to even find the files they’re located in – isn’t the header.

    Do you think this all could be fixed via css? In the beginning, the theme was full screen and although it looked fine in IE as well, the client insisted on changing it.

    Thank you again,
    Jennifer

    Hmmm, for starters: your head tag is missing. I can imagine IE having problems with this.

    (<head>)

    Peter

    Some more info: your xhtml is supposed to be xhtml1-transitional, and in that case browsers inspect the code a bit more. It also looks for missing closing tags.

    You have a few css errors as well.

    Thread Starter jennifer420

    (@jennifer420)

    Hi Peter!

    Those errors are coming from plug-ins, oddly enough.

    When I try adding (<head>) I get additional errors … would it have anything to do with this? <?php wp_head(); ?>

    I assume you left off the parenthesis, right?

    Peter

    Thread Starter jennifer420

    (@jennifer420)

    Yes I did …

    It looks good in Firefox, are you still having issues in IE?

    Thread Starter jennifer420

    (@jennifer420)

    Yes, I’ve tried re-coding a bit, comparing files to a basic (default) wordpress theme, etc. but still can’t seem to fix it. ??

    It’s fine in IE as long as it’s NOT in compatibility view … weird.

    I don’t know what else to try ~

    Jennifer,

    I’m trying to figure out why you don’t have a head tag in your source code. Possibly this could be ‘arranged’ by a plugin. Did you try to disable plugins one by one?

    It’s possible for a plugin to create (or delete) a hook to the wp-head() function.

    Peter

    Thread Starter jennifer420

    (@jennifer420)

    Hi,

    Thank you so much again for taking the time out to help … I really appreciate it. I hope that gradually I actually get this fixed however. ?? So frustrating.

    I removed the css width declaration from the header and see that the header is up where it should be, yet not the width it should be and such, as are a few other elements.

    If you have a look here, you’ll see how it’s rendering in IE currently. Not good.

    Should I simply consider re-coding that entire section do you think?

    I’m going to try disabling plug-ins one by one and see if that helps.

    Jennifer

    Don’t get frustrated about something Bill did to us ??

    I think your site already looks great. I’ll have a closer look in a jiffy when I’ve put my kids in bed (half an hour or so).

    Peter

    Thread Starter jennifer420

    (@jennifer420)

    Thank you Peter ~

    It’s frustrating because I’m anxious to just get this over with and move onto something else. Although, it has definitely been a learning experience. I must admit I enjoy a challenge every now and then, but wow …

    I can’t believe how many ‘fixes’ I’ve tried and it’s hardly changed a bit. I can’t help but assume it’s partly my coding as the bottom half seems to be rendering just fine.

    Jennifer

    it’s the png files. Older Internet Exploders couldn’t handle png transparency. There’s a hack for that: for instance here.

    Just google for ‘png transparency ie’

    Peter

    Thread Starter jennifer420

    (@jennifer420)

    Hi Peter,

    I’ve added that just below the head tag, but it isn’t rendering any differently.

    I’ll look for another just in case. ??

    Thank you

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘IE pushing content down (when in compatiblity mode only)’ is closed to new replies.