CSS Forum

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

well, its IE6 again, but it doesnt seem to center perfectly in any browser.

i want my header to center in the content div, and in IE6, even though i use the iefixes.css to fix ie6 issues, the header goes to the left. any help greatly appreciated. i cant believe this simple layout wont even work. i thought i knew more css than that.

here is the css/html

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<!--[if lt IE 7]>
<link href="iefixes3.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: 2000px;
} 
 
 BODY {
    BACKGROUND-COLOR: #333333;
    margin: 0;   /* clear for browsers*/
    padding: 0;
}

div.header {

     margin: 0 auto 0 auto;
     text-align:center;
     width:750px;
     height:150px;
     background-image: url(derek_banner.jpg);
     background-repeat:no-repeat; 
     
}    
 </style>
 
 </head>
 <body>

<div id="container"> <div class="header"></div> </div>


</body></html>

here is the iefixes.css

Code:

@charset "utf-8";
/* CSS Document */

#container, div.header{display: inline;}

**chrishirst** · 01-21-2009, 03:47 PM

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Incomplete and therefore invalid DTD. IE goes into "quirks" mode and does whatever it wants.

**silverglade** · 04:19 PM

thank you chris!!! what a simple error. at least my eyes are getting sharper. i redid another page that was missing the proper dtd. but it wont center in ie6 and is messed up in firefox.. any more help with this other page GREATLY appreciated.

here is the page link

http://derekvanderven.com/websites.html

here is the css/html.

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: 0 auto 0 auto;
width: 600px;
height: 400px;

}

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

 div.img
  {
   margin: 5px;
  margin: 0 auto 0 auto;
  border: 1px solid #C88A37;
  height: 105px;
  width: 135px;
  
   
  margin-top: 100px;
  text-align: center;
  display: inline;
   
  }  

div.img img
  {
   
  width= 135px;
  height= 105px;
  display: inline;
  margin: 5px;
  border: 1px solid #C88A37;
  } 

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

div.desc
  {
    float:left;
    margin-left: 0px;
    text-align: center;
    font-style: italic;
    font-weight: bold;
    width: 135px;
      border: 5px;
    color: #A98F41;
    
  }
    
  
  #img_container {
    margin: 0 auto 0 auto; 
    width: 600px;
    height: 400px;  
  
  }   
  #header {
  margin: 0 auto 0 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>              
              <p>&nbsp; </p>
                        
            </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="104" 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 is the ie6 fix code

Code:

@charset "utf-8";
/* CSS Document */

 div.img, div.img img,  div.desc, #img_container, #wrapper, #header, #homelink  {display: inline;}

**chrishirst** · 01-21-2009, 04:21 PM

setting display:inline on #header in the ie_fix .css will negate the centring effect of margin:0 auto;

**silverglade** · 04:54 PM

awesome thank you. i love your icon, the comic book simpsons guy LOL.

well, im getting closer if you see at this page

http://derekvanderven.com/websites.html

but the alignment is still messed up, and the captions arent inside their divs.
it was all centered before i messed with it, but after you told me about the dtd i realized i was doing it wrong and had to redo it. any more help greatly appreciated if you have the time. or at a later time if you can. thank you. derek

here is the new code

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="../iefixes.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
  {
    
   margin: 0 auto 0 auto;
  border: 1px solid #C88A37;
  height: 105px;
  width: 135px;  
  text-align: center;
  display: inline;
   
  }  

div.img img
  {
   
   margin: 0 auto 0 auto;
  width= 135px;
  height= 105px;
  display: inline;
  margin: 5px;
  border: 1px solid #C88A37;
  } 

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

div.desc
  {
    float: left;
    margin-left: 0px;
    text-align: center;
    font-style: italic;
    font-weight: bold;
    width: 135px;
      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="104" 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 i am not using iefixes2.css anymore.

**chrishirst** · 01-21-2009, 05:21 PM

Code:

div.img img
  {
   
   margin: 0 auto 0 auto;
  width= 135px; /* invalid code*/
  height= 105px;  /* invalid code */
  display: inline;
  margin: 5px;
  border: 1px solid #C88A37;
  }

Inline element do NOT take height and width properties in any case, they are as large or as small as the content.
Your .desc containers for the captions are then floated which then become block elements which cannot be inside inline elements.

I would suggest float:left the .img class,
set .img img to display:block with no floats
leave the .desc as an unfloated block element and set clear:both on it to close the parent container.

**silverglade** · 01-21-2009, 05:39 PM

you are awesome. thank you again. that was really complicated for me to understand, and i am going to have to research the terms you used to understand what you said, but the bottom line is, the page is perfect now thanks to you! cool. here is the finished page thanks to all of your helping. i cant believe i couldnt do the page that links to my websites. HAHA> ironic.

http://derekvanderven.com/websites.html

awesome thank you. derek

**chrishirst** · 01-21-2009, 05:42 PM

Glad it worked, because I didn't test it