CSS - Div Width Problem In Firefox

The template I am working on is a simple HTML page that I want to modify to work in Joomla.
However the look of the site is not quite the same in Firefox (where it looks good) and IE8 where one part of it I could not make right for two days. The left sidebar is shorter and the content right side is shorter and not aligned. I am aware that is something small but I could not get it right.

Please help. The URL is:

compasstgdotcom/~orak

the css in questions is: base.css

Thank you all

I use this in IE:

<span style="width:22"></span>

as a blank spacer. The 22 is actually calculated so it varies. Of course it does not work in Firefox. I get no spacing at all.

What is the acceptable cross browser method of doing this?

Thanks in advance.

The main body text in IE stays within the width I gave it, but in Firefox, it just goes off the div, its all not showing becasue I have the containing div overflow:hidden, but why won't it stay in the fixed width div, 603px, in Firefox like it does in IE?

mediacontour.com/TCS/frequently-asked-questions.php

I'm trying to get my submenu lists to be the same width between IE and Firefox, but they aren't equal for some reason.

I'm setting the width to 8em, but it's displaying differently between the two browsers.

Here's a link to the page

Here is my css:
Code:

/*Set all elements to start out with margin:0 and padding:0*/
* {
  margin:0;
	padding:0;
}
body{
	font-family: arial,verdana,sans-serif;
	font-size: 100%;
	height:100%;
	background-color:white;
	color:black;
	behavior:url("./css/csshover.htc");
}
/* Needed to clearfix to clear out floats*/
* html .clearfix{
  height:1%;
}
/* This class is used to clear out floats properly*/
.clearfix{
  display:inline;
}
/* same as above */
.clearfix:after{
  content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
img{
	text-decoration:none;
	border:0;
}
/*Tile Bar Container*/
#titleMenu{
  position:absolute;
	height:13%;
	width:100%;
	border-bottom:1px solid #003366;
	z-index:1002;
}
#titleMenu h3{
  position:relative;
	float:left;
	margin:15px 0 0 15px;
	font-size:1.50em;
	font-style:italic;
	font-family:arial,sans-serif;
	letter-spacing:1.5px;
	word-spacing:2px;
	color:#333366;
}
/* Main Menu of image categories*/
#titleMenu ul{
  position:relative;
  margin-right:60px;
	margin-top:6px;
	z-index:1003;
}
#titleMenu li{
	position:relative;
	list-style-type:none;
	float:right;
  padding:0 35px 0 0;
	margin:0;
	z-index:1099;
}
/* Sub menu*/
#titleMenu ul li ul{
  position:absolute;
	margin:0;
	top:70px;
	left:-1px;
	width:8em;
	z-index:1000;
}
#titleMenu ul li ul li{
  width:100%;
	letter-spacing:1px;
	padding:0;
	border-left:1px solid #BBBBBB;
	border-right:1px solid #BBBBBB;
	border-bottom:1px solid #BBBBBB;
	background-color:#EEEEEE;
	z-index:1001;
}
#titleMenu ul li ul li ul{
  position:absolute;
	margin:0;
	top:-1px;
	left:8em;
	visibility:hidden;;
}
#titleMenu ul li ul li:hover{
  background-color:#FFFFFF;
}
/* Sets the first element of ul li ul li ONLY*/
.titleMenuFirstItem{
	border-top:1px solid #BBBBBB;
}
/* Style the links in the sub menu's*/
#titleMenu a{
  display:block;
	width:100%;
	font-size:.55em;
	text-decoration:none;
	color:#003366;
	padding:1px 6px;
 }
#titleMenu a:hover{
  /*none*/
}
/* Rollover functionality for dropdown menus*/
#titleMenu ul li ul{
	display:none;
}
#titleMenu ul li:hover ul{
  display:block;
}
/* Rollover functionality for popout menus*/
#titleMenu ul li ul li:hover ul{
  visibility:visible;
}
/* iFrame Container holding the iFrame*/
#iFrameContainer{
  position:absolute;
	padding:1px 0;
	top: 15%;
	height:78%;
	width:100%;
	border-top:1px solid #BBBBBB;
	border-bottom:1px solid #BBBBBB;
}
/* Container holding the footer */
#footer{
  position:absolute;
	width:100%;
	height:4%;
	bottom:0;
	border-top:1px solid #003366;
	background-color:#EEEEEE;
	font-size:.65em;
}
#footer ul{
  padding-right:5px;
}
#footer ul li{
 	list-style-type:none;
	padding:5px 20px 5px 0;
	float:right;
}
#footer a{
  text-decoration:none;
	color:#003366;
	letter-spacing:1px;
}
#footer a:hover{
	border-bottom:1px solid #003366;
}

The problem I have has arisen whilst trying to create a horizontal and a vertical navigation menu using <li> tags. It is best illustrated by the following example:
Code:

<div style="width:100%;height:50px;">
<ul>
<li style="border:1px solid black;">Hello</li>
<li>World</li>
</ul>
</div>
<br />
<div style="width:100px;height:100%;">
<ul>
<li style="border:1px solid black;">Hello</li>
<li>World</li>
</ul>
</div>

and the CSS
Code:

div {
  border:0;
  background-color:#888888;
  }
ul {
  margin:0;padding:0;
  }
ul li {
  float:left;
  list-style:none;
  background-color:#CCCCCC;
  height:50px;
  width:100px;
  }

The <div> tags are set to 50px height and 100px width respectively. When an <li> element is placed within the div with the same height or width they display the way I intended. However once a 1px border is applied to the <li>'s then in IE the border is counted as part of the width or height. In Firefox the border will add 2px to the starting height and width giving the effect of width:102px or height:52px;.

This is massively frustrating as I need each <li> to have the 1px border. It looks different in each browser (I have not tested it in netscape nor opera, but I suspect they will display the same as Firefox.)

Can anyone provide a fix to get get round this please? Thank you in advance.

Please delete...

Hi, can anybody help me stretch green buttons for Firefox just like they appear in IE? I'd greatly appreciate the help.

Please see the attached html.

Hello all.

This is a problem I am encountering on many placing:
when I put a width to an certain object (let's say 20px), and I want the text in the object to start and pixel 4px, I can use padding-left:4px;

This is no problem in Internet explorer, but Firefox seems to make this object 4px wider. Instead of keeping the object 20 pixels, it becomes 24 pixels.

Does anybody know how to get of this bug in Firefox?

Hi all,

I'm trying to create a simple menu with rollover links using CSS, but while it works in IE, it stops as soon as the link text ends in Firefox. Is this because Friefox is ignoring the width and heigh commands in CSS? And is there any way to fix this? If so, how?

I've got this working on Firefox

Code:

	.menu_item {
	}
	.menu_item a:link{
	width: 163px;
	height: 21px;
	padding-top: 4px;
	padding-left: 20px;
	background-image: url(menu_rollover_0.gif);
	background-repeat: no-repeat;
	color: #6A7182; 
	text-decoration: none;
	}
	.menu_item a:active{
	width: 163px;
	height: 21px;
	padding-top: 4px;
	padding-left: 20px;
	background-image: url(menu_rollover_0.gif);
	background-repeat: no-repeat;
	color: #6A7182; 
	text-decoration: none;
	}
	.menu_item a:visited{
	width: 163px;
	height: 21px;
	padding-top: 4px;
	padding-left: 20px;
	background-image: url(menu_rollover_0.gif);
	background-repeat: no-repeat;
	color: #6A7182; 
	text-decoration: none;
	}
	.menu_item a:hover{
	width: 163px;
	height: 21px;
	padding-top: 4px;
	padding-left: 20px;
	background-image: url(menu_rollover_1.gif);
	background-repeat: no-repeat;
	color: #ED1C2D;
	text-decoration: none;
	}

Cheers.

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;
} 

So I'm having what I think are CSS issues with a site...

I'm supposedly a "new user" though I've been registered for a long time, and just not used this account in a long time, so I can't show my URL's here... tried to abbreviate them... I'm not sure how to show you what the issues are if I'm not allowed to post URLs. Anyone with any suggestions there?

This looks fine in IE, but not in Firefox.

On (blocked) the main content that sits in the middle of the page sits in an 800px div called "page".

I've set the background color for that to be white: FFFFFF, which Internet Explorer seems to understand. But Firefox seems to be leaving "page" to be transparent. This means that either the left div (content) or the right div (reef-job) ends when the content inside of it ends, rather than continuing down to the bottom of the "page" content.

I'm not sure how to fix it for Firefox.

Again, it's all the pages inside of (carrieandjonathan [dot] com /island-reef-job) and the stylesheet is at (carrieandjonathan [dot] com / island-reef-job / mt-island-reef-job.css)

#page {
width: 800px;
margin: 0 auto;
padding: 0px 0;
background-color:#ffffff;
}

Any help is greatly appreciated.

Thank-you in advance!

Warmest,
Jonathan

Hi,

Hopefully someone can help with this little problem.

I've got a JavaScript menu ...

// JavaScript start.

document.write("<table cellpadding='0' cellspacing='0' border='1' bordercolor='#999999' bgcolor='f5f5f5' width='100%'>");
document.write("<TR><TD class='MenuBackground'>");

if (MenuOption == "Body Lotion")
{
document.write("<a class='MenuOn' href='http://www.natureshedgerow.com/bodylotion.html'>****Body Lotion</a>");
}
else
{
document.write("<a class='MenuOff' href='http://www.natureshedgerow.com/bodylotion.html'>****Body Lotion</a>");
}

document.write("</TD></TR><TR><TD class='MenuBackground'>");

if (MenuOption == "Shower Gel")
{
document.write("<a class='MenuOn' href='http://www.natureshedgerow.com/showergel.html'>****Shower Gel</a>");
}
else
{
document.write("<a class='MenuOff' href='http://www.natureshedgerow.com/showergel.html'>****Shower Gel</a>");
}

document.write("</TD></TR><TR><TD class='MenuBackground'>");

if (MenuOption == "Soaps")
{
document.write("<a class='MenuOn' href='http://www.natureshedgerow.com/soaps.cgi'>****Soaps</a>");
}
else
{
document.write("<a class='MenuOff' href='http://www.natureshedgerow.com/soaps.cgi'>****Soaps</a>");
}

// Menu Bottom.
document.write("</TD></TR></table></td></tr></table>");

// JavaScript end.


...and associated CSS file...

// css start.


.MenuBackground
{
WIDTH: 110px; BACKGROUND: #f5f5f5; margin: 0; padding: 0;
}

a.MenuOn:link
{
FONT-SIZE: 11px; color: #ffffff; FONT-WEIGHT: bold; FONT-STYLE: italic; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #b4b4b4; WIDTH: 100%; HEIGHT: 100%
}

a.MenuOn:visited
{
FONT-SIZE: 11px; color: #ffffff; FONT-WEIGHT: bold; FONT-STYLE: italic; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #b4b4b4; WIDTH: 100%; HEIGHT: 100%
}

a.MenuOn:active
{
FONT-SIZE: 11px; color: #ffffff; FONT-WEIGHT: bold; FONT-STYLE: italic; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #b4b4b4; WIDTH: 100%; HEIGHT: 100%
}

a.MenuOn:hover
{
FONT-SIZE: 11px; color: #ffffff; FONT-WEIGHT: bold; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #c9c9c9; WIDTH: 100%; HEIGHT: 100%
}


a.MenuOff:link
{
FONT-SIZE: 11px; color: #33ccff; FONT-WEIGHT: bold; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #f5f5f5; WIDTH: 100%;
}

a.MenuOff:visited
{
FONT-SIZE: 11px; color: #33ccff; FONT-WEIGHT: bold; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #f5f5f5; WIDTH: 100%;
}

a.MenuOff:active
{
FONT-SIZE: 11px; color: #33ccff; FONT-WEIGHT: bold; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #f5f5f5; WIDTH: 100%;
}


// css end.


What I expect to happen is that when I scroll over the menu options the whole line should become highlighted. This works fine in IE, but for some reason it doesn't in Firefox. Firefox only highlights the text (as shown in the JavaScript code).

Can anyone point out where I'm going wrong?

url = http://www.natureshedgerow.com

Thank you in advance

PS. I've already fixed a few other problems I've found between IE and Firefox (hopefully this isn't a sign of poor worksmanship on my behalf )

I am trying to teach myself doing a tableless website using css and I am starting with header then working my way down

I spent all day trying to serach a way to stop the right end image cap to jump down the next row when firefox width browser is shrinked down but it doesn't do that in IE ..


Here the url http://www.prismaze.com/ it showing only the header right now and it what I am having issue with .. there are 3 images in it .. left and right and the background ..

Here the html and css

<body>


<div id="logoheader">
<img src="templates/stlaware/images/stlaware_01.png" width="548" height="90" border="0" align="left" />
<img src="templates/stlaware/images/stlaware_05.png" width="55" height="90" border="0" align="right" />
</div>




</body>
</html>


------------------------
the css
------------------------

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-color : #FFFFFF ;
}
#logoheader {
background: url(../images/stlaware_03.png) repeat;
height: 90px;
width: 100%;
}



How do you stop image on the right side of the header (stlaware_05.png) from wrapping to the next row if Firefox browser is sized down in width?

Thanks ..

Bill

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;

I'm having a problem with a width attribute in IE7. The main content div on the page http://www.mckr.ie/test.html looks fine in Opera but in IE7 it makes the page scroll horizontally. Basically I didn't put a width on the #contentdiv styled <div>, its supposed to just occupy the width of the page automatically. When I put width 100% on it it messed up in IE6. Now I'm looking at it in IE7 and its similarly messed up. Does anyone know a way of solving this? Any help would be much appreciated.

Here's my HTML code: Code:

<div id="bannerdiv"></div>  

<div id="contentdiv"> 
Content here</div>  

<div id="leftnavdiv"><div id="leftnavouterdiv"><div id="leftnavinnerdiv">Nav here</div></div>  	<div id="searchdiv"><div id="innersearchdiv"><p><b>Site Web en Francais</b></p>  	  <form action="http://search.atomz.com/search/" method="get" target="main">          <b>Search the Site<br />          </b>          <input name="sp-q" size="15" />          <input name="submit" type="submit" value="Go" />          <input name="sp-a" type="hidden" value="sp10023119" />          <input name="sp-f" type="hidden" value="ISO-8859-1" />        </form>  	  
</div>    </div>  </div>  

<div id="topnavdiv">    <ul>      <li><a href="/" id="buttonhome"><b>Home</b></a></li>      <li><a href="about.html" id="buttonabout"><b>About Us</b></a></li>      <li><a href="location.html" id="buttonlocation"><b>Location</b></a></li>      <li><a href="contact.html" id="buttoncontact"><b>Contact Us</b></a></li>      <li><a href="news.html" id="buttonnews"><b>News</b></a></li>      <li><a href="people.html" id="buttonpeople"><b>People</b></a></li>      <li><a href="recruitment.html" id="buttonrecruitment"><b>Recruitment</b></a></li>    </ul>  

</div>

Here is the relevant CSS code:

Code:

#bannerdiv {  	background-image: url(images/logo_banner.gif);  	height: 120px;  	width: 100%;  	background-color: #3366CC;  	background-repeat: no-repeat;  	background-position: left top;  	display: block;  	top: 0px;  	position: absolute;  	z-index: 9;  	left: 0px;  }  body {  	font-family: Arial, Helvetica, sans-serif;  	font-size: 12px;  	color: #000000;  	margin: 0px;  	padding: 0px;  }  
#leftnavdiv {  	position:absolute;  	left:0px;  	top:146px;  	width:237px;  	z-index:2;  	font-size: 11px;  }  #contentdiv {  	position:absolute;   	left:250px;   	top:146px;   	z-index:1  }  
#leftnavinnerdiv {  	width: 210px;  	margin-top: 0px;  	margin-bottom: 0px;  	margin-left: 10px;  	padding-bottom: 30px;  	padding-top: 0px;  }
#leftnavouterdiv {
	background-color: #EEF3F9;
	background-image: url(images/bg.newsbottom.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
}
#searchdiv {
	background-color: #EEF3F9;
	width: 234px;
	margin-top: 15px;
	margin-bottom: 15px;
}
#innersearchdiv {
	margin: 0px 15px;
	padding-top: 15px;
	padding-bottom: 15px;
}
#topnavdiv {
	position:absolute;
	left:0px;
	top:120px;
	width:100%;
	z-index:3;
	background-color: #3366CC;
	border-top-width: 1px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-top-color: #f8c015;
	border-bottom-color: #f8c015;
	border-right-color: #f8c015;
	border-left-color: #f8c015;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	height: 24px;
}