[thelist] CSS padding with 100% width?

[puru singh]

Hi 
Do not mail me again please .
ok
bye

Reha Sterbin <rsterbin at stwing.upenn.edu> wrote:On Fri, Jan 14, 2005 at 05:03:40PM +0200, Dmitry Yeskin wrote:
> Hello!
> 
> On Friday, 14-Jan-2005 14:47, Chris.Marsh at Callserve.com wrote:
> > Is there some reason you can't do the following (styles inline for
> > illustration only):
> >
> 
> no, look here is the website:
> http://www.foodcomponent.com
> 
> it has a borders done by background color of 6 div's
> 
> and each div has a 100% width
> 
> so we see at the right now overlapping. :-( but in IE all is ok.
> 
> I dunno what to do to fix it. There is the solution to make a backgrounds
> like images, but I want to have a borders as background colors cause when
> images are turned off it will look ok.
> 

Six layers of divs is not a design choice I would make (being of the 'form
seperated from content' school of thought), but I imagine you're not really
here to solicit my opinion on your design choices.

The problem you're running into, as you mentioned earlier, is IE's box content
problem. When you define height and width on a div, IE thinks you're referring
to the box (and thus padding and borders make the content smaller), but the
standards say you're referring to the content (and thus padding and borders
make the box bigger). Now, there are hacks that take advantage of the way IE
parses CSS to make it behave in a way consistant with the stadards (Google the
'Tan hack' or 'star html'), but the problem I kept running into is that later
versions of Opera use IE's box model but, obviously, don't respond to the
parsing hacks.

The solution I ended up using on my homepage only works in browsers new enough
to implement CSS3. The 'box-sizing' property allows you to tell Mozilla and
other compliant browsers to use the IE box model (set it to 'border-box'). You
can tell from the text on W3C's site that they're a little miffed at having to
put it in, but nonetheless, it works. (At least on newer browsers.)

Read up on it here to figure out how you'll neet to use it:
http://www.w3.org/TR/2002/WD-css3-box-20021024/#the-box-width

-Reha
-- 
/(bb|[^b]{2})/ ...THAT is the question.
=======================================
http://www.stwing.org/~rsterbin
-- 

* * Please support the community that supports you. * *
http://evolt.org/help_support_evolt/

For unsubscribe and other options, including the Tip Harvester 
and archives of thelist go to: http://lists.evolt.org 
Workers of the Web, evolt ! 


Yahoo! India Matrimony: Find your life partneronline.