SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2001
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Inconsistent div behaviour

    Hey,

    The problem I'm currently having with one of my divs is its inconsistency in terms of behaviour/output.

    HTML Code:
     	#leftcontent {
     		position: absolute;
     		left:10px;
     		top:71px;
     		width:200px;
     		background:#09304B;
     		border-top:0px solid #fff;
     		}
     
     .fieldName { 
     	float: left;
     	background-color: #DEDEDE;
     	width: 15%;
     	
     	margin-left: 230px;
     	margin-right: 10px;
     	margin-top: 5px;
     	margin-bottom: 5px;
     
     	border-style: dotted;
     	border-left-width: 1px;
     	border-right-width: 1px;
     	border-top-width: 1px;
     	border-bottom-width: 1px;
     	padding-bottom: 5px;
     	border-color: #4C4C6D;	
     	
     	font-family: Verdana;
     	font-color: #000000; 
     	font-size: 10px; 
     	font-weight: bold;
     	
     }
    The fieldName div placed in the middle column - floating to the right of a leftcontent left sided div taking up 200 pixels in width.

    The problem is that in certain pages this div appears (correctly) 230 pixels to the right of the screen and on other pages.. It appears 230 pixels AFTER the left div meaning 430 pixels to the right of the screen.

    Both pages are running in the same template so I have no idea why this could be?
    Bardius

  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,

    IE has a bug on float margins. If the float is the first float in a line and then the margin next to the viewport edge (ie the left margin in this case) is almost double what it should be. Subsequent floats on the same row do not exhibit this behaviour.

    Therefore you can supply one value to IE and one value for other browsers.

    Code:
    .fieldName { 
    	float: left;
    width:15%;
    margin-left: 230px;
    }
    *html .fieldName {margin-left:115px;}/* for IE only */
    You will need a bit of trial and error to place it where it should be.

    As your #leftcontent is absolutely placed it will have no effect on surrounding content. However, sometimes in IE and Mozilla, if the absolute code is first in the html it may throw the browsers off. This behaviour is not consistent and may happen rarely, but I always make sure that my absolutely placed element always come at the end of the html. (Unless of course they are nested and must stay inside their parent.)

    Hope that helps.

    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
  •