CSS - Hovering Shifts Whole Page.

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 been dealing with this issue for a while now and I don't know if I just can't see it or maybe I just don't know what I'm doing.

In IE6, the div #primary is shifted almost off the screen to the left (or to the outside of the wrapper on the right), but on hover it shifts to the correct position. It works fine in FF2, FF3, safari 3.x and ie7.

I have tried so many things it would be too much to list. I've read about all kinds of IE hacks and tried most of them (holly hack, inline hack, hasLayout, etc) that I thought pertained to the issue. Maybe I didn't use them properly, i don't know at this point.

All of the code is a modified wordpress theme, sandbox, which i have customized for this particular layout.

I have left a black box around the affected div for testing purposes. If you look on the homepage you will see the div stuck off the left of the page (or right, i haven't been able to figure out what causes it to choose a side), as i have removed the links again for testing purposes. It will only shift if there are links or something to invoke the hover. Once the div has been redrawn in IE6 and moved to its correct position, it seems to stay where it should on subsequent pages.

I can provide the site for reference if needed.

thanks for any help at this point.

Code:

<div id="container">
		<div id="content-2">


			<div id="post-25" class="hentry p1 page publish author-admin category-uncategorized untagged y2008 m11 d10 h16">
				<h2 class="entry-title"></h2>
				<div class="entry-content">
<p>Life happens in the kitchen. That’s our belief, and we’re sticking to it.</p>
<p>For the past 35 years, Cooks has been the Twin Cities’ industry leader in all things culinary. We were the first cooking school to bring nationally recognized chefs and cookbook writers to the Twin Cities, the first retail store to incorporate cooking classes and the first specialty gourmet store to directly import culinary products.</p>
<p>And those won’t be our last firsts. We’re constantly growing, changing and challenging ourselves to bring the best products and experiences the food world has to offer to our customers.</p>



				</div>
			</div><!-- .post -->


		</div><!-- #content -->
	</div><!-- #container -->

	<div id="primary" class="sidebar">
		<ul class="xoxo">
		
			<li id="text-285739111" class="widget widget_text">						<div class="textwidget"><a href="/history" class="menuabout1">&nbsp;</a>
<a href="/passion" class="menuabout2">&nbsp;</a>
<a href="/community" class="menuabout3">&nbsp;</a>
<a href="/stuff" class="menuabout4">&nbsp;</a>
<a href="/employment" class="menuabout5">&nbsp;</a>
<a href="/donations" class="menuabout6">&nbsp;</a></div>
		
			</li>
		</ul>
	</div><!-- #primary .sidebar -->

	<div id="secondary" class="sidebar">
		<ul class="xoxo">
		
			<li id="text-273708591" class="widget widget_text">						<div class="textwidget"><ul id="aboutpanel">
 <li id="aboutbut1"><a href="/history"></a></li>
 <li id="aboutbut2"><a href="/community"></a></li>
 </ul>
<ul id="aboutpanelb">
<li id="aboutbut3"><a href="/passion"></a></li>
<li id="aboutbut4"><a href="/stuff"></a></li>
<ul></div>
		
			</li>
		</ul>
	</div><!-- #secondary .sidebar -->

here is the CSS, i use a separate ie6 css file, i have combined all CSS for easy viewing.

Code:

div#wrapper {
	width: 914px;
	margin: 12px auto 20px auto;
	padding: 0px;
}

* html div#primary {
	position:relative;
}


/*  CONTENT AND WIDGETS FORMATTING  */

div#container {
	float:left;
	width:914px;
}
 
div#content {               /* homepage template  USED BY HOME PAGE*/
	height:1%;
	margin-top: -18px;
	margin-right: 40px;
	margin-bottom: 0;
	margin-left: 200px;
}

div#content-2 {             /* secondary template  USED BY ABOUT PAGE */
	height:1%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	color: #333333;
	margin-top: 20px;
	margin-right: 380px;
	margin-bottom: 0;
	margin-left: 260px;
}

div#content-3 {             /* tertiary template */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	color: #333333;
	margin-top: 0;
	margin-right: 200px;
	margin-bottom: 0;
	margin-left: 200px;
}

div.sidebar {
	float:left;
	overflow:hidden;
}

div#primary {
	width:200px;
	margin-top: 18px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -98%;
}

div#secondary {
	width:315px;
	margin-top: 8px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -370px;
}

div.sidebar li {
	list-style:none;
	margin:0 0 2em;
}

div.sidebar li form {
	margin:0.2em 0 0;
	padding:0;
}

div.sidebar ul ul {
	margin:0 0 0 1em;
}

div.sidebar ul ul li {
	list-style:none;
	margin:0;
}

div.sidebar ul ul ul {
	margin:0 0 0 0.5em;
}

div.sidebar ul ul ul li {
	list-style:none;
}

div.sidebar div, div.sidebar ul {
	margin:0;
	padding:0;
}

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

I have the navigation set so that the background turns green on the current page. When you hover over the other links they turn green. However, I do not want the active link to change colors when it is hovered over. How do I stop this from happening?



http://brittanyrubinstein . com/fulcrum/index.html

We recently decided to alphabetize the Specialties on our web pages (using the .php files from the Includes folder).

I have re-alphabetized them in both the .php file as well as the default.css file including making the first image coincide with the alphabetized list. However, when I do, the original image (for Hospitality) remains as the default image and only changes when you finally hover over Hospitality or anything below it.

Here's the way part of the original file is set up:

/* Images */
div#specialties ul li a.hospitality span.img {
position: absolute;
top: 0;
right: 0;
width: 222px;
height: 190px;
background-image: url(../images/hospitality.jpg);
background-repeat: no-repeat;
z-index: 0;
}
div#specialties ul li a.hospitality:hover span.img {
position: absolute;
top: 0;
right: 0;
width: 222px;
height: 190px;
background-image: url(../images/hospitality.jpg);
background-repeat: no-repeat;
z-index: 0;
}

And here's what I changed it to:

/* Images */
div#specialties ul li a.apartments span.img {
position: absolute;
top: 0;
right: 0;
width: 222px;
height: 190px;
background-image: url(../images/apartments.jpg);
background-repeat: no-repeat;
z-index: 0;
}
div#specialties ul li a.apts:hover span.img {
position: absolute;
top: 0;
right: 0;
width: 222px;
height: 190px;
background-image: url(../images/apartments.jpg);
background-repeat: no-repeat;
z-index: 0;
}

Help! You can check out the current look at Connell Insurance dot com.
.

A thousand apologies -- this is a very poorly worded and general question, because I've learned through scavenging and don't know the jargon, and the answer might not even lie in CSS... but the problem is really driving me to distraction.

Is it possible in CSS to define a hover effect such that upon hovering over one element, a different element is affected? For example, I know you can add something like this:

#example a:hover{
color: #000000;
}

in order to change the color of any links in the example div upon hovering. But can you change properties of links in any other divs? If so, then how? And if not, then is there a different language which can effect this change?

Again, a thousand apologies for the amateurishness and outsider-wording of this question. I will be happy to clarify on request to the extent of my ability.

I just changed my website layout from just tables to CSS but theres a few problems, nested tables dont stop at the border of the containing table they hover over them, and one of the tables that was meant to be another column moved out of the table altogether heres the site before and after i edited it:

Before

After

I was told to divide it up like this
Code:

<body>
<div id="wrapper">
<div id="header">Header</div>
<div id="body">
<div id="nav">Nav</div>
<div id="content">Content</div>
</div>
<div id="footer">Footer</div>
</div>
</body>

Can anyone see what the problem is?

Hi all,

I am having an issue with IE7.
www[dot]novakwebsales[dot]com/help/index6.html

When you hover over the top category tabs, it shifts the footer up. Then if you hover over the subcategory tabs on the left it drops down again???

It works fine in Firefox...

Any ideas?

Thanks in advance,
Tbone

If anyone can help me with this, I will owe my life, because I'm in over my head with a project for my electronic media class and I'm not good enough with CSS.


I need to make divs appear when I hover over images. The images aren't links, just anchors. I have a long page with a ton of images, and I need divs (with tables inside) to appear when I hover over those images. Also, if possible.. I'd like the appearing divs to move relative to the browser, but if not, I'll settle for absolute.



It must be so simple, but I'm waaay too stressed to get this to work. :[

I was asked by one of my friends if this was possible, and I didn't think it was but figured I'd ask here just in case...

With image maps, you can have parts of an image link to different pages based on coordinates.... I wanted to know if there was a way to link to different pages based on colors on an image. Doesn't necessarily have to be done in CSS... just looking in general as to if this is possible, and what would be the best approach.

Thanks.

When hovering over a link, how can I make the underline thicker? Check out this site.

link