CSS - Ie6 Float Div Shifts On Hover

I'm not sure if this is an HTML problem or a CSS problem, but since it seems to be a display issue, I'll start here.

I have an annoying minor display issue on my site , the solution to which has alluded me for some time. The pop up menues are created using CSS specificity but I'm thinking that has no bearing on the issue because the menues aren't the only place the problem occurs.

In a number of places, I have implemented mouseover effects using the :hover pseudo-(class/element). In instances where the hovered content requires more screen space (to add a border or text decoration, etc) the whole page gets shifted a pixel or two (however much it takes to add the effect).

I've tried adding transparent borders around the static images and increasing line height around text, but to no avail. Any suggestions?

i have a site that if the page isn't cached, some of the content starts like, at the top of the page and then shifts in to it's positioned place. why does this happen? how can i stop it?

http://loganagency.com/temp/index.php

Please click there and view in IE and then in Firefox. The div is completely shifted upward and the baber overlaps the text in FF but looks fine in IE.

What is wrong and how can I avoid this in the future?

While we are on the subject, what gives with IE vs FF web design? Everyone posts errors here. Is there a tutorial or post that describes the reasons they process code so differently and ways to prevent it?

Hi, I am fairly new to CSS and learning but came across something. When I click on links to go to other parts of my site, the container on 2 pages only shifts a little.

I even used the template I created for the index for the other pages and the CSS is the same.

I notice this happening on Firefox. IE 6/7 the page looks fine.

Any reason for this? Thanks

Code:

#container{
margin-top: 0px;
margin-right: 
auto;margin-bottom: 0px; 	
margin-left: 
auto;width: 760px;background-color:#ffffff;
border: 1px solid #6785b3;
font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;
color: #666666;	
height: 950px;
}

i have a div tag absolutely positioned and inside that tag i ONLY have an image.

so if place it in some code like this:

Code:

<tr><td><div id="thetag"><img src="asdf.gif" width="10" height="20"></div></td></tr>

and following that right away, if i have another table row with whatever in it:

Code:

<tr><td>asdf</td></tr>

then what happens is that second row gets shifted up and gets put in place under the first row, making the image overlap the 'asdf'.

if i put at least one char after the image in the div, its fine and the second row will follow under the image on a new line like it should, but i dont want any text in there.

any ideas?

thanks

Of course, IE is being a P.I.T.A. I can't figure out why this is happening... but it's probably something so simple I'm overlooking it.
I have a set of images and/or links set up as a list and the last item on the first row shifts down. After that row, everything looks fine. No problems on FF, Chrome and Safari (Mac). See this page for example and view with Explorer:

www[dot]cameronstevens[dot]ca/gallery[dot]html

Thanks

Hi All,

Hopefully I'm asking this in the right place-- this may be more of a CSS/HTML question.

I currently have a DIV at the top of my webpage, with it's style as "none."

[code]
<div id='confirm' style="Display:none;"><p>Item Has Been Updated</p></div>
Anyway, I have a little function that changes the display to "block" when an action occurs with database. Doing so, it display the DIV fine. However, it moves the "entire" page (meaning the rest of my DIVS) downward.

This is kind of an eyesore when everything moves like that.

Besides moving the DIV to the bottom of the page, how would I achieve displaying the DIV at the top without shifting the rest of the content downward?

Thanks very much.

I'm having a few problems with my CSS design which I can't seem to solve right now, despite lots of searching and code editing.

I'm trying to do a simple design with two columns - a left menu and the main content on the right. It should be a simple page I think.

It's probably easier to see an example of the page I'm talking about:

http://edwin.netbits.co.uk/devshed/...blem/index.html

In Firefox, it looks fine. But in IE 6 the line "Some text" is slightly more to the right than the line "and some more text". If you select the text on the right, it's slightly more obvious (see screenshot).

It seems that the menu on the left is somehow shifting the text over. I have looked at tutorials (such as this one), but the test page I put together has the same problem.

I think this is probably a simple problem, but I can't work out what's wrong. The HTML and CSS code is shown below.

HTML:
Code:

<div id="contentscontainer">
  <div id="left">
    Menu
  </div>
  <div id="contents">
    Some text<br /><br />and some more text
  </div>
</div>

CSS:
Code:

div#contentscontainer
{
	padding: 0px;
	margin: 0px;
}
div#left
{
	float: left;
	width: 50px;
	padding: 0px;
	margin: 0px;
}
div#contents
{
	padding: 0px;
	margin-left: 170px;
}

Thanks,
Edwin

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 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 have a drop down menu located at http://www.fieldspianos.com/new/index.php

If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below.

This is the basic layout of the menu:
Code:

<ul>
<li>About Us</li>
     <ul>
         <li><a href="#">Locations</a></li>

etc..etc..etc..


Here is the css:
Code:

/*Begin Content of drop down menu*/
a {
	outline:none;
}

* html div#dropdownmenu ul {
	float: left;
}

* {
	margin: 0;
	padding: 0;
}

div#dropdownmenu {
	float: left;
	background-color: #C8C6C6;
		font-size:11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

div#dropdownmenu ul li {
	list-style-type: none;
	float: left;
	background-color: #000000;
	position: relative;
}

div#dropdownmenu ul li:hover {
	list-style-type: none;
	background-color: #000000;
}


/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
	display: none;
}

body div#dropdownmenu ul li:hover ul {
	display: block;
}



div#dropdownmenu ul li ul {
	margin: 0;
	width: 13em;
	position: absolute;
	left: -1px;
}

div#dropdownmenu ul li ul li {
	width: 100%;
	background-color:#bdb35e;
	color: #660000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 3px;
}

div#dropdownmenu ul li ul li:first-child {
	border-top: 1px solid #000;
}

div#dropdownmenu ul li ul li:hover {
	color: #FFFFFF;
	background-color: #000000;
}

div#dropdownmenu ul li ul li a {
	color: #660000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li ul li a:hover {
	color: #FFFFFF;
	background-color: #000000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
	display: block;
}

Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks!

can anyone tell me where I am going wrong? I am trying to float just a side column and a main together, but no matter what I try I cannot get the main to go up next to the sidebar. It works if I put the sidebar to the left, but not the right. I cleared 'both' after the main window, supposedly to make them float together in a container, but nothing I do works.
test site at mycomputerpro dot com dot au
thanks
Wayne

I almost feel guilty about posting this question, as it has probably been answered in some form before and i just need to figure it out myself, but this is giving me some difficulty. My page displays just how I want it right now to display in Firefox. However, in IE6, it does not display correctly. The XHTML and CSS are both validated and it works perfectly in the more "standard-compliant" browser. But I'm sure there is a way to get this to work in IE as well.

the site is fusiondesign.awardspace.com (new user policy will not let me use links )

the relevant XHTML:
Code:

<div id="container">

<div id="nav">
<a href="#" onclick="changeTab('Home','hcontent');" id="Home">Home</a>
<a href="#" onclick="changeTab('About','acontent');" id="About">About</a>
<a href="#" onclick="changeTab('Services','scontent');" id="Services">Services</a>
<a href="#" onclick="changeTab('Order','ocontent');" id="Order">Order</a>
<a href="#" onclick="changeTab('Contact','ccontent');" id="Contact">Contact</a>
<a href="#" onclick="changeTab('Links','lcontent');" id="Links">Links</a>
</div>

<div id="content">
<noscript>
I noticed you have Javascript disabled. This site will not work correctly unless you have Javascript enabled. Please enable Javascript now.
</noscript>
</div>

...

</div>

and the relevant CSS:
Code:

div#container {
	position:absolute;
	left:50%;
	top:50%;
	width:760px;
	height:332px;
	margin-left:-380px;
	margin-top:-186px;
	border:#FFFFFF 1px solid;
	}
	
div#nav {
	float:left;
	width:170px;
	padding:0;
	}
div#content {
	text-align:justify;
	width:558px;
	padding:1em;
	color:#000000;
	height:300px;
	overflow:auto;
	/*border:#FFFFFF 1px solid;*/
	}

Any direct help or a link to a solution would be greatly appreciated

My home page at mypricesavings.com

I would like to have the twitter banner under the headline to be in its own div. if you look at my style.css I have this code

Code:

#twitter {
	width:590px;
        float:left;        
        background:#fff;
	padding:10px;
	font-size:1.05em;
	line-height:1.5em;
	margin: 10px 0;
	}

Which in fact does what I need it to do when I then add the div to the index.php

however, the store deals and matchups which is the featured div no longer floats to the right of the headline, it will drop all the way down and float next to the twitter.

I do not understand how CSS exactly works and would like to know how to make the twitter be the way I would like it and have the featured work corectly too.

thank you in advance for helping

Derrick