Wrong Display In IE

DDock3287 · #1 Jun 6th, 2007, 19:40

I have been working on my website (www.ruthless-wow.com) for awhile now and I still am unable to find a fix for my tables displaying in IE incorrectly. It works perfectly in Firefox, Opera, and Safari [of course]. Ive done a bit of research on this problem and have done the things they have suggested, but have been unsuccessful at resolving the problem [IE 6/7 Hacks]. Maybe I didn't implement them correctly. Have any of you seen a problem? Thanks.

DDock.

And yes, this is a world of warcraft guild site. My first real website but I have come a long way. If you need my css document is can be found at (www.ruthless-wow.com/ruthless.css)

Lchad · #2 Jun 6th, 2007, 20:07

Is the problem with the background behind the navigation?
If so, you need to give the left table column a width
The graphic for the buttons are 99px wide so that would be the width of your column.

Code: Select all

<td id="LeftTable" valign="top">
            <div>
                <a href="index.html">        <img border="0" src="images/linkies/1home.jpg" alt="Home" />            </a>

                <a href="photos.html">        <img border="0" src="images/linkies/1photos.jpg" alt="Photos" />        </a>
                <a href="/forums">            <img border="0" src="images/linkies/1forums.jpg" alt="Forums" />        </a>
                <a href="/gallery/">        <img border="0" src="images/linkies/1gallery.jpg" alt="Gallery" />        </a>
                <a href="/calendar">        <img border="0" src="images/linkies/1calendar.jpg" alt="Calendar" />    </a>
                <a href="/addons/">            <img border="0" src="images/linkies/1addons.jpg" alt="Addons" />        </a>

                <a href="teamspeak.php">    <img border="0" src="images/linkies/1tslogin.jpg" alt="Teamspeak" />    </a>
            </div>          </td>

Change the first line of code to this:

Code: Select all

<td width="99" valign="top" id="LeftTable">

If I misunderstood the problem, please let me know!

DDock3287 · #3 Jun 6th, 2007, 20:16

The table widths are in my CSS document. My web page is 100% valid so the widths don't go in the actual HTML document but in the CSS document. The backgrounds are blowing out which is what I need to fix. I still haven't found the problem that is causing the tables to blow out.

Code: Select all

From Ruthless.css
#LeftTable     {width:100px; height:700px; background-color:#000033}

If I remember correctly, putting (width="") in a table will cause the web page to not validate for xhtml.

Also, If I did it right, My buttons should be 100px not 99px.

To see my IE only page [that still doesn't work] go to www.ruthless-wow.com/ie.html. Ive tried some other things including what you said to no avail. It looks better, but is not perfect like my pages in the other browsers.

moojoo · #4 Jun 6th, 2007, 21:39

http://www.newguyinennis.com/samples...yout_3_column/ try using that to build it.

Lchad · #5 Jun 6th, 2007, 22:32

Did you try repeat-y for those backgrounds?

I don't see the problem. I've looked at really closely ... sorry..
Your designing style is very different. I think you would save yourself a lot of hassle if you would choose either tables or div's to design in. Preferably div's only.
Why do you have three #EOF css styles and three #Ruthless and so on?

You were correct in not putting the pixels in the html. Absolutely 100% correct. Since you had valign="top" and a few other things, I didn't think it really mattered that we stuck that in. But again, you were right about that.

DDock3287 · #6 Jun 6th, 2007, 22:37

Since this would be a complete overhaul of the website, this would also support a 4 column website. I see that the table is no longer used, so I'm still trying to get my hands on the css files for it. I see the way it is used, just need to convert my web page to full css with no tables.

Other questions:

1. Can div's have backgrounds?
2. Any easy way to keep the table?
3. Will it be sizable to the specifications I want?
Side tables being 100px while Middle tables being 445px.

Ill have more questions later...

Like I said, This is my first web page, still working on things. I will attempt to work the table in div's. This is a new concept to me. Also, what is the correct css for valign? I think I tried it at first but it wasn't working so I went for the in table valign, it doesn't through up any errors for validation so I kept it.

DDock3287 · #7 Jun 6th, 2007, 22:49

Do you know of any good walkthroughs for making a div only web page?

Also, Thanks very much. Ill prolly have the next version ready to go in a week. Luckily I don't have to many pages to edit.

Lchad · #8 Jun 6th, 2007, 23:50

Quote:

1. Can div's have backgrounds?

Yes every div can have ONE background.

Quote:

2. Any easy way to keep the table?

Tables should be used for tabular data. Otherwise it is best not to use tables.

Quote:

3. Will it be sizable to the specifications I want?

Yes absolutely. You can specify widths for all divs.

Quote:

Side tables being 100px while Middle tables being 445px.

Yes... no problem at all.

You will want a three column layout.
Moojoo has a good one here http://www.newguyinennis.com/samples/layouts/standard_layout_3_column_fluid/

Another here http://bonrouge.com/3c-hf-fluid-lc.php
and here http://www.pmob.co.uk/temp/3colfixedtest_4.htm

I believe there is a tutorial in the sticky at the top of the css forum. What software program are you using to design?

If you get stuck, post, and someone will help you! You are going to love it... and since this is your first site, I'm so happy to hear you are open minded and willing to learn!

DDock3287 · #9 Jun 7th, 2007, 15:16

Well I want to say thanks for everything. I have they new template working with the exception of 2 problems. Here is the new link to see the template online www.ruthless-wow.com/index.html

-- Fixed -- 1. The Middle 4 Columns (LinkLeft, LContent, RContent, and LinkRight). The LinkLeft has it's Background but for whatever reason the other 3 are not showing them.

2. Is there a way to have the "table" expand in height depending on the content? If you look at it now, you should be able to see what I am wanting to do. As I do my monthly updates, I would like the 4 Middle columns to expand downward and all have the same height. Also I want the SubFooter and Footer to stay at the bottom. I'm not sure how to do this.

Besides those 2 problems everything seems to be working fine. I am going to try to work on the problems, but if you have a solution for them, go ahead and let me know.

Thanks again.

Also, I use Dreamweaver to do my web page stuff. I mainly use the code section and not the design area. Half of the time the design area doesn't show correctly but it is a rough estimate of what it will look like.

-Fixed-
I had the background-color as background and it was overwriting the background-image. Duh!

DDock3287 · #10 Jun 7th, 2007, 19:21

Ive been using the http://www.pmob.co.uk/temp/3colfixedtest_explained.htm site that you mentioned earlier trying to follow it, but....

It is so confusing. Ive gotten some stuff working but other stuff doesn't. Either I need some clarification on what the pieces do, plus since I have 2 banners, 4 columns, and 2 footers I don't I'm implementing the code correctly. Any other suggestions?

If any of you that are familiar with this type of coding, I'm more than willing to chat via IM or Voice {Teamspeak, Vent, Google Talk, Etc.}. Thanks again.

Lchad · #11 Jun 7th, 2007, 19:58

Oops.. link not found!

DDock3287 · #12 Jun 7th, 2007, 20:04

Sorry, it is looking nicer so I made it the regular page - www.ruthless-wow.com aka the index. Sorry.

Lchad · #13 Jun 7th, 2007, 21:34

ok.. so what's the question.. is it the 4 middle columns that you want to expand down the page with content?

If so, do a google search for faux columns.

DDock3287 · #14 Jun 7th, 2007, 22:06

Well if you look at the homepage, you can see how the content goes off the end of the page due to the fixed content, that is what I'm trying to solve. I need the "table" to expand with the content.

The content isn't pushing the table down, the table is just sitting while the content extend beyond the footer.

I looked at the faux columns but I don't think that is the problem. I would like the Left Content section to be able to grow as I add in more content. Instead of having to change the Height and Top values in the Columns and the Footers. Hopefully you know what I mean.

Lchad · #15 Jun 8th, 2007, 11:40

The first bit of advice I'm going to give you is to make yourself a #wrapper Div.
This will contain ALL of your other div. Then omit all the position absolutes throughout. Those are not necessary if the site is designed correctly and you will have far less problems cross - browsers.

So the css is

Code: Select all

#wrapper {
     width: 780px;
     margin: 0 auto;
}

html

Code: Select all

<div id="wrapper">PUT ALL YOUR OTHER DIVS IN BETWEEN HERE AND DELETE ALL THE ABSOLUTES AND RELATIVE POSITIONING.</div

Your site is too wide for smaller monitors so that's why I gave you a width of 780px in the wrapper div.

Since all your columns are floated left, you will need to place a clearing div between the last column and the first footer. That pushes the footer down.

Heights are not usually necessary so you can play with deleting those as well.
That should keep you busy for a while today!

DDock3287 · #16 Jun 8th, 2007, 19:07

Ok, ill work on that now, and see what happens =D.

Ill leave it at the 1100px for now and reduce it later, since I'll have to change all the pictures and stuff.

DDock3287 · #17 Jun 8th, 2007, 22:22

After making all the tables to Div's, Making the container, and doing the Faux Columns, EVERYTHING finally works. Thanks to all who helped me.

Now I have to do it to my other 25 pages =(

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Who Is Right or Wrong ?	saltedm8	Webforumz Cafe	28	Feb 25th, 2008 19:28
please tell me what is wrong with this ??	saltedm8	Graphics and 3D	12	Jun 30th, 2007 09:10

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Wrong Display In IE