SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard subnet_rx's Avatar
    Join Date
    Aug 2001
    Location
    Hattiesburg, MS
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Height and browsers

    The heights of my divs differ in different browsers. For instance, on this page, the search div at the top of the page will not size lower than what you see. And the section divs, are different in different browsers also. In Firefox, they are really small with the text set outside of them, on IE, they are so big, the background has to repeat. I have margins and padding at 0. In short, IE makes the div too big, Firefox makes it too small.

    Also, in Firefox only, the text on the boxes will not start at the very top. It displays fine in IE.

    Maybe someone here could tell me what I'm doing wrong.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This seems like Deja vu but here goes again

    You need to explicitly control the margins and padding of all elements as they have different defaults between browsers. The form element for example has a large margin that will upset layouts if not rectified. So always control the margins and padding of your elements.

    The other issues, that will show when you are doing something wrong is that you have specified a height in some cases that is too small to contain the elements. When you do this mozilla says "hang on" I don't fit and therefore doesn't fit. IE on the other hand says "poor chap doesn't know what he's doing so I'll help him along and increase the div to fit the content".

    So because you have specified the wrong height then you have different variations between browsers. Had you correctly defined the height then there would be no difference and everyone would be happy.

    One of the places where you have gone wrong is that you have specified a line-height of 2em in the body therefore the smallest ie will render an elements height will be 2em (unless you specify overflow:hidden). As you have only allowed 15px for your sub-header (which is about 1em) then that is why you have such a variation between browsers as ie will expand to 2 em and mozilla wont.

    I have amended some sizes to show what I mean but I realise that I may have amended them in the wrong direction for your layout but the example will show you how things even out when there are no conflicts.

    This is not meant to be a full solution but a pointer in the right direction.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    html
    {
    height:100%;
    }
    a { 
    color: #3366CC; 
    text-decoration: none
    }
    body { 
    background-color:#FFFFFF;
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 1em; 
    color: #000000;
    margin-top: 0.1em;
    margin-right: 0.1em;
    margin-bottom: 0.1em;
    margin-left: 1em;
    height: 100%;
    }
    .SectionTitle
    {
    color: #000000;
    font-size:larger;
    font-weight:bolder;
    background:#405080 url(http://www.myhattiesburg.com/images/secthead1.jpg) repeat-y left top;
    text-align:center;
    height:21px;
    margin:0px;
    padding: 0px;
    }
    .SectionBox
    {
    color:#000000;
    background-color:#FFFFFF;
    border: thin #000000;
    border-style:solid;
    height: 195px;
    background-image:url(http://www.myhattiesburg.com/images/boxheader.jpg);
    background-repeat:no-repeat;
    margin:0;
    padding:0;
    }
    .boxTitle
    {
    position:relative;
    top: 0px;
    color:#000000;
    text-align:center;
    font-size: 0.9em;
    line-height:0.9em;
    font-weight:bold;
    vertical-align:top;
    }
    #header
    {
    position:relative;
    width: 750px;
    height: 70px;
    background-color:#FFFFFF;
     
    }
    #subheader
    {
    position:relative;
    width:750px;
    height: 20px;
    line-height:20px;
    background-color:#5C73B8;
    color:#FFFFFF;
    font-size: 0.9em;
    font-weight: bolder;
    margin: 0px;
    padding: 0px;
    }
    #search
    {
    position:relative;
    top: 0%;
    left: 0%;
    margin: 0px;
    padding: 0px;
    }
    #main
    {
    position:relative;
    left: 0%;
    width:750px;
    }
    #topdiv
    {
    position:relative;
    margin-top: 1%;
    left: 0%;
    width:750px;
    }
    #toprow
    {
    position:relative;
    left: 0%;
    top: 1%;
    padding-bottom: 5px;
    padding-top: 5px;
    width:750px;
    height: 195px;
    }
    #t_links
    {
    position:absolute;
    left:0px;
    width:120px;
    display:inline;
    border-right: thin dotted #405080;
    }
    #t_lbox
    {
    position:absolute;
    left:130px;
    width:200px;
    display:inline;
    }
    #t_cbox
    {
    position:absolute;
    left:340px;
    width:200px;
    display:inline;
    }
    #t_rbox
    {
    position:absolute;
    left:550px;
    width:200px;
    display:inline;
    }
    #centerdiv
    {
    position:relative;
    left: 0%;
    top: 1%;
    width:750px;
    }
    #centerrow
    {
    position:relative;
    left: 0%;
    width:750px;
    height:195px;
    top: 1%;
    padding-bottom: 5px;
    padding-top: 5px;
    }
    #bottomdiv
    {
    position:relative;
    left: 0%;
    top: 1%;
    width:750px;
    }
    #bottomrow
    {
    position:relative;
    left: 0%;
    width:750px;
    height:195px;
    top: 1%;
    padding-bottom: 5px;
    padding-top: 5px;
    }
    #footer
    {
    position:relative;
    left: 0%;
    width:750px;
    height: 35px;
    }
    #search form {margin:0;padding:0;}
    #search input{height:14px;margin:0;padding:0}
    #topdiv p, p.boxTitle {margin:0;padding:0}
    </style>
    <title>MyHattiesburg.com</title>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) { //reloads the window if Nav4 resized
    if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    	document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
    else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
    </script>
    </head>
    <body>
    <div id="subheader"> 
    <div id="search"> 
    	<form name="f_search" method="post" action="">
    	 Search&nbsp;&nbsp; 
    	 <input type="text" name="searchfield" accesskey="s" tabindex="1">
    	</form>
    </div>
    </div>
    <div id="main"> 
    <div id="topdiv" class="SectionTitle"> 
    	<p>Section One</p>
    </div>
    <div id="toprow"> 
    	<div id="t_links"> Links </div>
    	<div id="t_lbox" class="SectionBox"> 
    	 <p class="boxTitle">Events</p>
    	</div>
    	<div id="t_cbox" class="SectionBox"> 
    	 <p class="boxTitle">Last Forum Posts</p>
    	</div>
    	<div id="t_rbox" class="SectionBox"> 
    	 <p class="boxTitle">Weather</p>
    	</div>
    </div>
    <div id="centerdiv" class="SectionTitle"> 
    	<p>Section Two</p>
    </div>
    <div id="centerrow"> 
    	<div id="t_links"> Links </div>
    	<div id="t_lbox" class="SectionBox"> 
    	 <p class="boxTitle">Events</p>
    	</div>
    	<div id="t_cbox" class="SectionBox"> 
    	 <p class="boxTitle">Last Forum Posts</p>
    	</div>
    	<div id="t_rbox" class="SectionBox"> 
    	 <p class="boxTitle">Weather</p>
    	</div>
    </div>
    <div id="bottomdiv" class="SectionTitle"> 
    	<p>Section Three</p>
    </div>
    <div id="bottomrow"> 
    	<div id="t_links"> Links </div>
    	<div id="t_lbox" class="SectionBox"> 
    	 <p class="boxTitle">Events</p>
    	</div>
    	<div id="t_cbox" class="SectionBox"> 
    	 <p class="boxTitle">Last Forum Posts</p>
    	</div>
    	<div id="t_rbox" class="SectionBox"> 
    	 <p class="boxTitle">Weather</p>
    	</div>
    </div>
    </div>
    <div id="footer"> footer </div>
    </body>
    </html>
    Most of the time css will work when thisngs are defined correctly. However the differences arise when there are conflicts and IE will always try to guess whereas stricter browsers will usually do exactly as they're told.

    I hope that all makes sense

    Paul

  3. #3
    SitePoint Wizard subnet_rx's Avatar
    Join Date
    Aug 2001
    Location
    Hattiesburg, MS
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow, taking out that line height in the body actually solved most of my problems. I don't know if Dreamweaver automatically put that in, or I did doing something else, but I didn't realize that was there.

    Paul, thanks for taking the time to explain this to me several times. Despite what you may think, I am reading your posts thoroughly, but get mixed up with what is and isn't done. Probably because I'm trying to solve many problems at once.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    lol - i still get confused myself


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •