I am excited about CSS! I have been learning and practicing for the past few days. It is so much better to use. I am about finished with my first CSS site for a customer, but I have a few glitches with IE. Everything looks fine in FF.

here is the temporary link to the site...

http://www.platinumbusinessconsulting.com/laptops/

Not all the links are working yet (like to the individual laptop models). I just haven't done them yet.

Look at the bottom corner of the laptop logo. It is cutoff a bit by the h1 tag somehow. I have messed with changing the z-index, but to no avail. Is this even how to use the z-index?

Also, on the "Laptops" page, each picture is butted up against the description above it for some reason. It isn't like this in FF.

Any thoughts on these two issues?

Also, I'm open to any other input about anything else!

Thanks for your time!

Stephen Self

Z-index only works with absolute or relative positioned elements, using it on anything else has no effect.

Your overlapping column problem is coming from the doubled-float margin bug, which is triggered when you float a div then give that div margin that goes in the same direction as the float - ie; float: left with a left margin and vice versa for the right.

The fix for that is to add display:inline to the #sidebar divs, however you should do that with a separate ie-only css file that contains ONLY the 'fixes' you need for IE to obey, then you call that ie-only file with conditional comments.

Once you fix the #sidebar problem, your #maincontent column will drop. This is due to the padding you have on the left and right sides of #maincontent - remove the padding and the column will pullup where you want it and the images and descriptions will fall into place as you intended.

You can read all about the nasty IE bugs and how to fix them at www.positioniseverything.net.

I would make a couple of other suggestions.
Don't use code like this : <div align="center"> - that kind of styling belongs in your css. See the stickies for help on how to center a web site.

Rather than using the <p class="maintext"> for every paragraph of text inside #maincontent, define the styles for the text like this:

#maincontent p{ properties here} - that way you won't have to add that class to every paragraph .

What an excellent response! I have learned alot from reading this. I will implement these suggestions right away! God bless and have a great day.

If anyone else has any other suggestions, I am all ears! Or eyes i guess in this case

I also have another question. Should I be using more IDs instead of Classes? I haven't figured out why I would need to use both.

Use an ID for something that needs to be unique. i.e. navbar, sidebar, etc.
Use class for something that will have to be applied to many elements.
ID takes priority over class

IDs represent unique elements, meaning they should be used only once per page. Classes, on the other hand, are meant to be used in many places. You should be using both, since although they are similar, they have separate purposes.

Classes are very powerful, and should definitely not be discarded. I use IDs on stuff like the wrapper, the sidebar, the page, the header, the footer, the navigation, etc.

Awesome. Got it!

How about another question.

On my site above, in the text on my right-hand sidebar, I have a rule called "sidebarText". When I add a padding value to it, it only affects the top row of each block of text. Why would this be? I need to move the text a little bit away from the edge.

It is only putting the padding on the first line because you have it wrapped in "span" tags. A span tag is an inline element, so when the text wraps, the styling isn't being applied on the next line.
You can fix this 2 ways. First, you can use a "<p>" tag instead of "<span>", or you can add "display:block" to the "sidebarText".

Great! I used the <p> tag and it fixed it just fine!

One more question

I am developing the site in Dreamweaver CS3. I chose at the beginning of the project to have it create the CSS in the head of each page. I would rather have an external style sheet.

What is the best way to transition all that code to an external? Just copy and paste? If I do that for each web page, there will be a ton of duplicate code. I guess just weeding out the duplicate code and only copying code that isn't already in the external?

BTW, you all are great. The help I'm getting is much appreciated!

What is the best way to transition all that code to an external? Just copy and paste?

Yes, that's all you need to do

I guess just weeding out the duplicate code and only copying code that isn't already in the external?

Correct.

Can I add one comment? The red in the middle describing each laptop on the laptop page. It's really bad on my eyes. It kinda pulls at my left eye. I have prisms in my glasses that help my muscles and red is always a bad color - it also tends to pop out at me like 3D'ish. The "Big Sale" pops out at me right off the page but the banners in that same color are okay. I think it's worse when the red area is smaller. I actually almost cannot read the text in the middle.

What a pleasure to read a thread where the originator has taken the trouble to thank those who have helped.

Hey so it looks like you're getting some good advice from ladynred and others, as they always give.

I am going to steer toward the cosmetic part of your site.

Some of the text on the font, esp. the the text on the links up top seems a bit pixelated, which seem to be images. You have the option of using pure text links for those or images obviously. If you need help with photoshop or anything I'd be happy to help you out.