SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot Fiska's Avatar
    Join Date
    Jul 2004
    Location
    Dardania - Ancient Illyria
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    browser problem IE this time

    Hi,
    I'm having problem with IE aligning elements, eventhough I tried to make the code as tidy as possible, and well structured, there is a slight problem with firefox too, the <div id="cell"> containes other two divs, but the cell div has a background set therefore border-right: solid #000 1px, but its not going all the way down (to have cleaner idea of what I'm talking about please check http://test.rrota.net/).
    Opera is doing perfect (my opera version is 7.54), the two other browsers IE and firefox should have displayed that same way as opera, but they don't and I don't know really why???
    can anybody help me fix this, thanx
    you can parse the code from http://test.rrota.net/

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

    This should look the same in all three browsers.
    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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="DC.title" content="Forum" />
    <meta name="revisit-after" content="3 days" />
    <meta name="Classification" content="NGO" />
    <meta name="description" content="We build just and sustainable peace..." />
    <meta name="keywords" content="kosova, kosovo, prishtina, ngo, ojq, forum" />
    <meta name="distribution" content="GLOBAL" />
    <meta name="rating" content="General" />
    <meta name="copyright" content="copyright(c)2000-2004 Forum" />
    <meta name="author" content="Rrota" />
    <meta http-equiv="reply-to" content="info@rrota.net" />
    <meta name="language" content="sq" />
    <meta http-equiv="Content-Type" content="text/html; Select from list" />
    <meta name="robots" content="ALL, INDEX, FOLLOW" />
    <title>Tirona</title>
    <style type="text/css">
    h1,h2,h3 {
     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size: 10px;
     font-weight: normal;
     padding: 0;
     margin: 0;
    }
    #border {
     width: 647px;
     border : solid #000 1px;
     margin: 0;
     padding: 0;
    }
    #topslice {
     background-color: #DDD6C6;
     height: 5px;
     width: 100%;
     margin: 0;
     padding: 0;
     color: #000;
     float: left;
     overflow : hidden;
    }
    .head {
     width: 497px;
     background-color: #FFCC00;
     height: 21px;
     border-top: solid #000 1px;
     border-bottom: solid #000 1px;
     border-right: solid #000 1px;
     float: left;
     color: #000;
    }
    .head h1{
     padding-left: 12px;
     padding-top: 3px;
     margin : 0;
     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-weight: bold;
     font-size: 12px;
     text-transform: uppercase;
    }
    .lfthead {
     width: 149px;
     height: 21px;
     background-color: #FFCC00;
     border-top: solid #000 1px;
     border-bottom: solid #000 1px;
     float: right;
     color: #000;
    }
    *html .lfthead {width: 149px;}/*hack mode assuming full doctype with uri */
    #txtbox {
     width: 264px;
     background-color: #645A57;
     color : #FFF2BC;
     float: left;
    }
    #txtbox h2{
     text-align: left;
     padding-top: 14px;
     padding-left: 13px;
     padding-bottom: 13px;
     padding-right: 12px;
    }
    .img {
     padding: 0;
     margin: 0;
     float: right;
     vertical-align: top;
    }
    .img img {display:block}
    #cell {
     width: 497px;
     background-color: #645A57;
     text-align: left;
     color: #000;
     padding: 0;
     margin: 0;
     border-right: solid #000 1px;
     min-height : 183px;}
    * html #cell {height:183px}
    .clearer{
     height:1px;
     overflow:hidden;
     margin-top:-1px;
     clear:both;
    }
    
    </style>
    </head>
    <body>
    <!-- border of the page, container of everything -->
    <div id="border"> 
      <!-- top slice design issue -->
      <div id="topslice"></div>
      <div class="head"> 
    	<h1>mirėsevini nė faqėn zyrtare tė bashkise sė tiranės</h1>
      </div>
      <div class="lfthead"></div>
      <div id="cell"> 
    	<!-- text container -->
    	<div id="txtbox"> 
    	  <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc fermentum 
    		volutpat enim. Vivamus nec purus in purus placerat ultricies. Pellentesque 
    		adipiscing rhoncus ipsum. In eu wisi a pede vulputate convallis. Ut lectus 
    		risus, mattis ac, adipiscing lacinia, porta id, velit. Nullam dapibus 
    		arcu ac lectus. Quisque a nisl eu ligula volutpat nonummy. Curabitur aliquet 
    		ligula nec felis. Vivamus nunc. Duis mollis pede eget enim. Lorem ipsum 
    		dolor sit amet, consectetuer adipiscing elit.</h2>
    	</div>
    	<!-- image container -->
    	<div class="img"><img src="http://test.rrota.net/common/images/tirona.gif" alt="tirona"></div>
    	<br class="clearer" />
      </div>
      <!-- end of cell -->
      <!-- clearing floats so the take no space -->
      <div class="clearer"></div>
    </div>
    <!-- end of the border-->
    </body>
    </html>
    You needed to clear the floated img for mozilla and set it to display:block. Ie doesn't like all those comment tags around floats for some reasons so I took them out.

    I think thats all I did

    Paul

  3. #3
    SitePoint Member
    Join Date
    Sep 2004
    Location
    flordia
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hey

    It would be either problems try this link bro -zikon

  4. #4
    SitePoint Member
    Join Date
    Sep 2004
    Location
    flordia
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This link retured a 403 error.

    Forbidden
    You don't have permission to access /edits/flordiamixtapes.mov on this server.

    Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    It would be either problems try this link bro -zikon
    Sorry but your post doesn't make sense and seems to have nothing to do with the original problem which I have solved anyway. And that links broken as well

    Paul

  7. #7
    SitePoint Zealot Fiska's Avatar
    Join Date
    Jul 2004
    Location
    Dardania - Ancient Illyria
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Hi,
    thanx a lot Paul, it seems that I'm always needing this .clearer{
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    clear:both;
    }
    ,
    and telling you the truth I don't understand it quit well, do you mind exlpaining it further (deeper) or perhaps I'm asking a lot(I know)? If you could explain what in fact does the clearer? so I get a good hold of it, therefore I hate it when making the same bloody mistakes over and over again

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

    Floats are special elements that are basically removed from the flow but unlike absolute elements they do have an effect on the layout in a special way.

    Floats make room fro themselves by adding padding to adjacent content so that the content can wrap around the float and exist in harmony

    However when there is no content other than the float itself in an element, then the parent of the float believes that there is no actual content and will not extend its background or borders around the float because it isn't really there.

    The usual way to get around this is to place some content after the float (in the same parent div) and use clear:both on that content so that it clears the float. Now the parent div realises that it has some content and wraps its arms around it.

    Obviously in most cases you don't want to stick content after the float because it messes your layout up. So what most people do is they stick a break or a div like this.
    Code:
    <div style="clear:both"></div>
    or 
    <br style="clear:both" />
    Now the break version works best in mozilla and the div version works best in IE (unfortunatley) and in some cases you may even have to resort to using both to satisfy both browsers. Also there is a drawback that the break adds extra space to the bottom of the container thus messing the layout up in some cases.

    To solve this along comes my clearer class which gives height to the div so that mozilla has something to get hold of and allow it to work properly. Ie works without height anyway so it still works with height but we have to use overflow:hidden because ie will render an element at the font-size/line-height when height is declared.

    This results in clearing the div but because we have added 1px height we then take it away again by using a 1px negative margin top which cancel each other out. So there we are we can now clear floats in mozilla and ie without any discernible difference to the layout.

    However there are still occasions (unfortunately) when you need to use this version.
    Code:
    <br class="clearer" />
    However it usually works for ie as well so theres no problem. A few browsers don't apply the 1px negative top margin so you just have to live with a 1px extra height in those cases.

    For more information on floats see the FAQ on floats and this rather good article by Eric Meyer here:

    http://www.complexspiral.com/publica...aining-floats/

    Hope that clears (sic) it up once and for all

    Paul


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
  •