The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Alignment issues in IE7, Everything looks good in Firefox but in IE7 it seems off alignment by
Mr. Manican
post May 13 2008, 01:55 PM
Post #1


Newbie
*

Group: Members
Posts: 12
Joined: 13-May 08
From: Myrtle Beach
Member No.: 5,640



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: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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post May 13 2008, 02:13 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,316
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



I get 404 Not Found for the HTML link. In the meantime, the CSS link has a CSS error that should be fixed.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mr. Manican
post May 13 2008, 02:17 PM
Post #3


Newbie
*

Group: Members
Posts: 12
Joined: 13-May 08
From: Myrtle Beach
Member No.: 5,640



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mr. Manican
post May 13 2008, 02:26 PM
Post #4


Newbie
*

Group: Members
Posts: 12
Joined: 13-May 08
From: Myrtle Beach
Member No.: 5,640



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post May 13 2008, 03:10 PM
Post #5


WDG Member
********

Group: Root Admin
Posts: 8,316
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mr. Manican
post May 14 2008, 07:25 AM
Post #6


Newbie
*

Group: Members
Posts: 12
Joined: 13-May 08
From: Myrtle Beach
Member No.: 5,640



QUOTE
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post May 14 2008, 08:23 AM
Post #7


WDG Member
********

Group: Root Admin
Posts: 8,316
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mr. Manican
post May 14 2008, 08:35 AM
Post #8


Newbie
*

Group: Members
Posts: 12
Joined: 13-May 08
From: Myrtle Beach
Member No.: 5,640



Thank you for all your help Darin. Your help has been invaluable in this situation. Have a great day.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mr. Manican
post May 14 2008, 10:36 AM
Post #9


Newbie
*

Group: Members
Posts: 12
Joined: 13-May 08
From: Myrtle Beach
Member No.: 5,640



QUOTE
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post May 14 2008, 11:35 AM
Post #10


WDG Member
********

Group: Root Admin
Posts: 8,316
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



I just tried them again and they worked fine. But here's another one:
Rounded corners and shadowed boxes
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mr. Manican
post May 15 2008, 10:39 AM
Post #11


Newbie
*

Group: Members
Posts: 12
Joined: 13-May 08
From: Myrtle Beach
Member No.: 5,640



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post May 15 2008, 11:54 AM
Post #12


WDG Member
********

Group: Root Admin
Posts: 8,316
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mr. Manican
post May 20 2008, 09:19 AM
Post #13


Newbie
*

Group: Members
Posts: 12
Joined: 13-May 08
From: Myrtle Beach
Member No.: 5,640



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 21st October 2019 - 10:12 PM