Displaying correctly in every browser except IE

promod · #1 Feb 16th, 2007, 03:05

Hi,

I use Mac OS X, and built my site in Dreamweaver. It looks fine in all browsers on a Mac, and even Firefox in Windows. However, for some reason the slices get all out of whack in IE in Windows. My site has been up for quite some time, and I just recently discovered this problem and I am pretty embarassed. This is a huge problem obviously, because the majority of users are using the one browser my site is displaying improperly in!

Below is the link. Any help would be greatly appreciated!

www.mvcarpenter.com/design

Thank you.

MrMadison · #2 Feb 16th, 2007, 04:57

Yeah, I've had this problem, and still do. Thats why I put a Get Firefox button on the site. Well, I would recommend using Dreamweaver's Check Browser script that's already built in. Should be under behaviors or something similar.

Lchad · #3 Feb 16th, 2007, 11:51

IE has margins built in so you must set all tables so that they have a cellpad and cellspad to 0
That should eliminate your spacing.

karinne · #4 Feb 16th, 2007, 13:00

IE treats white-space in your code as an actual space. So ... instead of having it like this

Code: Select all

<td>
  <img ....>
</td>
<td>
  <img ....>
</td>

Put it all on the same line like this

Code: Select all

<td><img ....></td>
<td><img ....></td>

moojoo · #5 Feb 16th, 2007, 13:12

That layout needs to be rebuilt with XHTML Strict and CSS. But other than that, cellpadding="0" etc etc should help. Depends on the issue at hand. I don't have time at the moment to fire up windows but I will check it when I get to work and see.

promod · #6 Feb 16th, 2007, 14:07

Thanks for the replies. I realize I do need to rebuilt the site. This site is 2 years old and due for a redesign, but I need it to work for the time being.

All of my cellpadding and cellspacing is already set to 0. I will work with the code and put everything on one line as suggested by karinne. If that doesn't do anything, I'm still open to suggestions!

Thanks guys!

moojoo · #7 Feb 16th, 2007, 14:56

Ahh I see it now, that is messed up lol. If you need some help I can build you a XHTML/CSS wireframe and then you can add your content.

karinne · #8 Feb 16th, 2007, 15:04

Quote:

Originally Posted by promod

I will work with the code and put everything on one line as suggested by karinne. If that doesn't do anything, I'm still open to suggestions!

Let us know if it works.

promod · #9 Feb 16th, 2007, 15:10

Quote:

Originally Posted by moojoo

Ahh I see it now, that is messed up lol. If you need some help I can build you a XHTML/CSS wireframe and then you can add your content.

If it's not too much trouble, that would be awesome!

karinne, I tried your suggestion, but to no avail. BTW, this board is awesome, thanks for helping me out, and so quickly at that.

karinne · #10 Feb 16th, 2007, 15:34

I still see your code on different lines

Code: Select all

<table id="Table_01" width="800" height="601" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="9">
            <img src="http://www.webforumz.com/images/topgray.gif" width="800" height="10" alt=""></td>
    </tr>
    <tr>
        <td rowspan="8">
            <img src="http://www.webforumz.com/images/leftgray.gif" width="10" height="590" alt=""></td>
        <td colspan="7">
            <a href="index.html"><img src="http://www.webforumz.com/images/image1.jpg" alt="" width="779" height="261" border="0"></a></td>
        <td rowspan="8">
            <img src="http://www.webforumz.com/images/rightgray.gif" width="11" height="590" alt=""></td>
    </tr>
    <tr>
        <td colspan="7">
            <a href="index.html"><img src="http://www.webforumz.com/images/michaelcarpenter.gif" alt="" width="779" height="44" border="0"></a></td>
      </tr>

Look for this thread - Resources for learning how to use CSS for layout - in the Beginner resources section

promod · #11 Feb 16th, 2007, 16:08

I corrected it on a test page: www.mvcarpenter.com/designtest.html

karinne · #12 Feb 16th, 2007, 16:29

Right ... sorry ... should have thought of that.

I couldn't help but noticing how EVERYTHING is an image! I mean ... the only thing I would use as an image is that big god-know-what-tube-thing at the top and you name/logo ... that's it. The rest should be text and color applied as background.

Lchad · #13 Feb 16th, 2007, 16:35

I actually put all the code into Dreamweaver on my computer and all the coding looks to be fine. I see the cellspacing and cellpadding are 0 and I see how you put it together.

In my opinion, the only thing that could be messing up all the buttons on the right column is the javascripting. Why don't you try disabling some of the javascripts on a couple of buttons and see if you get better alignment?

promod · #14 Feb 16th, 2007, 16:40

Quote:

Originally Posted by karinne

Right ... sorry ... should have thought of that.

I couldn't help but noticing how EVERYTHING is an image! I mean ... the only thing I would use as an image is that big god-know-what-tube-thing at the top and you name/logo ... that's it. The rest should be text and color applied as background.

I know. I made this site for school, then transitioned it as my portfolio, and I caught on to making slices really quickly. How would you go about keeping the "in the box" look without using an image as the background? I will probably forget fixing this mess and take moojoo up on his offer of getting me jump started with CSS and XHTML. We live and learn!

BTW that tube thing is the lobe of an engine's crankshaft (what the piston hooks to). I drag race professionally, so that's where a lot of my aesthetic comes from.

Thanks!

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Displaying correctly in every browser except IE