...

View Full Version : IE Floating Element Help



flyingcowofdoom
11-29-2005, 08:50 PM
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

_Aerospace_Eng_
11-29-2005, 09:01 PM
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.

flyingcowofdoom
11-29-2005, 09:12 PM
Hm...if you can't access the link, here's the source code of the page:


<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

_Aerospace_Eng_
11-29-2005, 09:36 PM
Try this

<!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.

flyingcowofdoom
11-29-2005, 09:44 PM
Awesome! Thanks ever so much...I've spent my entire afternoon trying to figure this out.

Stupid widths....

--FCOD



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum