Problem with CSS in Safari, Firefox, Chrome etc [modified] [Archive]

payal_e_m

08-10-2011, 11:24 PM

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.

Screens attached.

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="server">
</A><img src="/Test/Images/Head.jpg" border="0">
<div class="HeaderMenu">
<ul>
<li class="studylink">
<a href="http://www.google.com/" title="Study Link. "></a>
</li>
<li class="home">
<a href="http://www.yahoo.com/" title="Back to the Homepage. "></a>
</li>
<li class="print">
<a href="#" onclick="javascript:print();return false" title="Print this page. "></a>
</li>
</ul>
</div>
</td>
</tr>
</table>

payal_e_m

08-12-2011, 02:22 AM

Thanks for that.

in CSS for li i used Display:block float:left

li.home a:link, li.home a:visited, li.home a:active {display:block;float:left;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%; }

and in the aspx page i used

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

This sorted out my problem with other browsers.