preacher33

Hi all,
I am deisning a site at the moment and had it set up using css and div tags for layout (floats etc)
However the client was not happy with the way it was displaying in IE. The layout was not as it appeared in other browsers. out of line etc.
I have had to resort to using tables to maintain the layout as requested by the client. An I know tables are frowned upon, but the client is always right and even though it is desired that we comply with web standerds well.......
My questions; what is the best way to resolve this problem? Is there any resourse on the web which gives a comprehensive tutorial; or list of IE hacks to workaround problems like this?

Phreaddee

display:inline; to all affected divs.

really that simple.

ronaldroe

I don't know that setting all your divs to inline would be the best idea. In many cases, you'll want the block-level layout. My suggestion is a CSS reset. Different browsers have different default "user" stylesheets that provide basic styles. This most notably affects margin and padding on divs.

Add this to the top of your stylesheet:

* {margin:0; padding:0;}

From there, be sure to specify where you want margins/padding. Most of the time, that fixes your alignment issues.

Phreaddee

actually display:inline; when used with floats behaves as a block element.
and it also makes ie behave.
and is the correct way to combat the double margin error in ie whilst still having compliant code and no hacks or conditional statements.

resets are a joke. if you've created your page correctly you do not need them. and they are not a reliable "fix"

PixelPusher

Display inline will not make it act like a "block" element. A block element by definition has a line break before and after the element. Floats will allow any element to sit next to each, regardless of display type. To interrupt a float, use the clear property (respectively).

Why are resets a joke? CSS resets are very helpful, and they are not a "fix", more a step in writing quality css. They help reduce the size of your style sheets, and not mention they level the field. I question your skills with a comment like that.

__________________
John Darling
Graphic / Web Designer
SmarterTools Inc.
(877) 357-6278
www.smartertools.com

PixelPusher

I suggest you learn how to fix the issue in IE instead. Yes the client is right, but your are the designer/developer, rise to the challenge my friend

And ask us for help, I have run into these scenarios most times than I can count. There is always a solution.

__________________
John Darling
Graphic / Web Designer
SmarterTools Inc.
(877) 357-6278
www.smartertools.com

Phreaddee

go to w3.org, look up the css2 specification, chapter 9 visual formatting model and read 9.7 Relationships between 'display', 'position', and 'float'

Phreaddee

as i mentioned previously will fix the problem

http://www.positioniseverything.net/...ed-margin.html will give a more detailed explanation.

I question your skills when you dont believe the "fix" to an extremely well documented ie6 error which was what was being alluded to in the inital post.

Phreaddee

in any case its also worth noting that a reset would not fix this double margin bug in ie6

PixelPusher

Here you go: http://www.w3schools.com/css/pr_class_display.asp

Quote:
"The element will generate an inline box (no line break before or after the element). This is default."

A box is not a block.

__________________
John Darling
Graphic / Web Designer
SmarterTools Inc.
(877) 357-6278
www.smartertools.com