Hi,

I'm very new to CSS (only started 2 days ago) so please bare with me.

I'm re-coding this page to CSS and getting rid of the tables: http://www.dfwpurebredrescue.org/indexnew.html

It looks just like I want it to, surprisingly, in IE, but doesn't in Firefox.

This is my CSS file: http://www.dfwpurebredrescue.org/dfwmain.css

Any help would be greatly appreciated, thank you!

I am running ubuntu here so can't crack open IE but the site looks fine in firefox, do you have a screenshot of the IE version so I can see the difference??

BTW: Thankyou thankyou thankyou thankyou for such lovely markup, its pretty. Nice to see some competent web developing for once

Jamie

This is what it looks like in IE: http://www.dfwpurebredrescue.org/ima...reenshotie.jpg

Then this is what it looks like in Firefox: http://www.dfwpurebredrescue.org/ima...hotfirefox.jpg

And thank you so much! I emailed you a couple of days, actually when I was about to lose my mind, and the tutorials you sent were fantastic!

The site looks good in firefox and safari to me. I'm on a mac so I can't view what it should look like in IE. The screenshots you've shown is not very different. It doesn't really matter if they look a little different.

You've done a really good job with the css seeing your very new to it. well done for making the change.

Thank you!

If it looks fine, I'll just leave it as it is. The problem was that the padding was perfect above "Welcome to DFW Purebred Cat Rescue" but wasn't with Firefox/

Looks like there is a difference in the margins/padding defaults. It looks fine but if you want to fix it then its just a case of setting values in the CSS.

And on a note: You might want to consider using header tags around your images to identify them as titles. This is good SEO and markup practice.

Oh and on another note: Ah so it was you who emailed, your very welcome and any more help you need just ask.

Jamie

Thank you!

So to create heading tags around the images, would I just do this, for example:

<h1><img src="images/welcome.gif" alt="Welcome to DFW Pure Bred Rescue" width="306" height="32" /></h1>

How do I decide what heading tags to use for which images?

Yes for your first question.

As for the second question, it gets easier with experiance but as a guide:

h1: Main Article/Page Titles
h2: Sub Headings
h3: Sub, Sub Headings
h4: Unrelated Sections e.g. Menus/Sidebar Headings
h5-h6: Very rare unless you have detailed subsections

Basic article layout:
<h1>About Me</h1>
<h2>Education</h2>
<h3>School Name</h3>
<h4>Year</h4>
<h5>Subjects</h5>
<h6>Um, I cant think of anything to go here</h6>

Hope that helped, I will probably write a blog post on this subject and be a bit more detailed at some point.

Jamie

Thank you, that makes sense.

I was able to get the "Welcome to DFW Purebred Rescue" where I want it in both IE and Firefox, but now padding to the right and left of the text isn't working.

The page: http://www.dfwpurebredrescue.org/indexnew.html
The CSS: http://www.dfwpurebredrescue.org/dfwmain.css

Image to explain: http://www.dfwpurebredrescue.org/images/padding.jpg

#content p{
padding:5px;
}

Should sort it, increase the padding until it looks right. May want to remove bottom and top padding though.

Jamie

Thank you, it worked!

And which section should I remove top and bottom padding?

The paragraph, using the code above will work but the space between the paragraphs themselves will also go, this can become messy, so I suggested that if you increase the padding a lot then it would make sense to limit the padding on the top and bottom on the paragraphs.

Hope that made sense.

Jamie

It does make sense, thank you!

You're running into IE's broken box model here. That's why adding the padding to the <p> was the better solution.

You might want to read thru the bug lists here: www.positioniseverything.net

Thank you, that's very helpful!