S@m

WORD!IMO, IE all the way around is a pile of junk.

Make sure your code checks out. That should take care of any kinks...http://validator.w3.org/

To center a div: #container { text-align: center; margin: 0 auto; margin-top: 20px; padding: 0; width: 775px;} Put all of your content inside there. I couldn't quite make out what you were talking about, the page is pretty broken up.I (think) you are going for a 2 column layout with a header?This should help get you going:http://www.ssi-developer.net/main/template.../2c-hd-flex.htm

I wondered the same thing, then somone told me to use borders and that made perfect sense.So, if you wanted an "hr" just use a border-bottom or border-top and you are gold! border-bottom: 3px solid #9c9; type thing. Works like a champ.

css: #container { text-align: center; margin: 0 auto; margin-top: 20px; padding: 0; width: 775px;} Put all of your content inside the contianer div. That will keep in in the center.

Sorry for the mass postings. I have a nested list that I am able to get everything working except my list-style-type.Here is my css for the list(s): #leftNav ul ul { width: 169px; margin-top: -1px; background: #fff; border-top: 1px solid #82865f; border-right: 1px solid #e6e6e6; border-bottom: 1px solid #82865f; border-left: 1px solid #82865f; }#leftNav ul ul li { width: 145px; font-weight: bold; margin-left: 5px; padding: 2px 0 2px 8px; list-style-image: url(../images/caret-black-right-02.gif); border-right: 1px solid #ccc; position: relative; } #leftNav ul ul li a { display: block; width: 136px; font-weight: normal; color: #369; text-decoration: none; padding: 2px 0 0 3px; margin: -2px 0 0 6px; background-color: #fff; border-top: 1px solid #ccc; border-right: 0; border-bottom: 0; border-left: 0; list-style-image: none; list-style-type: none; } HTML: <ul> <li><a href="#">Item One</a> <ul> <li>Item Two</li> <li><a href="#">Item One</a></li> <li><a href="#">Item Two</a></li> </ul> </li> <li><a href="#">Item Three</a></li> <li><a href="#">Item Four</a></li> </ul> The problem is that I can't get "caret-black-right-02.gif" to turn off in the ul ul li a selector. There isn't a link on the ul ul li selector, so I need that the way it is.HERE is an example of what I am trying to do. (left nav)If there is a better way to do this, just say so. I'm just hung up on this.Thank you for your help!!

Thanks aspnetguy!Yeah, that's what I have. I have the top and bottom borders the same color.*edit*It’s hard to describe, I hope this helps a little...HERE is what I am trying to duplicate. See how the top and bottom border are green?I have everything set up just like that, only my grey border on the right is sitting on top of the top and bottom borders. I was wrong, I need the right border to be under the top and bottom borders.-great site BTW. I am trying to gather tutorials for AJAX to start learning myself!

Is there a way to arrange border "order"For example, I want the right border to display on top of the top and bottom border.In my file, my right border is a different color than the top and bottom. I just would like to have the right border display on top of the top and bottom one. Is there any way to do this?Thank you for your time!

You can center an object with margin: 0 auto; #container { text-align: center; margin: 0 auto; margin-top: 20px; padding: 0; width: 775px;}

You might be able to have more control over it by using lists to do the nav like that.http://css.maxdesign.com.au/listutorial/ho...ntroduction.htmCheck that out and see if it helps.

Not unless you want to start WWIII! -Just kidding! ( I couldn't resist)Just as Jonas said, of course you can. Also check out the use of span classes. You can use them inside of a div also.

Well, I'm not sure I totally follow you, but here is a list that I made quick. Maybe it will help?HTML: <!-- basic list --><div id="listContainer"> <div class="basicList"> <ul> <li><a href="#">Item One</a></li> <li><a href="#">Item Two</a></li> <li><a href="#">Item Three</a></li> <li><a href="#">Item Four</a></li> <li><a href="#">Item Five</a></li> <li><a href="#">Item Six</a></li> </ul> </div></div><!-- end basic list --> CSS: /* basic list */#listContainer { text-align: center; margin: 0 auto; margin-top: 20px; padding: 0; width: 775px; background-color: dad; }.basicList { font-family: arial, helvetica, sans-serif; font-size: 12px; }.basicList ul { list-style-type: none; background-color: #9c9; } .basicList ul li { display: inline; padding: 5px; margin: 0 auto; } .basicList ul li a { color: #000; text-decoration: none; } .basicList ul li a:hover { color: #ffcc00; text-decoration: underline; }

Try using %'s instead of actual pt value for your fonts. I'm not sure what normal 10-12pt converts to percent wise, you will have to play with the settings.

Figured it out. Well not yet, but found what I was looking for.FYI if anyone else is looking for the same.http://www.ssi-developer.net/main/template.../2c-hd-flex.htm

You could give that section inside the td a class and assign the width there. <td><p class="something">The text here would be formatted the way you want</p></td> .something { width: 50px; word-wrap: break-word; } Something like that.I am a rookie though, so I could be way off.

I (still) am trying to build THISpage.I have the boxes on the left to float left and when you shrink the window size down, they stop shrinking @ 800px. - I have a min-width set for 800px.If I put in the left side content (text) Things fall apart. Can anyone..."hold my hand" for lack of better words and help me figure out what I am doing wrong?I think it is my left float that is goofing things up. I'd be happy to send my files (html and css) to you. I'm not asking for anyone to do it for me, just help me see what my problem(s) might be.Thank you very much!

We can only hope! Thanks guys.

When the heck is that anyway!? Thank you for your help. I will read a bit.

http://www.thenoodleincident.com/tutorials...c_centered.html

I have a div class (container) Inside of that I want 2 floats. - left content; right info boxes.I have things set up I thought. FF will "work" and IE just makes everything disapear when I add a float to the div.css: .overview { margin: 0px; padding: 0px; }.overviewLeft { float: left; width: 650px; margin: 0px 0px 0px 0px; padding: 0px; } .overviewLeft p { border-top: 1px solid #ccc; margin: 10px 0px 0px 0px; padding: 3px 0px 0px 0px; }.overviewLeft ul { list-style: none; margin: 0px 0px 0px 0px; padding: 0px; } html: <div class="overviewLeft"> <p><a href="#"><strong>Access accounts online</strong></a><br /> It’s <strong>free</strong> to access your accounts online. Signing up is easy, and you can immediately check balances, transfer funds, manage investments, and more.</p> <ul> <li><a href="#">Learn More</a></li> <li><a href="#">Sign Up Now</a></li> <li><a href="#">Take A Tour</a></li> </ul> <p><strong>Activate these additional services</strong><br /> Once you’ve signed up to access your accounts online, you can also sign up for any or all of these services:</p> <ul> <li><a href="#">Bill Pay.</a> Pay and even receive and view your bills online. Try it for 2 months for free!</li> <li><a href="#">Online Statements.</a> Get online versions of your paper statements for free.</li> <li><a href="#">Messages & Alerts.</a> With free email alerts, it’s easy to stay informed about your accounts.</li> </ul> </div> <div class="overviewRight"> <div class="infoBox"> <div class="infoBoxHeader">Customer Service</div> Call 1-800-956-4442<br />24 hours a day<br /><a href="#"><strong>More Contact Options</strong></a> </div> </div> I am getting quite frustrated because I don't know what is causeing the text to disapear. As soon as I take the floats off, everything shows up.THIS is what I am trying to duplicate. I have the styles for the boxes on the right and everything on the left. I just can't get it to show up!

I'm not sure I understand, but do you want a min-width that the browser window can go before it starts to Horz. scroll?That (could) help if it is causing your page to break up.I had an element that if the window size was too small, it would shift, by putting a min-width: 800px in there, it kept everything from shifting once the window size was below 800, and the horz. scroll bar came up.FF will know min-widthIE: http://www.cssplay.co.uk/boxes/width.htmlHope this helps. I am a rookie though, so I could be way off.

Well, I just have a lot of borders there, and I wasn't sure what the best way to go about it is.Here is what I finally came up with:HTML: <span class="headlineButton">Personal Loan<span class="redButtonBorder"><span class="redButtonText"><a href="#" title="Apply Now">Click Here</a></span></span></span> CSS: .headlineButton { font-size: 11px; font-weight: bold; border: 1px solid #999; margin: 0px 10px 0px 0px; padding: 3px 1px 3px 4px; _padding: 1px 1px 1px 4px; }.redButtonBorder { border: 1px solid #660000; background-color: #990000; margin: 0px 0px 0px 8px; padding: 1px 0px 1px 0px; _padding: 0px 0px 0px 0px; } .redButtonText { color: #fff; margin: 0px 0px 0px 0px; padding: 0px 5px 1px 8px; border-top: 1px solid #ff3333; border-right: 1px solid #ff3333; border-left: 1px solid #ff3333; background: url(../images/caret-white-right.gif) no-repeat left; } If there is a better way, please let me know. If I need to trash what I have, that's A-Ok. I had to use the underscore hack to get IE and Firefox to match up. (if that matters)Thank you for your time so far Jonas

Oops sorry, I meant to add one more.HTML: <span class="headlineButton">Personal Loan<span class="redButton"><span class="redButtonText">"Apply Now!</span></span></span> I just wasn't sure if that was the best way to go about it. Having that many span classes inside each other.Firefox has a problem with the padding/margins doing that. It doesn't like putting the red box inside of the headlineButton class. The top and bottom margins are off by 1px.Am I looking for problems doing it this way?Thank you for your time!!

Bottom line I am trying to create the red "apply now" button. - The whole thing (personal loan & apply now sections)LINKAGESo far I am going this route:HTML: <span class="headlineButton">Personal Loan<span class="redButton">Apply Now!</span></span> CSS: .headlineButton { border: 1px solid #999; font-weight: bold; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } .redButton { background-color: #990000; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: 1px solid #660000; }.redButtonText { background: url(../images/caret-white-right.gif) no-repeat left; border-top: 1px solid #ff3333; border-right: 1px solid #ff3333; border-left: 1px solid #ff3333; color: #fff; margin: 0px 0px 0px 0px; padding: 0px 6px 1px 8px; } FF doesn't pick up the padding around the red button, IE does. I know that padding can have problems across platforms. The other concern is that is, it can't be a good idea to have span inside of span inside of span is it?I apologize if this is confusing... :)Thank you for your time and help!

I have 2 div's that IE puts a 2px space between. FF has no problem of course.I can cure the problem with the underscore hack, but if I can, I'd like to stay away from the hacks.CSS: #content { border-top: 2px solid #808080; border-bottom: 2px solid #808080; background: #eeefe1; clear: both; position: relative; margin: 0px; padding: 0px; } #mainContent { font-family: arial, helvetica, sans-serif; text-align: left; font-size: 12px; border: 1px solid #999966; background-color: #fff; padding: 0px 15px 0px 15px; margin: 0px 0px 12px 170px; } HTML: <!-- content --> <div id="content"> <div id="mainContent"> <h1>Title</h1> <div id="contentHeader"> <div class="contentImageHeader"><img src="../images/handshake.jpg" alt="Handshake" id="Handshake" /></div> <div class="imageCaption"> <span class="captionText">Main Title</span><br /> <span class="subCaption">Sub Title</span><br /> <br /> <span id="captionLink">> <a href="#">Learn More</a></span></div> <div class="rightColor"> </div> </div> I can't seem to find where the 2px is coming from?