CSS - Tell Div To Use Available Width In Firefox

Hello all!

I've problem with firefox rendering's of span tag, the problem is in the width definition, the code is this:

Code:

<span style="width:100%; background:red">My name is Danny!</span>

IE show me a 100% red row with the text instead Firefox show me only text with the backgroud color. Why this? is a Firefox bug or is not possible to assign width definition to the span tag?!

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.

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.

Firefox 3.6 is showing a blank screen for everything I have set as 100% width but looks ok in Firefox 5.
My main concern at this point is this: I'm trying to figure out how to move the 4 navigation items (the owl, contact, portfolio and home) closer to the tree without going over or under it. Any help or suggestions I can get are much appreciated!

-------------------------------------
Here's the HTML:

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> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>ATHENA STUDIOS - web design & graphic design in Charlottetown, PEI</title> 
<link rel="shortcut icon" href="layout/hoot.ico" /> 
<link rel="stylesheet" type="text/css" href="athena.css" /> 
 
</head> 
 
<body> 
 
<div id="page-wrap"> <!-----page wrap div start------> 
 
<div id="top"> <!-----top div start ------> 
 
<img src="layout/header.png" alt="header image ATHENA STUDIOS WEB DESIGN, GRAPHIC DEIGN & FRONT END DEVELOPMENT" /> 
 
</div> <!-----top div end ------> 
 
<div id="navbar"> <!-----nav bar BACKGROUND div start------> 
 
</div> <!-----nav bar BACKGROUND div end------> 
 
<div id="navigation">  <!-----navigation div start------> 
 
<ul id="menu"> 
			<li class="owl"><a href="index.html">Owl</a></li> 
			<li class="contact"><a href="/contact/">Contact</a></li> 
			<li class="portfolio"><a href="/portfolio/">Portfolio</a></li> 
            <li class="home"><a href="index.html">Home</a></li> 
		</ul> 
 
</div>  <!-----navigation div start------> 
 
</div> <!-----page wrap end div------> 
 
 
</body> 
</html> 

-----------------------------------------
And here's the CSS:


Code:

@charset "UTF-8";
/* CSS Document */

body { 
            width:100%;
			font-size: 13px;
		font-family: Helvetica, Verdana, Arial, sans-serif;
		line-height: 1.4;
              background: url(../layout/bg.png);
			  background-attachment:fixed;
		margin:0;
		padding:0;
		text-align: center;
}

a, a:link {
	color: #000000;
	text-decoration: none;
}

a:hover {
	color: #31636c;
	text-decoration: none;
}

a.footer:link { 
color: #ddcfb2; 
}

a.footer:hover { 
color: #ddcfb21; 
}

a.footer:visited { 
color: #ddcfb2; 
}

a.footer:active { 
color: #ddcfb2; 
}


#page-wrap {
  width: 100% ;
  margin: auto ;
  text-align: center;
}


#top {
	width:100%;
	background:url(layout/skybg.png);
	background-repeat:repeat-x;
	text-align: center;
		position:relative;
	z-index: 500;
}


#navbar {
	width:100%;
	height:102px;
	margin-top:-139px;
	padding-top:15px;
	background:url(layout/navbg.png);
	background-repeat:repeat-x;

}

#navigation {
	width:100%;
	height:155px;
	text-align:center;
	margin-top:-154px;
}
	


/* Everything CSS Sprite Menu */
	ul#menu {
	text-align:center;
		position:relative;
	z-index: 501;
	padding:0;
	list-style:none;
	clear:both;}
	
		#menu li{overflow:hidden;
		text-indent:-9999px;
		display:inline;
		text-align:center;
		float:left;
		margin-right:10px;}
			#menu li a{background:url('layout/navigation.png') no-repeat; width:100%; height:100%; display:block;}

			/* Owl Button */
			#menu li.owl{width:158px; height:146px;}
				#menu li.owl a{background-position:0px 0px;}
				#menu li.owl a:hover{background-position:0px -2px;}

			/* Contact Button */
			#menu li.contact{width:150px; height:158px;}
				#menu li.contact a{background-position:-158px 0px;}
				#menu li.contact a:hover{background-position:-158px -2px;}

			/* Portfolio Button */
			#menu li.portfolio{width:238px; height:146px;}
				#menu li.portfolio a{background-position:-308px 0px;}
				#menu li.portfolio a:hover{background-position:-308px -2px;}
				
			/* Home Button */
			#menu li.home{width:114px; height:146px;}
				#menu li.home a{background-position:-546px 0px;}
				#menu li.home a:hover{background-position:-546px -2px;}

NEVER MIND. Got it. lol

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?

Please delete...

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.

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,

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

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;

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

Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help.

My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off...

The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view!

My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance....