Page displays correctly in Firefox but not in IE 7

T

toolmania1

New Member
Hello,

I am new to the forum. So, hopefully I am posting correctly after I read the rules. If not, please let me know so I can abide by the correct format.

Anyways, I have made a web page that passed the w3 xhtml validator at http://validator.w3.org/. There were no errors once I posted my link onto that page. Firefox displays the page correctly. However, IE 7 does not display it correctly. I think IE 8 displays it correctly, but I only have IE 8 at work and I am at home for the next few days which means I cannot check it on IE 8 right now ( without upgrading to IE 8 ).

I used css to position the divs on the page.

Here is the link to my test site:

http://cis.ysu.edu/~twhiteho/myCommunity/home.html

I have googled and found a few things posted. However, as I know it could be one of any hundred different things, I am requesting general guidelines. If someone does know what is wrong just by looking, that is great also. I can post information as needed if that will help.

Thanks,
Tim
 
T

toolmania1

New Member
Possible fix

Well,

After some tinkering, I found some things that helped. I had to set margins to the right and left in the css. Since I had the divs with a set width, I had to subtract the size I set for the margins. So, basically, it seemed like I had to make sure things were declared in IE where Firefox just displayed things. I wonder if Firefox must fill in some default values in the css if it is not indicated in the css file?

Example of what I did:

originally:
/*margin-bottom of 5 px lets the black background show through for a nice border*/
#wrapper
{
float:left;
margin-bottom:5px;
height: 350px;
}

/*with margin of 5 pixels, had to put width to 195 which is 200 - 5, also needed to specify height so that the background color filled in to the bottom in that third */
.leftColumn
{
width:245px;
float:left;
background-color: #990000;
height: 285px;
margin-right: 5px;
color: #000000;

}

/*with margin of 5 pixels, had to put width to 195 which is 200 - 5, also needed to specify height so that the background color filled in to the bottom in that third */
.rightColumn
{
width:250px;
float:left;
background-color: #990000;
height: 285px;
}

.center
{
width:524px;
float:left;
}
-----------
Then I changed it to:
/*margin-bottom of 5 px lets the black background show through for a nice border*/
#wrapper
{
float:left;
margin-bottom:5px;
height: 350px;
margin-top:0px; /*leave this since it was put to have the left and right balance on IE */
}

/*with margin of 5 pixels, had to put width to 195 which is 200 - 5, also needed to specify height so that the background color filled in to the bottom in that third */
.leftColumn
{
width:205px; /*changed the width to account for margin-left and margin-right */
float:left;
background-color: #990000;
height: 265px;
margin-right: 10px; /* set for IE */
color: #000000;
margin-left:30px; /* set for IE */
margin-top:20px; /* set for IE */
}

/*with margin of 5 pixels, had to put width to 195 which is 200 - 5, also needed to specify height so that the background color filled in to the bottom in that third */
.rightColumn
{
width:205px; /*changed the width to account for margin-left and margin-right */
float:right;
background-color: #990000;
height: 265px;
margin-left:10px; /* set for IE */
margin-right:30px; /* set for IE */
margin-top:20px; /* set for IE */
}

.center
{
width:524px;
float:left;
}

Hope this helps someone :)
 
PixelPusher

PixelPusher

Super Moderator
Staff member
I don't have IE7 so I cannot see what is displaying incorrectly, however, regarding your code....

Ditch the main "container" div. It is not needed. Use the styles from that div on the other sections (i.e. the banner, the wrapper, the footer). Change the position from absolute to relative. Relative position, put an item relative to the item before it.

The main nav bar (yellow) should be put into a UL and not a TABLE. Simply style the UL with a yellow background and with the appropriate height. Then float each LI left. Use margins to space the LIs out. Dont put the UL in a div, it is a block level element and can take on the same style as a div. Meaning apply the same style to this as you so for the wrapper, footer, and so on.

The footer could also be converted form a div to a UL. Just put each item in an LI, the name (Tim), and each social networking icon. If you want the space between the name to be larger that the space between the icons, just add a style for that LI.

I dont know how code writing skill level, so if this is confusing let me know, I can write example for you.
 
T

toolmania1

New Member
Thanks

Thanks PixelPusher!

Ya, I can give it a shot. I am not an expert, but know enough to do some damage. I will get back to you shortly. I finally do have everything looking good in IE and Firefox. So, I will save that version and try what you just said.

Thanks,
Tim
 
T

toolmania1

New Member
So, I have managed to make a mess of this...lol

But, that is ok because I saved my other copy. Still, I am in the middle of fixing it as it goes. I think what is happening is that some of the old css if interfering with some of the new changes I am making for relative. It is the same link above. I don't know if you check it where I will be at as I am updating in real time. But, hopefully, I will get it soon and won't have issues. I did find 3 more sets of unnecessary divs.
 
T

toolmania1

New Member
Starting over is sometimes best

Pixel Pusher,

Thanks for you advice. I ended up starting over. I pieced each part one at a time. I removed the items you listed above. I had to add one thing for IE. I am using 2 stylsheets. On the IE stylesheet, I had to add a margin-top:-340px so that it would bring up the right menu in the 3 column layout. Other than that, it seems that everything worked out. I moved the <ul> to top level also. Thanks again. Hopefully, someone else can learn from my mistakes as well.

Later,
Tim
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Your welcome toolmania, and your right, sometimes the best way to alleviate all issues is to start from scratch.
 
T

toolmania1

New Member
I love finding new stuff. I just found a tutorial on youtube about turning a psd into css compliant html in dreamweaver. I think this is the avenue I am going to take. I already laid out my site in photoshop to see how it looks. I had talked to some of my friends also and they do this sometimes. But, at least I learned how all of it works together so that I can go into the code that photoshop spits out and edit it. I am not sure if this will help anyone, but it is another way to go about things.
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Congrats, you should post the link so others can check it out.

Yeah you can change the output options in Ps when you save for web.

Like so:
  1. Slice the design as you see fit
  2. Select Save for Web
  3. Select the best optimization setting
  4. Hit Save
  5. When the dialog window pops up, go to the second drop down menu that will read "Default Settings" and choose "Other"
  6. A new window will pop up where you can tell Ps to generate CSS instead of a table, create styles by id, class, or inline (not recommended), and specify a naming format for the slices.

Not a bad way to start if you are not comfortable building a framework from scratch.
 
T

toolmania1

New Member
Here it the link to the tutorial:

http://www.youtube.com/watch?v=lEjLciNRC8s

The user Tutvid has excellent tutorials. I have watched others by him in the past.

Ya, this is helping me start the layout of my site. Then, I can go in and change what I need.

I will mention also that the tutorial above also goes into making a template in Dreamweaver. This is extremely useful for me. It took me a few tries to get everything how I wanted and to get all of the images to show up. For some reason, when I made an image attribute editable, it changed my link. I had "./images/pic1". Dreamweaver took out the "./". This made all of my images disappear. So, I went back into the source code of the template and added the "./" in Dreamweaver so that my images all had the src = "./images/picx".

Here is my site so far if anyone wants to check it out.

http://mycolumbiana.host22.com

I would also appreciate feedback / suggestions / improvements. The site is not functional. The first page that you see is the only page up so far. I have went through many different versions. I finally have found this method to be working for me and easy to understand and edit. Also, the center image is not staying at that resolution. I have a better resolution pic, I have not had time to upload yet. Also, I will be adding a slide show where the C with the airplane is located.
 
You must log in or register to reply here.
Top