Hi everybody First post and very new to CSS. I am in the process of rebuilding a site which is currently using tables and now rebuilding to CSS. I think CSS is great, but building this site has been a right Pain in the bum! I'm having problems with elements scrolling to the bottom of the wrapper/content and trying to get an image on the left hand side to stick to the bottom of a page when the page scrolls. I would really appreciate anyone taking the time to check out the code and see where I am going wrong. I've tried all kinds of different things (and spent hours trying to figure it out) and not yet found a solution. I've been tempted to take the easy option, but realitically I would like to do it right and learn from it. Current CSS is: @charset "utf-8"; /* CSS Document */ html, body {height:100%;padding:0; margin:0;} body { margin-top:0; margin-bottom:0; margin-left:0; margin-right:0; padding-top: 20px ; padding-bottom:0; padding-left: 0; padding-right: 0; background-color:#000; font-size: 95%; font-family:Verdana, Arial, Helvetica, sans-serif; width:100%; background-image:url(images/bg2.jpg); background-repeat:repeat-x; } /* ===================== HEADER LAYOUT ========================*/ #header { height:150px; margin-top:0; margin-bottom:0; margin-left:0; margin-right:0; padding-top: 0 ; padding-bottom:0; padding-left: 0; padding-right: 0; } #header .slogan { background-color: transparent; float:right; margin-left:20px; margin-top: 5px; margin-right:20px; margin-bottom:0; padding-top: 0 ; padding-bottom:0; padding-left: 0; padding-right: 0; } #header .logo { float:left; margin-left: 30px; margin-top: 40px; margin-right:30px; margin-bottom:0; padding-top: 0 ; padding-bottom:0; padding-left: 0; padding-right: 0; } div#nav_newsletter { position:absolute; margin-top:245px; margin-left:160px; margin-bottom:0; margin-right:0; padding-top: 0 ; padding-bottom:0; padding-left: 0; padding-right: 0; } /* ===================== HEADER IMAGES ========================*/ #logo { margin-top:auto; margin-bottom:0; margin-left:auto; margin-right:auto; padding-top: 0 ; padding-bottom:0; padding-left: 0; padding-right: 0; height: 30px; } #nav { position:absolute; margin-top: 240px; margin-right:auto; margin-bottom: 0; margin-left: 470px; padding-top: 0 ; padding-bottom:0; padding-left: 0; padding-right: 0; height:50px; } /* ===================== MAIN BODY LAYOUT/TEXT ========================*/ #wrapper { position:relative; width:1000px; margin-top:150px; margin-right:auto; margin-bottom: 1px; margin-left:auto; padding-top: 10px ; padding-bottom:0; padding-left: 0; padding-right: 0; text-align:left; } #content { margin-top:0; margin-right:18px; margin-bottom:0; margin-left:0; background-color:#fff; padding-bottom:50px; padding-left:0; padding-right:0; padding-top:0; } #maincol h3{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; } h3{ font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333333; } #leftcol { float:left; margin-top:0; margin-right:-120px; margin-bottom:0; margin-left: 0; padding-top:0; padding-left:0; padding-bottom:0; padding-left:0; background:url(images/left-top-corner.jpg) left top no-repeat; height:100%; } #leftcol .bkimg { margin-left:30px; margin-top:auto; margin-bottom:0; margin-right:0; padding-top:0; padding-bottom:0; padding-left: 0; padding-right: 0; background-position:bottom; } #midcol { height:100%; float:left; margin-top:0; margin-bottom:30px; margin-left:0; margin-right:auto; padding-top:20px; padding-right:40px; padding-bottom:4px; padding-left: 20px; background-image:url(images/mainbg.gif); background-repeat: repeat-y ; background-color:#999999; } #div midcol p { font-family:Arial, Helvetica, sans-serif; font-size:9px; } #maincol { padding-top:0; padding-right: 0; padding-bottom:0; padding-left: 0; height:100%; margin-top:0; margin-right: 100px; margin-bottom:0; margin-left: 500px; } /*css for common-pg-----------------------------------------------*/ .page-bottom-corners{ width:982px; float:left; margin-top:-5px; margin-right:0; margin-bottom:auto; margin-left:0; padding-top:0; padding-right: 0; padding-bottom: 0; padding-left: 0; } /* ===================== LISTS ========================*/ ul { list-style: none; margin-top:auto; margin-right:0; margin-bottom:auto; margin-left:0; padding-top:0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .floatright { float: right; } #content ul { left:auto; margin-top:auto; margin-right:0; margin-bottom:auto; margin-left:0; padding-top:0; padding-right: 0; padding-bottom: 0; padding-left: 0; list-style:none; } #content ul li { list-style:none; width:200px; height:23px; list-style-type:none; margin-top:-5px; margin-right:0; margin-bottom:auto; margin-left:10px; padding-top:0; padding-right: 0; padding-bottom: 0; padding-left: 0; font-size:12px; } #content ul li a{ margin-top:0; margin-right: auto; margin-bottom: 0; margin-left: auto; display:block; padding-top:0; padding-right: 0; padding-bottom: 0; padding-left:15px; text-decoration:none; font-weight:normal; list-style:none; } #content ul li a:link, #content ul li a:visited, #content ul li a:active { color:#333333; list-style:none; } #content ul li a:hover { color:#FF9900; list-style:none; } /* ===================== GENERAL TEXT/HEADERS ========================*/ h1#header span {display:none;} h1#header { background-image:url(images/mbheader.png); background-repeat:no-repeat; height:35px; margin-left:90px; margin-top:20px; margin-right:auto; margin-bottom:auto; padding-top:0; padding-right: 0; padding-bottom: 0; padding-left: 0; } h1 { font-family:Geneva, Arial, Helvetica, sans-serif; font-size:16px; color:#669900; margin-top:10px; margin-right: 20px; margin-bottom: 10px; margin-left: 10px; padding-top:0; padding-right: 0; padding-bottom: 0; padding-left: 0; } h2 { font-family:Geneva, Arial, Helvetica, sans-serif; font-size:14px; margin-top:10px; margin-right: 20px; margin-bottom: 10px; margin-left: 10px; padding-top:0; padding-right: 0; padding-bottom: 0; padding-left: 0; color:#333333; border-bottom: solid thin #999999; width:450px; } p { position:relative; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; margin-top:10px; margin-right: 20px; margin-bottom: 10px; margin-left: 10px; padding-top:0; padding-right: 0; padding-bottom: 0; padding-left: 0; color:#333333; } h1#news { font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#fff; margin-top:0; margin-right:auto; margin-bottom: 0; margin-left: auto; padding-top:0; padding-right: 0; padding-bottom: 0; padding-left: 0; } h1#news span { font-size: 12px; color: #FFCC00; } /********************** * FOOTER/BOTTOM * ***********************/ #bottom { position:absolute; clear: both; float: left; width: 100%; height: 300px; margin-top:80px; margin-right:auto; margin-bottom: 0; margin-left:auto; padding-top: 10px; padding-right: 0; padding-bottom: 0; padding-left: 0; background:url(images/darkimage.png) no-repeat; background-position:bottom left; font-size: 12px; text-align: left; background-color:#494949; color: #fff; } #bottom-links { background-image:url(images/footertop.gif); background-repeat:repeat-x; height:58px; margin-top:-10px; margin-right:0; margin-bottom:0; margin-left:0; padding-top:10px; padding-left:200px; padding-bottom:0; padding-right:0; } #bottom a:link, a:visited { color:#669900; } #bottom a:hover { color:#FFFFFF; } #bottom-divs { float: left; clear: both; margin-top:0; margin-right:auto; margin-bottom: 0; margin-left:auto; padding-top: 50px; padding-bottom:50px; padding-left:50px; padding-right:50px; } #bottom-left, #bottom-mid, #bottom-right { width: 250px; padding-top: 50px; padding-right: 0; padding-bottom: 20px; padding-left: 150px; float: left; margin-top:0; margin-right:auto; margin-bottom: 0; margin-left:auto; } #bottom-left { margin-top:0; margin-right:auto; margin-bottom: 0; margin-left:auto; padding-top:40px; padding-right: 0; padding-bottom: 0; padding-left: 150px; } #bottom-mid { margin-top:0; margin-right:auto; margin-bottom: 0; margin-left:auto; padding-top:40px; padding-right: 0; padding-bottom: 0; padding-left: 100px; } #bottom-right { margin-top:0; margin-right:auto; margin-bottom: 0; margin-left:auto; padding-top:40px; padding-right: 0; padding-bottom: 0; padding-left: 100px; } #bottom h2 { margin-top:0; margin-right:auto; margin-bottom: 10px; margin-left:auto; padding-top: 0; padding-right: 8px; padding-bottom: 0; padding-left: 0; font-size: 1.6em; color: #fff; } #bottom h2 span { color: #888; } #bottom ul { margin-top:0; margin-right:auto; margin-bottom: 0; margin-left:auto; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; list-style-type: none; border-top: 1px solid #555; } #bottom ul li { line-height: 26px; border-bottom: 1px solid #555; margin-top:0; margin-right:auto; margin-bottom: 0; margin-left:auto; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } #bottom ul li a { display: block; margin-top:0; margin-right:auto; margin-bottom: 0; margin-left:auto; padding-top: 10px; padding-right: 0; padding-bottom: 0; padding-left: 0; color: #fff; text-decoration: none; } #bottom ul li a:hover { background: #191919; } #bottom-sep { clear: both; } #bottom h1 { font-family:Georgia, "Times New Roman", Times, serif; font-size:14px; border-top: medium #669900 solid; border-bottom: thin #666666 solid; color:#fff; padding-top:10px; padding-bottom:10px; padding-left:0; padding-right:0; margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto; } Code (markup): and HTML for the index page is : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Barrymore Site</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="IEmarginFix.js" type="text/javascript"></script> </head> <body> <?php include("header.php");?> <!-- begin wrapper div --> <div id="wrapper"> <!-- begin content div --> <div id="content"> <!-- begin leftcol div --> <div id="leftcol"> <img src="images/navigation.png" alt="navigation image" /> <ul> <li><a href="#">Michael Barrymore Home</a></li> <li><a href="#">Michael Barrymore Blog</a></li> <li><a href="#">Biography</a></li> <li><a href="#">Awards</a></li> <li><a href="#">TV Appearances</a></li> <li><a href="#">Take the quiz</a></li> </ul> <p> </p> <!-- begin barrymore image div --> <img class="bkimg" src="images/mbbackimg.png" alt="Michael Barrymore background image" height="300" width="306" /> <!-- end barrymore image div --> </div> <!-- end left nav div --> <!-- begin midcol div --> <div id="midcol"> <? include "../rssdemo/feed.php"?> </div> <!-- end midcol div --> <!-- begin maincol div --> <div id="maincol"> <img src="images/mainpagetop.png" alt="main page image" /> <h1>Welcome to Michael Barrymore Unofficial Website</h1> <p>If this is your first visit, there are a few things you can check out. If you missed Michael in the Celebrity Big Brother house, then there is a day by day record of what Michael was getting up to in the house.</p> <p>Up to date news and information can be found in the Michael Barrymore Blog where you can have your say on any topics posted.</p> <p>There is also a section where you can leave Messages for Michael in the blog where you can offer your support to one of the nations favourite entertainers.</p> <p>Enjoy your visit!</p> <p> </p> <h2>Surviving Spike | 5th Jan 08</h2> <p><img src="images/hs.png" width="100px" height="100px" class="floatright" alt="surviving spike" />Michael is to star in a new stage play called 'Surviving Spike'. Michael will be playing the roll of Spike Milligan. The show begins on the 5th Feb at the Theatre Royal Windsor in Berkshire. Read more about Michael Barrymore in Surviving Spike...</p> <p> </p> <h2>Surviving Spike | 5th Jan 08</h2> <p><img src="images/hs.png" width="100px" height="100px" class="floatright" alt="surviving spike" />Michael is to star in a new stage play called 'Surviving Spike'. Michael will be playing the roll of Spike Milligan. The show begins on the 5th Feb at the Theatre Royal Windsor in Berkshire. Read more about Michael Barrymore in Surviving Spike...</p> <p> </p> <h2>Surviving Spike | 5th Jan 08</h2> <p><img src="images/hs.png" width="100px" height="100px" class="floatright" alt="surviving spike" />Michael is to star in a new stage play called 'Surviving Spike'. Michael will be playing the roll of Spike Milligan. The show begins on the 5th Feb at the Theatre Royal Windsor in Berkshire. Read more about Michael Barrymore in Surviving Spike...</p> <p> </p> </div> <!-- end maincol div --> </div> <!-- end content div --> <!-- begin bottom corner image div --> <div class="page-bottom-corners"> <img src="images/left-bottom.gif" alt="bottom image left" align="left" /> <img src="images/right-bottom.gif" alt="bottom image right" align="right" /> </div> <!-- end bottom corner image div --> </div> <!-- end wrapper --> <?php include("footer.php");?> </body> </html> Code (markup): Thanks loads for any help
Post a url, helps to see the page and to illustrate the issue. As is, I would have to guess at the problem. Second, something to help you down the road: padding-top:0; padding-right: 0; padding-bottom: 0; padding-left: 0; This can be stated padding: 0; same for magin, if they are the same.
Hi - yeh, I realise I could have used margin:0; Padding:0; as well as all the rules in the same place ie margin:0 0 10px 0; etc - but with the problems I was having with the margins, I basically tried everything to see if doing it a different way would help (Desparate times and all that) The URL is michaelbarrymore.net/new/index.php (not linked as don't want SE's to find it) Thanks
Alright, you want a fixed image deal right? I don't see a background-attachment: fixed; in the code. See this url: http://www.quirksmode.org/css/background/background_try.html Issue with columns in IE, odds are it can be fixed with a reduction in size,same for those at the bottom. Guessing you are avoiding the easy fix of using float:right on the right hand column? IE seems to be the problem child, it and the columns at the bottom. Less I just missed something.
I tried background-attachment: fixed; and it just gave me a kinda window in the site with the image as a background - a really odd result. I wasnt deliberately avoiding using float for the right hand column, but by adding one now, FF goes mental and IE looses the background. What do you mean by 'reduction in size'?
Created more problems than it solved. Ok. Do you have the columns width defined? If so that's the first thing to check, IE and FF have different methods of calculating margins,paddings,width. So sometimes you think there's enough space but there isn't. Since you defined the two other columns float:left, the last column should slide right beside those two, if there's space.... Do you have the web developer toolbar installed? It's showing some strange positions for all of the columns and the footer columns look like they are all oversized.
I do have the web developer toolbar installed and notice the nav/newsletter/wrapper are showing in odd positions? Not sure why tho as I believe they are laid out ok in the HTML? The header and footer are both 100% width and the wrapper is set at 1000px. Besides that, there are no other widths to affect the actual element layout - only other widths are set on things like header tags etc.
If you declare float on properties, you should declare the dimensions. Else you get FF going mental on you when you have all elements inside of a div with float set. Part of the issue, I believe is you set the cols to display:inline. Kinda defeats the purpose of the them being divs. I'm tweaking it now, but odds are I'll give up in 10 minutes. Changing the #bottom-left, #bottom-mid, #bottom-right { width: 250px; to 200px, stops those from sliding down on 1024x768, which is still a hefty chunk of the WWW viewing population.
Thanks for your help so far Shallowink. Im' still tweaking myself and managed to at least get the pages both in FF and IE to scroll to the bottom of the text - however, the background disappears in FF - I have used min-height:100%; instead of height:100%; which seemed to get the content element to scroll. I put the display:inline; in just last night to see if it made a difference, it didnt, but forgot to remove them. I also read not to use width on floated elements - thats the thing with just learning all this stuff, it's hard to know which advice to follow. I still can't figure out tho how at attach the side image to the bottom of the content tho.
You should always set widths on floats, unless you want them to go "auto" where they try to go as wide as their content (instead of forcing their content to wrap). In some browsers, floats with no set width try to go as wide as possible-- the normal behaviour for a div which is also a block element. In Safari and Opera, floats "shrink-wrap" meaning they get only as big as they think they need to in order to contain whatever's in them. Setting a definite width removes any ambiguity for browsers (usually). One thing I've stopped setting widths to is floated <a>'s in navigation-- each link is a different width anyway cause each has different text-- so I let the floats wrap around whatever the width of the text is, and usually give everything some side padding so the floats give a little breathing room : ) Be wery wery careful setting something to height: 100%. In IE6, which is dumb, height means min-height. So, in IE6 you can set something to height: 100% and it will grow bigger than that if needed. However, nobody else will do this. They understand min-height means minimum height, and if you just set height: 100%, you of course won't get scrolling cause the page is, well, 100% which means everything : ) Can't get any bigger than 100% can you? So now that you've figured out to use min-height: 100%, you've probably noticed that IE6 acts a little weird with it. Cause, yeah, it doesn't have a clue what min-height means. It ignores it. Usually, people play this trick for IE6: For all normal browsers: #box { min-height: 100%; } For IE6 * html #box { height: 100%; } The * html is something only IE6 understands, and because it mistakenly believes height means "minimum height", it will behave as the other browsers. The "star hack" or Holly hack (or Tan hack, whoever you want to name it after) will make your CSS not validate, but it's so useful everyone uses it (but try to use it only when needed.. having a gazillion * html's in your CSS is a sign you're doing something wrong!).
Ah, looking a bit too quickly at your page... You have a wrapper with three columns. I would float the first two left (leftcol and mid col) since they obviously have certain widths anyway, this is great. Set a width to the proper width for those two. Right column, assuming it comes after the left and mid col's in the source (HTML), can just sit there happy with a left margin big enough to push text and everything out of the way of the floats (the text would stay away from the floats anyway but anything that's block would slide underneath). Now if you do this, then of course IE6 will puke because if there are any margins on those two floats, it will double them just for sh*ts and giggles (IE is like that). It's the famous double-margin float bug : ) Display: inline magically fixes this, cause what's funny is anything that's floated is automatically a block, so saying display:inline doesn't affect the other browsers-- they know better : ) IE6 doesn't, and removes the double margins. I think you're trying to copy the table with CSS. That'll always be a lot more work. You can probably get away with not using so many images etc and just let things kinda flow around. One thing to watch out for-- in IE6, if the text is enlarged, your left col will get wider to hold the text in. Evil, huh? I recently found that the IE6-only CSS word-wrap: break-word; will wrap the individual letters of the words in the menu instead, keeping the width the same. Setting widths with multiple floats inside a set-width container are important, cause if IE6 (or any browser) thinks you've got a bunch of floats and there's not enough room for them to all line up side-to-side, the last one gets sent to the bottom. Same goes for the non-floated right column too-- if IE6 (it's usually IE6 that always thinks there's not enough room when there is) thinks the right col is too big, it will push that one down. The nature of floats, they're weird. Here's a nice little review of IE6 float bugs: http://www.sitepoint.com/forums/showpost.php?p=1374925&postcount=15
Thanks for your indepth reply Stomme - much appreaciated I think my mind is still set on table layouts and trying to do the same thing with CSS - not always sure what is necessary and what isn't, but enjoying learning about it all. I should have really shown the amendment's I had made to the code as it now stands as far as the layout goes: #wrapper { width:1000px; margin-top:170px; margin-right:auto; margin-bottom: 1px; margin-left:auto; text-align:left; min-height:100%; padding: 0; } #content { width:980px; background-color:#ffffff; padding-bottom:50px; padding-left:0; padding-right:0; padding-top:0; } #leftcol { min-height:100%; float:left; width:200px; background:url(images/left-top-corner.jpg) left top no-repeat; } #midcol { float:left; width:220px; padding-top:20px; padding-right:0; padding-bottom:4px; padding-left: 20px; background-image:url(images/mainbg.gif); background-repeat: repeat-y ; min-height:100%; } #maincol { float:right; width:482px; height:100%; } Code (markup): IE seems to display how I would like the site to look - but FF looses the background color? But at least it is scrolling to the length of the content. But it seems when you solve one issue, another one crops up. The left col and mid col are floated to the left and I have now also floated the main col to the right. It doesnt seem to make much difference in IE that I dont have height:100%; altho FF does seem to need min-height:100%; in order to scroll to fill the content - yet as I mentioned, the background color is not scolling with it. I have tried adding background color to individual elements, but this didn't make any difference - so this is now the problem I am facing and not sure how to correct?
Hmm, I guess you should post screenshots or something of what you want-- in Opera it seems okay, in my old FF 1.5 it seems okay too (I don't have my work machine so I can't check FF2 and Iceweasel is rendering like 1.5), while fake IE6 4 Linux is showing two big things: First, the PNG's are doing their normal problem with IE6, which doesn't understand alpha transparency and adds a grey background wherever the "transparency" is. You could send a transparent gif version to IE6 with some CSS trickery (basically, either send the gif to IE6 using * html OR send the gif to everyone and then override it in the normal browsers using child or adjascent selectors, neither of which IE6 understands and will ignore : ) Second problem is float drop in IE6. I warned this might happen. Do you have display: inline on your two left floats? Also, while I don't think it would be a problem here, IE6 has some issue (somewhere) with right floats-- I think it was something like, if you have a left float INSIDE a right float or something, IE6 makes the left-floated stuff vanish? Or something. So while there's nothing wrong with floating stuff right, I personally try to avoid it if I can get the same effect with everything floated left. Since your main content box is a set width, you can still get away with either floating EVERYONE left OR having the right float not be a float, but just letting it me static content with a large left margin. The float drop in IE6 (pushing the righ column below the level of the left floats) is a B to fix but usually it's something like, the total width of all your floats is wider than the box they're sitting in. Esp since IE6 counts all the margins and padding and borders etc as "width". You should try to reduce the width of the content/right float part. Although, it looks like the green strip is wider than the actual green part-- I assume so you can fit the little rippled edges? You only have to JUST fit them in there. I'll bet that's what IE6 is b*tchin about. As far as the scrolling thing, I don't understand that. Is something supposed to scroll down? (My screen is really large). As far as the height, yeah you could not state any height-- all browsers will show however much content there is, and if there's more than the height of the browser window, they stick a scrollbar in there automagically. Setting a height is usually when your page is short but you don't want the page or page colours to stop. Firefox will not give you a scrollbar when height is set to 100% because 100% means the total height of the browser window-- so there's nothing to scroll, because the height of the browser is... everything. All there is. As far as the browser is concerned, there IS no content below the browser-window. And when I say "Firefox" I mean all browsers except IE6.