Problems with IE Rendering

[theoart]

I am running into a problem on a site redesign I am doing with getting the page to render the same in both IE as well as FireFox. I was given the diced up version of a Photoshop file which had been converted to an html document. The html uses mainly css with div tags which I assume would the the better option over tables but once I started to pluging in dynamic content from a backend database, it "broke". Originally the static html file worked fine in IE but now when viewing in Internet Explorer everhthing shifts to the left and the footer is no longer visible. I cannot figure out what I am doing wrong since the content I was plugging in did not have any html in it that I caould tell. It looks okay in FireFox, and I am sure okay in Safari but IE is not liking it at all.

The link is below:
San Antonio Weddings
Any help will be appreciated.

[Uncle Dog]

Hate to be picky but - you've got a lot of errors (106 ?) in your HTML. Do yourself a BIG favour and get the Web Developer toolbar addon for FireFox.

Work methodically through all your errors then you'll get a real chance to see what's not working.
At the moment you are just comparing how different browsers handle invalid HTML.

[theoart]

Yeah. I know it is not the prettiest anymore. I think once I started to call data from the database it starts to bug out. Unfortunately I am not all that up on "design" and w3c standards anymore having spent the last 5 or 6 years focused on app programming so I am hoping someone with more CSS and div tag knowledge might be able to offer some feedback. Unfortunately I am a little old fashion and still prefer tables and now wish I had insisted on going that route.

[Uncle Dog]

Originally Posted by theoart

Yeah. I know it is not the prettiest anymore. I think once I started to call data from the database it starts to bug out.

...means once the component parts of the html you have created start to be put together it all goes pear shaped.

Originally Posted by theoart

Unfortunately I am not all that up on "design" and w3c standards anymore having spent the last 5 or 6 years focused on app programming

...which should have given you an eye for detail, accuracy and standards.

Originally Posted by theoart

so I am hoping someone with more CSS and div tag knowledge might be able to offer some feedback.

...which is exactly what I've done.

Originally Posted by theoart

Unfortunately I am a little old fashion and still prefer tables and now wish I had insisted on going that route.

...so that you could continue writing poor quality html. Don't get me wrong, I'm not anti tables, it's just that they tend to be a little more forgiving of mistakes.

Your post title is Problems with IE Rendering but obviously this isn't the case, and for once I'm sticking up for IE. I'll state it again, you are comparing how different browsers handle malformed html code - and expecting them all to do it the same way. It's tough enough getting them all to render in a similar way when the html and css is valid.

I'm certain that many WPW'ers could get this working for you inside half an hour, but what would be the point.

To get you started - you need a DOCTYPE declaration as the first line of your html. This tells the browser what standard to expect the rest of the document to follow and likewise how to render it.

[morestar]

I've found that when I use Photoshop/ImageReady to slice up an image for HTML output AND I set the output to XML the code get's right messed up if I try to edit the HTML/XML.

When I generate just HTML without divs and so forth, my pages seem to blend and mesh quite well.

The Outputted XML cannot be fully trusted to work with all the browsers, especially the new ones as I'm sure they've updated a lot of things related to HTML output.

Try regenerating simple HTML and see how that treats you.

[morestar]

I need to add that 99.978% of the time, after I have generated HTML (table based layout) from Photoshop/ImageReady, all browsers render my pages exactly the same.

Of course I use styles and a stylesheet to 'style' the document and it's elements (like colors, padding, margins, background effects) but I don't use styles or a stylesheet to output layouts...

I'm sure if you do go the HTML/Table based layout route from the generated HTML you will do just fine.

P.S. Your site looks just great in Chrome accept the image box on the left hand side is NOT displaying image 1. if i click the 2, 3 and 4 button, the new image shows and if I click the #1 button again no image is showing. Also, the size of the image box doesn't seem to fit the whole area where the box looks like it should be displayed.

[danielle v2.1b]

IE deals with auto margins differently to SCBs so you need to adjust your CSS with a text align selector on the highest level of your CSS tree. You'll then need to clear that CSS selector by putting another text align on a descendant selector, normally the BODY tag. It's a nuisance it doesn't just take margin:auto on your main layout selector to center everything...

[seopo]

Your in for a long learning curve if you wish to get this exact and compliant. You might be better off getting a cheap freelancer on a site such as odesk.

They'll probably be able to get your page working right in a couple of hours and charge you 30 bucks or so, or you could spend the next week getting to know (and hate) CSS, although it's good once you've cracked it.

[ccordes]

I don't want beat this horse too much, but I have to go with Uncle Dog here. I mostly write applications not web pages so I understand your mindset issues <g> That said, you have to get the code right first and sometimes it is a pain.
Get an editor with good validation.
Get firebug for Firefox AND the web developer addon.
I also use Fiddler, IE TAb, InspectorWidget (to watch the DOM stuff) and last but not least Total Validator.
Then validate, take the first problem and track it down and then the next. Don't try to fix everything at once.

I don't know what I'd do without these tools.

It is confusing and a nuisance but don't look back. Tables have their place - when displaying data use them. Page layout is a job for css. If you haven't before look at csszengarden if for nothing else but inspiration.

HTH
chris

[jpatriar]

Danielle is correct. Margins and padding render differently in IE. Google zeroing css margins or visit
xhttp://webdesign.about.com/cs/css/qt/tipcssmargins.htm

[NJ]

If you are checking your page in IE6, part of the problem is your PNG file. Convert it to PNG-8 or a GIF or JPG, and that part will be solved!

[NJ]

Originally Posted by morestar

I've found that when I use Photoshop/ImageReady to slice up an image for HTML output AND I set the output to XML the code get's right messed up if I try to edit the HTML/XML.

Slicing pages in ImageReady and creating HTML makes really messy tables and pages that are very difficult to update. However, I occassionally use slicing to break up a large image and put the pieces in CSS.

[deepsand]

Uncle Dog is correct; get the foundation plumb before worrying about how to get the doors to hang true.