In this session we troubleshoot why the CSS styling isn’t working in a custom feature box and we show how to make some additional styling changes. We review the site’s code in Firefox using Web Developer and Firebug. Part of the problem is that the code references an ID instead of class and there are additional errors not easily identified. To find the errors we place the code in NetBeans.
Philippe: Hey good morning. How are you doing?
Rick: I’m doing great. How are you?
Philippe: I’m good, I’m good, thanks. Hey you know, I’m really happy that I just received your email. I completely forgot about your webinar today and I do have a question that I’ve been struggling for the last hour. And I’m pretty sure it’s something simple but I can’t seem to find the answer to it.
Rick: Fire away.
Philippe: I’m going to send you the link from my site.
Philippe: And I tried to put the opt in box on the right side. But you know, for whatever reason, all my css like it’s not working properly. As you can see, underneath the video, you could see my css is there or my opt in information is there. But when I try to style it, it’s not working for me.
Rick: Okay let’s see, which plugin are you using?
Philippe: I’m not using any plugins.
Rick: Okay so you’ve got a left side and a right side.
Rick: Left side, right side. Okay so the trick here then is to give your left side a width and make it float left.
Philippe: Can I send you real quick the css that I used? That it’s not working and I don’t know why?
Rick: It’s probably not working because you have an error in your code. Because when I looked here, you can see I’m looking at it in this Developer Tools, there is no code over here that’s showing up which means it doesn’t recognize the code. So if I come over to resources and look under stylesheets and we’re looking under custom css… is that where the stylesheet is?
Rick: Okay so…
Philippe: It’s at the bottom and the last ones there, completely at the bottom.
Rick: Yeah. Let’s… I’m going to close this for a second and try that one more time. Inspect the element and then view sources and then custom css. It’s down here at the bottom.
Philippe: Yeah, that’s the one right there and I got this code from Alex Mangi.
Rick: Okay so there’s the closing. This one’s closing, okay.
Philippe: Maybe it’s my php information that…
Rick: Well, you’ve got… where’s the left side? This is all right side.
Rick: You don’t have any definition for the left side which gives… the left side should give it a width and make it float to the left. So let’s just switch over to Firefox here. I hate the fact that Firefox automatically updates itself like this. It always does that before my add-ons work and so you know, Firebug’s not going to work now or Web Developer is not going to work now or Measure It or something’s going to stop working now that I’ve… now that it’s updating itself to Firefox 14.
Philippe: Is there a way to tell it not to do it or to do any automatic update maybe?
Rick: I don’t know. There probably is. It’s just that it irritates me every time it happens but it doesn’t irritate me so much that I actually go try and fix it. Come on, okay. So we are fbox left side. And so what you want to do here is… and then say… I mean, how wide is this thing here?
Philippe: That’s a good question. I don’t rePhilippe.
Rick: Well, we can always find out. Width is 651 pixels so 660 px and then we’re going to say float left. Oh it’s not a… also, it’s a class. It’s not an id. So you’ve got… you’re using an id down here, fbox right side but it’s not an id. It’s a class, div class fbox right side.
Philippe: Oh so that’s… oh okay.
Rick: And so also…
Philippe: So we’ll have to change it.
Rick: What I would do here is fbox right side and width, call it 300 for a moment.
Philippe: And float right?
Rick: Well, no. Float left should bunch it right up there automatically. Fbox right side fbox left side. Okay so we still have something wrong here. I’m going to come up at the top for a second and put a code up here at the top. Okay yeah so you do have an error in your code somewhere down here below which is preventing this bottom code from kicking in. And I don’t know where that is exactly. It’s kind of hard to tell from this… in this way but my guess is… I mean, it’s above here so the chances are, it’s a missing opening or closing thing. What code editor do you use?
Philippe: Notepad ++.
Rick: Well, does it have error checking in it?
Rick: Okay well, you’re going to have to go through here then and try to find where the error is because when the code’s up here at the top, before any error, it works fine, right? You can see it just splits itself off like that into 2 pieces.
Philippe: But it’s still white like it’s not styled because the style…
Rick: Because your style, in the first place, your styling is not referencing the correct element.
Philippe: Oh okay.