CSS - Css Menu - Different Width 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

Howdy,
k, the issue i'm having seems to be that IE is ignoring the width I have set for the right menu. It looks fine in everything else.

here's the page

here's the stylesheet

any help'd be greatly appreciated!

Problem solved.

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

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?

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?!

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

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.

Please delete...

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.

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

Hi

Is there a way to create a 100% width (liquid layout without table) Horizontal menu using <UL><LI>.

I searched Google, but i found only the menus aligned either towards left or middle. Not extending to full width.

When i give "width: auto" for LI then all the links get aligned towards the left. Or if i specify some particular width say 12.5% for each Li then when i make it to 800x600 screen its wrapping to second line.

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