CSS - Problems With Mozilla/firefox

i am trying to use the suckerfish dropdown menu. starting from the pretty example, i got it going in IE6 but it looked pretty off in mozilla. i tinkered around further the the IE code which changed things a bit there and made things look a bit better in mozilla but not much!
my code is at http://www.fizzycherry.com/menutest.html - i would *really* appeciate any ideas.
the main things really bugging me a
how can i get the menu bar to fill the width of the screen in mozilla? my navbar div did this before i inserted the sub menus!
once i tinkered with my css, placing padding on the links rather than the li elements, huge vertical gaps started appearing in the submenus in both IE and Mozilla, even with no margins padding and borders. i need to *add* a bottom border (same colour as background) to remove these gaps! why??
ideally i would like the submenus to look somethign like they do in ie6 but even if someone could just tell me how to make the bar fill the screen i'd be chuffed!

http://www.chequedelarealidad.org/

There seems to be a problem with this site when loaded into the Mozilla broswer. When you initially click on the 'Projecten' page, the bottom bar contents are placed about two inches too high up the page. However, when I click the refresh button, this problems corrects itself.

Once corrected, the page loads fine every time, but if I clear my web cache and try again, the first time I click on the link the problem appears again.

Is there are mistake in my css, or does anyone know how I can correct this? I will appreciate any input.

Thank you in advance,

Toria

hi all...

i have a huge style sheet, and i need to convert it to display properly in IE, how do i go about doing that, not recoding all the styles, i am also thinking about the check to se which style sheet to use, i think that i saw a method to do it under the <link> tag or something ?... help a fellow out there are over 800 lines of code in the style sheet....

frank/

I'm not sure what is causing the extra spaces to the top and bottom area of the images...

Code:

     <div style="margin:0px;padding:0px;background-color: #FF0000;">
       <img src="images/mod_bt2.gif"><br>
       <img src="images/mod_bt1.gif"><br>
       <img src="images/mod_bt7.gif"><br>
       <img src="images/mod_bt6.gif">
     </div>

Hello all, I recently redesigned my site from table layout to css layout. when viewed in ie it looks good however when viewed in anything else the layout falls apart. the link is:
Benefit Solutions, Inc
Do i need to copy the css to the site? I'm not too sure how to go about getting the help i need. any opinions would be appreciated. thanks in advance

I'm having trouble with a layout issue. Position is fine in IE, but in Firefox and Mozilla there's a 55 pixel gap on this drop down list and an even larger gap when the list is expanded.

Here's my css for the navbar:

/* Navbar */
#nav { width: 158px;
margin-left: 0;
}
#nav ul { font-family: "Trebuchet MS", serif;
font-size: 11px;
margin-left: 0px;
list-style-type: none;
}
#nav ul li ul { margin-left: 12px; }

Any suggestions or help would be appreciated.

i have divs on a page, and the ones appearing on the left don't use any style (style=""), where as on the ones appearing on the right use (style="float: right; clear: right;")

in IE 6 and 7, it creates the needed visuals found in the first attachted file (ie 7.gif).. as is seen, it clears the content so that the end of the divs are always in line, so that the next divs can begin properly in line

in mozilla firefox (mozzila firefox.gif), it does not obey this idea, and simple starts the next divs after the end of the above ones.. you can imagine how problematic this is when some divs on the right contain ALOT of words, that should be inline with the one of the left, etc

any thoughts or anything that could help would be apprciated...

regards

Greetings... I've looked all around for a solution, and can't find one. Any help that anyone could provide would so greatly appreciated.

My site http://www.baltimoregamers.com displays the div boxes incorectly in Firefox. I am using quite an unusual layout with one big picture as a plate for the entire site...

I then lay div boxes/layers ontop of the plate to position text exactly where I want it to go. It works flawlessly in IE, but displays a too far down and to the right in FF/Mozilla.

I am new to using CSS and I'm sure that something is off somewhere in the code.

Thank in advance for any help.

Feel free to e-mail me he dekay@baltimoregamers.com

Just testing this in different browsers and noticed that the image is shown in the background but does not go to the background-position that is specified. This works for IE. Does anyone know if there is a different way of doing this?

<STYLE type="text/css">
BODY { background-image:url(awesome.gif); background-repeat:no-repeat; background-position:50 220; background-attachment:fixed }
</STYLE>

Thank you for an insight into this little glitch.

Hi,

I'm still new to CSS and have been learning for the past couple of days now. I'm having trouble getting a two-column layout working correctly. Using the faux method, I have a background set so the right-column has a different background color. This works fine. But I'm having trouble placing the elements inside of the container to work correctly.

When the left-column has more content than the right, instead of the container (and thus the background) moving to fit it, the column just extends down by itself. However if the right column has more content than the left, it works correctly. I think it might be because of the float: left, but I'm still new and not exactly sure what the problem is.

The URL to view this is http://serve5.net/extend/ - the CSS is right in the source for you to look at. Could someone point me in the right direction as far as getting the left-column to extend down correctly?

It seems to work fine in Internet Explorer - but I use Mozilla Firefox and it's having this issue. However, in Mozilla, the left-column's background extends to the border fine, but in IE, it overlaps it. What can I do to fix this also?

Thanks.

Okay here's the problem, I have used px instead of % and I have a feeling it's ruined my whole site because of the fact that users can set their font size custom which TOTALLY messes up margins and things that I have set so precisely.

Here is my site: www.msredimp.000webhost.info

At small it works perfectly and the forms stay all normal, but when it's increased or decreased it totally ruins it.

Is there a way to force the settings in Mozilla to normal size? Or any other way?

Thank you, and sorry for being such a newbie.

Oh, to say I'm gutted is under-rated, I thought I had mastered what is CSS design for one of my sites, that was until I decided to test it at work on FireFox, Netscape and Mozilla. For a start the content isn't in the center of the page, and some of the div's seem to be constrained into the right hand column, not sure why.

The page looks perfect in IE. But messed up in the others, I am kicking myself I have left it so late to check.

If any very nice person/people can help me sort this out I would be sooo happy, especially if I can understand why it is so messed up. I'm not really that technical, I'm a graphic designer so if you can help, keep it fairly simple please.

The link is: http://www.gladiatorszone.co.uk/main_new1.shtml

I think it might be a position element wrong or a float?

In mozilla firefox (and possibly other browsers, iv only tested in firefox and IE) the margins of my class="subtitle" div, "escape" my class="content" div. Basically the 10px margin of subtitle acts outside the content div, when it is inside it.

My site is http://rapwars.ace-spades.com and the css is http://rapwars.ace-spades.com/include/stylesheets/rapwars_main.css

If you visit the site you will see that the white area with the "subtitle" text box in, is pushed about 10px down from the flash navigation.

Thank you for any help