Sidebar looks different in Firefox!

HTML & CSS
1

IN IE7 it looks perfect but in Firefox its shifted over, any ideas why this would be?

Here is the page…

http://scholarscanada.com/wordpress/education/locate-centre-near-you/belleville/

It’s strange because this is the same code and css I used for this…

http://scholarscanada.com/wordpress/employment/locate-centre-near-you/aurora/

and above looks fine…

2

you havent set the width of your sidebar in the example that doesnt work.

to your centresidebar div add your css from sidebar div


div#sidebar {
padding-right:20px;
padding-top:25px;
width:275px;
}

Its a good idea to use classes for items that are repeated (eg. .sidebar) so little mistakes like that are less likely, also it makes your code easier to read / re-use. Hope that helps! :slight_smile:

3

i will advise you to spend some time and merge your classes or ids which are same. this is not the right way of creating css file


div#sidebar{height:auto;}
div#contentInside{float:left;}
div#contentInside{width:632px; padding-left: 25px; padding-top:15px; padding-bottom:50px;}
div#sidebar{width:315px;}

vineet

4

Hi,
The real problem is this stray semi-colon (in red) after the h2. FF is unforgiving with errors like that and it ignores the following selector. On that page the sidebar is called is div#centresidebar


div#sidebar h2    {padding-top: 25px}[SIZE=5][B][COLOR=Red];[/COLOR][/B][/SIZE]
div[B]#centresidebar[/B]    {width:275px; padding-right: 20px; padding-top: 25px;}
5

Thanks Rayzur didnt see that.