CSS help please.

[rePete]

Hi,

Well my attempt to learn some css has hit a snag. I've been reading and playing around but can't seem to find the answer to this one. It must have something to do with margins/padding etc but I can't prove it.

If you view this test page (http://dev.hanratty.org/mytest/title.html)in Firefox it looks ok. IE not. Actually, IE does display it correctly, I had to fudge it to get Firefox to display it.

It seems the black div (#hnav 25px) is laying on top of the green div (#contact 50px). I had to make one twice as long so it can be viewed.

I'm using this site as a testbed so it isn't a real site. Maybe someday?

Any help will be greatly appreciated. Thanks for your patience.

Pete Hanratty

[Faithhb_lutheran]

pete,

I don't really understand your problem. Let me see if I get this

Firefox was placing the Black colored section directly over the green colored so you had to enlarge the green section, which is why it displays differently in IE. So you want to know why Firefox isn't aligning the position of the objects properly?

Is that it?

[rePete]

exactly!
I've tried a lot of things but obviously not the right one yet. I'm sure it's something simple that I don't see. The scary thing is that IE seems to do it right?! Contrary to everything I read about IE and css.

Thanks
Pete

[David Gillaspey]

Hi Pete,

I think we'll need to see the stylesheet itself to help you. Can you make that available in some manner? How about temporarily copying it to the header section of the page, so we can view it using View Source?

Sincerely,

David Gillaspey
President
Great Church Websites

[xhtml]

Hi Pete;

Try playing around with this page layout (http://chrysler.websitewelcome.com/%7Eevasser/3col/). Made a few modifications to your page layout (all divisions are still the same - just some enhancements) and made several modifications to the CSS file. Layout should now look the same in IE, Firefox and Opera.

Will give you a base for other modifications, if you want to go with the CSS I used for your layout. I've included the files in the attached 3col.zip - hope that works. If not just save the XHTML and CSS files to your hard drive to play around with.

Regards

[rePete]

Ed,

WOW, I never expected that, thanks so much. I'm sure I'll have a few questions at some point. Did you find a specific problem why those divs overlapped, or was it just poor coding on my part?

David,

The css is here (http://dev.hanratty.org/mytest/css/styles.css).

There are a couple of ways I usually look at css's. The brute force way is to view the page source, find the css file path and name and paste it into a browser window.

The second more elegant way I found, thanks to this forum, is the Firefox Web Developer extension. Let me say this has really changed the way I'm implementing and learning css. A 'must have' tool if there ever was one.

Thanks for this forum too!

Pete

[xhtml]

Pete;

The main problem that I saw was the use of height and not specifying a font size. I simply added a small amount of padding and let the font size determine the height of the row area. Holds up pretty well when the font size is increased/decreased - although any page layout will break at some point if a user has to resize the font to a very large size (this is true of even the old style table layout methods).

I also eliminated the use of floats in your CSS code as floats don't work too well across different browsers (read: IE) and are primarily for floating images or sections of text inside another element. I used absolute positioning for your three main columns and that holds up well in all the browsers I test on (IE 5.1/5.5/6.0 - Firefox - Opera). Also used the IE box model hack so that the column widths would come out right even in IE 5.1 or IE 5.5/6.0 in Quirks mode.

CSS is not difficult, but it has a lot of little quirks that take some time to master. Number one thing to remember is to layout your pages and test in Firefox and/or Opera then try and fix what doesn't come out right with IE.

That Web Developer extension for Firefox is a valuable tool. So many things you can do with it - disable images - turn off styles - outline block elements - view the CSS from any page - etc. Boys and girls, don't leave home without it!!

[GuruGreg]

x,

I completely agree about the Web Developer extension in FireFox. I don't know how many times it's helped me identify the problem when things are just barely not working properly on my pages. It's a must-have for any serious web developer.

-Greg

[Faithhb_lutheran]

Three cheers for web developer extensions

HIP HIP Hurray
HIP HIP Hurray
HIP HIP Hurray