SitePoint Sponsor |
|
User Tag List
Results 1 to 2 of 2
Thread: Inconsistent div behaviour
-
Nov 16, 2003, 16:37 #1
- 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 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
-
Nov 17, 2003, 12:07 #2
- 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 */
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