Problem with CSS in Safari, Firefox, Chrome etc [modified]
-
Hi, I am working on an aspx file which uses css. It displays fine in IE but not in Safari, Chrome, Firefox etc. I am trying to get my head around it but all in vain.. When it get displayed in other browsers all the li jumps to the right only displaying only half of each li. What i think is the width(eg : width :67px for li.studylink a:active) given in the css is not being identified by other browsers. It would be very helpful if someone could help me sort it out. I am posting my html contents and css which doesn't gets displayed right. Thanks in advance. Payal CSS ----
.HeaderMenu ul {float:right;height:20px;font-size:6pt;padding-top:2px;}
.HeaderMenu li {display:inline;font-family:arial,arial,sans-serif;font-size:6pt;height:20px;padding:0 0 0 15px; }
li.studylink a:link, li.studylink a:visited, li.studylink a:active {background-image:URL(/Test/Images/studylinkoff.jpg);background-repeat:no-repeat;background-position:left center;width:67px;vertical-align:middle;padding:6px 5px 7px 23px;color:#000;text-decoration:none;height:100%; }
li.studylink a:hover {background-image:URL(/Test/Images/studylinkon.jpg);background-repeat:no-repeat;background-position:left center;color:#000;text-decoration:none;height:100%; }
li.home a:link, li.home a:visited, li.home a:active {background-image:URL(/Test/Images/home_off.gif);background-repeat:no-repeat;background-position:left center;width:67px;vertical-align:middle;padding:6px 5px 7px 23px;color:#000;text-decoration:none;height:100%; }
li.home a:hover {background-image:URL(/Test/Images/home_on.gif);background-repeat:no-repeat;background-position:left center;color:#000;text-decoration:none;height:100%; }
li.print a:link, li.print a:active, li.print a:visited {background-image:URL(/Test/Images/print_off.gif);background-repeat:no-repeat;background-position:left center;width:80px;vertical-align:middle;padding:6px 5px 7px 23px;color:#000;text-decoration:none;height:100%; }
li.print a:hover {background-image:URL(/Test/Images/print_on.gif);background-repeat:no-repeat;background-position:left center; color:#000;text-decoration:none;height:100%; }HTML ------
<table border="0" cellspacing="0" cellpadding="0" width="770" height="70">
<tr>
<td>
<A id="a1" href="/Test/Info/Information/HomePage.aspx" runat=&q -
Hi, I am working on an aspx file which uses css. It displays fine in IE but not in Safari, Chrome, Firefox etc. I am trying to get my head around it but all in vain.. When it get displayed in other browsers all the li jumps to the right only displaying only half of each li. What i think is the width(eg : width :67px for li.studylink a:active) given in the css is not being identified by other browsers. It would be very helpful if someone could help me sort it out. I am posting my html contents and css which doesn't gets displayed right. Thanks in advance. Payal CSS ----
.HeaderMenu ul {float:right;height:20px;font-size:6pt;padding-top:2px;}
.HeaderMenu li {display:inline;font-family:arial,arial,sans-serif;font-size:6pt;height:20px;padding:0 0 0 15px; }
li.studylink a:link, li.studylink a:visited, li.studylink a:active {background-image:URL(/Test/Images/studylinkoff.jpg);background-repeat:no-repeat;background-position:left center;width:67px;vertical-align:middle;padding:6px 5px 7px 23px;color:#000;text-decoration:none;height:100%; }
li.studylink a:hover {background-image:URL(/Test/Images/studylinkon.jpg);background-repeat:no-repeat;background-position:left center;color:#000;text-decoration:none;height:100%; }
li.home a:link, li.home a:visited, li.home a:active {background-image:URL(/Test/Images/home_off.gif);background-repeat:no-repeat;background-position:left center;width:67px;vertical-align:middle;padding:6px 5px 7px 23px;color:#000;text-decoration:none;height:100%; }
li.home a:hover {background-image:URL(/Test/Images/home_on.gif);background-repeat:no-repeat;background-position:left center;color:#000;text-decoration:none;height:100%; }
li.print a:link, li.print a:active, li.print a:visited {background-image:URL(/Test/Images/print_off.gif);background-repeat:no-repeat;background-position:left center;width:80px;vertical-align:middle;padding:6px 5px 7px 23px;color:#000;text-decoration:none;height:100%; }
li.print a:hover {background-image:URL(/Test/Images/print_on.gif);background-repeat:no-repeat;background-position:left center; color:#000;text-decoration:none;height:100%; }HTML ------
<table border="0" cellspacing="0" cellpadding="0" width="770" height="70">
<tr>
<td>
<A id="a1" href="/Test/Info/Information/HomePage.aspx" runat=&qI have come across this recently myself, in answer to oyur problem, if it's not too late, you can set margin-left:1%; or however much and that will force the thing back into view, however, a better solution is to force the bullet inside of the LI tag, by default it acts as though it is outside. To do this, put
li { list-style-position:inside; }
it's completely standard css and works best. Hope this helps, Ed :)