Displaying correctly in every browser except IE

[promod]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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

[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.

[Lchad]

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]

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!

[karinne]

Look at the link in my sig (Resources for learning .... ) It will get you started with the HTML/CSS layouts.

[daygon]

Yeah the problem is that your trying t make a layout that is table/image based. If you create something like that in photoshop and splice it in image ready, when you add your content your page starts to get distorted as your info grows. what you can do is add alittel css code in in between your <td> like this...

Code: Select all

 <td><div style=" width:image width in px;
height:image height in px;
overflow:auto;
overflow-x:hidden;
background-repeat:no-repeat;> Your content </div><td>

and you should get a scroll bar like the one seen here (http://coldtunnel.205free.com)

This was one of the first sites i ever created and before i knoew this code i got the same problems.
Try it and see if it works.