Adding a trailing slash after url moves the box below the menu & logo over it

Question

I am using codeigniter.

My products page shows all the products we have and then users can click on each product_name to get more details about that particular product. So, I have declared products as the class and product_name as a function within the product class - so I could get the url www.company.com/products/product_name.

When I go to www.company.com/products everything is fine but if I add a trailing slash so it looks like www.company.com/products/ my window underneath the logo and menu moves over it hiding both the logo and menu. The same happens when I go to www.company.com/products/product_name.

How can I make sure that the window below does not hide when I add trailing slashes or when I go to product_name pages.

Any help would be appreciated.

Answer 1

The problem is that you have specified a relative path for your images. You need to make them absolute, or at least relative to the current location. That is to say, if you change your image path from:

<img src="images/obsia.png">

to

<img src="/images/obsia.png">
or
<img src="http://www.obsia.com/images/obsia.png">

Your problem will be solved.

The reason this is happening is because the path to the images is determined by the base URL. When you are at http://www.obsia.com or http://www.obsia.com/products, your base URL is http://www.obsia.com.

To the browser then images/obsia.png is rendered as http://www.obsia.com/image/obsia.png, which your server interprets as wwwroot/images/obsia.png and the relative link works.

However, if you do http://www.obsia.com/products/ your base url is http://www.obsia.com/products and the relative path for your images changes from http://www.obsia.com/images/obsia.png to http://www.obsia.com/products/images/obsia.png. Your server interprets this as , which your server interprets as wwwroot/images/products/obsia.png, which is not a valid path. The server returns a 404 --resulting in broken images.

You can see this if you use Firebug's .Net panel. The request for your logo returns:

GET obsia.png
http://www.obsia.com/products/images/obsia.png

404 Not Found

obsia.com

539 B