Need help - MSIE alignment issue

[Ree]

I know this is problem a common error, but I can't figure it out. On IE for PC, the alignment of my divs within my main content are all going far right instead of centering on the page. I'm working on a mac and this looks fine in IE for mac, as well as firefox and safari, but I don't have access to a PC. When I check it out in browsershots, I find the errors.

If you pull it up in firefox 1st, you'll see what I mean. I think it's something with text-align. Any help is greatly appreciated! Here it is:

Custom Web Design by Simply Fresh Web Designs

Thanks!

[MuNKyonline]

For a start you dont need to wrap lists with paragraphs, the list is fine on its own:
<p><ul>
<li>custom website design </li>
<li>domain registration</li>
<li>email & contact forms</li>
<li>e-commerce solutions</li>

<li>updates and maintenance</li>
</ul> </p>

I think your problem is because you have no container div to wrap all the page contents.

Add a div with id="wrapper" around the other divs, give it a set width of 955px (which is 1024x768 with the browser maximised) in the css:

#wrapper { text-align:left; margin: 0 auto; width: 955px; }

I think that should stop the content going off to the right.

[Ree]

Again, thank you! I have my marching orders for the day!

[MuNKyonline]

LOL you sure do, let me know if i can be of any more help.

[Ree]

Hmm.. that didn't do it. Maybe IE is adding all the margins for the divs together and coming up with a large left margin?

[Ree]

YEAH!!! I got it! I have no idea what work b/c I got so fed up and change alot. But, I'm just thrilled it works.

[MuNKyonline]

Glad you got it working, there a still a few errors though...

Move the title above the meta tags.

There is no <u> tag. If you want that underlined then do it with CSS. text-decoration:underline;

style="color:white; text-align:center" < this should be a class - keep styling and markup seperate!

The final </div> is not required.

Also you need to check your page and how the text resizes - accessibility.

The green box doesnt expand with the text!

[Ree]

Thanks for checking it out again! I'm going to try to make those changes today and will post when I do. If you wouldn't mind, I'd love for you to take one more look.

Again, much appreciated!!

BTW - I didn't know you can expand the box with the text.. I'll have to figure that out!

[MuNKyonline]

Dont give the box a height or if you do make it in ems. Use pixels for widths. Then try increasing the browser text size and make sure blocks expand nicely and parts dont overlap

[Ree]

I made the corrections. I definitely have to move away from inline styling...for a quick fix, it's easier!

Regarding the box, it's an image. Is there a way to make rounded corners in CSS so not to assign a height?

Thanks!

[Dubbya]

There are at least 25 different ways to make rounded corners using CSS. You should be able to find what you need at:

25 Rounded Corners Techniques with CSS

Good Luck!

[Ree]

OMG, thank you! I've been at this for a little over a month, so I just figured I make a box instead. Wow, that's so helpful!

[MuNKyonline]

Well you only want the box to expand vertically so you need the code to have the right number of elements to apply the css to.

You need the top two corners then the middle to repeat and then the bottom two corners as images. So thats images to apply to three elements.

<div id=topCorners">
<div id="botCorners">
<p>Content here to expand<p>
</div>
</div>

CSS should be something like:

#topCorners { background: url(images/topcorners.gif) top no-repeat; }
#topCorners p { background: url(images/leftandrightsides.gif) repeat-y; }
#botCorners { background: url(images/bottomcorners.gif) bottom no-repeat; }

The middle image can be 1px high and will repeat with the content of the paragraph.

You'll find that this most likely wont all align correctly so you may have to play with the margin and padding a bit. Set it to 0 on all three elements and then see how it behaves before you adjust them.

[Ree]

That was so helpful, thank you! I didn't get it at first, but then it clicked. Can you check it out again?

Can you tell me how I can get the footer to stick at the bottom? I've tried a few hacks I've come across, but can't seem to get it right.

Again, I can't tell you how much I appreciate your help!

[MuNKyonline]

Wow thats looking great

Normally if you have divs floating above the footer like so:

<div id="header"></div>
<div id="left></div>
<div id="right"></div>
<div id=footer"></div>

So you have the #left column floating left and the #right floating right. You would then use #footer { clear:both; } to clear both of the left and right floating columns. That way the footer sticks below the floating columns even if they resize with the text.