Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE Floating Element Help

    Hi. I'm trying to create an interface for a site I'm working on, and I'm having some trouble with a floating element. The page is located at http://www.visionwaresystems.com/~cbarranco/test.html

    If you look at this page in Firefox, it appears as intended. However, IE will not display the "I'm floating" box properly. It won't put it on top of the green and purple bars like it should. Instead, it moves the green and purple bars down to the next line. I have tried everything I can think of to fix this problem, and I'm at my wits' end. TIA to anyone with any ideas!

    --FCOD

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The link doesn't work for me. I'm guessing you have applied some type of margin left or right to that element. So you could have something called the double margin bug. In IE it will double the margin that you add to the element if it is floated so add this to the CSS for that floating element. display:inline; see if that fixes things.

  • #3
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hm...if you can't access the link, here's the source code of the page:

    Code:
    <html>
    	<head>
    		<title>Visionware Systems ESB Web</title>
    	</head>
    	<style>
    		body {
    			background: #FFFFCC;
    			color: #444444;
    			font-family: Arial;
    			font-size: 10pt;
    			font-weight: normal;
    		}
    
    		div#topedge {
    			width: 100%;
    			height: 6px;
    			font-size: 6px;
    			background-image: url(images/top.gif);
    			margin: 0;
    			padding: 0;
    		}
    
    		div#bottomedge {
    			width: 100%;
    			height: 6px;
    			font-size: 6px;
    			background-image: url(images/bottom.gif);
    			margin: 0;
    			padding: 0;
    		}
    
    		div#gradient1 {
    			width: 768px;
    			background: #000000 url(images/grad1.gif) repeat-y scroll top;
    			color: #ffffff;
    			margin: 0;
    		}
    
    		div#gradient2 {
    			width: 768px;
    			background: #000000 url(images/grad2.gif) repeat-y scroll top;
    			color: #ffffff;
    			margin: 0;
    		}
    
    		div#menubar {
    			width: 768px;
    			padding: 0 6px 6px 6px;
    			margin: 0;
    			text-align: left;
    		}
    
    		div#cartbar {
    			width: 768px;
    			padding: 6px 6px 6px 6px;
    			margin: 0;
    			text-align: left;
    		}
    
    		#logo {
    			float: right;
    			border: 1px solid #000000;
    			height: 40px;
    			width: 100px;
    			background-color: #ffffff;
    			padding: 0;
    			margin: 0 6px 0 0;
    		}
    
    		#logo img {
    			border: 0;
    		}
    
    		#menubar a {
    			color: #66ffff;
    		}
    
    		div#transition {
    			width: 100%;
    			height: 6px;
    			font-size: 6px;
    			background-image: url(images/trans.gif);
    			margin: 0;
    			padding: 0;
    		}
    
    		div#middle {
    			width: 100%;
    			background: #ffffff url(images/middle.gif) repeat-y scroll top;
    			margin: 0;
    			padding: 0;
    		}
    
    		div#content {
    			width: 100%;
    			padding: 0 9px 3px 9px;
    		}
    	</style>
    	<body>
    		<div style="width: 768px;">
    			<div id="topedge"></div><!--This div is for the top edge of the curved border-->
    			<span id="logo">I'm floating!</span><!--This is the floating div that causes the problem-->
    			<div id="gradient1"><!--This is the green bar-->
    				<div id="menubar">
    					Menu | Menu | Menu | Menu
    				</div>
    			</div>
    			<div id="gradient2"><!--This is the purple bar-->
    				<div id="cartbar">
    					Menu | Menu | Menu | Menu
    				</div>
    			</div>
    			<div id="transition"></div><!--This is for the image between the purple and white sections-->
    			<div id="middle">
    				<div id="content">
    				Content Content Content
    				</div>
    			</div>
    			<div id="bottomedge"><!--Bottom Edge--></div>
    		</div>
    	</body>
    </html>
    TIA,

    --FCOD

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>Visionware Systems ESB Web</title>
    		<base href="http://www.visionwaresystems.com/~cbarranco/">
    		<style>
    		body {
    			background: #FFFFCC;
    			color: #444444;
    			font-family: Arial;
    			font-size: 10pt;
    			font-weight: normal;
    		}
    
    		div#topedge {
    			width: 100%;
    			height: 6px;
    			font-size: 6px;
    			background-image: url(images/top.gif);
    			margin: 0;
    			padding: 0;
    		}
    
    		div#bottomedge {
    			width: 100%;
    			height: 6px;
    			font-size: 6px;
    			background-image: url(images/bottom.gif);
    			margin: 0;
    			padding: 0;
    		}
    
    		div#gradient1 {
    			background: #000000 url(images/grad1.gif) repeat-y scroll top;
    			color: #ffffff;
    			margin: 0;
    		}
    
    		div#gradient2 {
    			background: #000000 url(images/grad2.gif) repeat-y scroll top;
    			color: #ffffff;
    			margin: 0;
    		}
    
    		div#menubar {
    			padding: 0 6px 6px 6px;
    			margin: 0;
    			text-align: left;
    		}
    
    		div#cartbar {
    			padding: 6px 6px 6px 6px;
    			margin: 0;
    			text-align: left;
    		}
    
    		#logo {
    			float: right;
    			border: 1px solid #000000;
    			height: 40px;
    			width: 100px;
    			background-color: #ffffff;
    			padding: 0;
    			margin: 0 6px 0 0;
    		}
    
    		#logo img {
    			border: 0;
    		}
    
    		#menubar a {
    			color: #66ffff;
    		}
    
    		div#transition {
    			width: 100%;
    			height: 6px;
    			font-size: 6px;
    			background-image: url(images/trans.gif);
    			margin: 0;
    			padding: 0;
    		}
    
    		div#middle {
    			width: 100%;
    			background: #ffffff url(images/middle.gif) repeat-y scroll top;
    			margin: 0;
    			padding: 0;
    		}
    
    		div#content {
    			padding: 0 9px 3px 9px;
    		}
    	</style>
    	</head>
    	
    	<body>
    		<div style="width: 768px;">
    			<div id="topedge"></div><!--This div is for the top edge of the curved border-->
    
    			<span id="logo">I'm floating!</span><!--This is the floating div that causes the problem-->
    			<div id="gradient1"><!--This is the green bar-->
    				<div id="menubar">Menu | Menu | Menu | Menu</div>
    			</div>
    			<div id="gradient2"><!--This is the purple bar-->
    				<div id="cartbar">Menu | Menu | Menu | Menu</div>
    			</div>
    			<div id="transition"></div><!--This is for the image between the purple and white sections-->
    			<div id="middle">
    				<div id="content">Content Content Content</div>
    			</div>
    			<div id="bottomedge"><!--Bottom Edge--></div>
    		</div>
    	</body>
    </html>
    Your main problem was you were setting a width to the divs. Padding counts for overall width. Divs will expand to fit their container.

  • #5
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Awesome! Thanks ever so much...I've spent my entire afternoon trying to figure this out.

    Stupid widths....

    --FCOD


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •