CSS - Strange Float Behaviour In Ie

In advance, I'd like to say that I appreciate the assistance from people on this site.

I'm laying out a site with a three-column layout. The right <div> floats to the right, and the left <div> floats to the left with the middle content "flowing" to the top in between the two.

I'm using strict xhtml. Both the xhtml and the css validate properly with no warnings. In Firefox, Opera and Safari, the layout behaves as I would expect. However, with IE7, the left div behaves very unexpectedly, as though IE7 is causing it to use fixed positioning. If you open the site in IE and manually resize your browser window by dragging the right-hand side back and forth horizontally, you'll see how the left div stays in place. I can't figure out the cause of this strangeness.

I've put the index page temporarily online for anyone to take a look at, and I'll append the code right after this post. The site is www [dot] MeInShape [dot] com

Again, thanks in advance.

Edited because I accidentally said "absolute positioning" when I meant "fixed positioning".

subject isn't too good

anyhow.. i have 4 cells

__ __
|1 | |2 |
--- ---
__ __
|3| |4 |
--- ---

2 and 4 are said to float right, such that 1 and 3 define the height of the page..

but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens

__ __
|1 | |2 |
--- | |
--- | |
|4| ---
---
__
|3|
---


do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right

any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?)

Hi There -

Am converting another design from tables, working with a CMS (Drupal) and an existing CSS / table combination that I didn't write and have no choice about.

Think of the header as having three sections. The top section has logo on the left, search box on the right. Rounded corners. I'm cool with that section.

Then there's a space. Created a div for the space. Love the space. Problems with the space in IE. Will go into it later.

Then there's the next section. Rounded corners. Contains the entire page.

On the left is a pulldown menu, about 1 cm from the top. On the right is a tabbed menu. This menu has flexible height. It needs to be right up against the bottom with the menu below it. Call this section the tabbed menu section.

Third section. Immediately below that is a bar menu like the one Apple's got. Looks like a metal bar with divisions. Call this primary links.

----------

First, the space between. In IE, when you roll over the bar menu, the space disappears. Won't come back.

Initially, in the second section, floated the pulldown menu left and the tabbed menu right. That worked fine, except that the tabbed menu had a width of 100% and pushed up the pulldown menu so the section was too wide. When I put it to 65%, all hell broke loose with the bar menu in the third section below it and bits of it snuck up into the second section.

If I left it alone, and left the tabbed menu at 100%, when I checked over its container with firebug, it said that it was being affected by the primary links. I figured that out also because the background for that container was a really weird color that I finally found in the background of the navigation id and changed to white. Primary was overlapping it so I couldn't see it with firebug.

So after fiddling with several clearing methods, I gave up and decided to try a table. Table worked fine, and the second section looks good except that there's a one pixel space between the tabbed menu and the bar menu.

---------

It is my greatest wish right now to be able to float the pulldown to the left, the tabbed menu to the right and have the primary links stay below. I wish I could get the space to work and I wish for a clear understanding of it all so I can then figure out where to put the corners.

Anyone who can enlighten me on this would have my undying gratitude. I've been working on this all day and the deadline's tomorrow.

Code:

<div id="top part"
logo and searchbox
</div>

<div>
that pesky space that disappears in IE when roll over primary links
</div>

<div id=navcontainer>
dropdown and tabbed menu
</div>

<div id="navigation" class="menu> <!-- couldn't find the menu class in the css -->
<div id="primary" class="clear-block">
contains barmenu - very fussy
</div>
</div>

Here's the relevant CSS:

Code:

div#navigation {
  background: #fff url(../images/blue/menu-bg.png) 100% 100% repeat-x;
}


#primary {
  line-height: 30px;
}

#primary ul {
  padding:0;
  margin:0;
  list-style:none;
}

#primary li {
  display:inline;
}

#primary a {
  font-weight:bold;
  display:block;
  float:left;
  padding:0px 14px 0px 14px;
  margin: 0px 1px 0px 0px;
  font-size: 95%;
}

#primary a {
  background-position:0% 0px;
}

#primary a:hover {
  text-decoration: none;
  background-position:0% -42px;
}

#primary a.active {
  background-position: 0% -84px;
}

#primary a {
  background: url(../images/blue/menu-div.png) 100% 0 repeat-y;
  color:#666666;
  font-size: 120%;
  font-family:Arial,Helvetica,sans-serif;
}

#primary a:hover {
  color: 666666;
  background: #B8B8B8;
}

#primary a.active {
  color: 666666;
  background: #B8B8B8;
}

This is my first try at css and i have been at it about a week on and off. I have tried to use examples from here and the o'reilly CSS cookbook. I want to create a two column row of pictures with a caption. I selected DIV as the tool (my css is below). The container DIV looks great. I want the div.float, however, to start a second row when a third picture is added and to continue thereafter with successive two column rows. Unfortunately, each of my rows contain only one picture.

here is my css style sheet. A demonstration of the problem can be seen at:

http://www.yourline-online.com/demo05/?How_to_create_pages
Code:

div.float {
    float: left;
    BORDER-RIGHT: #808080 2px solid;
    PADDING-RIGHT: 2px;
    BORDER-TOP: #808080 2px solid;
    PADDING-LEFT: 2px;
    FONT-WEIGHT: lighter;
    FONT-SIZE: medium;
    PADDING-BOTTOM: 20px;
    MARGIN: 16px 2%;
    BORDER-LEFT: #808080 2px solid;
    COLOR: #000000;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #808080 2px solid;
    HEIGHT: 200px;
    WIDTH: 150px;
    BACKGROUND-COLOR: #ffffff;
    TEXT-DECORATION: none
  }
  
div.float p {
   text-align: center;
   }
div.container {
  border: 2px dashed #333;
  background-color: #ffe;
  }
div.spacer {
  clear: both;
  }

MY HTML is like this:
Code:

H1>How to create pages</H1>
<P>The headings are used for splitting up the content file. An H1, H2 or H3 heading will dynamically split the document into new pages in the table of contents. An H4-heading is used as a heading within a page. See the following pages...<BR></P>
<P></P>
<DIV class=container>
<DIV class=spacer></DIV>
<DIV class=float><IMG height=100 alt="image 1" src="image1.gif" width=100> 
<P>caption 1</P></DIV>
<DIV class=spacer></DIV>
<DIV class=float><IMG height=100 alt="image 2" src="image2.gif" width=100>
<P>caption 2</P></DIV>
<DIV class=spacer>
<DIV class=float><IMG height=100 alt="image 3" src="http://www.yourline-online.com/demo05/image3.gif" width=100>
<P>caption 3</P></DIV>
<DIV class=spacer></DIV></DIV></DIV>

Hi,

I am trying to finish up on this cubecart re-skinning that I've been left with.

Basically, when you add products to the basket the style goes really long. It seems to work in ie7's compatibilty mode, but other than that I am at a bit of a lose as to why its doing it.

I am not much of a front end developer, so its all a bit foriegn. I can make my way around a css file, but this has me stumped as I cant see what is causing this!

Any help would be greatly appriciated.

The page is located at:

keylow-design.com/shop

Thanks in advance

Robert

Hello All,

I have created a grid using divs. There is a main div acting as a table, this contains divs acting as rows and these contain divs acting as cells. The finished thing resembles an HTML table.

When developing the grid, I managed to make it work correctly in all browsers and was happy with the result. Now that I have put the grid on a live server and there is a slight lag loading the page, I am having problems in FF3 and IE7.

When I first view the page, the divs are not sitting in a nice block, some of the rows end halfway through and new rows are started. If however I click refresh, the problem fixes itself. Also the alignment is random, I can view the same page twice in the same browser and get different results.

The first thing I thought was that there must be something wrong with my coding, but the HTML and CSS never change.

I cannot send a link to the page as it is on an intranet, also the code is quite long so I did not include it but I will if necessary.

I have looked around on the net for similar problems and have found one or two mentions but no solutions.

Has anyone else had a problem like this and solved it? Any help would very much be appreciated.

Thank you,

Aaron.

I thought that setting properties for a and a:hover like this:

PHP Code:
 a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #960000;
    text-decoration: none;
    border-bottom: 1px dashed #960000;
}
a:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px dashed #FFFFFF;
} 





would apply a dashed bottom border to a standard link (which it does, marvellously). I also thought any other a classes would override this. Such as:

PHP Code:
 a.nav {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #960000;
}
a.nav:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
} 





Which doesn't work (until I set a border-bottom property of 0). Is there a way to get around this so I don't have to set a 0 bottom-border on all other link types?

Hi, im making a site for a friend but cant seem to understand why the css works fine on one page and the exact same css fails on another.

CSS:
Code:

#topmenu_wow {
	background-image: url(images/wow_menu.png);
	height: 73px;
	width: 1030px;
	display: block;
	background-repeat: no-repeat;
	position: relative;
	margin-right: auto;
	margin-left: auto;
}
#topmenu_war {
	background-image: url(images/war_menu.png);
	height: 73px;
	width: 1030px;
	display: block;
	background-repeat: no-repeat;
	position: relative;
	margin-right: auto;
	margin-left: auto;
}
#menupos {
	top: 15px;
	position: relative;
	
}

html for the menu:
Code:

<div id="topmenu_war"><!--this is the one row im changing, topmenu_war (not working) or topmenu_wow (working)-->
<span id="home"><a href="index.html"><span id="menupos">Home</span></a></span>
<span id="info"><a href="info.html"><span id="menupos">Info</span></a></span>
<span id="demo"><a href="demo.html"><span id="menupos">Demo</span></a></span>
<a href="#"><span></span></a>
<span id="pricing"><a href="pricing.html"><span id="menupos">Pricing</span></a></span>
<span id="order"><a href="order.html"><span id="menupos">Order</span></a></span>
<span id="support"><a href="support.html"><span id="menupos">Support</span></a></span></div>

The working page
The bugged page

I've tried to put each file in a own folder with a own css (eg /wow/index.html) but no luck.
Any help is welcome!

Regards - mrsarun

I have a basic 2 column layout with a header and the columns reprezented by two floated divs but on IE I'm experiencing some weird behaviour with the menu. To be precise the menu's background and content is not showing up at pageload and I have to hover some of it's elements or resize the window, or bring another window above IE's window and then the hidden elements magically appear. Is this some common bug? And more important: is there a fix?

You can see my example at the following link -> http://www.link7.ro/misc/css-stuff/bug1/test.html

Thanks in advance.

Hi all,

I have a bit of an odd situation (prob not odd if you seen it before but I have no clue why its doing it!).... I have my webpage:

http://www.houseofhawkins.com/index.html

which works great in IE. the part in question is the menu tabs at the top. Within IE they keep the width I have given them.. In firefox they only go to the width of the text.

They are links with the following CSS attached:

div#Header #MenuSection a.MenuTab {

PHP Code:
 filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#A8DBA8', startColorstr='#A4B7A4', gradientType='0');
    font-weight: bold;
    text-align: center;
    font-size: 1.3em;
    background-color: #BCD6BC;
    border-style: solid;
    border-width: 1px;
    border-color: #A5BEA5 #BCD6BC #BCD6BC #A5BEA5;
    margin: 0 5px 0 2px;
    height: 1.5em;
    width: 140px;    
    padding: 5px 1px 1px 1px;
}

div#Header #MenuSection {
    float:left;
    margin-top: 30px;
} 





here is the HTML code for that part of the page.

PHP Code:
<div ID="MenuSection">
                    <a Class="SelectedMenuTab" Title="You are currently viewing the Home page">Home</a>
                    <a Class="MenuTab" href="" title="Curriculum Vitae for Jonathan Hawkins, Author of House of Hawkins">CV</a>
                    <a Class="MenuTab" href="http://houseofhawkins.com/projects/index.html" title="Portfolio of Work created by Jon Hawkins">Portfolio</a>
                    <a Class="MenuTab" href="" title="Online Photo Gallery of Jon, friends and family">Photo Gallery</a>
                    <a Class="MenuTab" href="http://houseofhawkins.com/games.html" title="Games created by House of Hawkins">Games</a>
                </div>
            <div style="clear:left"> </div> 





I just dont get why firefox wont be nice and give me the width I ask for... the oddest bit is if I put float:left into the menutab part they do work!

I wish to understand why its like this... I have attached the CSS and the file if that helps anyone.

Thanks for the help and advice.

I can't get this page right.

http://ortho-paloalto.hoozhosting.c...te/newsite.html

What I'm trying to do is create a menu at the top in the center #window div. If I add width: 25% to the following, the menu is properly spaced in IE, but block atributes are lost in FF. If I remove the width: 25% from the following the menu is spaced properly in FF, but lost in IE.

#submenu li a { }

#submenu li a:hover { }


Regardless of the same size tabs for the menu's described above the links stopped working in FF. I'm trying to have the menu at the top be width: 33% and the sub menu 25% and both centered. Eventually I'd like to determine a way to customize each of the menu color's but I think the formatting and placement is more important at this point.

Please help, I've just recently started using css and have limited experience. Any help is appreciated.

Thank you,
Dave

Hello,

I am experincing something strange with a basic table enclosed in my content div...

The situation: I have basic layout, a header with 2 columns. The main content div holds the left hand side of the page and all works well... except the table. It shoots off the screen and a horizontal scroll bar apears and the table aligns up next to the far left div when viewed in Firefox, but aligns properly when viewed in IE 6.
If I enclose the table in a paragraph tag, it displays properly but then fails XHTML validation stating that I have enclosed a block element within a line element.
I have gone over and over the table tags, and all seems correct... went to the w3c and mimicked their sample table and have gotten the same prob. Has anyone else experinced this?? DIscovered any solutions?? Help! Thanks.

edit... here is the code:

the CSS portion:

#header {
color: #a47716;
border-top: .1px solid #e5eca9;
margin: 0;
padding: 0;
height: 100px;
background: #ccdd99 url("./headerBG.png") repeat-x;
}
h1.header, h2.header {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
color: #a47716;
border-bottom: none;
}
#content {
padding: 40px 10px 10px 10px;
background: #fff;
margin: 0px 25% 20px 5px;
border-top: 2px groove #87c6ae;
border-right: 2px outset #87c6ae;
border-left: 2px groove #87c6ae;
width: 75%;
}
#rightCol {
margin: 0px;
position: absolute;
top: 140px;
width:20%;
right: 0;
padding: 30px 10px 10px 10px;
}
#footer {
margin: 0 25% 0 5px;
padding: 0;
text-align:center;
font-size:small;
}

The XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>the title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
@import allTheStyleSheets.css;
-->
</style>
</head>
<body>

<!-- begin page header -->
<div id="header">
<?php include('./incHeader.php')?>
</div>
<!-- end page header -->

<!-- begin tab menu -->
<div id="tabMenu">
<?php include('./incNav.php')?>
</div>
<!-- end tab menu -->

<!-- begin main content -->
<div id="content">
<table summary="A summary.">
<caption> The Caption</caption>
<tr>
<th id="topic">Topic</th>
<th id="issue">Issue</th>
<th id="action">Action</th>
</tr>
<tr>
<td headers="topic"><h3>Heading</h3>
<p><a href="http://murphyzone.no-ip.com/GCCBFM/news/blog/index.php?p=10">Comment</a></p></td>
<td headers="issue">cell content</td>
<td headers="action">cell content</td>
</tr>
<tr>
<td headers="topic"><h3>Heading</h3></td>
<td headers="issue">cell content</td>
<td headers="action"> cell content</td>
</tr>
<tr>
<td headers="topic"><h3>Heading</h3></td>
<td headers="issue">cell content</td>
<td headers="action">cell content</td>
</tr>
<tr>
<td headers="topic">cell content</td>
<td headers="issue">cell content</td>
<td headers="action">cell content</td>
</tr>
<tr>
<td headers="topic"><h3>Heading</h3></td>
<td headers="issue">cell content</td>
<td headers="action"> cell content</td>
</tr>
<tr>
<td headers="topic"><h3>Heading</h3></td>
<td headers="issue">cell content</td>
<td headers="action"> cell content</td>
</tr>
<tr>
<td headers="topic"><h3>Heading</h3></td>
<td headers="issue">cell content</td>
<td headers="action"> cell content</td>
</tr>
<tr>
<td headers="topic"><h3>Heading</h3></td>
<td headers="issue">cell content</td>
<td headers="action">cell content</td>
</tr>
</table>
</div>
<!-- end main content -->

<!-- begin right column -->
<div id="rightCol">
the right column...
</div>
<!-- end right column -->

<!-- begin footer -->
<div id="footer">
<?php include('./incFooter.php')?>
</div>
<!-- end footer -->

</body>
</html>


Thanks again.

discovered whilst working on asp where i use '' for comments and tried to comment out a line in the css file the same way... this should technically work by breaking the whitespace and create an invalid rule but IE yet again responded differently...

Code:

	""item:attribute;
	''item:attribute;
	//item:attribute;

ignored by

opera 7.54
netscap 7.02
firefox 1.0.4

read by

IE 5.01
IE 5.5
IE 6.0

	"item:attribute;"
	'item:attribute;'

ignored by

all

read by

IE 5.01

interested to see how the mac browsers respond but it looks like a better IE5.0 inline filter than

Code:

_item /**/: /**/attribute;

!

Hey everyone,

I ran into an odd problem, I've implemented a workaround and got the desired result but I'm still confused as to why the proper solution didn't work.

Here is what I was trying to do.

I'm working on a web based application and the previous coders were ****, which is why they're all gone now, there are soo many bugs that require entire rewrites that we're just hacking them away piece by piece. Anyway, one thing they do is instead of going to the database whenever they need information, they cache all of the information in the ASP engine for the page that is being loaded. As you can imagine this results in some long load times. So they implemented a loading screen. Basically they loaded an iframe with an src of about:blank and within it they had a div and some tables with gif images. And we wanted to see the page that the loading screen was called from with a transparent png image making everything seeming to be greyed out using a transparent png. What I did was set the iframe(class="shimFrame") allowtransparency=true and set .shimFrame body tag style property background-color:transparent; Once that was done I gave the loading div which was 100% height and width to have the transparent image background. It worked, but behind the image I still saw the iframe white background. I remove the iframe and everything works as I expected but I don't know why the iframe allowtransparency=true didn't do what I wanted it to do. Maybe I misunderstood what it does, I figured it would let you see past the iframe background and see the page that the iframe was a part of.

Anyone have any ideas? I don't know if this should be in css or html since it could be something missing from either. Also the web app is currently only supported under IE but in version 2 it will be properly designed(there are no design docs for this app) and it will be browser independent, since some of the clients we're looking to get currently require firefox for some of their other software. I'm more or less trying to find the reason why the possible proprietary property didn't work as documented.

Hi,

I'm noticing a different behaviour between firefox and explorer regarding de margin attribute, and I can't explain it applying the well known box model difference.

Here is the css code:

Code:

div#main {
	margin: 10px auto 20px auto;
	width: 1001px;
	border: 1px solid #000000;
	}

div#left {
	float: left;
	width: 150px;
	}

div#content {
	width: 600px;
	margin-left: 160px;
	background-color:#0033CC;
	}

Here is the HTML:

Code:

<div id="main">
	<div id="left">left</div>
	<div id="content">content</div>
</div>

What I get in firefox is the expected, the content div is exactly at 160px distance of the inner part of the main div border.

However in explorer the distance is 163px?? According to the box model difference, if we consider that in explorer the width includes the border, the distance should be 161px but not 163px.

Any ideas?

Caste