Improve Your Rankings with a Sitemap That Works: The CSS - Making the Styles Work in Mozilla
(Page 5 of 6 )
You’ll need to create a slightly different CSS file that will render the page in the same way in Mozilla browsers, and a script file that will detect the browser and select the stylesheet accordingly. You could cater for almost any browser, but as MSIE, Firefox, Mozilla and Navigator are easily the most popular, this example script will just target those ones.
First off, modify the #left and #right ID selectors in the CSS file:
#left {
text-align:right;
float:left;
width:35%;
border-width:0;
margin-left:10%;
background-color:ffffff;
}
#right {
text-align:left;
float:right;
width:35%;
border-width:0;
margin-right:10%;
background-color:ffffff;
}
You can see that the width of the elements has been reduced, and a margin attribute added. For some reason, Mozilla doesn’t like to place elements flush against one another so the second column will overspill to below the first column when the original stylesheet is used.
To align each box heading against the top and sides of each box correctly, you will also need to remove the top and left attributes from the h1 type selector and replace it with:
Margin: 0 0 0 0;
The width of the #block selector should be increased to 100%, and the padding attribute can be safely removed from the #navigation ul and #navigation a selectors. Finally, a margin-left:30%; attribute should be added to the #level2 ID selector.
Save the updated CSS file as styleMoz.css and change the link element in the main HTML file so that it links to the new stylesheet. Open the web page in Mozilla and it should appear as intended.
Next: Sitemap Style Switcher >>
More Search Optimization Articles
More By Dan Wellman
/ 5 
