Ok, you have a few problems. 1) The div's MainText and RightSideNav are INSIDE the Button Bar. Move them out of the div.
So it should look like: On Wed, Jan 7, 2009 at 12:34 AM, Phill <[email protected]> wrote: > > Understood, I think you may have given me the answer in your second > paragraph actually. I don't think the block level elements positioned > side by side will position properly unless they are floated. I have > just floated the MainText and RightSideBar and they now look a lot > better in firefox. > > Anyway as requested here is the html: > > <?xml-stylesheet href="mystyles2.css" type="text/css"?> > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> > <html xmlns="http://www.w3.org/1999/xhtml";> > <head> > <meta name="generator" content="HTML Tidy for Linux (vers 1 September > 2005), see www.w3.org" /> > <link rel="stylesheet" type="text/css" href="mystyles2.css" /> > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> > <title>Title</title> > > <style type="text/css"> > /*<![CDATA[*/ > a.c1 {display:block; width: 100%; height: 100%; border: none;} > /*]]>*/ > </style> > </head> > <body> > <div id="Content"> > <div id="Title">TotusHealth.com</div> > <div id="ButtonBar"><div id="PhysicalButton"><a class="c1" > href="index.html">PHYSICAL</a></div><div id="MentalButton"><a > class="c1" href="index.html">MENTAL</a></div><div > id="NutritionalButton"><a class="c1" > href="nutritionalIndex.html">NUTRITION</a></div><div > id="RestButton"><a class="c1" href="index.html">SLEEP/RECOVERY</a></ > div></div> > > <div id="MainText"> > <h2>Header</h2> > Some text describing the main content. > </div> > <div id="RightSideBar">While something is here, this bar > displays</div> > </div> > </body> > </html> > > And next the mystyles2.css: > > body { > margin:0px 0px; padding:0px; > text-align:center; > background: white url('circles4CompleteMerged.gif'); > background-repeat: repeat; > } > > > #Content { > > width:750px; > height: 100%; > > > margin-left:auto; > margin-right: auto; > > text-align:left; > padding:0px; > border-left:5px solid #0a930a; border-right: 5px solid #0a930a; > border-top: none; border-bottom: none; > background: black; > > } > > h2 > { > margin-top: 1em; > font-weight: normal; > font-size: 150%; > margin-bottom: 1em; > margin-left: 0.5em; > color: #0a930a; > letter-spacing: 0.6em; > text-decoration: underline > } > > h4 > { > margin-top: auto; > margin-bottom: auto; > margin-left: auto; > margin-right: auto; > color: #0a930a; > } > > > > > > #Title { > width: 100%; > height: 90px; > background: #9cc79c; > font-size: 50pt; > color: white; > text-align: center; > font-family: Arial; > font-weight: 800; > } > > a:link {color: black; text-decoration:none;} > a:visited {color: black; text-decoration:none;} > a:hover {color: white; background-color: #80b37f; text- > decoration:none;} > a:active {color: black; text-decoration:none;} > > #ButtonBar{ > > width: 100%; > height: 20px; > /* background:#0a930a; */ > background: blue; > margin:0px 0px 0px; > border: 1px; > float: left; > padding:0px; > display: inline; > > } > > /* Colour scheme: #0a930a #eaffea */ > > > #PhysicalButton { > width: 120px; > height: 14px; > margin:0px 0px 0px; > padding:0px; > font-size: 8pt; > display: inline; > text-align: center; > font-family: Verdana; > font-weight: 800; > color: White; > position: relative; top: 0px; left: 100px; > > > background: #beeaea; > text-align: center; > float: left; > border: #0a930a 2px solid; > > } > > #MentalButton { > width: 120px; > height: 16px; > margin:0px 0px 0px; > padding:0px; > font-size: 8pt; > display: inline; > text-align: center; > font-family: Verdana; > font-weight: 800; > color: White; > position: relative; top: 0px; left: 100px; > border: #0a930a 2px solid; > background: #b8ffb8; > text-align: center; > float: left; > > } > > #NutritionalButton { > width: 120px; > height: 16px; > margin:0px 0px 0px; > padding:0px; > font-size: 8pt; > display: inline; > text-align: center; > font-family: Verdana; > font-weight: 800; > color: White; > position: relative; top: 0px; left: 100px; > border: #0a930a 2px solid; > background: #efb78d; > text-align: center; > float: left; > } > > #RestButton { > width: 120px; > height: 16px; > margin:0px 0px 0px; > padding:0px; > font-size: 8pt; > display: inline; > text-align: center; > font-family: Verdana; > font-weight: 800; > color: White; > position: relative; top: 0px; left: 100px; > border: #0a930a 2px solid; > background: #beb8ea; > text-align: center; > float: left; > > } > > > > > > > > #MainText { > width:500px; > height:100%; > margin:0px auto; > padding:20px; > text-align: left; > font-family: Verdana; > font-weight: 400; > font-size: 11pt; > display: inline; > background: #f1fff1; > float: left; > > } > > #RightSideBar{ > display: inline; > width:180px; > > height: 100%; > margin:0px auto; > background: #9cc79c; > display: inline; > float: right; > > } > > I think I have removed the majority of my comments, apologies if I've > left any in. > > Now i've made the change so that the elements float side by side it > appears to be displaying much better in firefox, however the > rightsidebar is still not fully showing its background colour and it > looks like the same goes for the content. > > If you want to see how I would like it to look open the page in IE and > this should roughly display how I want it to. > > Thanks for all you help guys. I'll have a crack again at rounding this > off this evening. > > Phill > > On 6 Jan, 16:34, "Richard Aday" <[email protected]> wrote: > > Phill, > > > > Having a page where we can see the problem will make debugging faster. > Can > > you either link us to the page that is broken, or create a new test page > > that highlights the problem? > > > > Giving us a width and height of the div's is not enough. This could be a > > problem where you are not clearing your floats properly (if you are using > > float at all). > > > > Also, after giving us that link, make sure you clearly specify how it > > _should_ look. > > > > Thanks, > > Richard Aday > > > > > > > > > > > > On Tue, Jan 6, 2009 at 12:12 AM, Phill <[email protected]> wrote: > > > > > Thanks Jamie, Richard, > > > > > I will try both. That's an interesting point, that the width 100% > > > refers to the width in relation to the size of the parent. I think my > > > parents are all 100% however perhaps one of the parents up the chain > > > isn't displaying properly causing the problem. > > > > > It may well be a lack of understanding on another component of CSS > > > though to be perfectly honest. My layout is such that I have > > > background declared in the <body> tag now so that this would display > > > across the whole page. Previously my top level <div> was 100% & 100% > > > to make the background but this would not display. > > > > > Inside the <body> I have a <div> which is the content which auto- > > > centres in relation to the sides of the browser by using auto margins. > > > The problem I now have seems to be with the components within the > > > content <div>. I suspect this may be where my lack of understanding > > > comes into play. I have a series of <div>s laid out within the content > > > <div> which..... > > > > > Just as i've been typing this I think I have realised the problem. > > > Will a <div> element always attempt to cover the entire width of its > > > container - being a block level element? > > > > > Please forgive the psudocode - essentially my layout is: > > > > > <body> > > > <content div width 750px height 100%></> > > > <title div width 100% height 50px></> > > > <button bar width 100% height 20px></> > > > <MainText width 500px height 100%></> > > > <sideBar width 180px height 100%></> > > > </content div> > > > > > At the moment only the title seems to display correctly. Previously > > > everything displayed correctly but only in IE which clearly was a > > > problem. The title displays at 100% of the width of the content and > > > the correct height. All other elements below that do not display as > > > they should. > > > > > I have a feeling as I say the problem may be with the MainText and > > > SideBar trying to take up less than 100% of the width of the area.. > > > > > Anyway your thoughts are welcome. > > > > > Thanks again for your help. > > > > > Phill > > > > > On 3 Jan, 20:47, "Richard Aday" <[email protected]> wrote: > > > > Phill, > > > > > > When specifying a width of 100%, it does not mean that it takes as > much > > > > space as possible. Instead, specifying a width of 100% means that > the > > > width > > > > be be EQUAL to the width of it's parent element. > > > > > > So what you should do is go check that it's parent elements have the > > > desired > > > > width. > > > > > > You might have to specify width: 100% all the way up to a parent > element > > > > that has an absolute size. If not, specify width: 100% all the way > up to > > > > body. > > > > > > Let me know if that helps, > > > > Richard Aday > > > > > > On Fri, Jan 2, 2009 at 12:02 PM, Jamie C. <[email protected] > > > > > wrote: > > > > > Phill, > > > > > > > Try adding overflow:auto to that div's style definition. If that > > > doesent > > > > > work you might need to post a link so we can see what's happening. > > > > > > > Jamie > > > > > > > On Wed, Dec 31, 2008 at 2:31 PM, Phill <[email protected]> wrote: > > > > > > >> Hi guys, > > > > > > >> I have been having a problem with my background <div> not > displaying > > > > >> in firefox unless I have text in it. I have seen various posts > about > > > > >> this on the internet but they all seem to fizzle out right before > the > > > > >> answer gets posted. > > > > > > >> Essentially everyone suggests specifying width and height > attributes > > > > >> and that this resolves the problem. I have already done this > however > > > > >> the background only displays when I specify absolute values rather > > > > >> than 100%. > > > > > > >> The reason I specify 100% is because the content I have which sits > > > > >> inside another div within this background div positions itself in > the > > > > >> centre of the screen by using auto margin. If I specify absolute > > > > >> values the content centres itself absolutely as well which means > it > > > > >> does not move to the centre when the screen is re-sized and it is > not > > > > >> centred depending on the absolute values I specify. > > > > > > >> Does anyone know of a way I get can the <div> to display using > 100% > > > > >> width/height values. > > > > > > >> Thanks for the help > > > > > > >> Phill > > > > > > -- > > > > -Richard Aday- Hide quoted text - > > > > > > - Show quoted text - > > > > -- > > -Richard Aday- Hide quoted text - > > > > - Show quoted text - > > > -- -Richard Aday --~--~---------~--~----~------------~-------~--~----~ -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected] -~----------~----~----~----~------~----~------~--~---
