I am looking for a handbook, or site which could give me insight into setting up an external css for my site specificallyfor Fire Fox users. Does this exist? Or do I need to use trial and error? Thanx.

what exactly are you trying to do? make your site visible to only firefox users?

firefox is a standards-compliant browser, so you can use any CSS property that's been defined by the www consortium.

The site I am working on has a few links in my header div. In fire fox they have moved down out of the header. As far as I can tell, I have used compliant code, but probably not. The site looks fine in IE.
I have seen code similar to this:


What des the _margin-top signify, why is it different?
Maybe I need to change the css? It probably is not fully compliant. I used a template and modified it.(I did it several months ago before I had studied a little. I thought by using a template, I would have a better chance of cross browser compatibility. Am I wrong in thinking this? Thanx

can you give the rest of your header code (the CSS & HTML) and a link or screen shot of both firefox & IE? your problem could be quite a few things. IE has some serious problems when it's in quirks mode (no doctype, incorrect doctype) and tends to mess up pretty much everything. it could have to do with using margin instead of padding, or margin instead of positioning.

Ok here goes. I am not sure if I am posting this correctly, so if I screw it up please let me know.


Fire Fox:



IE



CSS Code

html code


Hopefully you can see the screen shots. I noticed I have a little issue at the bottom of the home page as well. But I believe I can fix that after You help me with the header issue. If I left anything out please let me know. Thanx again!

Well I don't really know how to fix it with css but why don't you put the words on the banner with your program instead of on top of it like div?

It'll be easier.

hmm, there are a few things we can do to fix this.

first of all, i'd suggest using a list instead of a paragraph for your links, as they are a list of links. in place of the <p><a href="...</p> use this:

naturally, list items are going to have a bullet in front of them and be ordered one on top of the other, so your CSS will look like this:

"list-style" will remove the bullets; pretty self-explanatory. lists naturally are indented, so margin & padding will remove that. i'll go over more of what the 30px & 43px are later. the left float i added to the <li> tags will stop them from being on top of each other. and finally, the 5-pixel padding on your navigation links act as the no-break spaces you're using. also, instead of using a <div> enclosing of your links, i changed that to the <ul> tag. it just makes it a little easier to work with.

now for the actual positioning. i'm going to go over the entire header (not just the links), so we'll start with the title. using <h1> for "directory sexy" is good, but instead of using paragraph tags for the "an online lingerie resource" use <h2>. search engines crawl your page looking for the most important information, starting with header tags. <h1> is the most important, followed by <h2>. <p> is among the least important.

so, the new CSS for your header titles:

because <h1> and <h2> tags are naturally block elements, we don't really have to do much with the positioning of your navigation links. the funny part about it is that the firefox preview is actually consistent with your code. you're telling the globallinks div to have a top margin of 60 pixels. because <h1> and <p> are block elements (they have an inherent 100% width), that 60 pixels is starting from the bottom of your <p>An Online Lingerie Resource</p> and not from the top border of your header. so we can cut that top margin in have, to 30 pixels. that's where the margin: 30px 0 0 0; in the "globallinks" comes in. you don't need to use margin-top, margin-left, etc. if you don't want to. CSS shorthand allows it all at once. it works like this:

i haven't tested any of this to make sure, but doing it should fix your header. if it doesn't, tell me.

i also notice the images in the center of your page are a little off with the spacing in firefox. that can be fixed, too.

what doctype are you using, if any at all? i'm going to assume you're not using one because of the top margin error you're getting in IE (no doctype puts IE into quirk mode, and then hell breaks lose). i'd suggest using an XHTML 1.0 transitional doctype; it's probably the best for just starting out, since it's so flexible, yet still so much can be done.

put this at the very beginning of your HTML code (nothing above it at all):

for that image in the center, it looks like you're putting an image nested within a div. try putting a padded border around the image instead. i'm not sure what the code look like, but here's a general idea of what you can do with your CSS & HTML:

and instead of putting your rotating image in a div, just put the image there:

hope all of this helps =)
if there's anything else, just ask.

Thanx for the info. It will be later tonight before I can go over everything with any kind of real attention.

Here is the doctype I am using:


I use dreamweaver to set up the doctype and then code form there using as a traning and learning aid.

To forgive the sinner -- do you mean make it part of the image, using my graphic editing program?
I'll let you know as soon as I get through all of it. Thanx again.
********************************
Everything works great but I can't use the h2 because it is codedto have a backgorund image, and I have used h1-h6, my css sheet controla all of my page layouts. Is there a way to use an h7?
*****************
I used a class to get it right.

Topic Closed, and Moved to Resolved Topics. Please PM a moderator if you would like this reopened.