CSS - Looks right in IE, not FF - Please help!

[TeviH]

CSS - looks right in IE, not FF - please help! (NB for helper)

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)

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

 

[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.

 

[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...

 

[stscac]

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

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.

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! :lol:

and the links thing is still throwin me off!

 

[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

 

[TeviH]

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

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!

 

[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).

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).

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:

.className {
   padding-top: 7px;
   padding-top /**/: 6px;
}

]

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.

 

[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! :hearts: