Posted 7 years ago #
I have been working on this %$*! problem for a few hours now, and I just cannot pinpoint the solution. God I hate IE!
I am working on a new skin derived from the Kubrick theme. So far, except from a few width details I will work on later, there is the Header gap I cannot fill. See for yourself:
http://nirvanaaudio.ca/journal/
Looks good in Firefox, Opera 7, but not in IE.
Can anyone help me with the solution?
Thanks
Posted 7 years ago #
You may have missed it, but there are many other allignment issues on the page. This is typically a problem with margin settings, last i checked.
Posted 7 years ago #
Sorry, I forgot to give a few hints (I am so tired!):
Here is the code in the header.php template file:
#header {
margin: 0;
padding: 1px;
height: 141px;
width: 745px;
}
#headerimg {
margin: 7px 9px 0;
height: 135px;
width: 727px;
}
#headerimg h2 {
margin: 0;
}
#headerimg h2 a:link, #headerimg h2 a:visited {
width: 728px;
position: relative;
top: 0;
left: 0;
display: block;
background: none;
overflow: hidden;
font-size: 1px;
height: 0px;
padding-top: 136px;
}
The idea is to make the whole header image clickable to get back to the home page, instead of just the title.
Posted 7 years ago #
What css do you have in your #page element?
Posted 7 years ago #
vkaryl >
in the "style.css" file:
#page {
margin: 61px auto;
padding: 0;
width: 747px;
}
... and in the header.php, Kubrick's PHP trick:
<?php /* Checks to see whether it needs a sidebar or not */ if ((! $withcomments) && (! is_single()) && (! is_page())) { ?>
#page {
background: url("<?php bloginfo('stylesheet_directory'); ?>/images/bg_w_sb.gif") repeat-y top;
border: none;
}
<?php } else { // No sidebar ?>
#page {
background: url("<?php bloginfo('stylesheet_directory'); ?>/images/bg_wo_sb.gif") repeat-y top;
border: none;
}
<?php } ?>
Posted 7 years ago #
Hmmm. Well, just from where the "oddball" stray bar is at the top of your page layout, I was thinking it had to be something about the #page element - and in IE of course I can't view your css the way I can in FF.... How wonky does your page go if you set the margin to 0 auto and include text-align=center? Which should still center the page since it's fixed width....
With your permission, I'll grab your html and css and play with it if I have time....
To me it looks like the footer is on top. and I bet I am right
Posted 7 years ago #
That's a possibility. Why I wanted to see the whole of both pieces of code, html/php and css.... but I don't think I should download it without his permission.... It looks really great in FF btw!
I just looked at his header and he has the header css then footer css then more header css, the first header css belonging to the jpg ah hech it is easier to show than explain
#header {
background: url("http://www.nirvanaaudio.ca/journal/wp-content/themes/nirvana/images/NirvHead.jpg") no-repeat bottom center;
}
#footer {
background: url("http://www.nirvanaaudio.ca/journal/wp-content/themes/nirvana/images/foot.gif") no-repeat bottom;
border: none;
}
#header {
margin: 0;
padding: 1px;
height: 141px;
width: 745px;
}
#headerimg {
margin: 7px 9px 0;
height: 135px;
width: 727px;
}
#headerimg h2 {
margin: 0;
}
#headerimg h2 a:link, #headerimg h2 a:visited {
width: 728px;
position: relative;
top: 0;
left: 0;
display: block;
background: none;
overflow: hidden;
font-size: 1px;
height: 0px;
padding-top: 136px;
}
-->
</style>
Posted 7 years ago #
> vkaryl
You have my permission to download and grab whatever you want. I will only keep the images for myself when the theme will be completed, and give the rest to the community. Of course. I will try to solve this thing tonight. And if I can't do it, perhaps next Monday. Thanks for the help.
As for the Header--Footer--Header mix, I must admit that it is not the most elegant solution. This is how it was done in the original template.
I will try to put all the CSS in the "style.css" file at the end of the process, but the way Kubrick has been designed, most of the CSS was in the style sheet, but the CSS referring to the images was in the "header.php" template file:
<style type="text/css" media="screen">
/* BEGIN IMAGE CSS */
/* To accomodate differing install paths of WordPress, images are referred only here,
and not in the wp-layout.css file. If you prefer to use only CSS for colors and what
not, then go right ahead and delete the following lines, and the image files. */body { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgcolor.jpg"); } <?php /* Checks to see whether it needs a sidebar or not */ if ((! $withcomments) && (! is_single()) && (! is_page())) { ?>
#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg.jpg") repeat-y top; border: none; } <?php } else { // No sidebar ?>
#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; } <?php } ?>
#header { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickheader.jpg") no-repeat bottom center; }
#footer { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickfooter.jpg") no-repeat bottom; border: none;}/* Because the template is slightly different, size-wise, with images, this needs to be set here
If you don't want to use the template's images, you can also delete the following two lines. */#header { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 198px; width: 758px; }
#headerimg { margin: 7px 9px 0; height: 192px; width: 740px; }
/* END IMAGE CSS *//* To ease the insertion of a personal header image, I have done it in such a way,
that you simply drop in an image called 'personalheader.jpg' into your /images/
directory. Dimensions should be at least 760px x 200px. Anything above that will
get cropped off of the image. *//*
#headerimg { background: url('<?php bloginfo('stylesheet_directory'); ?>/images/personalheader.jpg') no-repeat top;}
*/</style>
Oh well, this is part of the fun! :-)
I think this pic is the culprit just delet it or rename it temporarily while you check IE
http://www.nirvanaaudio.ca/journal/wp-content/themes/nirvana/images/bg_w_sb.gif
yep this is it just used calipers on it and it is 735 px between the jpg and what it shows in IE
Posted 7 years ago #
dawg >
Yes, you are right, this is the horizontal repeating image that makes the background of the #page element (background with side bar):
#page {
background: url("<?php bloginfo('stylesheet_directory'); ?>/images/bg_w_sb.gif") repeat-y top;
border: none;
}
The problem with IE is probably caused by some margin or padding definition.
Posted 7 years ago #
735 px ? :)
If you measure the distance between the dark green on both sides from inside ie the white inbetween it is 735px
Posted 7 years ago #
Solution found! (even though I do not understand)
In my "header.php" I have this code:
#headerimg h2 a:link, #headerimg h2 a:visited {
width: 727px;
position: relative;
top: 0;
left: 0;
display: block;
background: none;
overflow: hidden;
font-size: 1px;
height: 0px;
padding-top: 130px;
}
When I got rid of this line in the same php template file:
<div class="description"><?php bloginfo('description'); ?></div> (this is the slogan)
The problem was gone. It seems that the "padding-top: 130px;" had to do something with this. The padding could not flow OVER the slogan, so it shifted back up in the page... only with IE, do I have to say it again.
Well, good night... :-) Mission accomplie!
Posted 7 years ago #
Oh, I'm glad for you! I just barely got back here to check things. Take care, sleep well!
This topic has been closed to new replies.
