Posted 2 years ago #
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
Posted 2 years ago #
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
}
Posted 2 years ago #
Jennifer, when I see that it is ok in Firefox and not in IE7 I always do try a validation first. Here for example: http://www.xhtml-css.com/check# You do not have many errors but:
Then I get this: File not found: http://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.
Posted 2 years ago #
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
Posted 2 years ago #
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.
Posted 2 years ago #
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(); ?>
Posted 2 years ago #
I assume you left off the parenthesis, right?
Peter
Posted 2 years ago #
Yes I did ...
Posted 2 years ago #
It looks good in Firefox, are you still having issues in IE?
Posted 2 years ago #
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 ~
Posted 2 years ago #
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
Posted 2 years ago #
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
Posted 2 years ago #
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
Posted 2 years ago #
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
Posted 2 years ago #
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
Posted 2 years ago #
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
Posted 2 years ago #
Where did you put the javascript file, because I cannot seem to find it (The requested URL /pngfix.js was not found on this server.)
Peter
Posted 2 years ago #
Sorry, I've just tried a different one is why ... Lol
Uses this:
<style type="text/css">
img, div, a, input { behavior: url(iepngfix.htc) }
</style>Jennifer
Posted 2 years ago #
Guess I'm off to re-code a bit, I don't know what else to try at this stage ~
Thanks to anyone offering suggestions ...
Jennifer
This topic has been closed to new replies.
