CSS Forum

**silverglade** · 01-22-2009, 09:52 AM

hi, this time im surprised. my page looks ok in IE6 but not in firefox and opera! my right images are popping out of their divs with borders, any help greatly appreciated to fix this. thanks very much again. derek

here is the page.

http://derekvanderven.com/tmp/tom/mainsite.html

here is the html/css for the page.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--[if lt IE 7]>
<link href="iefixes4.css" rel="stylesheet" type="text/css" /> <![endif]--> 

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name=" "content="derek van derven, derek van der ven, derekvanderven.com , van derven, odd nerdrum technique">
<meta name="keywords" content="derek van derven, derek van der ven, derekvanderven.com, odd nerdrum technique">
<meta name="description" content="Derek Van Derven, paintings, drawings, and web design">
 
 
 <title>Derek Van Derven mainsite</title> 
 <style type="text/css">
 #container {
  margin: 0 auto 0 auto;
  width: 950px;
  height: 2200px;
  text-align:center;
  border: .3em solid #A2633E;     
    } 
 
 BODY {
    BACKGROUND-COLOR: #333333;
    margin: 0;   /* clear for browsers*/
    padding: 0;
}

div.header {

     margin: 0 auto 0 auto;
    
     width:750px;
     height:150px;
     background-image: url(derek_banner.jpg);
     background-repeat:no-repeat; 
     
}    

A:link {
    COLOR: #B39551
}
A:visited {
    COLOR: #cc99cc
}
A:hover {
    COLOR: #cc3366
}
A:active {
    COLOR: #cc9999
}

#ad {
    margin: 40px auto 0 auto;
     
}    
#search {
     margin: 20 auto 0 auto;
     
}    
.style2 {
    font-size: large;
    color: #B39551;
}

#header_text {
margin: 10 auto 0 auto;
 
}

#mylinks {
 float: left;
 margin-left: 20px;
 text-align: left;
 border: .3em solid #A2633E; 
 padding: .4em;    
} 

#img_container {
float: right;
margin-right: 20px;
margin-top: 20px;
width: 400px;
height: 1400px;
 
}

div.majestic_image {
 
margin: 20px;
width: 400;
height: 478;
background-image: url( mainsite_majestic.gif);
background-repeat:no-repeat; 
border: .3em solid #A2633E;
}

div.dusk_image {
 
margin: 20px;
width: 400;
height: 291;
background-image: url( mainsite_dusk.gif);
background-repeat:no-repeat; 
border: .3em solid #A2633E;
}

div.temple_image {
 
margin: 20px;
width: 400;
height: 493;
background-image: url( mainsite_temple.gif);
background-repeat:no-repeat; 
border: .3em solid #A2633E;
}

#nerdrum {
 float: left;
 margin-left: 20px;
 margin-top: 40px;
 text-align: left;
 width: 400px;
 height: 1000px;
 border: .3em solid #A2633E; 
 padding: .4em;    
} 
  
 .style4 {
    color: #B39551;
    font-size: medium;
}
 .style5 {color: #A2633E}
.style7 {font-weight: bold; color: #9966CC;}
 .style8 {color: #B39551}
 </style>
 
</head>
 <body>
<div align="center">
  <div id="container"> 
       
       <div class="header"></div> 
        
        <div id="ad"><script type="text/javascript"><!--
            google_ad_client = "pub-7185044914855639";
            /* 336x280, created 9/5/08 */
             google_ad_slot = "4727955420";
             google_ad_width = 336;
             google_ad_height = 280;
               //-->
               </script>
          <script type="text/javascript"
              src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                </script></div><!-- END AD-->
        <div id="search"> <form action="http://www.google.com/cse" id="cse-search-box">
          
         <input type="hidden" name="cx" value="014945441363803601333:lpsx71j2um8" />
         <input type="hidden" name="ie" value="UTF-8" />
          <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="Search" /> 
    <span class="style2">Search this site..     </span>
        </form>
      <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
      </div> <!--END SEARCH-->    
         <br /> <hr><!--horizontal rule-->
       <div id="header_text"> 
         <p class="style4">Before you read anything else on this page, I should say that I am going to work to improve my drawing skills now, and cool                                   tones, because my drawing is still weak,
           making my paintings weak no matter how great the color or texture is. So I would say before you read the Odd Nerdrum "texture"tutorials, master             your figure and portrait drawing. (personally I don't have models so have to use self portraits.). at least... that's what I'm going to do.</p>
         <p class="style4"> Also, I'm not saying this is Odd Nerdrum's technique for sure, these are just experiments I have done to try to simulate or            recreate his texture techniques. I removed most , almost all, of Odd Nerdrum painting and drawing images from this site because of copyright               issues. 
             
           This site is not going to be updated for a while as I have to work on websites. date: 12-24-08...sorry.</p>
    </div>
         <!--END HEADERTEXT-->
      
      <div id="mylinks"> <p><a href="http://derekvanderven.com/index.html"  >Entry page </a></p>
            <p><a href="http://derekvanderven.com/tmp/tom/new_gallery/index.htm">gallery of my paintings:</a><span class="style5"> 
              the smaller thumbnailed gallery page</span></p>
                <p><a href="http://derekvanderven.com/derek_presentation.pdf">Larger pdf 
                    presentation of my paintings</a>, <span class="style5">(requires adobe pdf reader.)<br> 
                    click the 
                    left mouse to go forward, right mouse to go back.<br>
                    OR use right and left arrow 
                    keys to advance or go back.</span> <br>
        </p>
                    <p><a href="http://derekvanderven.com/tmp/tom/demo_new5.html">Automated 
                        slideshow presentation of my paintings</a><span class="style5"> (requires Java plugin)</span>.</p>
                        <p> <a href="http://derekvanderven.com/tmp/tom/info.html"> Info </a></p>
                   <p> <a href="http://derekvanderven.com/tmp/tom/contact.html">Contact</a></span> 
                    <p> <span class="style5">Older website 
                     images using tables.Large images with thumbnails.:&nbsp;</span>&nbsp;&nbsp;&nbsp;</span></span></p>
        <p> <strong>&nbsp;<span class="style5">|</span></strong> <a href="http://derekvanderven.com/tmp/tom/recent.html">Landscapes</a><span class="style5">&nbsp;|   
        </span>&nbsp;&nbsp;<a href="http://derekvanderven.com/tmp/tom/next.html"> Figurative</a> <span class="style5">|&nbsp;</span> <a href=                                                  "http://derekvanderven.com/tmp/tom/drawings.html">Drawings</a></span></p>
      
      </div><!-- END MYLINKS-->
      
    <div id="img_container">
    <div class="majestic_image"> <a href="http://derekvanderven.com/tmp/tom/majestic.html"><img src="mainsite_majestic.gif" width="400" height="478"   /></a>             </div>
    <div class="dusk_image"> <a href="http://derekvanderven.com/tmp/tom/dusk.html"><img src="mainsite_dusk.gif" width="400" height="291"   /></a></div>
    <div class="temple_image"> <a href="http://derekvanderven.com/tmp/tom/temple.html"><img src="mainsite_temple.gif" width="400" height="493"   /></a></div>
    </div><!--end img container -->
    
       
          <div id="nerdrum"><p class="style7">Odd Nerdrum experiments and information</p>
            <p><a href="http://derekvanderven.com/whysandpaper.html">Why Odd Nerdrum uses Sandpaper for his flesh and other areas.</a></p>
                <p><a href="http://derekvanderven.com/nerdrumquote.html">A quote from Odd Nerdrum on drawing.</a></p>
                 <a href="http://derekvanderven.com/nerdrum_students.html">Quotes I took from former Odd Nerdrum Students here</a>  </p>
            <p> <a href="http://derekvanderven.com/nerdrumcolor.html">Why I think Nerdrum's flesh colors can't be mixed normally-- and sticky paint.</a>          </p>
            <p><a href="http://derekvanderven.com/tmp/tom/portrait_tutorial2.html">Profile 
            Portrait Tutorial /Odd Nerdrum Technique 1</a><a href="http://derekvanderven.com/tmp/tom/portrait_tutorial2.html"></a> 
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
            <p><a href="http://derekvanderven.com/tmp/tom/sketch_tutorial.html">Derek's 3/4 
            portrait drawing tutorial &nbsp;</a>&nbsp;&nbsp;&nbsp;</p>
            <p><a href="http://derekvanderven.com/tmp/tom/nerdrum_tutorial.html">Odd Nerdrum 
            technique head copy tutorial &nbsp;2</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
            &nbsp; </p>
            <p><a href="http://derekvanderven.com/tmp/tom/nerdrum_tutorial2.html">Odd 
            Nerdrum technique head copy tutorial two, second try for smoothness 3</a></p>
            <p><a href="http://derekvanderven.com/nerdrum_experiment4.html">Odd Nerdrum head copy 4, using the pallet knife.</a></p>
            <p><a href="http://derekvanderven.com/usingcanvas.html">Odd Nerdrum head copy 5, using the canvas texture.</a></p>
            <p><a href="http://derekvanderven.com/nerdrum_experiment6.html">Odd Nerdrum head copy 6, trying to get textures by glazing strokes over opaque
             </a><br>
          </p>
            <p><a href="http://derekvanderven.com/nerdrum_experiment7.html">Odd nerdrum head copy 7, drawing/painting in planes first, features last</a><br>
          </p>
                <p><a href="http://derekvanderven.com/board/">Odd Nerdrum Technique Forum</a><a href=                                                         "http://derekvanderven.com/cgi-bin/phpbb/viewforum.php?f=2"></a> </p>
              <p><a href="http://derekvanderven.com/tmp/tom/assael.html">Steven Assael 
                 portrait technique page</a><br></p>
                <p><a href="http://derekvanderven.com/tmp/tom/nerdrum_demo.html">Photos of Odd 
                Nerdrum working a painting</a></p>
                <p><a href="http://derekvanderven.com/nerdrum_sanding.html">Here are some paintings where Odd Nerdrum sanded using sandpaper</a></p>
                <p><a href="http://derekvanderven.com/nerdrumclass.html">A class with Odd Nerdrum</a></p>
                  <p><a href="http://derekvanderven.com/nerdrum_drawing.html">Odd Nerdrum Drawing Paper</a><br>
          </p>
                 <p><span class="style8">Upload and share your videos,art images,music,and thoughts</span> <a href="http://kickapps.com/derek%27s_place">here.</a></p>
                
                    
                  
                  <p align="left"><a href="http://derekvanderven.com/index.html"></a>                 
                    <p class="style8">copyright © Derek Van Derven 2008 </p></div>
          </div><!-- END NERDRUM-->
<!-- Start of StatCounter Code -->
<script type="text/javascript">
sc_project=3569481; 
sc_invisible=1; 
sc_partition=39; 
sc_security="7e526e75"; 
</script>

<script type="text/javascript" src="http://www.statcounter.com/counter/counter.js"></script><noscript><div class="statcounter"><a title="free hit counter" href="http://www.statcounter.com/free_hit_counter.html" target="_blank"><img class="statcounter" src="http://c40.statcounter.com/3569481/0/7e526e75/1/" alt="free hit counter" ></a></div></noscript>
<!-- End of StatCounter Code --> </div>
  
  </div> 
           <!--end container -->

 </div> <!-- end center div -->
</body></html>

and here is the iefixes4.css fixes for ie6 i used.

Code:

 #nerdrum, #mylinks,#img_container{display: inline;}

**Insensus** · 01-22-2009, 10:08 AM

#img_container{display: inline;}
makes the img_container adapt it's width to what it contains.
Because you only specify that for IE6, it will only adapt in IE6.

**silverglade** · 10:30 AM

does that mean i have to make a separate fix file for opera and firefox? i dont know how to code that. i added the line

display: inline; to #img_container in my html file, and the images still pop out in firefox. any more help id appreciate alot. thank you for helping me. i added to your talkupation. thanks.derek

**Insensus** · 10:29 AM

Just remove the width and height from the img_container.
That fixes it for Firefox at least.

**silverglade** · 11:26 AM

thank you very much. your fix worked perfectly. awesome. derek

any idea how to make the images not pop out of their divs in this page in firefox? it looks ok in IE6. please.

http://derekvanderven.com/websites.html

here is the html/css for it.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--[if lt IE 7]>
<link href="iefixes2.css" rel="stylesheet" type="text/css" /> <![endif]--> 

<style type="text/css">


body {
    background-color: #333333;
    margin: 0;   /* clear for browsers*/
    padding: 0;
}
a:link {
    color: #C88A37;
}
a:visited {
    color: #CC99CC;
}
a:hover {
    color: #CC3366;
}
a:active {
    color: #CC9999;
}


#wrapper {
margin: 100px auto 0 auto;
width: 600px;
height: 400px;
text-align:center;

}

#homelink {
margin: 0 auto 0 auto;
width: 200;
height: 50px;
text-align: center;
}
/******************************************************************************************************/
/*****************************************************************************************************/
/********************IMAGE GALLERY STYLE CODE************************************************/
  

 div.img
  {
    
  float: left;
  margin-left: 40px;
  border: 1px solid #C88A37;
  height: 105px;
  width: 135px;  
  text-align: center;
  display: inline;
   
  }  

div.img img
  {
   
  /* margin: 0 auto 0 auto;*/ /*not needed*/
   /* display:block; */ /*suggested but not needed*/

  margin: 5px;
  border: 1px solid #C88A37;
  } 

div.img a:hover img
  {
  border: 1px solid #C88A37;
  }

div.desc
  {
   /*   clear:both; *//*suggested but not needed*/
    /*margin-left: 0px;*/ not needed*/
    text-align: center;
    font-style: italic;
    font-weight: bold;
    width: 125px;
      border: 5px;
    color: #A98F41;
    
  }
    
  
  #img_container {
    margin: 0 auto 0 auto; 
    /*width: 600px;
    height: 400px;  */
  
  }   
  #header {
  margin: 0 auto 50px auto;
  width: 600px;
  height: 100px;
  text-align: center;
   
   font-size: x-large;
    color: #B59760;
    font-family: "Times New Roman", Times, serif;
}  
 #header h5
 {
 font-size: x-large;
 color: #811A07;
 }
.style7 {font-size: 18px}
 
</style>

<meta name="keywords" content="paintings drawings art fine art prints">
<meta name="description" content="Derek Van Derven Paintings drawings and website design.">
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

            <body >
                <div id="wrapper">
 
            <div id="img_container">
            <div id="header">
              <h5>  This is my website portfolio:<br></br></h5>
              <span class="style7">these pages were hand coded in HTML and CSS without tables. 
                (note: the images may load slow due to my server not due to the image sizes.</span>              
               
                        
            </div>
 
            <div class="img">
              <a target="_blank" href="http://derekvanderven.com/new_doctor_site/home.html">
              <img src="doctor_thumb.jpg"   width="133"
              height="100" border="0"/>  </a> 
              <div class="desc">Dr. Alexander site</div>
            </div>
              
            <div class="img"><a target="_blank"  href="http://derekvanderven.com/new_geek_help/home.html">
          <img src="geek_help_thumb.gif" width="133" height="99" border="0"/></a> 
              <div class="desc">Geek Help site</div>
            </div>
          <div class="img">
              <a target="_blank" href="http://derekvanderven.com/flower_events/home.html">
              <img src="flower_events_thumb.gif"   width="133"
              height="100" border="0"/>  </a> 
              <div class="desc">Flower Events site</div>
          </div>
      
         
  </div>
 <!-- end img_container-->
 <div id="homelink"><a href="http://derekvanderven.com/tmp/tom/mainsite.html">Entry Page</a></div>
  
</div> <!-- END WRAPPER CODE-->
  <!-- Start of StatCounter Code -->
  <script type="text/javascript">
sc_project=3569481; 
sc_invisible=1; 
sc_partition=39; 
sc_security="7e526e75"; 
  </script>
  
  <script type="text/javascript" src="http://www.statcounter.com/counter/counter.js"></script>

<p align="center"><a href="http://derekvanderven.com"></a>
<noscript><div class="statcounter"><a title="free hit counter" href="http://www.statcounter.com/free_hit_counter.html" target="_blank"><img class="statcounter" src="http://c40.statcounter.com/3569481/0/7e526e75/1/" alt="free hit counter" ></a></img></div></noscript>
<!-- End of StatCounter Code -->

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-4025495-1";
urchinTracker();
</script>
</body></html>

and here are the ie6 fixes for it.

Code:

  div.desc, div.img {display: inline;}

**LadynRed** · 01-22-2009, 11:17 AM

Quote:

does that mean i have to make a separate fix file for opera and firefox?

No, because neither of those browsers pays any attention to conditional comments. What you were seeing is NOT a bug, therefore there's no 'fix' except to alter your code.

In general, if you float an element, it has to have a width, the exception being images where dimensions are defined. I think your problem was not the dimensional settings, but the improper clearing of the floats.

**silverglade** · 01-22-2009, 11:27 AM

i didnt know how to clear it properly, so i deleted the dimensions.
but i have a new page posted up there i was wondering if anyone could look at the problem? its a popped out image again if firefox.

**LadynRed** · 01-22-2009, 11:40 AM

Exactly what I thought - your floats are not cleared.
The simplest way to clear the floats is to add overflow:auto on #container and remove the height on #container.

You need to put a width on #mylinks, and you need a width on #img_container.

Here's some info on clearing floats:
http://www.quirksmode.org/css/clearing.html
http://css-discuss.incutio.com/?page=ClearingSpace

**silverglade** · 01-22-2009, 11:58 AM

AWESOME ladynred. you know your stuff. wow. THANK YOU. you are a css/html genius. that fixed it. i really have to look at those links you gave me and understand this float and positioning stuff. im still trying to master laying out elements on a page. also, could someone look at my above post on me trying to fix this page?

http://derekvanderven.com/websites.html

the images pop out in firefox. thanks. derek

**stevej** · 03:21 PM

Get rid of margin: 5px; on div.img img

- Steve

**silverglade** · 01-22-2009, 03:33 PM

steve, thank you very much for taking the time to view my code. im still a newbie trying to figure out css and html. so i miss stuff like that a lot. so THANKS! that fixed the problem perfectly. derek