為了改善您的使用體驗,本網站正在進行維護,部分功能暫時無法使用。若本站的文件無法解決您的問題,想要向社群發問的話,請到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 發問,我們的社群成員將很快會回覆您的疑問。

搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

了解更多

Overlapping Buttons in Firefox - Using HTML/CSS - Works in IE6

  • 3 回覆
  • 19 有這個問題
  • 18 次檢視
  • 最近回覆由 cor-el

more options

I have html that is being ingnored. Here is the snippet:

<%}else{%>
<DIV> <div style="float:right> <DIV CLASS="smallbuttons">
<TABLE WIDTH=100% BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR>
<TD>
    <input type="image" src="Images/Save.gif" style="cursor: hand" alt="Save data">
    <img src="Images/Cancel.gif" style="cursor: hand" alt="Reset form values" onClick="javascript:reset()">
</TD>
<TD align="RIGHT"> 
	<input type="button" name="E-Mail Notification" value="E-Mail" onClick="javascript:popemail();">
	<input type="button" name="Help" value="Help" onClick="javascript:help();">								
	<img src="Images/Reviewnotes.gif" style="cursor: hand" alt="Create or read review notes for this component"  border="0" onClick="javascript:reviewnotes();">				
	<img src="Images/Comments.gif" style="cursor: hand" alt="Create or read comments for this component"  border="0" onClick="javascript:comments();">
	<img src="Images/Reports.gif" style="cursor: hand" alt="Go to report page" border="0" onClick="javascript:goto('ReportSelection.jsp?selectedyear=<%=request.getParameter("year") %>&selectedcountry=<%=request.getParameter("country") %>&selectedle=<%=request.getParameter("le")%>&selectedbu=<%=request.getParameter("bu")%>')">
	<img src="Images/Home.gif" style="cursor: hand" alt="Go to ITRP home"  border="0" onClick="javascript:home();">		
	<img src="Images/Divisions.gif" style="cursor: hand" alt="Go to business unit home" border="0" onClick="javascript:buhome();">	
</TD>		
</TR>
</TABLE>	
</DIV> </DIV> </DIV>					
<%}%>


It's using the css Below:


TD {
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : 12px;
	color : 330033;
}

.number{
	font-family:  Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: right;
}


.smallbuttons
{
	position: absolute;
	top: 92px;
	float:right;
	left: 10px;
}

.regular{
	font-family:  Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

But the buttons overlap the text. I'm trying to shift the buttons from email etc to the right. Any ideas would be appreciated. This issue causes the text that in IE a row lower to shift up and the buttons overlapp.

I have html that is being ingnored. Here is the snippet: <pre><nowiki><%}else{%> <DIV> <div style="float:right> <DIV CLASS="smallbuttons"> <TABLE WIDTH=100% BORDER=0 CELLSPACING=0 CELLPADDING=0> <TR> <TD> <input type="image" src="Images/Save.gif" style="cursor: hand" alt="Save data"> <img src="Images/Cancel.gif" style="cursor: hand" alt="Reset form values" onClick="javascript:reset()"> </TD> <TD align="RIGHT"> <input type="button" name="E-Mail Notification" value="E-Mail" onClick="javascript:popemail();"> <input type="button" name="Help" value="Help" onClick="javascript:help();"> <img src="Images/Reviewnotes.gif" style="cursor: hand" alt="Create or read review notes for this component" border="0" onClick="javascript:reviewnotes();"> <img src="Images/Comments.gif" style="cursor: hand" alt="Create or read comments for this component" border="0" onClick="javascript:comments();"> <img src="Images/Reports.gif" style="cursor: hand" alt="Go to report page" border="0" onClick="javascript:goto('ReportSelection.jsp?selectedyear=<%=request.getParameter("year") %>&selectedcountry=<%=request.getParameter("country") %>&selectedle=<%=request.getParameter("le")%>&selectedbu=<%=request.getParameter("bu")%>')"> <img src="Images/Home.gif" style="cursor: hand" alt="Go to ITRP home" border="0" onClick="javascript:home();"> <img src="Images/Divisions.gif" style="cursor: hand" alt="Go to business unit home" border="0" onClick="javascript:buhome();"> </TD> </TR> </TABLE> </DIV> </DIV> </DIV> <%}%> </nowiki></pre> It's using the css Below: <pre><nowiki>TD { font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; font-size : 12px; color : 330033; } .number{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; text-align: right; } .smallbuttons { position: absolute; top: 92px; float:right; left: 10px; } .regular{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; }</nowiki></pre> But the buttons overlap the text. I'm trying to shift the buttons from email etc to the right. Any ideas would be appreciated. This issue causes the text that in IE a row lower to shift up and the buttons overlapp.

由 cor-el 於 修改

所有回覆 (3)

more options

A good place to ask questions and advice about web development is at the mozillaZine Web Development/Standards Evangelism forum.
The helpers at that forum are more knowledgeable about web development issues.
You need to register at the mozillaZine forum site in order to post at that forum.
See http://forums.mozillazine.org/viewforum.php?f=25

more options
<img src="Images/Cancel.gif" style="cursor: hand" alt="Reset form values" onClick="javascript:reset()">

alt="Reset form values"

Reset form values not showing

由 cor-el 於 修改

more options

The Alt attribute isn't meant to show as a tooltip on hover.
The Alt attribute is meant to show if the image isn't or can't be displayed.
The title attribute is meant to show if you hover an image or link.
If there is no title attribute, but there is an alt attribute then IE will show the alt attribute as a tooltip.
Firefox doesn't do that, so if the title attribute is missing then you do not see a tooltip if you hover an image or link.