Previous Message
Next Message

Mozilla hacks?

Sent by Shelly @ WDG on 26 September 2005 15:03

Thanks for replying, Jono.

Unfortunately, I *can't* provide a link.  The site isn't live, and it's one
of those client who doesn't want anyone to see anything - no public views at
all.  So I'd get in trouble with the client if I posted the link on a public
forum.  However, they don't mind if I send it to an individual offlist for
assitance, if needed. If you don't mind - and if my info doesn't help, is it
okay if I send it to you offlist?

Normally, I have the same outcome as you - when I code for FF, the only
hacks I normally need to put in are for IE, and it's fine on everything
else.  but for some reaon - I don't know *what * I did from every other site
I've done - the CSS is going berserky on me.  I had posted before about
getting the FOUC in *Mozilla*, of all browsers...I finally got that figured
out (but I'll be damned if I can rememebr what I did!)

Basically, it's just a few minor positioning things.  For instance, I have a
div at the bottom of the home page which encases a couple of floated
elements.  The float:left works great, and the float:right area is great -
but in Safari 2 and Mozilla/Mac, the float:right is pushed down about 10
pixels, and I needed the top to be flush with the outr dive container.  I
hacked it for Safari, and it's fine - but Mozilla/Mac is still rendering it
just like Safari did prior to hacking.  FF/PC looks fine.

The stylesheet (for the above example) is as follows:

(outer div container - the "clear:both" is so that this container clears a
number of floating elements above it - I wanted this div to span the bottom
of the page)
#rightmenu   {position:relative;
                     voice-family: "\"}\"";

(A header element, of course.  Floated left so there is no line break - the
content that goes with this header element needs to hang to the right of
this header, not below it)
h5                {text-transform:uppercase;
                        padding:0px 5px 0px 25px;
                        margin:10px 0px;

(div for the content that goes with the header above)
div.menulist        {width:175px;
                           padding:5px 0px;
                           voice-family: "\"}\"";

(this is yet another div that floats to the right of the previous one.  This
one has a table enclosed inside of it - it's a sign-up form where you only
have to input your e-mail address.)
div.menulist_right     {width:455px;
                           border-left:1px dotted #333;

(Table class for the hidden fields.  I needed to put in the negative top
margin because the first line of this content needed to be even with the
first line of the content next to it (in the div.menulist container).  I
*think* that the margin was off because this is a PHP file, and if the end
user puts in an incorrect e-mail address, or tries to do the spam thing,
then an error is displayed above the normal content, in this "hidden" div.
So I had to set it at -9px so that the content, when viewed normally, would
line up properly.  And just so you know, the default table stuff is set at
margin and padding at 0.)
td.callout2            {color:#508F7A;
                              font-family:arial, sans-serif;

(This is the div for the *shown* content, under normal circumstances.  It's
below the "hidden" div listed above, and has the actual content in it.)
td.callout             {color:#508F7A;
                                 font-family:arial, sans-serif;

The rest is just a form, and has typicla form styling, blah blah blah.  But
the issue lies in the td.callout and td.callout2 areas.  Before I hacked for
Safari 2 (and this error still displays in Mozilla/Mac), when the page was
viewed normally (no "callout2" area shown - that onl displays if there's an
error in submitting the form), the content in that area is pushed down
*below* the content in the div.menulist area - almost as if the div is too
wide in pixel length to be up there where it needs to be.  However, I've
made is smaller, and it still remains down there under (and to the right)
the previous div.  It *just* needs to come up about 34 pixels to be seated
in the proper place, but it won't come up in Mozilla/Mac - and if I *do*
change it to fix it for that browser and platform, then in Mozilla/PC, the
div is gone (pushed too far up and out of the visible div area).

My hack for Safari 2 is as such:

html*div.menulist_right     {margin-top:-34px;

And it works perfectly.  But Mozilla/Mac is still displaying this as Safari
did before I put in that hack.

I'd offer more examples - but it's little things like this that are off.
Nothing major - but definitely noticeable.

Again, if it would help to see it, I'd have to send it offlist - but I would
appreciate any help!

Thanks :)


css-discuss [EMAIL-REMOVED]]
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: