image 100% width of browser question WordPress

Dbranes answers:

Hi, it's password protected

---

---

---

---

---

---

---

---

---

---

DHRUBA BHOWMIK answers:

CSS can be tricky. There are lots of things that can go wrong, or at least not as you expect, and trying to determine what the problem is can be almost as hard as writing the CSS in the first place. The key to finding and fixing your CSS problems is three-fold:

1 finding the problem
2 isolating the cause
3 fixing it

Find and Fix CSS Problems by Thinking Small

While your goal is, of course, to fix the problem, but in order to do that, you need to find the problem. And the best way to do that is to think small. What is the smallest amount of HTML and CSS code that you can create and still generate the problem? The advantage to this is that often you'll see what the cause is while you're looking for the problem.

And if you can't find it, the smaller a chunk of code you have the more likely you'll be able to find help in Web design forums and from your friends and co-workers. No one wants to look at 3000 lines of someone else's (or even their own) code. But most people won't hesitate to look at 10-20 lines.

First Thing: Simplify the Page

If the page uses JavaScript, Flash, PHP or a blog or CMS, get rid of that. If you're trying to fix a CSS problem then the first thing you need to be sure of is that it is a CSS problem. And to do that the problem should appear on pages with just HTML and CSS. If you can't recreate the problem without the JavaScript, Flash, PHP, or whatever, then chances are it's not the CSS that's causing your problem.

An easy way you can simplify the page is to view the source file. Copy and paste the HTML that shows up there into a new editor page and save it to your hard drive. There may still be a few lines of JavaScript or Flash, but you can get rid of those easily once you have the stand-alone HTML and CSS.

Step 2: Move It to Your Hard Drive Away from the Server Files

Grab all the related files: the HTML you created above, the images on the page, CSS, JavaScript you can't live without, etc. and put them in a directory on your hard drive. You need to control what the Web page is using.

An easy way to find external files is to use your editor to search for "http:". If you don't use full URLs for your file references, you'll need to search the document manually for the locations of external files. If you can turn off your internet access, for example, by turning off your wireless card, this can help you find external files too.

Step 3: What Browsers Are Affected?

Most CSS problems are not equal because the browsers that display them aren't equal. So before you start isolating the cause of your problem, you need to make sure you know where it happens. Open the local file in your favorite browser and then as many other browsers as you can. It's best if you can do your testing on a system with a virtual machine, so that you can test in both Windows and Macintosh browsers.

You need to know which browsers the problem occurs in so that you can test in those browsers to find a fix. But don't forget to test in the working browsers as well. A fix for one browser might result in breakage in another.

Step 4: Start Your Simplifying

Once you have your page isolated, start simplifying what you have on the page. Remove both HTML and CSS, periodically testing to make sure the problem is still there. Cut away as much of the HTML and CSS as you can without removing the problem completely. This is isolating the cause.

For example, if the problem is in your navigation, then you can get rid of all the HTML that isn't building the navigation: internal div tags, headers and footers, etc. Once you have the minimum HTML required to keep the problem happening, then start paring away the CSS. Be sure to test every few minutes. Sometimes the stupidest things can cause the problem, and you won't know what made it go away until you try. Once you've removed a line of CSS or HTML and the problem disappears, make a note of that line and put it back in your document. If you can tell how to fix it from that line, then you're done. Otherwise, keep removing lines and testing what happens.

My technique is to remove one line if CSS or HTML then test. If the problem is still there, I save the file and do it again. If the problem is not there, I either fix the problem or put the line back and make a comment and keep going. It's slow going, but it works.