moldboy 0 Report post Posted March 18, 2006 (edited) Okay so I'm redisigning my site (here: http://forums.xisto.com/no_longer_exists/) and need help with the CSS that makes the main content. On IE it works which scares me because I'd much rather have it work on FireFox. So here's the CSS I used: BODY{background-color:#22324f;background-image:url('./images/bg.gif');}DIV.frame {background-color:#07571f;border:solid #000000 2px;width:740px;}img.banner {}DIV.green {background-color:#6d966c;width:730px;}DIV.menu {width:145px;background-color:#cccccc;float:left;}DIV.content {background-color:#cccccc;width:500px;float:right;}img.banner,DIV.green,DIV.content,DIV.menu {margin-top:5px;margin-bottom:5px;margin-left:5px;margin-right:5px;} Edited March 18, 2006 by moldboy (see edit history) Share this post Link to post Share on other sites
jlhaslip 4 Report post Posted March 18, 2006 I only get a one-line page showing there. Do you have another link?What about a listing of the html code?Also, it is easier to design the site so it works in Mozilla / Firefox correctly and then hack it for IE, so don't even look at it in IE until you get what you want in FF. Run the page through the w3c.org validator to see what it says as well. Make sure you include a correct Doc Type Declaration at the top of the page. Share this post Link to post Share on other sites
moldboy 0 Report post Posted March 18, 2006 Sorry about the link I guess the forum included the ) anyway here is the real link:http://forums.xisto.com/no_longer_exists/now I guess I'll include the HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD> <TITLE>DOCUMENT TITLE</TITLE><LINK HREF="2sty.css" REL="STYLESHEET" TYPE="TEXT/CSS"></HEAD><BODY> <DIV class="frame"> <IMG src="./images/banner.jpg" class="banner"> <DIV class="green"> p <DIV class="menu"> Hey </DIV> <DIV class="content"> cpntent </DIV> </DIV> </DIV></BODY></HTML>The W3C CSS validator says only stuff about background-color not being complimented with color, I'll fix that later, and the HTML validator just says it's not a valid 4.0 transitional page, If someone could help with that, but I'm not to worried right now. Anyway I do try to develop for FF, but I like to see wat it looks like in IE at the same time, the only reasion I mentioned IE at all is that is how it should look I can't seem to get the FF page to look like that, (the olive green block should encompas the grey content areas)And If I get rid of the two floats then the grey boxed go inside the olive green area, but the olive green only showes around the sides not the top. Share this post Link to post Share on other sites
jlhaslip 4 Report post Posted March 18, 2006 Add a margin to the content div greater than the fixed width of the sidebar ( menu) and in the same direction shoud help to solve the problem. DIV.content {background-color:#cccccc;width:500px;margin-left: 150px;} And eliminate the float: right for the content div. Try it and post back if there is any problem with that. Share this post Link to post Share on other sites
jlhaslip 4 Report post Posted March 19, 2006 Actually, there are a couple of other things I would change. Here is a css and html code block to look at. It would be more typical to change the div's to named div's (id=) rather than classes (class=), but I left them as classes for this sample. Adjust the gappage between the menu and content by changing the values for the width of the menu and the margin-left of the content. If you set the width of the frame div to 100% , this would allow the page to adjust to fill the whole display rather than the fixed pixel width.CSS: BODY{background-color:#22324f;background-image:url('./images/bg.gif') width:100%;margin:0px;padding:0px;}DIV.frame {background-color:#07571f;border:solid #000000 2px;width:100%;}DIV.green {background-color:#6d966c;}DIV.menu {width:24%;background-color:#cccccc;float:left;}DIV.content {background-color:#cccccc;width:75%;margin-left: 25%;}img.banner {width:100%;margin-top:5px;margin-bottom:5px;margin-left:5px;margin-right:5px;} HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" > <title>DOCUMENT TITLE</title><link href="moldboy_files/2sty.css" rel="STYLESHEET" type="TEXT/CSS"></head><body> <div class="frame"> <img src="moldboy_files/banner.jpg" class="banner" width="100%" alt=" enter something here"> <div class="green"> <div class="menu"> Hey<br /> Hey<br /> Hey<br /> Hey<br /> Hey<br /> </div> <div class="content"> <p>cpntent</p> <p>cpntent</p> <p>cpntent</p> <p>cpntent</p> <p>cpntent</p> <p>cpntent</p> <p>cpntent</p> </div> </div> </div></body></html> Try this to see if it works for you. It validates. Share this post Link to post Share on other sites
moldboy 0 Report post Posted March 19, 2006 Sorry I like my pages fixed to a certian pixlage, mainly because I like my image the size it is. If the image would scale nicrly then maybe, but not the way it is currently. What you said about makeing the margin for the left sounded quite clever. Unfortunatly it didn't quite work, the main content still doesn't have an olive green margin on the top and bottom but the floated menu DIV does and If I make the ceontent shorter the nthe menu then it floats right over the olive green cell.I thought about removing the olive green all together and making it a border on a content cell, however when I did that the border worked again on firefox adding the 5px to the outside howeveron IE the 5px were added the the middle so there was a 5px shortage. If you know I way to combat this problem that might solve a few problems.I also have an image which is simply an olive green square that I can position in the background 150ish px from the left and repeat-y to make a division in the middle I just don't know how to accomidate the writing after that. Share this post Link to post Share on other sites
moldboy 0 Report post Posted March 19, 2006 Thank you very much jlhaslip, but I realised that the reason my page wasn't displaying properly was because theings that wern't floated were not part of the document flow and floated things would be rendered seperate.Again Thanks Share this post Link to post Share on other sites
jlhaslip 4 Report post Posted March 19, 2006 To get the margins back, simply change the margin in the body selector back to 5px or create a new selector where you want the margins. Play with it.Also, simply change the sizes back to px will work, too. The div.content margin-left has to be larger than the width of the div.menu sidebar to work properly. Share this post Link to post Share on other sites
