Tables versus ?

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

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"

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.

 

[PixelPusher]

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?

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.

 

[Phreaddee]

Display inline will not make it act like a "block" element.

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]

display:inline; to all affected divs. really that simple.

as i mentioned previously will fix the problem

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

I question your skills with a comment like that.

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]

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

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.

 

[PixelPusher]

as i mentioned previously will fix the problem

http://www.positioniseverything.net/explorer/doubled-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.

You need to read more clearly, I did not disagree that your display inline method would fix the issue. I said, display:inline does not make a block element. Thats why we have display "block". All in all your advice here was sound. It was the comment about resets that I find incorrect/ill-advised.

 

[PixelPusher]

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

In your defense they do mention, inline as a block. However in the markup of a page, a block element includes a line break before and after, of which display inline does not provide.

Try it out:

<span class="inline">Text</span><span class="inline>Text2</span>
<br/>
<span>Text3</span><span>Text4</span>

span {
  display:block;
  width:100px; 
  height:30px;
  line-height:30px;
  text-align:center;
}
span.inline {
  display:inline;
}

 

[PixelPusher]

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

Yes this is true.