A problem with Firefox 2

hey all,
i got a problem with Firefox 2 not viewing my link menu bar correctly, there should be a padding of 15px between each link.
in every browser it works fine but in FF 2 its not, all the links are aligned to the left and dont have the effect of the padding on them, hope some1 can help me solve it, this is the link to the website:

http://sospets.brinkster.net/

this is the CSS file: (only the parts i think that are needed)

body{margin:3px 5px 3px 5px;background-color:#99CCFF;font-family:Arial;color:#484848;font-size:16px;}
#Main{width:994px;height:797px;border:3px solid #267411;}
img{border-width:0px;}
#menu{background-image:url(images/bar.jpg);width:994px;height:40px;font-family:sans-serif;font-size:16px;text-align:center;line-height:40px;direction:rtl;color:#000000;}
#menu a,#menu span {padding:0px 15px 0px 15px;}
#menu a:link,#menu a:visited{color:#FFFFFF;}
#menu a:hover{color:#000000;}

thanks for the help :slight_smile:

Hi,

The page could really do with an update to modern html and css and lose those tables and deprecated presentational elements but a quick fix would be to use this proprietary code for FF2.


#menu a, #menu span {
    padding:0px 15px 0px 15px;
   [B] display:-moz-inline-box;/*For  ff2 - proprietary (invalid for validation purposes)*/[/B]
}

Off Topic:

May I ask why you changed your layout from using divs to a table?. I remember your site from some time ago and it was going in the right direction using divs. This post But now your back to a table

Off Topic:

May I ask why you changed your layout from using divs to a table?. I remember your site from some time ago and it was going in the right direction using divs. This post But now your back to a table

Acutally, the website was already finished using tables before i moved to divs, i thought it would be nice moving to divs + css but since my knowledge in CSS is really poor and what the guides offer is really basic and not going to help me progress at all.

i got kinda scared from all those “use only ur css file to style elements” , thus i decided to move back to how the website looked like in the first place…

thanks for the help Paul, ill check it out when i get home, dont have FF2 here

You know. Your layout is not that complicated. You realy should try to get rid of those tables. Just ask your questions here and there will be enough support to guide you through. :slight_smile:

Leave it donboe, i just dont belive that if ill suddenly change the way my website woks then it’ll work perfectly or wont need any modifications for certain browsers, a proof for that is that i just tried to use the code again u provided in the other thread for the divs and the menu was still not centered in IE 7…

also the fact that im lack of time to start that website from the very beginning again doesn’t let me start over.

thanks for the offer though, i really appreciate u trying to help, but for now ill just try to fix the small things and hope to get it done soon…

Now there’s another problem in IE 7, there’s a title and 1 line of text just in the left side of the unordered lists on the right div, it shouldn’t be there, it should be centered and go just below the lists, i tried to use <center> or adding a <br/> to get it below it but that doesn’t work out, any ideas?

What people don’t understand is that with a little effort upfront, your site is VERY easy to maintain.

You wouldn’t be coming to us with all of these issues with <center> tags or <br /> or issues with FF2 or IE7 if your site was created properly from the beginning.

Now I don’t begrudge people who don’t want to update; it takes a lot of resources. But do recognize that you would
a) have a lot less issues in the future
b) by actually working through the CSS, you would understand the WHY and wouldn’t have to run back to the CSS forum every time something breaks.

What people don’t understand is that with a little effort upfront, your site is VERY easy to maintain.

You wouldn’t be coming to us with all of these issues with <center> tags or <br /> or issues with FF2 or IE7 if your site was created properly from the beginning.

Now I don’t begrudge people who don’t want to update; it takes a lot of resources. But do recognize that you would
a) have a lot less issues in the future
b) by actually working through the CSS, you would understand the WHY and wouldn’t have to run back to the CSS forum every time something breaks.

I belive u but thats not going to be achieved when one doesn’t have much CSS knowledge, if im going to make changes to my website right now then im anyway going to come back here asking lot of questions on how to achieve certain things without the use of tables…

You’ve basically floated the table using align=right and the text creeps up the side. Remove the align=right from this table element as it’s nt needed anyway.


<table [B]align='right[/B]' border='0' cellspacing='0' cellpadding='0' style='margin-right:6px;' width='460'>
                                <tr>
                                 


I belive u but thats not going to be achieved when one doesn’t have much CSS knowledge, if im going to make changes to my website right now then im anyway going to come back here asking lot of questions on how to achieve certain things without the use of tables…

Leave your current site the way it is. Get a copy of Ian Lloyd’s Build Your Own Web Site the Right Way Using HTML and CSS and just do the exercises in that book. You’ll learn from start to finish how to get going with a simple web site layout.

Later, when you want to try to do something with your CSS skills, see if you can rewrite this web site and make it look the same with CSS. While doing this, you’ll run into new things and can ask or look them up… a lot of learning happens when you run into problems : )

My first pages were garbage too. Gotta start somewhere.

hey guys,
i will not open a new topic regarding this problem with FF 2, ill just post it here

i’ve started desging my website over using CSS, should i still use this solution to center my menu bar links? or there’s any other better solution?

display:-moz-inline-box;/*For  ff2 - proprietary (invalid for validation purposes)*/

new website at :
http://sospets.brinkster.net/newsite/

thanks

Hi,

If you don’t mind the invalid code then the -moz-inline-box is a good fix for FF2 (and equivalent) although you do need to test as FF2 sometimes needs a nested block element inside that box in complicated situations.

There are other solutions but require more mark up and are more complicated so I would stick with the moz-inline-box for now.

hmm, i’ve added it but there’s still no change

I didn’t see it anywhere in your code above?

If you mean the nav then it should be here:


#header #nav ul {
    [B]display:-moz-inline-box;[/B]/* ff2*/
    display: inline-block;
}
* html #header #nav ul{display:inline}/* ie6 hack to get inline-block effect*/
*+html #header #nav ul{display:inline}/* ie7 hack to get inline-block effect*/


oh, then i’ve put it in the wrong place :wink: thanks working