In this session we troubleshoot styling issues with the Full Width Backgrounds and Thesis Nav Menu plugins. We have to create a background image instead of using a background color in order to use the plugins together and not specify a height to the header area so that it can accommodate everything that’s in it. We use a background image and take out the background definition to have the menu inside the menu area.
Member: I’m still working on this directory site that we’ve discussed the last couple of weeks.
Member: I’m trying to make some progress on it as I have a meeting next week where I wanted it actually to say it was almost done.
Rick: There you go.
Member: So there’s my time frame. As we saw last time, we actually got it to finally get the directory working. There’s a couple of things that have happened. One of them is that it’s not a directory issue but the navigation bar. If I look at the sites in Internet Explorer as opposed to FireFox then using the customization plugin that you provide, it’s not rounding off the buttons.
Rick: Well, that’s the way Internet Explorer is.
Rick: The Internet Explorer 9 supports CSS3, things like that. But Internet Explorer 8 and below does not. So there’s no way to fix that except not to use rounded corners but instead to use a background image that has rounded corners in it.
Rick: That’s the alternative.
Member: When you look at it in Internet Explorer, the other thing it does is that in FireFox, it leaves a gap between the navigation bar itself and then the multimedia box. But in Internet Explorer, they merge on top of each other.
Rick: It may be. Can you give me the URL again?
Member: Yeah. It’s strettonwalkingday.co.uk
Rick: Kill the Jukebox, page not found. Okay, that’s okay. So this is the page here.
Member: There you go.
Rick: And actually in Chrome, it also happens. So the question is why?
Member: Was it something I’ve done? Probably.
Rick: Well, could be. Content box… it’s probably caused by specifying the height of the content area… I mean, not the content area, the header area, you specified its height but the height isn’t large enough to accommodate everything that’s in it. That would be my guess but let’s just see. Okay so it’s shaking out at 324 pixels tall. Does it have a definition? Doesn’t look like it. Area… oh yes, height. Okay so the thing is you’ve specified the height of 235 pixels for the header area but actually, the header area needs more room than that.
Member: Okay so… but I wanted the navigation to effectively be below the header area. So does it… obviously, it was showing the buttons onto the white background. So I’m going to have to change the…
Rick: Which navigation plugin are you using?
Member: The Simple Nav.
Rick: Okay, I don’t remember now whether or not the Simple Nav gives you the ability to select before the content or not. So right now, what you’re using is a background color with a border, is that right? For your header area?
Member: I’m trying to remember. Yeah, I think I did a background color there in the border line color and then put the logo and everything. It’s effectively a PNG that’s a bit obviously, it goes against that background color.
Rick: Right. You know, what you’ll have to do in order to use those plugins together like this is you’ll have to create a background image that is… for this green with a border instead of using the background color.
Member: Okay so if I correct… how wide do I make it if I’m going to be making it full width?
Rick: 20 pixels wide. The image itself only needs to be 20 pixels wide and then it’s going to repeat itself all the way across.
Member: Repeat those on the right, okay.
Rick: Right. So what you could do is you take a screenshot of this just like this, right? Cut it down so that it only captures down to the bottom of the green and actually, it doesn’t really matter. You could leave it… you could cut a screen capture big even… yeah. So for example, since the rest of it is white, if we… I’m just hitting my screen capture right now. And you know, so I just come right to that, come down here, copy it. And really, you could just take this image now and make that your background image and then specify the height of the… well, you don’t even have to specify a height for the header area. You wouldn’t specify the height at all and you just let it be as big as it has to be in order to fill up the space.
Rick: But then you just put this image in and that image would be repeated horizontally, all the way across and that’s the background of the header area, not header area .page. Does that make sense?
Member: It makes a lot of sense. That’s great. And then that would possible also solve the issue in IE as well.
Rick: Oh yes, it will solve the issue in both places because that’s where the problem is.
Member: Right, okay.
Rick: Now I don’t think this is a good. I mean, I think in IE, what we should be better off doing is just letting these things be square in older version of IE. You know… but you could, if you wanted to, you could create background images for each of those menu items and let’s just see what this looks like in IE. So this is IE 9. It’s probably going to look fine in IE 9.
Member: Yes so that’s why it obviously just because I’ve got an old version of IE. To be fair, I don’t mind if they’re not rounded. It was more the overlapping that I was bothered abut. If they’re square in IE, it’s not the end of the world.
Rick: Yeah. Well, the solution to that is to use the background image and then take out the height definition of this so that this can be inside the header area. That’s essentially what you need is that this menu is inside the header area.
Member: That’s fine. Lovely. That first part’s done.