|
CSS - Firefox/ie Differences On Css Tooltip
I'm using a CSS-based tooltip on a page I'm developing, and it displays fine on IE (v8), but on Firefox (v3.6.2) there is an additional 25 pixels or so of padding/margin at the right.
I can't for the life of me work out why, so if anybody wouldn't mind taking a look at the page in question and seeing if they can fix what I'm sure is a relatively simple problem, I'd greatly appreciate it: As this is my first post, I'm not allowed to post the URL of the page I'm having problems with, so please PM me if you're interested in taking a look. Thanks, Mark Similar TutorialsHi guys I was checking the CSS on a website I've been developing and I've noticed that Firefox is displaying the font size differently on the different operating systems(XP and OS X). Does anyone know if there is a hack I could use to determine if the user is viewing the site in Firefox using a PC or Mac and set a style sheet accordingly. Or this there a more simple fix for this? Thanks I am using CSS to display content from a XML document... the following code works part of the way in ie and part of the way in ie, but i need both parts working together in one browser. The XML document is... Code: <quotes>
<heading>NASDAQ 100</heading>
<subHeading>Current quotes</subHeading>
<dateTime>
<date>11/01/2008</date>
<time>11:45:05</time>
</dateTime>
<titles>
<column id="c1">Symbol</column>
<column id="c2">Name</column>
<column id="c3">Last Sale</column>
<column id="c4">Net Change</column>
<column id="c5">% Change</column>
<column id="c6">Volume</column>
</titles>
<stocks>
<stock class="down">
<symbol>AAPL</symbol>
<company>Apple Computer, Inc.</company>
<lastSale>$15.26</lastSale>
<netChange>-0.17</netChange>
<pChange>-1.10%</pChange>
<volume>5.548</volume>
</stock>
<stock class="up">
<symbol>ABGX</symbol>
<company>Abgenix, Inc.</company>
<lastSale>$9.22</lastSale>
<netChange>0.06</netChange>
<pChange>0.66%</pChange>
<volume>1.396</volume>
</stock>
...so on and so on...
The CSS I am using is... Code: quotes {display:table;}
heading {display: block; position: absolute; top: 17%; left:44%}
subHeading {display: block; position: absolute; top: 20%; left:44%}
dateTime {display: block; position: absolute; top: 10%; left:75%;}
titles {display:block; position: absolute; top: 24%;}
titles * {display: table-cell; width:175px; }
stocks {display:table;}
stock {display:block; position: relative; top: 30%;}
stock * {display: table-cell; width:175px; }
stock[class="down"] symbol {display: table-cell; width:175px; color:green}
stock[class="up"] symbol {display: table-cell; width:175px; }
stock[class="unchanged"] symbol {display: table-cell; width:175px; }
In IE: The layout of the heading, subheadings, etc are right, but the declarations based on XML attributes "stock[class="down"] symbol {display: table-cell; width:175px; color:green}" do not work. In FF: The layout of the heading and subheading gets all crammed to the right and doesnt look right at all, BUT the declarations based on XML attributes are working; the stocks with attribute of "down" are showing up as green text. Any suggestions on why this is and how to fix it. Also, is anyone else seeing anything different than myself? link: http://mtm324php.info/nasdaq.xml Thank you. i'm trying to make a black border for images in css with a small white background in the padded area. here is my css: Code:
.image_border
{
border:1px solid #999999;
padding:5px;
background:white;
}
the image looks how i want it in firefox but in internet explorer it doesnt look like any styles are even applied. here is a example you can compare in both browsers: http://www.hiddentreasurehosting.com/image_css.html any ideas what the problem is? also i would like to have a small drop shadow on the right and bottom of the image too but i wasnt sure of the best way to do that. any suggestions are appreicated. thanks for the help! Hi, can you take a look at my site: www vitacam com in both IE7 and Firefox and let me know if you see anything in the code that is causing the layout differences? Everything's all bunched together in Firefox but it looks right in IE. Thanks, Shane I am having what I can only imagine is a very common problem. Firefox is working fine and IE is not. I want the logo then the name image next to it in the header. I am positioning with css as below: Code: <div id="header">
<div class="logoholder">
<img src="images/logo70.jpg"/>
<img class="djembefola" src="images/djembefolaheader.jpg">
</div>
</div>
and the css: Code: .logoholder {
position:absolute;
left : 20px;
top : 0px;
width:500px;
height:70px;
}
#header img {
float: left;
}
#header img.djembefola {
float: none;
}
I am aware that this CSS may be very weak, as I'm not too experienced and am coding by hand. What would a robust way of doing this be. I don't really like this float lark but it was necessary to get the logo to stick left. Is it a good idea to have it inside the logoholder div (albeit bad naming by me) or is it unnecessary? Sorry I just realised that I didn't link to the page I had intended to.... www.djembefola.net Thanks for your time and consideration! I have .gif picture (country) at the bottom of the page. Map on it defines hotspots (states). Class hover works great with "normal" hyperlinks, but when I am trying to use them in this, nothing seems to be easy. I just want to have possibility to make hover tooltip based on poligon hotspots map hyperlinks (then I would use PHP to get data from a database). Anybody has this problem solved? Its working, lol! phew i've coded my layout perfectly for Firefox, but there are a few things that are irking me in Internet Explorer. http://www.lovemeforme.org/new/ the things that are bothering me: - In IE, under the navigation, each link in the menu has a break under it, i don't want the break there, I want it how it looks in firefox. - under the blog title, I don't want a space there, i want it right under the title how it is in ff, but in IE it puts a break there too. - same with the breaks under the titles on the sidebar, i don't want breaks there either. - on the side bar, under the ask me section, there is a black border around the 'ask' button, how can i get rid of that? also, how can i make the textarea the same size as the ask button? Can anyone help me fix these small problems? Thanks so much! It's much appreciated. hi, I have written a small tooltip code which works in FF and Opera but does not work in IE 6. When I hover it shows nothing. I have the following css Code: a {position: relative;}
a span {display: none;}
a:hover span {
position: absolute;
top: 5px;
left: 30px;
display: block;
background: #fdd;
border: 1px solid red;
}
and am using it like this Code: <a href=# >Name<span>full name</span></a> this is my CSS only tooltip, how to make that tooltip to bi on top of every item it is used for Code:
<style>
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:230px; ;}
a.tooltip:hover span{display:block; position: absolute;top:; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c; font-size:12px;}
a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
</style>
<table width="768" border="1" align="center">
<tr>
<td>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<a href="{url_download}" class="tooltip">
<div class="progress-bar" style="width:300px; float:left;">
--------------------------------------------
</div>
<span>
<div>
<strong>File Size:</strong> {filesize_value} (KB)<br>
<strong>Downloads:</strong> {hits_value}<br>
<strong>Added:</strong> {created_date_value}<br>
{description}
{screenshot_begin}<img src="{screenshot}" align="right" />{screenshot_end}
</div>
</span>
</a>
<div class="seperate" style="float:left;"></div>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="{url_download}" class="tooltip">
<div class="progress-bar" style="width:300px; float:left;">
--------------------------------------------
</div>
<span>
<div>
<strong>File Size:</strong> {filesize_value} (KB)<br>
<strong>Downloads:</strong> {hits_value}<br>
<strong>Added:</strong> {created_date_value}<br>
{description}
{screenshot_begin}<img src="{screenshot}" align="right" />{screenshot_end}
</div>
</span>
</a>
<div class="seperate" style="float:left;"></div>
</td>
</tr>
</table>
I am trying to build a site, and integrate a blog with Feedburner. The site is wwhgc.craigstanley.org The Issue: When the blog is present, the left column drops below all of the right content in IE (but not in Firefox) When the blog is not present (click "tandem flights" at the top), the content is fine. Feedburner says that they do not set a width to their content. Is there any way to see the actual HTML that the Feedburner Javascript spits out? Please help me . . . too many days down the drain on this one. -Craig Thanks for taking the time to read my question. I have an <ul> that has different padding-right for each <li>. My problem is that the padding is where I want it to be in IE, but FF does not kick it over as far. I really don't know why. the <ul> is supposed to curve from the center of the page to the outside back to the center, like a 1/2 moon. Any ideas? Thanks, HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Created on: 7/21/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>
<link href="Junk.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="WP.js"></script>
</head>
<body>
<div id="FaderBar">
<div id="FaderBarWP">Warren Persowich</div>
<div><img id="FaderBarImg" src="images/audience.jpg" alt=""></div>
<div id="FaderBarHC">Humor Consultant</div>
</div>
<p/>
<hr class="HRBorder" />
<div id="OuterLeft">
<img class="WPName" src="images/WPName.jpg" alt="" />
<div id="MainBox">
<div id="LeftBox">
<div id="BioBox">
<div id="Bio0" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[0],0)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[0],0)";>5 Star Rating on bit aired on CBC</div>
<div id="Bio1" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[1],1)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[1],1)";>Licenced Psychologist</div>
<div id="Bio2" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[2],2)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[2],2)";>National Television Debut - Fall of 2006</div>
<div id="Bio3" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[3],3)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[3],3)";>XM Satelite Bit</div>
<div id="Bio4" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[4],4)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[4],4)";>Instructor of Stand-Up Comedy</div>
<div id="Bio5" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[5],5)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[5],5)";>Manitoba Theatre For Young People</div>
<div id="Bio6" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[6],6)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[6],6)";>Cancer Survivor</div>
</div>
<div id="BioFooter">Move cursor over text to read on...</div>
<div id="Broadcast">
<!-- begin embedded WindowsMedia file...-->
<OBJECT id='mediaPlayer' width="320" height="285"
classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95'
codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701'
standby='Loading Microsoft Windows Media Player components...' type='application/x-oleobject'>
<param name='fileName' value="http://servername/path/to/media.file">
<param name='animationatStart' value='true'>
<param name='transparentatStart' value='true'>
<param name='autoStart' value="true">
<param name='showControls' value="true">
<param name='loop' value="true">
<EMBED type='application/x-mplayer2'
pluginspage='http://microsoft.com/windows/mediaplayer/en/download/'
id='mediaPlayer' name='mediaPlayer' displaysize='4' autosize='-1'
bgcolor='darkblue' showcontrols="true" showtracker='-1'
showdisplay='0' showstatusbar='-1' videoborder3d='-1' width="320" height="285"
src="http://servername/path/to/media.file" autostart="true" designtimesp='5311' loop="true">
</EMBED>
</OBJECT>
<!--<a href="http://servername/path/to/media.file" style='font-size: 85%;' target='_blank'>Launch in external player</a>-->
</div>
</div>
<div id="CenterBox"><img class="HeadShot" src="ColourTest1.JPG" width="122" height="212" alt=""/></div>
<div id="RightBox"><ul>
<li class="LB1TOP"><a href="#">Seminars</a></li>
<li class="LB2"><a href="#">Stand-Up</a></li>
<li class="LB3"><a href="#">Intro Psych</a></li>
<li class="LB4"><a href="#">Selected Transcripts</a></li>
<li class="LB3"><a href="#">Broadcast Archives</a></li>
<li class="LB2"><a href="#">Links</a></li>
<li class="LB1"><a href="#">Pricing & Inquiries</a></li>
<!--<li class="LB4"><a href="#">Link #8</a></li>
<li class="LB3"><a href="#">Link #9</a></li>
<li class="LB2"><a href="#">Link #10</a></li>
<li class="LB1"><a href="#">Link #11</a></li>-->
</ul></div>
</div>
</div>
<div id="Signature"><a class="Sig" href="#">Manic Web Designs</a></div>
</body>
</html>
CSS: Code: body {
/*background: #E2E2E2;*/
background: #000000;
margin-top: 5px;
margin-left: 0px;
}
#OuterLeft {
background-color: #000000;
padding-left: 16px;
float: left;
}
.WPName {
float: left;
margin-top: -14px;
}
.HRBorder {
width: 72%;
color: #330099;
background-color: #330099;
margin-bottom: 0px;
}
#MainBox {
background-color: #ffffff;
width: 780px;
overflow: hidden;
background-image:url('Images/RightFadeBW.jpg');
background-repeat: repeat-y;
background-position: top right;
}
#FaderBar {
/*background-color: #ECF9FF;*/
background-color: #A9A9A9;
margin: 0 auto;
height: 105px;
width: 780px;
border: 5px double #ffffff;
/*background-image:url('HeaderImg.png');*/
}
#FaderBarWP {
float: left;
height: 40px;
width: 300px;
margin-left: 15px;
margin-top: 5px;
font-size: 40px;
/*background-color: red;*/
}
#FaderBarHC {
float: left;
height: 55px;
width: 430px;
font-size: 25px;
margin-left: 45px;
/*background-color: aqua;*/
}
#FaderBarImg {
float:right;
height: 105px;
width: 199px;
}
#LeftBox {
width: 380px;
/*height: 500px;*/
float: left;
background-color: aqua;
background-image:url('Images/LeftFadeBW.jpg');
background-repeat: repeat-y;
}
#CenterBox {
width: 150px;
/*height: 500px;*/
float: left;
background-color: red;
}
#RightBox {
width: 250px;
/*height: 500px;*/
float: left;
background-color: yellow;
}
#BioBox {
width: 295px;
height: 250px;
background-color: #F2F2F2;
padding-top: 5px;
border-color: #dcdcdc;
border-style: solid;
border-width: 2px;
float: right;
margin: 5px 10px 0px 0px;
overflow: hidden;
}
.BioContent {
width: 100%;
float: left;
font-size: 11px;
margin-bottom: 5px;
border-top: 1px dashed #333333;/*#dcdcdc;*/
border-bottom: 1px dashed #333333;/*#dcdcdc;*/
padding: 5px;
}
#BioFooter {
float: right;
width: 100%;
text-align: right;
font-size: 12px;
color: gray;
margin-bottom: 15px;
}
#Broadcast {
height: 300px;
width: 330px;
float: right;
padding: 0px 0px 0px 10px;
/*background-color: green;*/
}
ul li {
float: right;
height: 20px;
margin-bottom: 25px;
border-color: #dcdcdc;
border-width: 2px;
border-style: solid;
text-align: center;
width: 150px;
background-color: #F2F2F2;
list-style-type: none;
}
.LB1TOP {
margin-right: 40px;
margin-top: 35px;
}
.LB1 {
margin-right: 40px;
}
.LB2 {
margin-right: 35px;
}
.LB3 {
margin-right: 30px;
}
.LB4 {
margin-right: 25px;
}
.LB5 {
margin-right: 20px;
}
.LB6 {
margin-right: 15px;
}
ul li a {
display: block;
}
ul li a:link {
text-decoration: none;
color: black;
}
ul li a:visited {
text-decoration: none;
color: black;
}
ul li a:hover {
background-color: #737373;
color: white;
font-weight: bold;
}
ul li a:active {
text-decoration: none;
}
img.HeadShot {
margin: 125px 0px 0px 10px;
}
#Signature {
/*background-color: #E2E2E2;*/
/*margin: 0 auto;*/
width: 780px;
padding-top: 10px;
/*height: 500px;*/
/*border-color: #004A94;
border-width: 2px;
border-style: solid;*/
overflow: hidden;
text-align: right;
float: right;
}
a.ReadOn:link {
text-decoration: none;
color: black;
}
a.ReadOn:visited {
text-decoration: none;
color: black;
}
a.ReadOn:hover {
text-decoration: none;
color: black;
}
a.ReadOn:active {
text-decoration: underline;
color: black;
}
.Sig {
color: #808080;
font-size: 10px;
}
a.Sig:link {
text-decoration: none;
}
a.Sig:visited {
text-decoration: none;
}
a.Sig:hover {
text-decoration: overline underline;
}
a.Sig:active {
text-decoration: none;
}
Okay, i was just messing around with (X)HTML and CSS and was wondering if there was an easy way to do this. When viewed in Internet Explorer (6 sp1) it shows fine, the floating "menu" to the left extends the "body" division. But if I view it in FF (1.0.4) then the floating menu doesnt expand the "body" division like it does in IE. I usually fix this with (if a page doesnt have a lot of content) a lot of breaks to even it out. But is there an easier way? URL for the website so you can see it is below. (There's really almost nothing on it, just messing around with layout) http://www.omnimist.com [edit] looked at it via opera and netscape and they're the same as FireFox, but i want it to look like it does with IE...[/edit] is there any difference? any right or wrong way? just wondering My site is http://www.shiningstarsyouth.com/. If you render the page in IE and Mozilla it seems that Mozilla renders my nav bar a couple of pixels lower than IE. Also the hover link style sheet that I used on the links in the upper right of the page work in Mozilla, but not in EI. The long vertical grey line that goes down the center of the page also renders differently in length. Why do these differences exist Hi guys, Im building a DNN site for a client, and have used a menu system theyve specified. Ive got it looking how I want, however in IE I have a couple pixels of padding below the UL container.. in FF its perfect (the butt up against each other)... Any hints? Im stumped. Cant post URL's, so if you're bored and feel like making someones day, feel free to PM me Cheers!!!! Can different browsers interpret CSS differently because of the order you put things in? I have the following CSS in my website Code:
div#container
{
background-color: #FFFFFF;
border: 1px solid #FBFBFB;
width: 660px;
height: 250px;
padding: 5px;
margin-left: 50px;
margin-top: 5px;
}
div#left
{
float: left;
clear: right;
width: 350px;
height: 250px;
background-color: #FF7800;
}
div#right
{
float: left;
clear: right;
width: 350px;
height: 250px;
background-color: #F3F3F3;
margin-left: 5px;
}
and the html Code: <div id="container"> <div id="left"></div> <div id="right"></div> </div> in IE it works fine, the layout is next to each other in a box but in safari (on mac) the right hand box is position below the left hand one... You can see the site at http://www.impulsive-solutions.co.uk/isnoname/ I have a problem with a tooltip i'm trying to make look decent in both browsers, IE and firefox. it looks beautiful in firefox the way i have it. but in IE it stick the image way above the tooltip and the padding is a bit funky. Code: <img src="eq2icons/"<?=$icon?>" class="itemicon" width="42" height="42"><table class="ttb" width="350" cellspacing="0" cellpadding="0"><tr bgcolor='#FFDE2E'><td colspan=2><span class=quality><?=$itemname?></span></td></tr><tr><td width=88%><?=$text1?></td><td width=12%></td></tr><tr><td colspan=2><?=$text2?></td></tr><tr><td colspan=2><?=$text3?></td></tr><tr><td colspan=2><?=$text4?></td></tr><tr><td colspan=2><?=$text5?></td></tr><tr><td colspan=2><?=$text6?></td></tr><tr><td colspan=2><?=$text7?></td></tr><tr><td colspan=2><?=$text8?></td></tr><tr><td colspan=2><?=$text9?></td></tr><tr><td colspan=2><?=$text10?></td></tr></table> CSS: Code:
span.quality { color: #000000; font-weight: bold; padding: 2px;}
span.quality1 { color: #FFCC00; font-weight: bold;}
span.quality2 { color: #21E626; font-weight: bold;}
table.ttb {
background-color: #282828;
color: #FFFFFF;
margin: 0px;
padding: 1px;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
font-size: 11px;
}
table.ttb a:link { color: #8888FF; }
table.ttb a:visited { color: #7777EE; }
table.ttb tr {
padding: 3px;
}
table.ttb h6 {
font-size: 10px;
}
.itemicon{
float: right;
padding: 2px;
margin-top: 12px;
}
Here the site in question. (yes, i'm sorry i do require a signup to view the data to track and eliminate scrapers/data miners. Free signup though) http://www.eq2archives.com The tooltip is currently shown if you go to "quests by zone" then choose a zone and choose a quest with an item reward. ill post a few shots in IE and Mozilla thanks in advance =) Hello all, I have the following test page : http://st2plugin.benbun.co.uk/control/test.php This renders fine in Firefox as it does the following : - Occupies the full width of the screen - Maintains column widths for the 1st, 2nd and 4th columns. - Prevents the rows occupying more than one text line. However, when viewing it in IE7, I get a number of issues - The table width is wider than the screen and as such the far right of the table is off the screen. - The rows within the table occupy more than one row. Anyone have any pointers on how I might address this? Thanks |
|||||||