Killing me! - Firefox wont align correctly.
newbie
Posted: Fri, 2008-05-16 14:31
I will be the first to admit that i am new to CSS. I dont have much experience but just enough to be dangerous.
Basically I have a php page that will dynamically create graphs inwhich the user can rollover and to the side, can see details about that instance.
So in IE, you rollover and it works great. To the right of the graph perfect.
In FF, it is right on top of the graph. I know it is because it is not coded correctly, but i cant seem to make it work.
I have attached 2 pictures showing IE and FF.
here is the relevant code:
<div style="clear:both;"></div>
<div id="chart$name" class="column1">
<img src="myimage.php?${chart.$name.URL}" border="0" usemap="#map$name">
<map name="map$name">
$imageMap
</map>
</div>
<div id="$Name$lap" class="column2" >
<p> <span class=TypeGraySmall><b>Instance Detail:</b></span><br>
blah
</p>
</div>
<div class='clear'></div>
function setDIV(id, cmd) {
if (document.getElementById)
//IE 5.x or NS 6.x or above
document.getElementById(id).style.visibility = cmd;
else if (document.all)
//IE 4.x
document.all[id].style.visibility = cmd;
else
//Netscape 4.x
document[id].visibility = cmd;here is its ran on FF:
<div style="clear:both;"></div>
<div id="chart0" class="column1">
<img src="myimage.php?img=chart0&id=4180879920295a2ebfe6db6155b884e0482cd0ea0bc6f&" border="0" usemap="#map0">
<map name="map0">
<area shape="poly" coords="50,187,53,187,53,197,50,197" onmouseover='setDIV("Speed0", "visible");' onmouseout='setDIV("Speed0", "hidden");' title='Speed 8 mph'>
<area shape="poly" coords="53,187,56,187,58,168,58, #... bunch of blahs#
<div id="Speed0" class="column2" >
<p> <span class=TypeGraySmall><b>Instance Detail:</b></span><br><span class=TypeGraySmall>Duration: 0 Seconds</span><br><span class=TypeGraySmall>Speed: 8 mph</span><br><span class=TypeGraySmall>RPM: 1350 rpm</span><br><span class=TypeGraySmall>Calculated Load Value: 24.7%</span><br> </p></div>
<div id="Speed1" class="column2" >
<p> <span class=TypeGraySmall><b>Instance Detail:</b></span><br><span class=TypeGraySmall>Duration: 11 Seconds</span><br><span class=TypeGraySmall>Speed: 8 mph</span><br><span class=TypeGraySmall>RPM: 1288 rpm</span><br><span class=TypeGraySmall>Calculated Load Value: 24.3%</span><br> </p></div>
<div id="Speed2" class="column2" > #... bunch of these blah#
#then is starts over on the next graph#and my relevant CSS
.clear { clear:both;}
.column1 {width:300px; float:left;}
.column2 {visibility:hidden; width:229px; position:absolute; padding-top:35px; padding-left:10px;}
I believe that I have to use absolute placement since all the instances of the rollover are in the same place on the page and are either hidden or, when rolled over, shown.
PLEASE PLEASE help!!!
Jen
Enthusiast
Posts: 273
Joined: 2008-02-22
Location: Providence, RI
Jen, "relevant" to you might
Posted: Fri, 2008-05-16 14:43
Jen, "relevant" to you might not be what is causing the problem. You need to post ALL of your CSS and HTML, and preferably a link to the problem page.
http://ifohdesigns.com - Web Design That Is Neat.
http://ifohdesigns.com/blog - Read it please.
Enthusiast
Posts: 201
Joined: 2008-03-16
kazsil wrote:... just enough
Posted: Fri, 2008-05-16 15:05
oh yeah...
I agree with the previous poster. Provide the complete css and html including doctype or even better, a link to the uploaded page. You have some funny markup there with all your Ps, Bs, BRs and SPANs. I would bet it is your absolute positioning, but the information about the surrounding and the parent elements are lacking.
newbie
Posts: 7
Joined: 2008-05-16
Here is the code
Posted: Fri, 2008-05-16 17:11
newbie
Posts: 7
Joined: 2008-05-16
having problems posting new comments.
Posted: Fri, 2008-05-16 17:36
trying again
newbie
Posts: 7
Joined: 2008-05-16
Source Attached
Posted: Fri, 2008-05-16 17:56
I have attached the page source and the css file for the page.
Please let me know your thoughts!
Thank you all SO SO SO SO much for your help!
jen
Enthusiast
Posts: 201
Joined: 2008-03-16
kazsil wrote:I have attached
Posted: Sat, 2008-05-17 01:28
Your html is not complete, the css is called before the html. You can't upload it?
I gave you a thought in my first response? What did you do about it?
newbie
Posts: 7
Joined: 2008-05-16
ur right.
Posted: Sat, 2008-05-17 01:57
Sorry about that. I uploaded the wrong source code. Here is the code for that page.
And you are right. I did call the css link at the top because I have it in an include with php. I guess I never saw that before. I have fix that so it is reported in the Head section. But, alas, it didnt fix it.
Thanks for your help.
jen
Enthusiast
Posts: 201
Joined: 2008-03-16
Caposoft wrote: I would bet
Posted: Sat, 2008-05-17 03:42
I didn't bet on the CSS call, but your absolute positioning. What did you do about that?
newbie
Posts: 7
Joined: 2008-05-16
I tried putting it in a
Posted: Sat, 2008-05-17 13:45
I tried putting it in a parent tag which you can see at the bottom of the CSS page. I made the container and put the middle and left in it. That didn't do anything. It actually broke IE too. I don't know what to do about that. From what I can understand, it needs to be an absolute position since all of the instance details are in the same spot. If it were not absolute then they would be one after the other. I used to have it where I declared where the top and left were defined. so the line looked like this
<div id="$Name$lap"style="visibility:hidden;position:absolute;left:710px; top:$heightpx;width:290px; height:60px;">
with the $height being dynamic depending on how many graphs they had. So for every graph it would be moved down 150px.
This seemed to work fine, but then i noticed that since I told it left 710px, it was always 710px from the side of the screen, which worked great on my comp, but was off the side on others.
So i dont know what to do with the call. I have tried everything I can come up with, but I am not strong enough yet in CSS to fix this alone. All I can figure out is that the instance detail has to be absolute (unless I am not setting it right). Am I barking up the right tree with absolute? Am I just not clearing it right? Does it need a container tag - and if so, then do i float the graph and the absolute the instance detail?
Thanks,
jen
Enthusiast
Posts: 201
Joined: 2008-03-16
The file you attached is
Posted: Sat, 2008-05-17 15:02
The file you attached is still incomplete. It is giving me thousands of errors, even closing html and body manually. Make sure your markup is valid before you add all the scripts. I have no time or desire to deal with this. I actually consider this obnoxious.
newbie
Posts: 7
Joined: 2008-05-16
Caposoft, geesh. There is
Posted: Mon, 2008-05-19 17:37
Caposoft,
geesh. There is no need to be rude. And you dont need to get all indignant.
I can only hope you don't run into others that aren't as perfect as you and whom may 'waste your time.'
Anyway, I fixed it myself and it works as I had planned!
Take a couple really deep breaths and have an absolutely wonderful day!
jen