[css-d] Div sizing problem
Hi all, We've almost completed this website (redesign) and I've got a problem with a div in a shopping page. I've got the navigation floating and then small divs with classes within a main div (#ufwus) to display product. The problem is that the first div sizes itself to the length of the navigation, which will dynamically be built by the client so may end up longer than you would want the first product div to be. Images that will be displayed in the product divs will all be 150px wide but could be any length. To ensure the picture stays within the div a small 'spacer div' is placed a the end of each product div to make it grow with the image. The spaces div when deleted shows the first div correctly but not the image if it's long... I'm at a loss of what else to do to fix this and would really appreciate if someone could take a look. html and css: http://www.schygiene.com.au/shopping.php?cat=8 http://www.schygiene.com.au/styles/hygiene.css Thank you Vicki I'd put my money on the Sun and solar energy. What a source of power! I hope we don't have to wait until oil and coal run out before we tackle that. -Thomas Edison \(.)^(.)/ --0-- Keenstreet Communications http://www.keenstreet.com.au __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Div sizing problem
Vicki Stebbins wrote:
The problem is that the first div sizes itself to the length of the
navigation, which will dynamically be built by the client so may end
up longer than you would want the first product div to be.
http://www.schygiene.com.au/shopping.php?cat=8
Would the addition of...
#ufwus {overflow: hidden; margin: 0; padding-left: 30px;}
* html #ufwus {overflow: visible; height: 1%;}
...give the desired result?
The above will establish a new 'Block formatting contexts'[1] for that
container - isolating its content from its surrounding, and thereby
preventing any 'clear' from interacting with elements outside this
container.
The usual workaround for IE6, and older versions, is also included.
regards
Georg
[1]http://www.w3.org/TR/CSS21/visuren.html#q15
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Div sizing problem
At 02:07 PM 23/01/2007, Gunlaug Sørtun wrote:
Vicki Stebbins wrote:
The problem is that the first div sizes itself to the length of the
navigation, which will dynamically be built by the client so may end up
longer than you would want the first product div to be.
http://www.schygiene.com.au/shopping.php?cat=8
Would the addition of...
#ufwus {overflow: hidden; margin: 0; padding-left: 30px;}
* html #ufwus {overflow: visible; height: 1%;}
...give the desired result?
The above will establish a new 'Block formatting contexts'[1] for that
container - isolating its content from its surrounding, and thereby
preventing any 'clear' from interacting with elements outside this
container.
The usual workaround for IE6, and older versions, is also included.
regards
Georg
[1]http://www.w3.org/TR/CSS21/visuren.html#q15
--
http://www.gunlaug.no
Hi Georg,
Many thanks this worked!! Oh for the hours spent trying to get this working.
I didn't quite get the IE workaround but did it.
Thank you so much.
Kind regards
Vicki
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] div sizing problem
sender: Jens Nedal date: Mon, Oct 09, 2006 at 12:58:17PM +0200 EOQ Since the hack did not work for you, you might be testing this on IE7? For IE 7 this hack has been fixed. Nope, IE6 (on Linux under Wine emulator) but I might have mispelled height or something :) The conditional 'hack' works like a charm, and yes, I only use it for a single div, one where I do need a particular padding, everywhere else I managed to do it without it. You will find more on conditional comments here. http://www.quirksmode.org/css/condcom.html Conditionals can only be used for Windows Internet Explorer, not on Internet Explorer for Mac OS (no matter which version). Even if Conditionals are not hacks in the common sense, they should only be used if there is no other way. Usually conditionals will contain very little extra code. Thank you very much for your detailed explanations they are *much* appreciated :) Have a great day everyone, Alex __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] div sizing problem
Hi all,
I have a problem trying to setup a div so that it show the same (size) in IE
and FF/Opera/etc. The problem is kind of classic: if I set padding in the
example below, in FF will be added to the height of the div, making it
taller than I want it to be, while in IE it won't. Last time I played with
CSS (about 2-3 years ago) I solved this by using a trick[1] that allowed me
to specify different settings for IE and FF. However that trick seems to no
longer work. I wonder how is this problem handled these days... how can I
have the same size (and padding) in both IE and FF ?
Here's the relevant CSS:
#menubar div {
position:absolute;
display:block;
background: url(menu-button.gif);
width:114px;
height:25px;
top:0px;
padding-top:5px;
}
And there the trick:
[1]
top:160px;
top /* */:/**/160px;
top /**/:150px;
Thank you in advance,
and have a nice day everyone.
Alex
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] div sizing problem
On 09/10/2006 07:35, Alexandru E. Ungur wrote: I have a problem trying to setup a div so that it show the same (size) in IE and FF/Opera/etc. The problem is kind of classic: if I set padding in the example below, in FF will be added to the height of the div, making it taller than I want it to be, while in IE it won't. Last time I played with CSS (about 2-3 years ago) I solved this by using a trick[1] that allowed me to specify different settings for IE and FF. However that trick seems to no longer work. I wonder how is this problem handled these days... how can I have the same size (and padding) in both IE and FF ? You don't need tricks--just use the box model as correctly as it's specified: http://css-discuss.incutio.com/?page=BoxModel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] div sizing problem
Hi,
I would not try to use the hack on top property but rather on the
height property since that is what is causing the problem. IE reads
the height placing the padding-top outside of the box and FF takes it
inside the box, like it should be according to W3C box model.
Either use IE Conditionals and add a IE specific css file (which will
only be read by IE), which is placed after your general css file.
Example:
!--[if lte IE 7]
link media=screen rel=stylesheet type=text/css href=ie.css /
![endif]--
in ie.css
#menubar div {
height:20px;
}
or you use the boxmodel hack you suggested above on the height attribute:
http://css-discuss.incutio.com/?page=BoxModelHack
Take a note though that:
height : /* */ 300px;
will be parsed by IE 7 and so NOT work anymore as intended, just like
some other hacks that will be fixed IE 7.
regards, Jens
On 10/9/06, Alexandru E. Ungur [EMAIL PROTECTED] wrote:
Hi all,
I have a problem trying to setup a div so that it show the same (size) in IE
and FF/Opera/etc. The problem is kind of classic: if I set padding in the
example below, in FF will be added to the height of the div, making it
taller than I want it to be, while in IE it won't. Last time I played with
CSS (about 2-3 years ago) I solved this by using a trick[1] that allowed me
to specify different settings for IE and FF. However that trick seems to no
longer work. I wonder how is this problem handled these days... how can I
have the same size (and padding) in both IE and FF ?
Here's the relevant CSS:
#menubar div {
position:absolute;
display:block;
background: url(menu-button.gif);
width:114px;
height:25px;
top:0px;
padding-top:5px;
}
And there the trick:
[1]
top:160px;
top /* */:/**/160px;
top /**/:150px;
Thank you in advance,
and have a nice day everyone.
Alex
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
So long and thanks for all the fish.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] div sizing problem
sender: Jens Nedal date: Mon, Oct 09, 2006 at 10:53:04AM +0200 EOQ Hi, Hi, I would not try to use the hack on top property but rather on the height property since that is what is causing the problem. IE reads the height placing the padding-top outside of the box and FF takes it inside the box, like it should be according to W3C box model. Exactly, that's the problem I'm having. Sorry for not being more explicit, I did use the trick on height, but for some reason it didn't work as expected, so I wasn't sure it the hack is still working novadays. Either use IE Conditionals and add a IE specific css file (which will only be read by IE), which is placed after your general css file. Example: !--[if lte IE 7] link media=screen rel=stylesheet type=text/css href=ie.css / ![endif]-- Wow, this looks great! :) Thanks a lot! Thank you, Alex __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] div sizing problem
Since the hack did not work for you, you might be testing this on IE7? For IE 7 this hack has been fixed. You will find more on conditional comments here. http://www.quirksmode.org/css/condcom.html Conditionals can only be used for Windows Internet Explorer, not on Internet Explorer for Mac OS (no matter which version). Even if Conditionals are not hacks in the common sense, they should only be used if there is no other way. Usually conditionals will contain very little extra code. regards, Jens On 10/9/06, Alexandru E. Ungur [EMAIL PROTECTED] wrote: sender: Jens Nedal date: Mon, Oct 09, 2006 at 10:53:04AM +0200 EOQ Hi, Hi, I would not try to use the hack on top property but rather on the height property since that is what is causing the problem. IE reads the height placing the padding-top outside of the box and FF takes it inside the box, like it should be according to W3C box model. Exactly, that's the problem I'm having. Sorry for not being more explicit, I did use the trick on height, but for some reason it didn't work as expected, so I wasn't sure it the hack is still working novadays. Either use IE Conditionals and add a IE specific css file (which will only be read by IE), which is placed after your general css file. Example: !--[if lte IE 7] link media=screen rel=stylesheet type=text/css href=ie.css / ![endif]-- Wow, this looks great! :) Thanks a lot! Thank you, Alex __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- So long and thanks for all the fish. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
