[css-d] Divs wont expand vertically - Make them behave!
Hi, I'm trying to get the contents part of this layout to expand and contain the entire text, as well as push down the footer. http://www.selfinflicted.org/css/layout_temp.html It works great in IE but in Firefox and Opera they just don't want to expand and push =/ What am I missing here, its boggeling my mind. /Andreas __ 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] Double padding problems in IE
Hi, Thank to everyone that's helping me sort out the css-issues I have along this small project. Next up is a double padding-issue in Internet Explorer. As you can see in [1] there are a 4px padding at the bottom (shown in yello) instead of the expected 2px. It works just find in both FireFox and Opera, but not in Internet Explorer 6. Think I've tried most things so far, without any luck =( [1] http://www.selfinflicted.org/css/layout_doublepadding.html __ 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] Containing floats in 100% high container
Hi, I would like to start off by thanking 'Ingo Chao' and 'francky' for their help in my 'Minor browser inconcistencies' post - Thanks guys! On the page in question [1] i have a 100% high div that contains the two columns of text. The problem occurs when either of the columns extend the full height of the screen. In IE the main div id expanded to fit the contents but in opera/firefox it does not. If I remove the 100% hight of the main div and use the :after float clearing css trick then it works fine, but then I end up with a background that doesnt strech all the way down if the contents doesn't fill the entire screen length. Open it in a browser to see what I mean, I have colored the divs to make it clearer on what is going on. Any good workarounds for this which till still enable me to use a 100% high div (thus making the background strech the entire hight) while containing the floats correctly? [1] http://www.selfinflicted.org/css/float_problems.html __ 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] Minor browser inconcistencies
Hi, Since I didn't get any (?) feedback at all last time I thought I'd bring it back up. Its only minor glitches with a clean and small example and I'm really keeping my fingers crossed that you guys and gals can help me work them out. (Old post below) -- OLD POST -- Hi, I'm working on making a fairly simple css layout and have a couple of small issues that I need to resolve before it works in Explorer, Firefox, Netscape and Opera. I'm pretty confident that theres not much work needed to get it right and I'm hoping to get some pointers on how to fix it. Here is a list of things I've spotted in the various browers Explorer 6.0.2900.2180 - No problems here. Firefox 1.5.0.3 - The 2px high gap between the blue box and the black line has disappeared Netscape 8.1 - Same as firefox since its the same engine Opera 8.54 Build 7730 - Vertically centers the main layout =( - The background for the footer div gets messed up. Also, is there any good cross-brower alternatives to the FooterStickAlt (which I use) method which doesnt suffer from the problem where it could end up hiding contents due to overlapping with the contents in the above layer? Here is the example layout http://www.selfinflicted.org/css/layout_example.html Thank you! __ 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] Minior browser inconsistencies
Hi, I'm working on making a fairly simple css layout and have a couple of small issues that I need to resolve before it works in Explorer, Firefox, Netscape and Opera. I'm pretty confident that theres not much work needed to get it right and I'm hoping to get some pointers on how to fix it. Here is a list of things I've spotted in the various browers Explorer 6.0.2900.2180 - No problems here. Firefox 1.5.0.3 - The 2px high gap between the blue box and the black line has disappeared Netscape 8.1 - Same as firefox since its the same engine Opera 8.54 Build 7730 - Vertically centers the main layout =( - The background for the footer div gets messed up. Also, is there any good cross-brower alternatives to the FooterStickAlt (which I use) method which doesnt suffer from the problem where it could end up hiding contents due to overlapping with the contents in the above layer? Here is the example layout http://www.selfinflicted. org/css/layout_example.html Thank you! __ 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] Problems with 100% height div
Hi,
I would like to put a 100% high div on my page, but for some reason I
just can?t get it to work. I use the method described in the ?One True
Layout - Equal Height Columns? [1] with no luck. The markup is dead
simple
div id=container
div id=contents
p
dfsdd
/p
/div
/div
Nothing fancy here and the css is also equally as simple
*
{
margin: 0;
padding: 0;
}
#container
{
background-color: #00f;
width: 796px;
overflow: hidden;
}
#contents
{
background-color: #0f0;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
Using this makrup + css, the div doesn?t expand [2]. However I?ve
found that if I add something AFTER the inner div then it will expand
but there is no overflow clipping taking place [3]?
div id=container
div id=contents
p
dfsdd
/p
/div
TEXT TO MAKE IT EXPAND
/div
This is all being tested in IE6, but it doesn?t work in firefox
either. Any idea on why it?s acting up?
[1] http://www.positioniseverything.
net/articles/onetruelayout/equalheight
[2] http://www.selfinflicted.org/css/full_height.html
[3] http://www.selfinflicted.org/css/full_height_expanded_noclip.html
__
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] Wierd color display IE/Firefox
Hi Im trying to extend a gradient background infinite by docking the background at the top of a div and also supply a background color (the same color found at the bottom of my gradient). However when I do this, Internet Explorer shows a different saturation of the color, but it looks just fine in Firefox. http://www.selfinflicted.org/css/columns_gradient.html this is so weird. At first I thought maybe this has to do with web safe colors, but I thought there isnt a need for those anymore? I this yet another Internet Explorer anomaly? If so is there a work around? I know I can extend my background image, lets say to 2000px high, but to reduce file size Id rather use a background color image combination. Any ideas? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wierd color display IE/Firefox
I did a bit more investigation and it appears the anomaly disappears if I change the background image file format from png to gif. Is this another one of the Internet Explorer sucks at png rendering issues? I just recently switched from using gif file to png and have not yet grasped all of the consequences. Thanks. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Exploring equal height columns
Hi, I'm currently exploring the imfamous 'equal height column' design possibilities using css layouting and have stumbled upon a small obstacle. I'm exploring various techniques to understand thier limitations. I have a couple of requirements I'm hoping to meet, i.e I need to find a cross-browser technique which take on the challenge. * Nothing fancy here, just your ordinairy 2 column layout . A container and one left and one right floated divs. * Support extending background - I need to place a gradient background in my right column, position it at top and have it extend infinitly by also suppluing a background color (the same color as the last color of the gradient). This way my background has a nice gradient at top which can extend infinitly. * The container (or atleast the illusion of the overall appearance) should use a 2px padding. My container will use a back border and the padding will give the design a nice white padding. * The columns should have a 15px (for now, might move to em units later on) padding, pushing the contents an additional 15px away from the 2px padding provided by the container (or what ever element ends up providing it). The solution I'm currently trying out is the described in the Equal Height Columns - Revisited section of the In search of the One True Layout article over at positioniseverything.net http://www.positioniseverything. net/articles/onetruelayout/equalheight It works really well except (you knew it would come, why else whould I post? hehe) for one thing, I can't get the 2px padding to appear at the bottom. Of course this is backause of the used technique - make the divs really long using padding and use negative margins to bring back the flow. Besides from this, it works excellent. I made a small example to illustrate where I'm currently in my quest. http://selfinflicted.org/css/columns.html As you can see I lack the white 2px space at the bottom. This technique would let me place a background on the right column and have it extend with the help of a background color. The example has been extracted, and simplified, from a much larger design - strickly for Proof of Concept. Also the padding requirement (15px inner padding of the columns) have not been included, but it's a trivial task to add later on, I wanted to keep the markup and css as clean as possible. I thought about the 'fauxcolumn' technique but it doesn't really work well with the 'infinite background' requirement. I really like the positioniseveything.net approach and I'm putting my hopes in your experience to help me reclaim my bottom white-space :) So there you go - let the suggestions and advice flow! Thanks for taking the time to read my description. .Andreas Håkansson __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Exploring equal height columns
Ill tackled this one myself. I figured it out (boy was it simple). All I had to do was change the padding of the #contents style to margin instead. Oh and I also went on to apply the Holly-hack to expand the div to contain the floats. .Andreas Håkansson __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Vertical alignment
Hi, Im trying to vertical-align the button to the middle of the textbox http://www.selfinflicted.org/css/quick.html but since the vertical-align css is based on the elements parent, it doesnt position as wanted. As you can see from the HTML, Im trying to keep it a simple as possible and reply on the natural wrapping of the contents to position the links below the textbox. Any suggestion on how to change the css / markup to get what I want? Dont mind the border and background color on the wrap div its for illustrational purpose only =) Andreas Håkansson __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] RE: 100% width with margins
Thank you Gunlaug Sørtun and David Laakso for your feedback. The solution was so simple it was almost to obvious :-) Just don't set a 100% width on the div and it will play nice with the margins. To clear up my vauge description of the problem. I have two divs, one 800px wide, centered (margin: 0 auto / text-align: center) and one below which should be 100% wide minus the margins. Works like a charm =) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 100% width with margins
Hi! My previous (and first) post to this list was a great success so Im keeping my fingers crossed for a repeat :-) I want to have a 100% wide div on my page which also has a 20 pixel padding as well as a 2px border. Now if I add the margin to the body and the width and border to my div it works like a charm. But (you knew it would come) there more. Its not the only contents on the page, in fact there are a second div which of course should be nicely centered on my page, thus the body have been given a margin with auto-value and a text-align set to center. I cant both have a 20px margin for the 100% wide body, and an auto margin for the centered div, both on the same time on my body. If I move the 20px margin to the 100% wide div, then it will be pushed out 20px of the screen and giving me a horrible horizontal scrollbar (yuck). Any ideas on how to pull this one off? Its late and Im a bit tired so I wont paste any css/html tonight (need to simply it as well as tidy it a bit first ;), but I will do so if you want me to. Thanks! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Alternative clear methods
Thank you Gunlaug Sørtun and Nick Fitzsimons! Now it doesn't only Work perfect in both Win/IE and Mozilla, but I actually understand Why as well =) -Original Message- From: Nick Fitzsimons [mailto:[EMAIL PROTECTED] Sent: den 4 oktober 2005 10:38 To: Andreas Håkansson Subject: Re: [css-d] Alternative clear methods I am trying to create the below layout and after som tweaking and reading I managed to get it looking alright in both Win/IE och Firefox (haven't tested any other browsers, they are concidered bonuses). However I am curious if it would be possible to create the design WITHOUT the additional span-element to clear the float. Have a look at http://www.positioniseverything.net/easyclearing.html Briefly, the technique described there takes advantage of the fact that IE will (wrongly) clear things without any prompting, and only the more competent browsers understand the CSS which is used to clear the floats. There's a lot of other good articles on similar topics at that site too :-) HTH, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Alternative clear methods
Hi!
Since this is my first post I am sorry if this is a subject which has
been dealt with
over and over again before :-)
I am trying to create the below layout and after som tweaking and
reading I managed
to get it looking alright in both Win/IE och Firefox (haven't tested
any other browsers,
they are concidered bonuses). However I am curious if it would be
possible to create
the design WITHOUT the additional span-element to clear the float.
Without it, my red and blue boxes spil out of the wrap div. Had IE
had better support
for pseudo-classes then I'm sure that would be the solution, but I'm
taking a chance to
explore other options - more for educational purpose. It's tough to
get a good overview
of all the hacks and stuff when you are fresh in the css-layout game :
-)
Thanks!
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
html lang=sv-SE
head
titleFloat test/title
style type=text/css media=screen
*
{
margin: 0;
padding: 0;
}
body
{
font-family: verdana, tahoma, arial;
font-size: 80%;
text-align: center;
}
#container
{
background-color: #fff;
border: 2px solid #000;
font-size: 0.85em;
margin: 20px auto;
text-align: left;
width: 800px;
}
#wrap
{
border-bottom: 2px solid #000;
padding: 2px 2px 0 2px;
height: 278px;
}
#top
{
background-color: #ccc;
height: 82px;
margin: 0 0 2px 0;
}
#left
{
background-color: #f00;
float: left;
height: 192px;
margin: 0 2px 0 0;;
padding: 0;
width: 581px;
}
#right
{
background-color: #00f;
float: left;
height: 192px;
margin: 0;
padding: 0;
width: 213px;
}
#bottom
{
padding: 15px;
}
.clear {
clear: both;
height: 1px;
}
/style
/head
body
div id=container
div id=wrap
div id=top/div
div id=left/div
div id=right/div
span class=clear/span
/div
div id=bottom
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce
tortor ligula, gravida in, condimentum sed, tincidunt eu, eros. Nulla
ut mi eu dui auctor euismod. Duis aliquam lacinia lorem. Aliquam nibh.
Curabitur quis dui. Aliquam accumsan lorem id neque. Suspendisse
potenti. Maecenas elementum tempus justo. Fusce tortor magna, blandit
iaculis, condimentum ut, nonummy et, est. Quisque eget dui nec nibh
posuere pulvinar. In eros arcu, ullamcorper sed, convallis non,
scelerisque nec, libero. Pellentesque accumsan faucibus ipsum.
Curabitur dapibus. Fusce adipiscing nisl quis erat. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
In hac habitasse platea dictumst. Fusce feugiat, dolor nec porta
condimentum, risus neque mollis libero, non rhoncus tortor tortor ut
arcu. In enim sem, aliquam vel, dignissim ut, tempus vel, lacus.
/div
/div
/body
/html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
