Hi I've got Error when use the browser check in Dreamweaver CS3. It says, "Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow. Affects: Internet Explorer 5.5, 6.0 Likelihood: Likely " So, I delete everything that the dreamweaver underlines the code and still go this Expanding Box problem. Any clue how to debugg?
Step 1. Don't trust anything Dreamweaver tells you. Step 2. Show me your code by pasting it here or posting a link to a live version.
agreed on step 1. DW's so called 'browser check' is about as useless as the garbage code it's wysiwyg vomits out, or 99.99% of it's 'starting templates'.
So, whats the best source that I can trust or to test on so that all browsers are compatible ? Any recommendations?
Get the IE standalones from http://tredosoft.com/Multiple_IE (I'm assuming you're on a PCj with IE 7 already installed). Then go to www.getfirefox.com and download Firefox. Do the same for Opera at www.opera.com/download/ and Safari 3 (for Windows, which is currently a beta) at www.apple.com/safari/ As for CSS references, you'll want to consult The Ultimate CSS Reference, which is also now available in hard copy and PDF if you're interested.
Here's the XHTML code <!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="basicstyles.css" rel="stylesheet" type="text/css" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="xml/news.xml" /> </head> <body> <div id="pagewrapper"> <div id="wrapper"> <div id="logolink"> <img src="logo.gif" /> </div> <div id="menu"> <ul id="navigation"> <li id="home1" title="home"><a href="#" class="selected">Home</a></li> <li id="home2" title="where"><a href="#" >where</a></li> <li id="home3" title="when"><a href="#" >when</a></li> <li id="home4" title="why"><a href="#" >why</a></li> <li id="home" title="how"><a href="#" >how</a></li> </ul> </div> <div class="clear"></div> <div id="middleContent"> <p class="save"><em>Who AM I</em> </p> <div class="clear"></div> <div id="leftsider"> <p class="new"><a href="#">Whats New</a></p> <br /> <p class="date">Jan 12, 2008 </h3> <p class="news">balabala</p> <p class="date">Jan 12, 2008 </h3> <p class="news">balabala</p> <br /> <p class="new"><a href="#">Coming Soon!</a></p> <br /> <p class="date"> Feb 7, 2008 </h3> <p class="news"> balabala</p> <p class="date">Mar 7, 2008 </h3> <p class="news">balabala</p> <p class="date">Apr 7, 2008 </h3> <p class="news">balabala</p> </div> <div id="rightside"> <div id="imageGallery"> </div> <p id="detail">Where am I</p> </div> </div> <div id="footer"> <ul id="footmenu"> <li><a href="#">Home</a></li> <li><a href="#">what</a></li> <li><a href="#">where</a></li> <li><a href="#">when</a></li> <li><a href="#">why</a></li> <li><a href="#">how</a></li> </ul> <div id="payment"> <p class="copy"> <img src="shipping.jpg" /> copyright<img src="payments.jpg" /></p> </div> </div> </div> </div> </body> </html> Code (markup):
CSS File @charset "utf-8"; /*-----------CSS Comments-----*/ * { margin: 0px; padding: 0px; list-style-type: none; } body{ background-color: green; } #pagewrapper{ background-image: url(background.jpg); background-position: top center; background-repeat: no-repeat; width:1400px; height:1300px; margin: 0 auto; padding: 0; } #wrapper { width: 780px; margin: 0 auto; height: 900px; } .clear { clear: both; } #logolink { position: relative; height: 140px; width: 780px; } /*-------This is the menu bar*/ #menu { position:relative; top: 4px; width: 780px; } #navigation{ margin: 0; padding: 0; list-style-type: none; } #middleContent{ position: relative; top: 5px; width: 780px; height: 750px; } #leftside { float: left; width: 150px; position: absolute; top: 80px; left: 20px; text-align: left; } #rightside { float: right; width: 610px; height: 450px; position: absolute; top: 35px; left: 145px; } /*------This is the Footer-----*/ #footer { position: relative; top: 10px; width: 780px; height: 125px; font-size:16px; } #footmenu{ margin: 0; padding: 0; list-style: none; position:absolute; top: 20px; left: 140px; width: 500px; height:25px; } #payment { position: absolute; top: 50px; left: 30px; width: 700px; height: 25px; } #payment p.copy{ position:absolute; left: 60px; width: 680px; height: 25px; } #slideshow img { width: 600px; height: 400px; border: none; } p.save { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; position: absolute; top: 5px; left: 100px; } p.date { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-weight:bolder; } p.news{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; margin: 0 0 10px 0; } Code (markup):
deepman007, can you upload the images in a .zip file so i can see what you're working with? (If you don't want them to get out, you can always PM me.) I'm going to re-write this for you, showing how I'd code it (and I won't be using absolute positioning for the layout either). Just so you know, deathshadow may disagree with some of the things I'll do, but we've known each other for about six years and have been bouncing code and techniques off of each other for nearly as long. Just get used to it.
Even better. We learn even more when the Crusty Old Guys Who Know Stuff fight. (yeah I know you're not all that old Dan, but...)
I couldn't find any links for the PDF Version. Is it something that you must be logged in for? Or is it available for purchase? It looks like a really good reference.
Thank you , but I can't send out any images because they are all copyrighted. Also, why is not a good idea to use absolute positioning within a relative positioning box? Just curious.
Because absolute positioning for layout requires knowing the exact height of the elements being positioned. Throw in text (which has this knack of expanding its container when resized) and you won't be able to determine the height unless you set a height on its container and set the overflow to auto (which will force vertical scrollbars). I'm not at home right now so I can't go into further detail about it right now, but I will when I return home. It is indeed available for purchase (though you don't have to buy it if you want to view the reference online). http://www.sitepoint.com/books/cssref1/
No problem. I'll probably have to get to it tomorrow or Friday though, I've got a couple layouts I need to code tonight myself.
Yeah, I know the feeling. I've still got three templates to knock out before I can take care of you though. Hang in there.
deepman007, can you at least show me what this layout will look like and give me the image sizes? There's no way I can make anything out of this unless I know what I'm working with here. Even if it's an example layout, like what I did here a few years ago for a print designer on SitePoint: http://www.dan-schulz.com/for-others/elysa/