1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Help on Expanding Box problem, Affect IS 5.5, 6.0

Discussion in 'CSS' started by deepman007, Mar 1, 2008.

0
  1. #1
    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?
     
    deepman007, Mar 1, 2008 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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.
     
    Dan Schulz, Mar 1, 2008 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    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'.
     
    deathshadow, Mar 1, 2008 IP
  4. deepman007

    deepman007 Peon

    Messages:
    99
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    So, whats the best source that I can trust or to test on so that all browsers are compatible ?
    Any recommendations?
     
    deepman007, Mar 2, 2008 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Dan Schulz, Mar 2, 2008 IP
  6. deepman007

    deepman007 Peon

    Messages:
    99
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    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):
     
    deepman007, Mar 2, 2008 IP
  7. deepman007

    deepman007 Peon

    Messages:
    99
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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, Mar 2, 2008 IP
  8. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #8
    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. :)
     
    Dan Schulz, Mar 3, 2008 IP
  9. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #9
    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...)
     
    Stomme poes, Mar 3, 2008 IP
  10. ChaosFoo

    ChaosFoo Peon

    Messages:
    232
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #10
    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.
     
    ChaosFoo, Mar 3, 2008 IP
  11. deepman007

    deepman007 Peon

    Messages:
    99
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    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.
     
    deepman007, Mar 3, 2008 IP
  12. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #12
    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/
     
    Dan Schulz, Mar 3, 2008 IP
  13. deepman007

    deepman007 Peon

    Messages:
    99
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    So you going to rewrite the whole thing?
     
    deepman007, Mar 4, 2008 IP
  14. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #14
    That's the plan. And show you how I did it so you can try it yourself. :)
     
    Dan Schulz, Mar 4, 2008 IP
  15. deepman007

    deepman007 Peon

    Messages:
    99
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Thank you, this is first time I'm creating a website. lol
     
    deepman007, Mar 5, 2008 IP
  16. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #16
    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. :)
     
    Dan Schulz, Mar 5, 2008 IP
  17. deepman007

    deepman007 Peon

    Messages:
    99
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #17
    First time creating an E-commerce site. PAIN! lol
     
    deepman007, Mar 7, 2008 IP
  18. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #18
    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. :)
     
    Dan Schulz, Mar 8, 2008 IP
  19. deepman007

    deepman007 Peon

    Messages:
    99
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #19
    Take your time. Thank you very much.
     
    deepman007, Mar 10, 2008 IP
  20. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #20
    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/
     
    Dan Schulz, Mar 17, 2008 IP