So, I'm using CSS to create two columns. #userleftcontent { float:left; width:20%; } #userleftcontent a { color:#0000aa; font-family:"Copperplate Gothic Bold"; } #userleftcontent a:hover { color:#000000; font-family:"Copperplate Gothic Bold"; } #userrightcontent { float:right; width:50%; color:#000000; } #userrightcontent a { color:#0000aa; font-family:"Copperplate Gothic Bold"; } #userrightcontent a:hover { color:#000000; font-family:"Copperplate Gothic Bold"; } Code (markup): I use #userleftcolumn to postion a navbar on the lefthand side of the webpage. This seems to work fine. I use #userrightcolumn for the rest of the content for that page. In "IE7" & "IE6" the content in the #userrightcolumn hugs the right hand side of the screen. Not to big od a deal, but, in Firefox the same content is smashed all together on the rightside.Is there a better to utilize CSS to position content that works better for both. I'm some what familar with HTML, CSS, and Coldfusion. You can browse my site at www.unitedlocalbands.com to get an idea of how things look.
You mean something like this? <!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" xml:lang="en" lang="en"> <head> <title>Sample Two Column Layout</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="keywords" content="Keywords go here" /> <meta name="description" content="A description of this page goes here." /> <style type="text/css" media="screen,projection"> /* let's start by declaring everything that needs to be applied globally first, before we get to the various classes and IDs */ * { /* this is the universal selector - use it to set ONLY the margins and padding */ margin: 0; padding: 0; } body { background: #EEE; color: #000; font: normal 85%/140% tahoma, verdana, arial, helvetica, sans-serif; /* most people who use %s for text sizes prefer 100%/120% but I've found that 85%/140% works better for people with large monitors with high .dpi settings */ letter-spacing: 1px; } h1, h2, h3, h4, h5, h6 { font-family: georgia, garamond, "times new roman", times, serif; font-weight: bold; } h1 { background: #FFF; color: inherit; font-size: 1.75em; line-height: 1.8em; text-indent: 10px; } h2 { border-bottom: 1px solid #000; font-size: 1.5em; line-height: 1.55em; } h3 { font-size: 1.05em; line-height: 1.1em; } h4 { font-size: 0.95em; line-height: 1em; } h5 { font-size: 0.85em; line-height: 0.9em; } h6 { font-size: 0.75em; line-height: 0.8em; } img { border: 0; /* this squashes a Firefox bug */ vertical-align: bottom; /* this squashes an Internet Explorer bug */ } table { /* I'd like to have all the browsers on the same page with regard to tables - this does it */ border-collapse: collapse; empty-cells: show; table-layout: fixed; } /* ok, now with that out of the way, let's deal with the layout */ #header { background: #FCF; color: inherit; height: 80px; overflow: hidden; /* use this to close a gap in IE */ } #menu { float: left; /* everything after this will wrap around the list */ list-style: none; margin: 0 0.5em 0.5em 0; /* right and bottom margins are helpful */ width: 10em; /* whenever you float something, give it a width */ } #menu li { margin-bottom: 2px; /* I like to leave some space between the list items */ } #menu li a { background: #CFC; border-top: 1px solid #CCF; border-right: 1px solid #000; border-bottom: 1px solid #000; border-left: 1px solid #CCF; color: #000; display: block; /* lets you click on the whole area, not just the text */ padding: 0.25em 0; /* if you set padding on here, do not set the left and right when the width has been set to 100% */ text-decoration: none; text-indent: 0.5em; /* instead of padding, set the text indent instead :) */ width: 100%; /* the display block technique will not work in IE unless a width is set */ } #menu li a:hover { /* aside from changing the background color, all this does is reverse the button effect created by the border colors */ background: #FCC; border-top: 1px solid #000; border-right: 1px solid #CCF; border-bottom: 1px solid #CCF; border-left: 1px solid #000; color: inherit; } #content { margin-left: 10.5em; /* makes room on the left side for the menu to create some white space underneath */ } #content .section { /* this gets styled instead of the #content selector (background, colors, padding, etc...) */ background: #FFD; color: inherit; margin: 0.5em 0; padding: 0 10px; } #content .section p { padding: 0.25em 0; } #footer { background: #8EF; clear: left; /* since the footer was floated to the left, it gets cleared from the left; floats have two values - left and right; clear has three: left, right, both */ color: inherit; padding: 0.5em 0; text-align: center; } </style> </head> <body> <div id="header"> <img src="#" width="250" height="80" alt="Web Site Title" title="" /> <!-- the empty title attribute is required since IE treats alt="" as title="" --> </div> <ul id="menu"> <li><a href="#">Menu Link</a></li> <li><a href="#">Menu Link</a></li> <li><a href="#">Menu Link</a></li> <li><a href="#">Menu Link</a></li> <li><a href="#">Menu Link</a></li> <li><a href="#">Menu Link</a></li> <li><a href="#">Menu Link</a></li> </ul> <div id="content"> <h1>Web Page Title</h1> <div class="section"> <h2>Section Title</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. </p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. </p> </div> <div class="section"> <h2>Section Title</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. </p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. </p> </div> </div> <div id="footer"> Copyright © 2006-2007, The Monster Under The Bed. All Rights to Scare Unsuspecting Children Reserved. </div> </body> </html> Code (markup):
Thank you, I will give this a shot. I just installed Fierfox on my pc yesterday and boy was I supprised... Should be fairly easy to implement into my webpage. Thanks again James.
Don't just test on IE or Firefox, test in Opera and Safari as well. You can get them at www.opera.com/download and www.apple.com/safari (this one's a beta for Windows but is well worth it, and currently renders virtually identically to Safari 2/Mac). Also remember to test incrementally in each browser as you go along, rather than coding primarily for one browser, then hacking/tweaking for the others. You'll thank yourself in many more ways than you can imagine, especially when the next browser updates come out.
It is a night and day difference already. I have only done two pages but wow what a differene it makes to have a well built layout. Also I downloaded "Opera" & "Safari" web browsers. It really did help out big time. I now see why almost everyone has a negitive opinion about "IE" Thanks again! James,
ha ha ya ie SUCKS! I am having a similar problem though, my new site is fine in firefox but isn't working right in ie.
It's probably more like you're coding for one browser and trying to compensate for the quirks of others.