 |
 | 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 / February 20062 lists: 1 left aligned and 1 right aligned on same line
Hi All, Why doesn't this work in Firefox but is perfect in IE6? In IE6, the text is on the same line but in Firefox, the left aligned text is on the line above the right aligned text. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css"> <!-- body { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 77%; margin: 0; padding: 0; } a, a:visited { color: #00f; text-decoration: none; } a:hover { color: #f60; text-decoration: underline; } #basicnav { padding: 4px 0; margin: 0; width: 100%; background-color: #999; border-top: 1px solid #ccc; border-bottom: 1px solid #000; } #basicnav a, #basicnav a:visited { color: #fff; text-decoration: none; font-weight: bold; } #basicnav a:hover { color: #000; text-decoration: underline; font-weight: bold; } #topleftnavlist li { display: inline; list-style-type: none; float: left; padding-left: 20px; } #toprightnavlist li { display: inline; list-style-type: none; float: right; padding-right: 20px; } --> </style> </head> <body> <div id="basicnav"> <ul id="topleftnavlist"> <li><a href="#">Home</a></li> </ul> <ul id="toprightnavlist"> <li><a href="#">Site map</a></li> <li><a href="#">Sell our products</a></li> <li><a href="#">Contact us</a></li> </ul> </div> </body> </html> Thanks, JB > Why doesn't this work in Firefox but is perfect in IE6? You specified "display: inline" for the LI elements, but not for the UL elements that contain them. That might have something to do with it. > body { > font-family: Geneva, Arial, Helvetica, sans-serif; > font-size: 77%; Please don't inflict microfonts on your readers. Normal body text should use a font size of 100%. Only legalese and similar fine-print should use smaller fonts.  SignatureDarin McGrew, mcgrew@stanfordalumni.org, http://www.rahul.net/mcgrew/ Web Design Group, darin@htmlhelp.com, http://www.HTMLHelp.com/ "If you find yourself in a hole, stop digging." - Will Rogers > You specified "display: inline" for the LI elements, but not for the UL > elements that contain them. That might have something to do with it. I added: #basicnav ul{ display: inline: } but it didn't line them up :( >> body { >> font-family: Geneva, Arial, Helvetica, sans-serif; [quoted text clipped - 3 lines] > use a font size of 100%. Only legalese and similar fine-print should use > smaller fonts. I took this font-sizing from an article on alistapart. Thanks for your feedback. Jeff Thu, 23 Feb 2006 23:32:00 -0000 from JB <me@here.com>: > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > "http://www.w3.org/TR/html4/loose.dtd"> Please don't post HTML or CSS; give us the URL so that we can try it using our browsers. SignatureStan Brown, Oak Road Systems, Tompkins County, New York, USA http://OakRoadSystems.com/ HTML 4.01 spec: http://www.w3.org/TR/html401/ validator: http://validator.w3.org/ CSS 2.1 spec: http://www.w3.org/TR/CSS21/ validator: http://jigsaw.w3.org/css-validator/ Why We Won't Help You: http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you > Please don't post HTML or CSS; give us the URL so that we can try it > using our browsers. Hi Stan, URL is: http://www.borovere.plus.com/css/new.htm I tried removing the float:left but that messed it up in IE6. I could have achieved what I want using a <table> in seconds but I must stick with using CSS! Help! Jeff > Why doesn't this work in Firefox but is perfect in IE6? <ul> is the block element you want to float, not the <li>s. You need only set the right nav <ul> float:right. Signaturejmm (hyphen) list (at) sohnen-moe (dot) com (Remove .AXSPAMGN for email) Ok, I've got it working perfectly in IE6 but the background is not covering the DIV area in Firefox - any ideas why? http://www.borovere.plus.com/css/new.htm The links are white so are invisible unless the DIV background colour is displayed behind them. Do I need to specify a height for the #basicnav DIV? Thanks, Jeff > Ok, I've got it working perfectly in IE6 but the background is not > covering the DIV area in Firefox - any ideas why? [quoted text clipped - 8 lines] > > Jeff :-( I just tried shrinking the browser size and it all messes up and wraps to multiple lines as the window gets smaller. Long live Tables. CSS is a nightmare. > > Ok, I've got it working perfectly in IE6 but the background is not > > covering the DIV area in Firefox - any ideas why? [quoted text clipped - 15 lines] > > Long live Tables. CSS is a nightmare. What you have described is considered an asset of fluid design. You could specify a fixed width in pixels. Ducking back into my hole now. IEDesigner >> I just tried shrinking the browser size and it all messes up and wraps to >> multiple lines as the window gets smaller. [quoted text clipped - 4 lines] > specify a fixed width in pixels. Ducking back into my hole now. > IEDesigner Hee Hee. I was almost crucified here recently for using fixed width! Jeff > I just tried shrinking the browser size and it all messes up and wraps to > multiple lines as the window gets smaller. > > Long live Tables. CSS is a nightmare. Only if you expect CSS to provide exactly the same styling as tables. I doubt you were instantly proficient with table-based layout. The floating and positioning aspects of CSS take a while to understand and apply properly. Signaturejmm (hyphen) list (at) sohnen-moe (dot) com (Remove .AXSPAMGN for email) > Long live Tables. CSS is a nightmare. It's not about Tables vs. CSS, it's about various rendering mechanisms. There's a way do present something in a way HTML tables are usually rendered, which is part of CSS for 7 3/4 years now (<http://www.w3.org/TR/REC-CSS2/tables.html>). Unfortunately, Win IE ... SignatureJohannes Koch Spem in alium nunquam habui praeter in te, Deus Israel. (Thomas Tallis, 40-part motet) >> Long live Tables. CSS is a nightmare. > >It's not about Tables vs. CSS, it's about various rendering mechanisms. >There's a way do present something in a way HTML tables are usually >rendered, which is part of CSS for 7 3/4 years now >(<http://www.w3.org/TR/REC-CSS2/tables.html>). Unfortunately, Win IE ... A CSS table layout has all the drawbacks that HTML tables suffer from except for the semantics issue, on top of that CSS tables lack features that HTML tables do have. CSS 2.x doesn't offer any proper layout tools, all CSS 2.x methods have huge flaws when used for layouts. SignatureSpartanicus Please list important information not just in the message header, but repeat it in the message body. Subject: 2 lists: 1 left aligned and 1 right aligned on same line About: http://www.borovere.plus.com/css/new.htm Why are you using 2 lists? Your minimised test case doesn't allow us to see the context and thus what you are actually trying to do. Judging by the little information that is there one list seems more appropriate. If you want something resembling this navbar: http://www.pan-europe.utvinternet.ie/links.htm It can be done by setting <li> to inline, specifying text-align:right on the <ul>, specify position:relative on the <ul> to make it the containing element, absolutely positioning the one link you want left aligned, and then giving the <ul> a left padding in em's to the size of the positioned link text. SignatureSpartanicus > Please list important information not just in the message header, but > repeat it in the message body. [quoted text clipped - 19 lines] > aligned, and then giving the <ul> a left padding in em's to the size of > the positioned link text. Hi Spartanicus, Great advice thanks. It now looks great in Firefox but is messed up in IE6. The "home" link which I want to be on the left of the screen is now appearing 3 ems (padding-left) from the leftmost part of the <ul>. When I set the width of the <ul> to 100%, it looks perfect in IE6 but in Firefox, I get a horizontal scroll. So close! http://www.borovere.plus.com/css/new.htm Thanks, Jeff >> Please list important information not just in the message header, but >> repeat it in the message body. [quoted text clipped - 33 lines] > > Jeff In fact, I've fixed it. Had a padding issue! Thanks all. Jeff > It can be done by setting <li> to inline, specifying text-align:right on > the <ul>, specify position:relative on the <ul> to make it the > containing element, Spartanicus, How does position:relative make the <ul> a containing element? Can you expand on this concept or maybe point me to a url that explains? Thanks. SignatureViken K. http://home.comcast.net/~vikenk >How does position:relative make the <ul> a containing element? Can you >expand on this concept or maybe point me to a url that explains? http://www.w3.org/TR/CSS21/visudet.html#containing-block-details SignatureSpartanicus >>How does position:relative make the <ul> a containing element? Can you >>expand on this concept or maybe point me to a url that explains? > > http://www.w3.org/TR/CSS21/visudet.html#containing-block-details Thanks for the reply Spartanicus. If I understand this correctly, a containing element is similar to a block type element? Setting something as position: relative makes it display: block by default? (from the w3.org link) "For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block-level, table cell or inline-block ancestor box." So, in this case, setting a <ul> to position: relative (without specifying left: and top:) also aligns it to the left edge of its containing <div> or <td>? SignatureViken K. http://home.comcast.net/~vikenk >>>How does position:relative make the <ul> a containing element? Can you >>>expand on this concept or maybe point me to a url that explains? [quoted text clipped - 3 lines] >Thanks for the reply Spartanicus. If I understand this correctly, a >containing element is similar to a block type element? No, the correct phrase is "containing block" (not "containing element"), and the containing block can be inline. >Setting something as >position: relative makes it display: block by default? It has no effect on the display property. >(from the w3.org link) >"For other elements, if the element's position is 'relative' or 'static', [quoted text clipped - 4 lines] >left: and top:) also aligns it to the left edge of its containing <div> or ><td>? No, positioned elements (The "Home" link in this example) are positioned relative to their "containing block". The containing block is the nearest ancestor with a position of "absolute", "relative" or "fixed", or the "initial containing block" if there is no such element. In this case setting "position:relative" to the <ul> causes the positioned descendant (the "Home" link) to be positioned relative to the padding edge of the <ul>. See the box model diagram in the CSS spec to see where the padding edge lies. SignatureSpartanicus |
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.