Hi!
I am loving building my site on Thematic! I am fairly new to CSS and such, so I am not surprised to find that I must be doing something wrong. My site is displaying like I want it to in Firefox and Chrome, but in Internet Explorer the header is missing and all the content and menu are shifted over to the left. Does anyone have tips on how I could fix this? Here is my site: http://www.flourishanddebonairblog.com
Thank you! :)
what have you added to the header? something doesn't look to be closing properly when i look at it w/ chrome's dev tools... and IE's dev tools too. the <head> seems like it is closing early and a bunch of the other things that belong in the head are showing up in the body. my guess is that FF and chrome are guessing at what it should be, but since IE is generally known to SUCK... it isn't.
start w/ deactivating all plugins and comment out any changed you've made to the header
Thank you for responding, helgatheviking! I deactivated my plugins and commented out the changes I made to the header.php file (is that what I was supposed to do?) I've had trouble adding things to my php files, I'm never sure where in the file I'm supposed to input. So now that everything is gone, are there some tell tale signs I should be looking for as far as what I've been doing wrong or something? Thanks SO much for your help!!!!
Ah, ok, so I've been taking a look at what you were saying that the head was ending too soon and I think I've got that fixed now and the /head now comes after all the header stuff. However... I realized that the bit of code that actually makes the random header is actually sitting ABOVE everything, even the beginning:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...so I'm guessing that's what's throwing it off? Because its not even included in the body tag? This is the code to randomize the banner, I put it at the top of the header.php file, and is now sitting above everything, apparently:
<img src="http://www.flourishanddebonairblog.com/wp-themes/flourish/banner/header_<?php echo(rand(1,5)); ?>.jpg" width="image_width" height="image_height" alt="Flourish and Debonair: Where creativity, style and taste flourish" />
Does that perhaps shed any light on the issue?
first, i hope you aren't making changes to thematic's header.php. if you really need to modify header.php copy it into your child theme's folder. that said, thematic has plenty of hooks and it is usually unnecessary. i'd suggest starting w/ a fresh, clean header.php
and yeah, an image tag should not come before the doctype. i'm sure that is invalid html. if you want something to appear just after the body tag opens, you could latch onto the thematic_before hook
function add_image(){ ?>
<img src="http://www.flourishanddebonairblog.com/wp-themes/flourish/banner/header_<?php echo(rand(1,5)); ?>.jpg" width="image_width" height="image_height" alt="Flourish and Debonair: Where creativity, style and taste flourish" />
<?php }
add_action('thematic_before','add_image');No, I haven't been making changes to the original header.php, just a copy in my child theme folder. I just wasn't putting that code in properly, so thank you SO SO much for showing me how to do it! I latched onto a hook and now the code is actually in the body of the html, haha! Yay! Thank you helgatheviking!
I was really thinking that that might fix the problems in IE, but that is still all out of whack. :-/
i'd also try wrapping that image in a div so that all the browsers will treat it like a block level element.
<div class="center"><img src="http://www.flourishanddebonairblog.com/wp-themes/flourish/banner/header_<?php echo(rand(1,5)); ?>.jpg" width="image_width" height="image_height" alt="Flourish and Debonair: Where creativity, style and taste flourish" />
</div>and style it
.center {
text-align: center;
}don't forget to remove your child's header.php so we can eliminate that as a source of the problem
Ah, ok, I wrapped it in the div and put the centering style in the css. Thanks!!!!
What do you mean about removing the child's header.php? The whole file? That's where I've been plugging this in. Should I be putting it somewhere else? Or am I supposed to delete everything except the part I added in? I just did that (after backing up the file on my hard drive) and now nothing is showing up except the raw content. So I guess I'm not understanding what about the child's header.php I'm supposed to remove..?
i want you to remove your entire modified header.php so you go back to using thematic's header.php.... to better isolate the problem.
i've never needed a header.php in my child theme. you can add everything from your child's functions.php via hooks/filters.
Ohhhhhh, I see!! Thank you! Ok, I added it into the functions.php file instead, and deleted the child header.php file.
That fixed the centering problem in IE - WooT! The banner is still missing though.
And a couple things have completely disappeared from my page in all browsers, though - my menu, which was right below the banner - and a font I had added with this code from google fonts:
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
Which had worked when I put it in the header.php, but it won't accept it in the functions.php, it comes back with an error. I'm guessing it wasn't even technically correct in the header.php, since its not in php form? And I don't know what happened to the menu at all. Hm.
well now you have to go about re-adding those elements in the child-theme way.
function add_font(){ ?>
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
<?php }
add_action('wp_head','add_font');if you don't see the pattern yet it goes like this:
function some_function(){
echo "bacon"; ?>
<strong>Yumm Bacon!</strong>
<?php }
add_action('hook you want to add function to','some_function');how were you adding the menu? thematic_access should be the last thing in the #header div by default
your menu is in the markup, but you've got a problem w/ defining padding as 90 instead of 90px
background-image: url('http://www.flourishanddebonairblog.com/wp-content/themes/flourish/images/about.jpg');background-repeat: no-repeat;padding: 90px 0 0 83px;
i did this in chrome developer and your images show up
Oh, excellent!! Thank you sooooooooo much!
I appreciate seeing the pattern, too, that helps a lot.
And you're right, I just fixed the 90px, and its all showing up. Woohoo! And everything looks great in IE, except the banner is not showing, but I can probably live with that if I have to.
Although, when I add things to my functions.php, like adding the function for the font, the screen goes white and I get this message:
Warning: Cannot modify header information - headers already sent by (output started at /home6/flourit3/public_html/wp-content/themes/flourish/functions.php:9) in /home6/flourit3/public_html/wp-admin/theme-editor.php on line 99
However, whatever I was trying to do (like adding the font) still goes through when I refresh my blog, so I guess its working anyway?
Thank you SO much for everything, helgatheviking!! :D
Btw, what is says on wp-admin/theme-editor.php line 99 is this:
header("Location: $location");
headers already sent error usually means that you have extra spaces before your opening <?php and/or after your closing ?>
also you didn't wrap the banner in a div, so i can't see if that had any effect. you could even give that div an ID and then define a height. i think that link is not expanding to encompass the entire image. it is getting stuck at the line-height. wrap the img
<div id="banner"><a href=""><img src="http://www.flourishanddebonairblog.com/wp-themes/flourish/banner/header_<?php echo(rand(1,5)); ?>.jpg" width="image_width" height="image_height" alt="Flourish and Debonair: Where creativity, style and taste flourish" /></a>
</div>#banner {
text-align: center;
}
#banner a {
display: block;
}Oh, ok, yeah, I had wrapped the image in the center div, but not the linking. I wrapped all of it in the banner div and added the size for it, too...
#banner {
text-align: center;
width:900px;
height:300px;
}
#banner a {
display: block;
}
Still no image in IE, but it did open up the space for it in IE! :D
First off, nice job on the site, very clean style.
Might want to try getting rid of
width="image_width" height="image_height"or just add the actual dimensions (like below), although it shouldn't be needed.
width="900px" height="300px"Also remove the
<br />If you need that space it can be done with padding or margins in CSS, not sure if this is causing the issues as I still haven't figured out how to navigate IE's developer tools but it is most likely something simple with the html markup. IE tends choke a lot worse on incorrect html markup than others.
If those don't work, paste the php for the function you have for that image currently, it is something super minor.
YAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAY! WOOOT!!!!!!!
It's FIXED!! Thank you both SO much ... the last thing that was needed was taking out the imaged width/image height thing - and its looking perfect in IE! WoooHooooo!!
Thank you helgatheviking for ALL your help, and thank you ScottNix for the last piece of the puzzle.
You must log in to post.