PDA

View Full Version : Firefox 3.5 on Vista 32bit floating div left problem


tahsin1982
05-18-2011, 04:47 PM
Hi Guys,

This is driving me crazy as I dont know what is wrong with firefox. If you look at this simple rough demo site I am planning to make

http://tahsinwonders.net/firefox/testing.html

I am using windows 7 on my desktop wiht 64 bit and it works fine on all browsers including firefox (the new one that looks liek google chrome)

But my labtop I am using Vista 32 bit and he firefox there i thinkt he latest ver is 3.5 and the floating divs float left is all messed up. I have no idea how to fix this if anyone can help I really appreaciate it

Here is my CSS code. I usually come up with problems with IE8 mostly but this really shocked me cause it looks fine on IE8. And sorry if this has been asked before.

#wrapper {
width: 900px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
}
body {
background-color: #666;
}
#banner {
background-color: #000;
height: 200px;
}
#nav {
background-color: #669;
height: 30px;
}
#footer {
background-color: #999;
height: 100px;
clear: both;
}
#bodyArea {


}
#left {
background-color: #CCC;
float: left;
height: 350px;
width: 280px;
margin-right: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
h1 {
font-family: "Arial Black", Gadget, sans-serif;
color: #FFF;
font-size: 60px;
padding-left: 20px;
}
* {
margin: 0px;
padding: 0px;
}

domedia
05-18-2011, 04:57 PM
But my labtop I am using Vista 32 bit and he firefox there i thinkt he latest ver is 3.5 and the floating divs float left is all messed up. I have no idea how to fix this if anyone can help I really appreaciate it

I don't think I will be able to replicate your setup, but if you can explain more in detail what is messed up, I might get a hunch.

tahsin1982
05-18-2011, 05:24 PM
Hi thanks for the quick reply and sorry if I did not sound clear with I meant. I have attached a screen shot of what I see on the older ver of firefox 3.5 on my labtop.

http://www.tahsinwonders.net/firefox/vistaFirefox.jpg

The new ver of firefox 4 it looks perfect.

This is my source code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="banner">
<h1>TITLE</h1>
</div>
<!--End Banner--->
<div id="nav">

</div> <!----End nav--->

<div id="bodyArea">

<div id="left">

</div><!--End #Left-->

<div id="left">

</div><!--End #Left-->

<div id="left">

</div><!--End #Left-->


</div><!----End body Area-->


<div id="footer">

</div> <!----End footer area-->







</div> <!---End #wrapper-->





</body>
</html>


Thanks :)

DWcourse
05-18-2011, 05:48 PM
Congratulations, that's a new one on me. Search for this line:

<!----End nav--->

And change it to this:

<!--End nav--->

domedia
05-18-2011, 06:18 PM
Two dashes at the start and end of comment tags.
I normal code validation would have shown the same thing.

gentleone
05-18-2011, 07:18 PM
Another thing... if you reset the margin and padding to all your elements with this CSS rule

* {
margin: 0px;
padding: 0px;
}

then it shout it be the first rule in your stylesheet. Where you have it now it sets the margins you have on for example div#left back to 0.

tahsin1982
05-18-2011, 10:20 PM
I thought you were being sarcastic to me cause I thought its just a comment tag but now I am really embarassed I didnt know that it would cause this much headache and thank you so much once again!:mrgreen:


Congratulations, that's a new one on me. Search for this line:

<!----End nav--->

And change it to this:

<!--End nav--->

tahsin1982
05-18-2011, 10:23 PM
Thanks for the tip I cleaned that up as well. I just want to say I find this forum the most helpful compare to the adobe site one! Now I have a lot cleaning up to do. :)


Another thing... if you reset the margin and padding to all your elements with this CSS rule

* {
margin: 0px;
padding: 0px;
}
then it shout it be the first rule in your stylesheet. Where you have it now it sets the margins you have on for example div#left back to 0.

domedia
05-18-2011, 10:48 PM
I just want to say I find this forum the most helpful compare to the adobe site one!)
We should collect testimonials like these and use them in marketing 8)

tahsin1982
05-18-2011, 10:50 PM
We should collect testimonials like these and use them in marketing 8)

I will be glad to be the first! :) Thanks again to all of you!

DWcourse
05-19-2011, 01:21 AM
I just want to say I find this forum the most helpful compare to the adobe site one!

Well, the Adobe forum is setting the bar kind of low.:roll:

tahsin1982
05-19-2011, 01:30 AM
Well, the Adobe forum is setting the bar kind of low.:roll:


They are I went to ask for help on this site I created

http://www.kanatarimsandtires.com/rimulator.html


The spry drop down menu gets cut off with the java application and I did not really know what caused this so I asked for help in adobe and one guy replied "Its a not a problem with spry but a common problem. Try harder searching in google". :roll:

So in the end I had to add to place the java below so it wont clash with the spry drop down. The client did not mind.

But I saw a topic of this problem here so I will use the search here.
:mrgreen:

Cheers

DWcourse
05-19-2011, 02:52 AM
I haven't really worked with Java applets. I don't have a clue as to how you solve that one.

tahsin1982
05-19-2011, 04:05 AM
Its nothing to do with the aplet its just the spry drop down navigation gets cut off which I notice if I have a horizontal menu and the banner is a jquery slide show or a flash animation. The drop down spry menu gets cut off. I think I saw a topic of it here and will look into it.

DWcourse
05-19-2011, 04:10 AM
It's not actually cut off, it's behind the applet or the flash. With flash you just have to add wmode="transparent" to the call for the swf file. With other things it may be a matter of adjusting the z-index property.