...

View Full Version : Problem with CSS in Safari, Firefox, Chrome etc [modified]



payal_e_m
08-11-2011, 12:24 AM
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>

alykins
08-11-2011, 12:39 AM
since you don't use the studylink and others as actual classes; more like identifiers, change all those "classes" to id's ... id="studylink"
then do #studylink:hover {CSS for your restyle}

payal_e_m
08-12-2011, 03: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum