It Shifts Up For Firefox

I have validated my site in the w3c site. I am checking it on different browsers. For IE, my site appears the way i want it to but when i test on Firefox version 2.0. One of my divs shift upwards for some reason: Here is the CSS concerned:

Firefox Shifts The Div Tag Completely

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?

Container Works In Firefox, Broken In Ie

I am having a problem displaying text under images in IE, it looks fine on FF though.
In IE the text runs down the side of the images and looks really bad. Can someone tell me why it does not display properly in IE?

Here is an example page
product_info.php?products_id=209
And this is the stylesheet
stylesheet.css

Any help would be much appreciated.

Thanks
Peter
PS. Looks like I am not allowed to post links yet, I can send them to you if you like?

Css Div Container's Dimensions Are Behaving Different In Ie From Firefox/safari

Link for html page is www.sential.co.uk/releases.html (this is my example page, but it's the same problem with all pages.)

Now, apart from the fact they're different colors (which is a little strange), the positioning of the border images in IE is different than Safari/Firefox. I've tried playing with the code and positioning over and over with no luck. If I change one to look right, basically, the other ends up looking wrong.

I have 4 corner images and 4 repeating borders. They're all positioned using css in my style sheet, in the format of, basically:
Code:

Now the problems in the pictures a
#1: the left and right borders don't repeat down,
#2: the right edge border+corners seem to be out 17px (the width of the border). Although don't think you can simply specify the right border to be inwards 17px because if you do that, in Safari/Firefox, the background blue color overflows 17px outwards (because it's currently underneath that right border. Although, apparently not in IE.)

If any of you guys can offer any help, suggestions, or maybe even a fix, that would be awesome and very appreciated.

Heading Container Not Sticking To Top Of Its Container

Have a simple container div containing two other divs, top and content.

My problem is that I can't get the colorboxtop to stick to the top of its container. There's a wayward space. Can't find any stray margins or padding hanging around. Perhaps fresh eyes can see what I cannot. Please let me know.

Ie6 Float Div Shifts On Hover

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.

List Shifts In Ie6 On Hover

When I view it in IE6 it is shifted to the left several pixels. Upon hovering over it, it shifts to where it belongs. I've done some search both here and on google and just can't find an answer. Fortunately it doesn't seem to do this in IE7, but I still like my pages to work in IE6. Any insight greatly appreciated.

Hovering Shifts Whole Page.

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?

List Item Shifts In Ie Arrrrrgh

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:

Menu On Left Shifts Content To Right

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.

Changing Css Display Shifts Content Down

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?

Containing A Container

I am a new user to the board and apparently cannot make posts containing URL's. Examples illustrating my issues described below are at

...lilinks.com

/gp/css_prob/kickboxing.html

I want to get the vertical scrolling images to consistently display from the top of the page and terminate at the top of the black footer. Similar image scrollers will appear on other pages that will be of varying depth (follow the 'Brazilian Jiu Jitsu' link for an example)

Right now I have one 'container' that would be used for all the pages. I could create separate 'containers' for each scroller and set the height in pixels, but of course I cannot control browser settings, OS, etc.

So my basic question is how can I contain the 'container' to 100% of the main content area without exceeding it. I want it to look like this:

Container

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My page </title>
<style type="text/css">
#content { width: 100%; float: left; margin-right: -1px }
.content_container { clear: both; }
.content_header_even, .content_header_odd { width: 100%; background-color: #69bfde; color: #595441; padding: 0.5em 0; text-indent: 1em; }
.content_header_odd { background-color: #b4e8fb; }
.content_graph_container { padding: 1em; }
.content_graph_container_even { background: #ff0000; }
.content_graph_container_odd { background: #00ff00; }
.content_info { width: 20em; float: left; }
</style>
</head>
<body>
<div id="content">
<div class="content_container">
<p class="content_header_even">Header</p>
<div class="content_graph_container content_graph_container_even">
<div class="content_info">
<p>This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. </p>
</div>
</div>
</div>
</div>
</body>
</html>

Ideally, this will repeat and alternate colors but the text is not colored only a small section above the text. I thought that by enclosing it in the div, the background would be applied to the entire text. What am I doing incorrectly?