 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / January 2005What am I doing wrong.. Is it the line breaks?
I have read a lot of stuff on the web as well as this NG but don't seem to know what's going on. IE does what I expect but not firefox. 1) I am trying to get my menu bar to line up bang against teh H1 tag's lower border but cannot seem to do that. The space after teh H1 tag's border is different in both IE and FF and I can't seem to get rid of it. I've tried display:inline but that won't cut it. How do I do this? 2) In FF, my menu bar extends beyond it's parent div (content div) but IE does what I want it to. WHat's missing here and why does that happen? Here's my CSS and sample page is at http://homw.cachecow.org:7777 html,body { background-color:#999966; height:100%; margin-bottom:5%; font-size:100%; } #content { background-color:#CCCC99; height:100%; line-height: 16px; font-family: Verdana; text-align: left; padding-top:0px; padding-right:1.5%; padding-left:1.5%; padding-bottom:0px; margin-left: 5%; margin-right:5%; margin-top:5%; border-style:dashed; border-width:2px; border-color:#996633; } h1#title { font-family: Impact; color:#996633; font-size: 450%; line-height:100%; margin-top:1.5%; padding-bottom:1.5%; border-bottom:solid; white-space:nowrap; } div#menu { float:left; margin-top:0px; fonts-size:100%; padding:0; background-color: rgb(85%,76%,87%); width:15%; border-right:1px solid; } div#menu a{ display:block; padding:0.4em; margin:0; } div#menu a:hover{ background-color:yellow;border-width-right:10px; I know the CSS gurus are going to tell me to read this and that before posting but please understand that I do read a lot before I post as well as experiment but cannot figure this out. I would like the solution as well as an explanation as to what's going on. Thanks DrD > I have read a lot of stuff on the web as well as this NG but don't seem > to know what's going on. IE does what I expect but not firefox. [quoted text clipped - 71 lines] > > DrD drd, your link doesn't work right now. my advice would be to explicitly define every margin that could be causing the problem. different browsers have different defaults. sometimes it helps to define the element and ignore the ids... for example, if you think the h1 tag's lower margin is causing problems then put... h1{margin: 0 0 0 0;} as you probably know, the first digit represents margin-top and moves clockwise to margin left. see how this displays in both browsers. if it works, then play a little and find out what works for that particular id. i once used... hnav ul{...} and that didn't work. i was then told to try... ul#hnav and it worked like a charm. you have to explicitly define EVERYTHING in css if you see a problem (and you should even if you don't b/c trouble could be lurking somewhere). i found a css website that gives excellent information to folks who don't know all the subtleties of css. i will post it when i log onto my other computer where its link resides. Sorry skeets, typo in my original URL ..Here's the right one http://home.cachecow..org:7777. Will try your suggestions.. Sorry skeets, typo in my original URL ..Here's the right one http://home.cachecow.org:7777 I doubt it's a margin issue but I will try messing with it some more. drd, the link i mentioned before is here... http://www.richinstyle.com/masterclass/perfection.html although i haven't gone through all of this site, i think it has some good information and css techniques. ironicly, i don't like the way site looks... but that isn't a css issue, it is a design one! -lol- > 1) I am trying to get my menu bar to line up bang against teh H1 tag's > lower border but cannot seem to do that. The space after teh H1 tag's [quoted text clipped - 11 lines] > white-space:nowrap; > } Add "margin: 1.5% 0 0 0; padding: 0" and delete margin-top. You should also provide a default for the font-families, either serif or sans-serif.  Signaturejmm dash list (at) sohnen-moe (dot) com (Remove .AXSPAMGN for email) Ok Jim, looks like I learnt something about margins..Never will I forget.. That got rid of the space after the H1 tag which was my first question. WHat about item2,. The menu div 's container is the content div but why is it extending beyond the content div? And Skeet thanks, will take a look at teh link. DrD >...WHat about item2. The menu div 's container is the content >div but why is it extending beyond the content div? Because browsers are following specs in that respect when they render floated elements. Read all about it... http://www.css.nu/exp/layer-ex3a.html http://www.css.nu/exp/layer-ex3b.html http://www.css.nu/exp/layer-ex3c.html http://www.css.nu/exp/layer-ex3d.html http://www.css.nu/exp/layer-ex4a.html SignatureRex Thanks, Rex. I did go thru thos links but in all the examples of nested divs, the height is not being specified. In my case, my content div has a height of 100% ( the parent container (body,html) has a height of 100% too ) so that the content's background fills up the browser window/viewport. I thought, adding a menu div with a height of 100% ( floated though) nevertheless would be 100% height of its parent ( content div) and extend as far as the parent div. IE does it but not FF, which one is right and how can I reconcile this? DrD >IE does it but not FF, which one is right FF is correct. >and how can I reconcile this? It's right there, on the example pages I gave and in the source of the markup and style sheets. A floated element gets broken lose from the document content flow and starts to live a life of its own to some extent. The starting point of a floated element is always as high up as it can come given the context where it's placed. I.e. you can have inline and block content inside the main container and above the start of your float. But once the float has found its starting point, all rest of content in your main container will start to "flow" around your float. Now, if your main container content is not long enough to flow all the way down to the full height of your float, your float will (and shall) "stick out" at the bottom of your main container, regardless of your "fiddling" with 100% heights. If you need your main container to fully cover your float you must put some content into your main container that is directed to be rendered below your float. I.e... <DIV STYLE="clear: both;"></DIV> ...placed at the end of your main container content will do what you want. It's a hack for sure, but it "works" for whatever value you want to give to the word "works"... SignatureRex > If you need your main container to fully cover your float you must put > some content into your main container that is directed to be rendered [quoted text clipped - 5 lines] > want. It's a hack for sure, but it "works" for whatever value you want > to give to the word "works"... Well, AFAIK it don't work on some versions of FF, as they don't like empty elements. SignatureLauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts> Nijmegen, NL. |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.