Layout Issue on IE

HTML & CSS
1

Hi guys,

im having layout issue on IE… it works well on firefox and chrome… heres the screnshot…

it should be like this

Thanks

2

We can’t help you without the code—preferably a link. :slight_smile:

Which version(s) of IE is this happening in?

3

All IE version… Http://guestbook.biliranisland.com

4

Hm, strange that it’s not aligning center. Perhaps you need to set an explicit width on the containing td or tr (i.e. width: 100%). Worth a try, anyhow.

5

where to appy it? thanks

6

Try to use latest version of IE or check the site by applying some changes in width I hope your problem will be solved.

7

Tables for layout, single TD tables (meaning why the devil is it in a table?), non-semantic markup, meaningless run-ons thanks to the lack of semantics, presentation and style inlined in the markup, – there is more of 1998 to this than 2011. Even if you were building it as a table based layout it only warrants the use of ONE table (name/comments area), NOT thirteen of them!

Even TRYING to get that working cross-browser is a colossal waste of time and effort – likely why I’m seeing four different appearances in four different browsers here. Also explains why you have 35k of HTML doing the job of 12k or less.

Throw it out, and start over with SEMANTIC markup instead of 1990’s style presentational. You might want to consider switching the content to %/em as well so users like myself don’t have to dive for the zoom or say “to heck with it” and just visit some other website. In addition to the code being an accessibility train wreck, the use of px metric fonts just throw fuel on the fire.

8

You can try to reset the css style. Set all margins, padding, borders and outline to 0 -zero-. Than define the margins for div to auto. Specifically define the width of that div in pixels - not in %.

9

The page isn’t centered because you have a doctype that sends all versions of IE into quirks mode and in quirks mode they all use the broken box model and don’t understand auto centring (among many many other things).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

It should be at least this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

But preferably this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

That page is a bit old fashioned and could do with updating to today’s common best practices.:slight_smile: