browser problem IE this time

**Fiska** · Sep 30, 2004 08:43

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/

**Paul O'B** · Sep 30, 2004 09:16

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

**zikon** · Sep 30, 2004 16:27

It would be either problems try this link bro -zikon

**zikon** · Sep 30, 2004 16:28

http://fucircuit.com/edits/flordiamixtapes.mov

**BaenSidhe** · Sep 30, 2004 17:22

Originally Posted by zikon

http://fucircuit.com/edits/flordiamixtapes.mov

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.

**Paul O'B** · Oct 1, 2004 01:22

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

**Fiska** · Oct 1, 2004 05:03

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

**Paul O'B** · Oct 1, 2004 08:33

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

User Tag List

Thread: browser problem IE this time

Thread Tools

Display

browser problem IE this time

hey

Sorry here is the link..

Bookmarks

Bookmarks

Posting Permissions