CSS - Right Floated Containing Div Behaving Differently Only In Firefox 2

I've been working some more on a new layout for one of my websites this weekend. However, I'm having trouble getting the layout to display the same in all browsers. Everything is looking exactly how I hoped in Firefox, but when the same page is viewed in Internet Explorer, some things appear rather differently.

Sample Page: http://www.mybb-emods.com/new/index.htm
CSS File: http://www.mybb-emods.com/new/stylesheet.css

Firstly, the background of the navigation bar at the top of the page should remain grey at all times apart from when a link is hovered, in which case it changes to blue. This is happening in both browsers, but in Internet explorer, only part of the background is changing as opposed to all of it. It's easier to show this than to explain, so I've posted two screenshots below to demonstrate. The first screenshot shows the navigation bar in Firefox, the second shows the same bar in Internet Explorer. I'm assuming this is probably something to do with the padding values I have assigned, but I have been unable to find a working solution for all browsers.

Also, I'm having a problem with the left margin of my main page content. The margins down the left side of the main page should all be 20px from the left hand border, and this shows correctly again in Firefox. However, in Internet Explorer, the left margin of the navigation bar appears correctly, but the content beneath it appears to have a much larger margin and as such the layout appears incorrectly.

If anyone has any idea how to fix these problems then I would very much appreciate the advice.

Thanks.

Well I'm pretty uneducated in CSS, I have just played around with it hours and hours and always figured out what I was trying to do. But right now I am stumped. Please view the following page in FireFox if you have it:
http://www.iqdrop.com/newiq/index.php
Then in IE

You see the Google ad is dropped way down in IE for some reason and overlaps my menu, and the <DIV> containing the word "index.php" is also taller in IE.

I'm not sure what is wrong and I've been trying all sorts of things with no luck. Thanks for any help.

i have a two div tags but the upermost tag sits outside the boundary of the one below

and the page seems to be over stretched in IE7

the page address is www.ftpimage.com

does anyone have any suggestions my css is as follows

Code:

body {
	margin: 0px;
	background: url(../img/top_bg.gif);
	background-repeat: repeat-x;
	font-family: Verdana, Arial, sans-serif;
    font-size: "15";
}

p {
	line-height: 50px;
	margin: 11px 0 10px 0;
	padding: 0px;
}

h2 {
	color: #9f9f9f;
	margin:0px;
	padding:0px;
	font-size: 15px;
}

ul {
	font-size: 10px;
	margin:0;
	padding:0;
	list-style-image: url(../img/bullet.gif);
}

a {
	color: #93B300;
}

a:hover {
	text-decoration: none;
}

blockquote{
	background: #F7FDE3;
	color: #606060;
	padding: 0px;
}


/**** Main Container ***/


#wrap {
       margin-left: 10px;
       margin-right: auto;
       width: 640px;
}


/**** Top ***/


#top {
	width: 155%;
	height:85px;
	color: #fff;
	background: #000 url(../img/top_bg.gif);
	overflow:hidden;
}

#top h2
{
    color: #87CEFA;
    letter-spacing: 3px;
    font-size: 2.4em;
    font-weight: normal;
    position: relative;
    margin: 0px;
    top: 33px;
    display: block;
    float: left;
    background: url(../img/bg_t.gif) no-repeat;
    padding-left: 8px;
}

#top h2 a {
	color: white;
	text-decoration: none;
}

#top h2 a:hover {
        color: #93B300;
}

#page
{
    margin-right: 20px;
    max-width: 10px
    
    
   
   
}


/**** Main Menu ***/


#menu {
	display: block;
	float:right;
}

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

#menu li {
	display: block;
	float: left;
	white-space: nowrap;
}

#menu li a {
	display: block;
	padding: 20px 10px 12px 20px;
	text-decoration: none;
	color: #fff;
	font-weight: bold;
}

* html #menu a {width:1%;}

#menu li a:hover {
	background: url(../img/bg_menu.gif);
}

#menu li a.current {
	letter-spacing: 1px;
	color: gray;
	background: url(../img/bg_menu.gif);
}

#menu li a.current:hover {
	color: #fff;
}


/**** Content Container ***/


#content {
	width: 65%;
	margin-top:30px; 
	border: solid 2px black;
	 
	
}

#content h2 {
	margin: 0;
	padding: 10px 0 10px 0;
}


/**** Content ***/


#left ul {
	padding: 15px 0 15px 35px;
	margin:0;
}

#left li {
	margin-bottom:5px;
}

#left .box {
	width: 390px;
	float:left;
	display: block;
       margin-left: 20px;
	display: inline;
}


/**** Sidebar ***/


#right {
	width: 315px; 
	float: right;
	display:block;
	margin-top: 10px;
}

#right .box {
	width: 20em;/*280px*/
	background: #87CEFA;
	border: 1px solid #E1E1E1;
	padding:10px 10px 55px 10px; 
	float: right;
	
}

#right .box h2 {
	font-size: 3.1em;
	margin: 0px 0 0px 0;
	padding:0px 0 5px 0;
}

#right .box a {
	margin: 10px 0 10px 0;
	color: #93B300;
	font-size: 20px;
}

#right .box p {
	margin: 5px 0 10px 0;
	line-height: 15px;
}

#right .box ul {
	padding: 0 0 0px 20px;
	margin:10px 0 10px 0;
}

#right .box li {
	margin-top:5px;
}

html>body .box
{
width: auto;
min-width: 20em;
}

#nav{ list-style: none; margin: 2.0em 0; width: 25em; float: right;}
#nav li{ padding: 0; margin: 0; }
#nav a{
	display: block;
	height: 2.0em;
	padding: 0.3em 0.3em 0.3em 0.8em;
	border:solid;
	border-width:medium;
	border-bottom: 2px; /*solid #1a1a1a*/
	border-top: 2px; /*solid #1a1a1a*/
	border-color:Black; 
	color: black;
	background-color: #87CEFA;
	font-weight: bold;
	text-decoration: none;
	font-size:medium 

	}

#nav a:hover{
	color: #1a1a1a;
	background: url(../img/bg_t.gif) no-repeat;
	background-color: #fff;
	font-weight: bold;
	}	

/**** Clear Div ***/


#clear {
	display: block;
	clear: both;
	width: 100%;
	height:1px;
	overflow:hidden;
}


/**** Footer ***/


#footer {
        margin: 40px auto 0 auto;
	text-align: center;
	border-top: dotted 1px gray;
	padding: 20px 0 20px 0;
	width: 70%;
}

#footer p {
	margin: 0px;
	padding: 0;
 

Code:

<?xml version="1.0" encoding="UTF-16"?>
<!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>Tableless structure</title>
    <style type="text/css">
    <!--
        * {
        font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
        width: 800px;
        height: 500px;
	margin-left: auto;
	margin-right: auto;
	}
	body {
	margin: 0px;
	padding: 0px;
	margin-top: 40px;
	}
	#head {
	background: LightGreen;
	width: 100%;
	height: 15%;
	}
	#menu {
	background: Pink;
	float: left;
	width: 20%;
	height: 80%;
	}
	#body {
	background: LightBlue;
	float: right;
	width: 80%;
	height: 80%;
	}
	#foot {
	background: Silver;
	clear: both;
	width: 100%;
	height: 5%;
	}
     -->
     </style>
  </head>
  <body>
    <div id="head">Header</div>
    <div id="menu">Menu</div>
    <div id="body">Body</div>
    <div id="foot">Footer</div>
  </body>
</html>

This code works fine on Firefox by centering horitzontally the page but in IE7 stays left aligned.

Can you help?

Thank you!

Running here

Hi,

I have an issue with Vertical menu contained in Re-sizable DIV. This menu appears differently in IE vs Firefox (Please refer attached Image)

http://img402.imageshack.us/img402/7830/resize.png

URL

Attached Image

Following is the Code for the Style class mentioned in the image

Code:

.cwc_navMenuLabel {
line-height:14px;
vertical-align:top;
white-space:nowrap;
}

.AccButton{
	float: right;
	align:right;
	text-align: right;
	position: relative;
	top: -1px;
	z-index: 10;
	width: 16px;
	margin:0 5px 0 0;	
}

/*USE THIS FOR IE*/

.AccLiIE {
	display: inline;
	background-color: #A2C2E4;
	background-image: url(../../images/acordion_backgr.png);
	background-repeat: repeat-x;
	border-top: 1px solid #7591AC;
	height: 19px;
	white-space: nowrap;	
}


/*USE THIS FOR NON-IE BROWSER*/

.AccLi {
	background-color: #A2C2E4;
	background-image: url(../../images/acordion_backgr.png);
	background-repeat: repeat-x;
	border-top: 1px solid #7591AC;
	white-space: nowrap;
}

Please let me know the change that i have to do in CSS to make the menu appear in IE the way it looks in Firefox.

Thanks and appreciate your help

The problem is that I have a wrapper div that will contain two "boxes", one that has a white background one that has a black background. I want the white background box to be to the left of the black background box, but inside the wrapper div which has a red background. It works just fine in IE (which surprised me) but Firefox is doing something really strange. The black background box starts all the way to the left of the wrapper with the white background box on top of it. Not only that, but the text for the black background box starts below the white background box.

I'm new to inserting code, but I'll give it a try:

Code:

<!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>linking to style sheets 2</title>

<style type="text/css">

body {
background-color: #ccccff;

}

h1 {
font: bold 20px arial, tahoma, verdana;
color: #6633ff;
border-bottom: 1px solid #444444;
margin: 25px 0;
padding: 5px;
}

p {
font: 15px verdana;
line-height: 1.5em;
color: #000077;
margin: 0;
padding: 0;
}

.leftbox {
width: 300px;
background-color: #ffffff;
padding: 10px;
margin: 10px 10px;
float: left;
}

.rightbox {
width: 300px;
padding: 10px;
margin: 10px 10px;
background-color: #000000;
}

.wrapper {
width: 800px;
background-color: #ff0000;
}

.end {
clear: both;
}

</style>

</head>

<body>

<div class="wrapper">

<div class="leftbox">

<h1>Heading 1</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 

Cras pede sem, lobortis tempus, sodales sed, vehicula vitae, 

lorem. Fusce nec massa id erat lobortis semper. Vestibulum 

dignissim orci et orci. Fusce quis tortor eu sapien gravida 

pretium. Sed vel lacus. Aliquam erat volutpat. Pellentesque 

suscipit imperdiet nibh. Vivamus ut turpis. In leo. Quisque 

augue. </p>

</div>

<div class="rightbox">

<h1>Heading 1</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 

Cras pede sem, lobortis tempus, sodales sed, vehicula vitae, 

lorem. Fusce nec massa id erat lobortis semper. Vestibulum 

dignissim orci et orci. Fusce quis tortor eu sapien gravida 

pretium. Sed vel lacus. Aliquam erat volutpat. Pellentesque 

suscipit imperdiet nibh. Vivamus ut turpis. In leo. Quisque 

augue. </p>

</div>

<div class="end"></div>

</div>


</body>

</html>

You'll see that I've floated the white background div, but again, this is making that div sit on top of the black background div. Can anybody help?

P.S. I know this isn't really pleasing to the eye, but it's just for demonstration purposes

Hi,

I've searched various threads in this forum, even tried re-iterating the question in another similar post to no avail. How is it that in Firefox (1.0) I get overflow occuring on a nested div, yet in IE (6) I do not?

i would like vertical scrollbars ONLY, if content is overflowing and not horizontal scrollbars-using a WC3 valid solution if possible.

Thanks in advance

A snippet of my css...
PHP Code:
/*css document*/
/* container div class*/
.outer{
    width: 336px;
    height: 448px;
    border-color: #000000;
    border-width: 1px;
    border-style: solid;
    float: left;
    margin: 0 0 0 10px;
    background-color: #ffffff;
    /*background:url("../images/pg_curl.gif") top right no-repeat;*/
}
/* inner-content div class*/
.inner
{
    width: 298px;
    height: 388px;
    
    border-color: #000000;
    border-width: 1px;
    
    /*margin: 34px 0 0 19px;*/
    margin: 2px 0px 0px 19px;
    font-size: 12px;
    /*line-height: 15px;*/
    color: #000000;
    clear: both;
    /*scrollbars for content overflow*/
    overflow:auto;
}

/* Example of problem: at the momment, in Firefox inserting this into the .inner classed div is creating horizonal overflow*/

.navigation {
    width: 298px;
}
.navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.navigation li {
    border-bottom: 1px solid #ED9F9F;
}
.navigation li a:link, .navigation li a:visited {
    display: block;
    padding: 2px 2px 2px 0.5em;
    border-left: 10px solid #711515;
    border-right: 1px solid #711515;
    background-color: #B51032;
    color: #FFFFFF;
    text-decoration: none;
}
.navigation li a:hover {
    background-color: #711515;
    color: #FFFFFF;
}
.navigation ul ul {
    margin-left: 12px;
}
.navigation ul ul li {
    border-bottom: 1px solid #711515;
    margin:0;
}
.navigation ul ul a:link, .navigation ul ul a:visited {
    background-color: #ED9F9F;

    color: #711515;
}
.navigation ul ul a:hover {
    background-color: #711515;
    color: #FFFFFF;
} 

You'll have to bear with me on the CSS, the file is a mess. I couldn't get it to do what I want, so I had to copy the file from someplace else, so there's alot of code commented out.
The HTML is much cleaner though!



The issue is in the image above is that the 'Contact' and 'Back to Projects' images are too high in Safari. In IE and Firefox they're placed correctly.
All the other images on the rest of the site line up fine, as you can see with the JW logo, Resume link, and even the bar across the screen

All the images are in their own < li > (I think it's weird myself, but it works). And the placement is done in the CSS.

Code:

<li id="ResumeHigh"><a href="resume.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('resume','','images/resume_rollover.gif',1)"><img src="images/resume.gif" name="resume" border="0"  id="about" /></a></li>

<li id="ContactHigh"><a href="contact.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contact_rollover.gif',1)"><img src="images/contact.gif" name="contact2" border="0" id="contact2" /></a></li>

<li id="BackHigh"><a href="index.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Back','','images/back_to_proj_rollover.gif',1)"><img src="images/back_to_proj.gif" name="Back" width="141" height="9" border="0" id="Back" /></a></li>

And the CSS Alignment:
Code:

#ResumeHigh {left:550px; top: 62px; width: 141px; height: 11px;}
#ContactHigh {left:550px; top: 78px; width: 141px; height: 11px;}
#BackHigh {left: 550px; top: 101px; width:141px; height:9px;}

Full Pages:
http://www.jerrywatersarchitect.com/sample/contact.asp
http://www.jerrywatersarchitect.com/sample/jw2.css


Any ideas whats causing the 'Contact' and 'Back to Projects' to be a few pixels too high?
I appreciate any help you can provide.

Hi everyone

A bit of a call for help with some niggly issues - all found on the following page and css:

http://www.crashingbydesign.com.au/rsaa/index.html
http://www.crashingbydesign.com.au/rsaa/home.css

1. Two of the absolutely positioned divs don't show up at all in IE6, but they're fine in Opera 7.5 and Firefox 1.0PR. The ones with id's "title" and "utility" are the problem ones and I can't see what the problem is with IE. In addition to this, this div shows up in a different position in both Opera and Firefox (10 pixels higher in Opera). Please help!!

2. The links in the "mainnav" div are only clickable either at the very top of the <a> element (Firefox) or the very bottom of the <a> element (Opera), however in IE the whole <a> element is completely clickable. I can't see any element that is overlapping. What is going on??

All help appreciated.

Cheers

Bevester

The link to my page is:
crowncontainer.com/dev/activity_test.php

you'll have to post the www. in front, i'm a new user and can't post URL????

I have validated both the CSS and the XHTML.


If you open in IE, the width starts out at 200px, which is what I've defined in CSS. If you open it in Firefox, it is wider and I don't know why?

Also - when you click on the submit button, the program will return data in an AJAX call and the data will load in a div directly underneath the form. When the data is returned in IE, the width of the left nav will increase to the same width that displays in Firefox.

Because of this, I have to believe that there is some buggy code that causes it to 'sort of' work in IE but not in Firefox?

Can someone take a stab at this and help me? I want to keep my left nav width to 200px;

In Firefox, I've got a right div that is not repsonding to an auto width in FF.

I am not a pro a CSS (yet ) and I hope that someone can give me the one line solution that I am missing.

I've included a screen shot of the problem, any help is greatly appreciated.

- K

CSS Code
Code:

#MainContainer
{
	float: 	left;
	width: 	auto; 
}

#Main
{
	margin-right: 0.2em;
}

#MainContent
{
	padding: 0.5em 0.5em 0.5em 0.5em;
}


#SidebarContainer
{
	float: 	right;
	width: 	250px;
	 	
border-top: 1px solid #C0C0C0;
	padding-top: 5px;
	clear: right;

}

#Sidebar
{	
	padding-bottom:	    5px;
	background:     	#ADADAD;
	background-image:   url(../images/SidebarBackground.jpg);
	background-repeat:  no-repeat;
	clear:left;
}

#SidebarContent
{
	margin: 0.2em 0.2em 0.2em 0.2em;
}

Anyone know how to fix the bottom bars width?
Page he
http://www.milztech.net/

Cheers!

I am almost finished with a site, but the buttons in the main navigation are behaving badly; when you put the mouse over them (only in IE of course..) they only activate when you are about 10 pixels away from the top of the page.

Link-
http://www.hamlettinstruments.com/beta/

can someone help me figure out why this is?
Thanks, ad

Ok ive got this small concept i need to work in order for me to implement it on the actual website.

this code works 100% correct to how i want it to in FireFox.

I have an image within a table TD tag , but i need the image to float outside the tables borders, i can do this with the margin-right: -20px;
In firefox i can still see the full image been displayed, but in IE the image falls behind the table limits and then does not display any more.

Please help me sort this one out.

Code:

<html>
<head>
	<title>Untitled</title>
    <style>
    .test {
        margin-right: -30px;
        float: right;
	    z-index: 2;
    }
    .table{
        z-index: 10;
    }
    </style>
</head>
<body>
<table align="center" width="300" border="1" class="table">
<tr>
	<td>&nbsp;</td>
	<td><img class="test" src="http://nexxon.galore.co.za/images/stories/animated_slidshow_02gif.gif" /></td>
</tr>
</table>
</body>
</html>

I have a new layout I'm currently working on. It's got a container with 2 columns, one floated left and one floated right.

Inside the left column (lcol) I have a series of content areas making up two columns.

Floated left and on the upper left is a flash video. Below that and also floated left is a table of contents list.

On the right side of lcol, my intent is to add a news list and an events list. I have the news list floated right with the left floats cleared.

My issue is that the news list is pushing way to the bottom of the screen even though my width is not larger than the available width for that column.

In IE6, the list is behaving as expected, but not in FF which I always do my primary testing in, so that's what led me to believe something is wrong.

Here is my code (remember the site is in its initial development) I've also attached a screenshot of the appearance in FF.

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Orion Main</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
			var flashvars = {};
			var params = {};
			params.play = "true";
			params.loop = "false";
			params.menu = "true";
			params.quality = "high";
			params.scale = "showall";
			params.wmode = "window";
			params.devicefont = "false";
			params.allowfullscreen = "false";
			params.allowscriptaccess = "sameDomain";
			var attributes = {};
			swfobject.embedSWF("orion_intro_video.swf", "intro", "320", "310", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
</head>
<body>
  <div id="logo"><img src="images/orion_logo.jpg" alt="Orion Logo" title="Orion Home" width="154" height="100"/></div>
  <div id="container">
  <div id="lcol">
    <div id="intro">
        Your browser cannot display FLASH, please follow the link below to install it.<br/>
        <a href="http://www.adobe.com/go/getflashplayer">
            <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
        </a>
    </div>
    <ul id="nav">
      <li><a href="#">Thought Leaders</a></li>
      <li><a href="#">Success Stories</a></li>
      <li><a href="#">Validation</a></li>
      <li><a href="#">Strategic Partners</a></li>
      <li><a href="#">Environmental Stewardship Award</a></li>
      <li><a href="#">Newsletter</a></li>
      <li><a href="#">Energy Solutions</a></li>
      <li>
        <a href="#">Media</a>
        <ul>
          <li><a href="#">News Releases</a></li>
          <li><a href="#">Media Kit</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </li>
      <li><a href="#">Investor Relations</a></li>
      <li><a href="#">Partners for Profits™</a></li>
      <li><a href="#">Agricultural Division</a></li>
      <li><a href="#">Orion Asset Management</a></li>
    </ul>
    <ul id="latest_news">
      <li><a href="#">News Item #1</li>
      <li><a href="#">News Item #1</li>
      <li><a href="#">News Item #1</li>
      <li><a href="#">News Item #1</li>
      <li><a href="#">News Item #1</li>
    </ul>
    <ul id="events">
      <li><a href="#">Event #1</li>
      <li><a href="#">Event #1</li>
      <li><a href="#">Event #1</li>
      <li><a href="#">Event #1</li>
      <li><a href="#">Event #1</li>
    </ul>
    </div><!-- end lcol -->
    <div id="rcol">
    
    </div><!-- end rcol -->
  </div>
</body>
</html>

CSS

Code:

@charset "utf-8";
/* CSS Document */
body {
  font-family: Verdana, Geneva, sans-serif;
  margin: 15px auto 0;
  padding: 0;
  text-align: center;
  background: url('../images/body_back.jpg') repeat-x #373737;
}

#logo {
  width: 960px;
  height: 100px;
  margin: 0 auto;
  text-align: left;
  background: url('../images/header_back.gif') repeat-x #b4de5a;
}

#container {
  width: 940px;
  margin: 0 auto;
  height: auto;
  text-align: center;
  background-color: #FFFFFF;
  clear: left;
  padding: 0px 10px 10px 10px;
  overflow: auto;
}

#lcol {
  float: left;
  width: 626px;
  height: auto;
  overflow: auto;
  text-align: left;
}

#intro {
 text-align: left;	
 float: left;
 width: 320px;
 height: 310px;
 background-color: red;
}

#nav {
  clear: left;
  width: 320px;
  height: auto;
  list-style-type: none;
  text-align: left;
  padding: 0;
  margin: 0;
  float: left;
}

#latest_news {
  background-color: green;
  height: auto;
  width: 250px;
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: left;
  float: right;
  clear: left;
}

#events {
  clear: right;
  float: right;
  width: 250px;
  height: auto;
  background-color: yellow;
  list-style-type: none;
  
}

#rcol {
  float: right;
  width: 303px;
  height: 500px;
}