TeviH

I'm going crazy trying to figure this out. The webpage is located at: http://www.substance-abuse-recovery.com

The css file is located at: http://substance-abuse-recovery.com/styles.css

In IE, the navigation links are situated inside the div all neatly and nicely, but in FF the background of the links overflows the div. If I add 2px of padding to #topnav it looks right in FF but screws up in IE...

Another issue which I can't figure out - I can't seem to be able to add a small footer div (which will contain copyright info) beneath it all. It just doesn't show up! I want it centered, also, but I don't want it to have the border, so I want it ouside the #container div. (You'll have to see the source code)
????: NamePros.com http://www.namepros.com/programming/126956-css-looks-right-ie-not-ff.html

Thanks for any help anyone can give me!! (p.s. - 20nb to the cool frood who can help!)

__________________
www.headlinercreative.com

commes

for the footer, why not just make it php?that way its easier to update in the future, and i think it should work.

__________________
Friendly Birthday Party Games | Elvis Presley: What You Didn't Know | Study Trouble? | The Dumbest of Dumb Laws!

Styledboarder.com

TeviH

Huh? It's just a small div - why make it php?! I would have to update it once a year to change the last digit of the year to the correct one...

__________________
www.headlinercreative.com

stscac

Yeah, making it php would most likely not help the cause, since a php include would only attach the code of the included file, to where the include was located on the landing page, thus, resulting in the exact html code as the current document.
????: NamePros.com http://www.namepros.com/showthread.php?t=126956

I'm using Safari, and it honestly looks ok from here. Granted I am not a native Safari (or Mac user for that matter), I could be wrong given your intentions.

... Have you changed the page recently? It seems that the page has been changed since I first loaded it, now the header looks a little off.

-Steve

TeviH

No, I haven't changed it since earlier today.

I've just now checked it in Opera and Netscape. They are having the same issue as FF. The only browser displaying everything correctly (as far as I know - I haven't checked safari) is IE.

It's still the same issue - the #topnav links expand past the div they are inside of a couple pixels on the top and the bottom, and the footer div is nowhere to be seen...

Ok, I've changed the stylesheet to at least make the footer visible, though it isn't positioned where I want it.

I set it to be absolute (inside the #align div which just aligns everything to the center). I want it at the bottom of the page where a good little footer belongs!

and the links thing is still throwin me off!

__________________
www.headlinercreative.com

commes

no you would not have to update it once a year to change the year, you just use a php and it will automatically show what the year is

__________________
Friendly Birthday Party Games | Elvis Presley: What You Didn't Know | Study Trouble? | The Dumbest of Dumb Laws!

Styledboarder.com

TeviH

I know - my point was that if I don't use php I would only have to update it once a year, so it's not worth the trouble to use php. My problem isn't php - it's CSS!! I'm not concerned about includes or coyright functions, just getting my CSS to display the way I want!

__________________
www.headlinercreative.com

RaptorRex

I have several tips for you:

1) IE does not follow the CSS spec. One huge problem is that it uses the "width" element incorrectly. (My website demonstrates this on my how-to page)

IE includes the padding and the border in determination of the box's width. It should not. FF, quite correctly, only sets the content area of a box to be "width". Therefore when you set width=50, padding=20, and border=10....in IE the box occupies 60 pixels of screen space (which I can't explain), in FF it occupies 110 pixels (correct).
????: NamePros.com http://www.namepros.com/showthread.php?t=126956

2) Look up the "clear" element of CSS. I use it all the time. It helps to move boxes to underneath other boxes. Meaning, it may solve your footer problem.

3) Don't need to use the "position" element. I only say this because I've never needed it myself and I have read many other posters say that it is inconsistent between browsers.

Often if a block is missing, like your footer, it means you forgot to close a tag...like </div>

The only problem with what I told you is what to do when you DO want a border, since you can't use one else the alignment is wrong between browsers. The solution is to get creative in arranging bordered boxes inside the main layout boxes where they won't have any affect on the main page layout.

I hope all that helped.

DislexiK

As mentioned by RaptorRex MSIE does not follow the CSS standards, mainly because Microsoft use it as a marketing scheme (But we wont go into that).
????: NamePros.com http://www.namepros.com/showthread.php?t=126956

You can get round the problem by using the MSIE CSS hack, that is do one property in a class for MSIE followed by the same property with a different (Suitable) value for other browsers.

For example if you wanted padding-top to be 6px but MSIE was only padding by 5px you ideally need to be able to specify 7px, this would cause a problem for browsers that interpret the 7px correctly. Because of this you would do the following:

]

MSIE will read "padding-top: 7px;" and ignore "padding-top /**/: 6px;" however Firefox will read both but apply "padding-top /**/: 6px;" due to precedence.

Hope this helps.

__________________
"You don’t learn to hack, you hack to learn"

TeviH

Thanks guys! You both got 20

The links overflow problem was the sizing issue with IE, so your IE hack worked, and the positioning was the problem with the footer. I got rid of the absolute positioning and used the clear and float properties to get things looking right.

THANKS!

__________________
www.headlinercreative.com