SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Singapore
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    margin differences between IE and Moz/Op/Fire

    Help

    somewhere in my code i have
    Code:
    <div class="sidebar">
    	<h3 class="sidehead">Members Area</h3>
    	<div class="members">
    		<h4>Sign In...</h4>
    		Username:
    	<br />	<input type="text" />
    	<br />	Password:
    	<br />	<input type="password" />
    	<br />	<a class="dark" href="signup.htm">Sign up</a> now and enjoy privileges!
    		<a class="dark" href="signup.htm">Find out more...</a>
    	</div>
    
    	<div class="menu">
    	<!-- original design/concept http://www.assetsurveillance.com.au/ -->
    		<ul class="nav">
    		<li class="nav"><a class="box" href="index.htm">Home of DigiOne</a></li>
    		<li class="nav"><a class="box" href="">Products List</a></li>
    		<li class="nav"><a class="box" href="">Accessories</a></li>
    		<li class="nav"><a class="box" href="services.htm">Our Services</a></li>
    		<li class="nav"><a class="box" href="contact.htm">Contact Us</a></li>
    		<li class="nav"><a class="box" href="about.htm">About Us</a></li>
    		</ul>
    	</div>
    </div>
    and the relevant CSS for the above is
    Code:
    .sidebar
    	{ float:left
    	; width:160px
    	; margin:10px 0px 0px 10px
    	}
    	h3.sidehead
    		{ padding:0px 4px
    		; border-width:2px 2px 0px 2px
    		; border-style:solid
    		; border-color:#000099
    		; color:#ffffff
    		; background-color:#000099
    		}
    	.members
    		{ color:#000000
    		; background-color:#ffffff
    		; border:2px solid #000099
    		; padding:4px
    		}
    	div.menu
    		{ background-color:#ffffff
    		; padding:0
    		; margin-top:8px
    		}
    		ul.nav
    			{ margin:0 ; padding:0
    			; list-style:none
    			}
    			li.nav
    				{ width:100%
    				; list-style:none
    				; float:left
    				; border-top:2px solid #ccccff
    				; margin:0
    				}
    However, when i view the 'side bar' in IE, the { margin-left } seems to have doubled.

    Anybody has any remedies?

    Full page:
    http://sg.geocities.com/machinegunsg/0181/index.htm

    PS this is for educational purposes(sch project). I understand that there is a real "DigiOne" and project discussion is pending...

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

    Try using padding instead:

    e.g.
    Code:
    .sidebar
     { float:left
     ; width:160px
     ; padding:10px 0px 0px 10px
     }
    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Singapore
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh...
    thanks...
    (why didn't i think of that)

    though if anyone can enlighten me about this wierd illogical bug...

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    though if anyone can enlighten me about this wierd illogical bug...
    Illogical - You said it yourself . IE doubles the left margin on a float when the left side of the float is the edge of the parent container (or the body if not in a container). If the left margin of a float is next to another float then the margins work as expected.

    However when float is applied directly to an image then the margins work correctly regardless of other floats. If the image is put in another element and that element is floated then the margins are incorrect as stated above.

    Clear as mud

    Paul

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Singapore
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey thats a good explaination.
    Many thanks!


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
  •