CSS - Div Help In Mozilla(firefox)

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'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>

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.

Can anyone tell me whether they have experienced height and overflow problems with FireFox and Mozilla browsers?

Check this out: Test Page.

It looks fine in IE, but not the other two. I've been working on this half the day with no solution. Can anyone help? If the problem can be solved without the use of javascript, that would be preferred.

Thanks,
Darin

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.

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.

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

Im new to CSS and have a problem. IE displays my webpages without problem but when testing in Mozilla only a small number of CSS borders are visible.

Here's an example. This works OK

.right {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #666666;
border-right-color: #666666;
border-bottom-color: #666666;
border-left-color: #666666;
}

But this one does not display?

.3pxspacernobackborder3 {
padding: 8px;
font-family: Verdana, Arial, Helvetica, sans-serif, "Book Antiqua";
font-size: 12px;
color: #000066;
border-top: 1px solid #666666;
border-right: 1px solid #666666;
border-bottom: 1px none #666666;
border-left: 1px none #666666;

}

This is probably somethign simple but be gentle please guys.

I am trying to display a banner (image) at the top of my page with a menu under it. In IE the image aligns to the top of the menu, but in Mozilla the menu starts 15 pixels below the image. I've tried setting margin and padding to 0 for all div tags but that does not help. If I set margin=-15px for my #hnav it aligns in Mozilla, but then the menu is pushed up 15 pixels in IE.

I've tried an old IE hack from eric myers, but both IE and Mozilla read the hack code and it did not help.

Code:

<html>
<head>
<style type="text/css">
body {margin:0; padding:0;}
html {margin:0; padding:0; background-color:#646874;
  font-size:11pt; font-family:Verdana, Arial, Helvetica, sans-serif;}
img {display: block;border:none; margin:0;padding:0;}

a:link, a:visited { color: #00F; text-decoration: none; }

#pageContent {margin-left:24px;margin-top:12px;padding-bottom:45px; padding-right:7px; }
.contentImg {width:707px;padding-left: 209px;}
.padRight { padding-right: 15px; }

#banner {
   width:820px;height:149px;
   background-image:url(images/820x150.gif);
   background-repeat:no-repeat;
}
#hnav {width:820px;height:42px;background-image:url(images/navbar.gif);background-repeat:repeat-x;
   margin-top: 0px;}

#hnav ul {list-style:none;padding-left:20px;}
#hnav ul li {float:left;font-size:11px;padding-right:15px;background-image:url(images/divider.gif);
   background-position:right;background-repeat:no-repeat;height:30px;}
#hnav ul li a {padding-right:15px;position:relative;top:9px;text-decoration:none;color:#000;}
#hnav ul li a:hover {color:#777777;}
#hnav .curNavItem {padding-right:15px;position:relative;top:9px;text-decoration:none;color:#000;
   font-weight:bold;}

</style>
</head>

<body>
<div id="centerPage">
  <div id="mastHead">
    <div id="banner"></div>
    <div id="hnav">
      <ul>
        <li><span class="curNavItem">Home</span></li>
        <li><a href="gold.html">Gold</a></li>
        <li><a href="silver.html">Silver</a></li>
        <li><a href="ssteel.html">Stainless Steel</a></li>
        <li><a href="glass.html">Glass</a></li>
        <li><a href="gemstones.html">Gemstones</a></li>
        <li><a href="custom.html">Custom</a></li>
        <li><a href="plating.html">Plating</a></li>
        <li><a href="events.html">Events</a></li>
        <li><a href="contactus.html">Contact Us</a></li>
      </ul>
    </div>
  </div>
</div>

</body>
</html>

Code:

<style>
a.ClassA{
background-color:#000000;
color:#ffffff;
width:200px;
height:50px;
}

a.ClassA:hover{
background-color:Red;
}
</style>

Code:

<a href=# class=ClassA>Sample</a>

IE
http://img156.echo.cx/img156/604/ie9ay.png

Mozilla
http://img156.echo.cx/img156/7571/moz6ed.png

The result I want is the same with IE

why is it different in Mozilla ?

HELP!

this is the deal. My CSS/html looks great in IE.....BUT, when i open it in Mozilla, its like Mozilla isn't even registering the external css...only the html. Any ideas on how to make it work in both ie and mozilla?!?