Alignment issues in IE7, Everything looks good in Firefox but in IE7 it seems off alignment by Options

[Mr. Manican]

This is my first post but I've used many pieces of information from this site. So, first and foremost, thanks for the help in the past.

I'm working on a website right now and I seem to be having a couple issues.

1. The page does not seem to be aligned correctly in IE7.
2. The footer stops and the background image continues on beyond the footer.

The links to the CSS and HTML are listed as follows:

• CSS
• HTML

If anyone can help me with these issues I would appreciate it. thanks.

--Mr. Manican--

This post has been edited by Mr. Manican: May 13 2008, 02:16 PM

[Darin McGrew]

I get 404 Not Found for the HTML link. In the meantime, the CSS link has a CSS error that should be fixed.

[Mr. Manican]

I fixed the link to the html. Thanks for letting me know about the CSS, I am using the CSSCheck now to fix that. I suppose the issue I am having is probably in my CSS.

[Mr. Manican]

The majority of my CSS issues have to do with the checker wanting me to change lines like:
a:link, a:visited{
color:#fff;
}

to:

a:link, a:visited{
background-color: #fff;
}

What browser would misread my CSS sheet or am I just using improper jargon?

[Darin McGrew]

The color issues are of two types.

CODE

Same colors for background-color and color

You've specified white-on-white for the body element. That's going to be awfully hard to read if the background image isn't used. Your color and background color should provide similar contrast to your color and background image.

CODE

Same colors for color and background-color in two contexts

If your CSS is applied to an HTML document that ends up using the color from one rule and the background-color from another rule, then it is possible to end up with white-on-white or black-on-black or whatever-on-whatever text, which will be impossible to read.

Meanwhile, you've also got a few markup errors that should be fixed.

Anyway, you've specified background.gif as the background for the body element. The body element extends beyond the bottom of the div.footer element if there isn't enough content to fill the available display area. It sounds like you'd rather apply background.gif to an element that shrinks when the content isn't enough to fill the available display area.

[Mr. Manican]

Anyway, you've specified background.gif as the background for the body element. The body element extends beyond the bottom of the div.footer element if there isn't enough content to fill the available display area. It sounds like you'd rather apply background.gif to an element that shrinks when the content isn't enough to fill the available display area.

Can you lead me to or give me an example of applying backgroung.gif to an element that shrinks when the content isn't enough to fill the available display area?

Quickly, I'd like to thank you for all your help; it is quite valuable to me.

[Darin McGrew]

Actually, here are a couple articles that describe a better way to do it, without limiting yourself to a fixed-width design:
Creating Custom Corners & Borders
Creating Custom Corners & Borders Part II

[Mr. Manican]

Thank you for all your help Darin. Your help has been invaluable in this situation. Have a great day.

[Mr. Manican]

Actually, here are a couple articles that describe a better way to do it, without limiting yourself to a fixed-width design:
Creating Custom Corners & Borders
Creating Custom Corners & Borders Part II

I went to both of your links and they seem to be down. Is there any other resources you may know of?

[Darin McGrew]

I just tried them again and they worked fine. But here's another one:
Rounded corners and shadowed boxes

[Mr. Manican]

that works fine for firefox v2.0.0.14 but in IE v7.0.5730.13 it does not act correctly. Is there anyway to make this work in both IE and Firefox?

[Darin McGrew]

It doesn't surprise me that the W3C example doesn't work with buggy browsers (or browser-like OS components) like MSIE, but I would expect the ALA example to work with MSIE.

[Mr. Manican]

Hello, just to close this discussion I want to make it clear what the issue was and how it was solved so hopefully if someone is having this issue in the future, it can easily be solved:

issue: the repeated background image (background.gif) was showing beyond the borders of my content in IE and firefox. If I attempted to fix this issue in one browser, it would worsen the issue in the other. I came to this forum to find a solution to this issue.

resolution: the issue was in my poor CSS writing ability. I had a little diddy that went something like this (sorry, only showing relevant parts):

body{
text-align:center;
margin:0;
padding:0;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:10pt;
color:#fff;
background:#fff url(../images/background.gif) repeat-y top center;
}

#container{
display:block;
width:750px;
height: inherit;
position:relative;
padding-bottom:20px;
margin:0px auto;
}

Well that little diddy was a pain to fix. I thought of position, padding, margin and all that other hoopla as an excuse to why this wasn't lining up right. Now lets pay close attention. What I really wanted was my "background.gif" to be contained. So, when put like this, I wanted it within my container, not within the body, which is obviously all encompassing. After a little tweaking, I ended up with this:

#container{
display:inline;
position:absolute;
margin-top:0%;
background:#fff url(../images/background.gif);
background-position:29%;
background-repeat:repeat-y;
}

Darin, thank you for all your help. I'm sure this is a trying hobby you have, helping others with their issues, and I would like to thank you for your help on behalf of all of us novices.