CSS - Layout Issue In Firefox

Hi,

I'm having a problem with a layout in Firefox.

http://26990.vws.magma.ca/press-room.cfm

As you can see the content area is all shifted down and lines up with a block in the menu. It doesn't do this in IE and I need it to work the same way in Firefox.

Can anyone offer some suggestions as to what I can change to get it to work?

This is a pretty specific CSS question, but I do not see a CSS forum anywhere so i'm hoping someone here can help.


In my site, I have assigned a background image to the <div> that contains my secondary navigation. I'm attempting to overlay my navigation buttons so that they line up at an exact position over the background image. It is working fine and Internet Explorer 6, but seems to be off by pixel or two and Netscape 7.1.

http://www.budonk.com/budonk.php?prim=workwedo

If you view this page in both browsers (looking specifically at the images beneath the logo), you will see that the text of the buttons lines up perfectly with the shape of the button (which is part of the bg image) and Internet Explorer, while in Netscape, the text for each button is too low by one or two pixels.

You can view the page's source to see all of the CSS. I'm thinking it has something to do with the style #leftpane and/or .sNavImg ... but not too sure ...

Any ideas?

Hey friends,

I am having some problem, may be you ppl can help me. Well i am using Social Engine with template. and i have the probelm that when i click on a link my LOGO and Menu moves upside automatically. Some area of CSS is wrapped in a code snippet. Code:

/* GLOBAL STYLES */  html {  	min-height: 100%; 	margin-bottom: 1px;  } body { 	background: #FFFFFF; 	position: relative; 	text-align: center; 	font-size: 11px; 	cursor:default; 	margin: 0px;  }  table.body { 	width: 900px; 	padding:0px; 	 }  p { 	margin: 0px; 	padding: 0px; }  div, td { 	font-family: tahoma, "Trebuchet MS", arial, serif; 	font-size: 11px; 	color: #555555; 	line-height: 140%; }    #main_background_top{height:59px; margin:0px; padding:0px; background-color:#29404f; width:100%;} #fake_body{position:absolute; top:0;  width:990px; padding:0px; margin:0 auto;} #wrap{width:990px; padding:0px; margin:0 auto;} #container6 { float:center; padding:0px; width:990px; margin: 0 auto 0 auto;  }   /*RESETS*/ *{padding:0; margin:0;} ul{list-style-type:none;} fieldset{border:none;} a img{border:none;} a{-moz-outline:none;}    /*HACKS*/  .clearfix:after { 	content:"."; 	display:block; 	height:0; 	clear:both; 	visibility:hidden; } .clearfix {display:inline-block;} /* Hide from IE Mac \*/ 	.clearfix {display:block;} /* End hide from IE Mac */  .text_replace{background-repeat:no-repeat; outline:0; text-indent:-9999px;} a.text_replace:active{outline:0;}  /*header*/ #global_header{position:relative; height:60px; } #focus_top{width:789px; height:38px; float:right; margin-top:20px; background-color:#1a2b37; border:1px solid #475f6f; border-bottom:none;} #global_header a{color:#fff;}  #global_header h1#focus_logo{float:left; margin-bottom:0; } #global_header h1#focus_logo a{display:block; background-image:url(../images/focus_logo.gif); height:48px; width:195px; padding-bottom:0px; padding-top:0px; margin-bottom:1px; margin-top:5px; background-position:left top;} #global_header h1#focus_logo a:hover{display:block; background-image:url(../images/focus_logo.gif); height:48px; width:195px; padding-bottom:0px; padding-top:0px; margin-bottom:1px; margin-top:5px; background-position:left bottom;}  .focus_top_menu{float:left;} .focus_top_menu ul { 	float:left; 	width:100%; 	outline:none; 	padding: 0; 	margin: 0; 	line-height: 38px; 	font-size:11px; 	 	text-align:left; } .focus_top_menu li { 	display: inline; 	outline:none; 	list-style: none; 	margin: 0; } .focus_top_menu li a { 	text-decoration: none; 	outline:none; 	text-transform:uppercase; 	color: #d4d7d9; 	padding: 13px 9px 12px 9px; 	line-height:38px; 	font-weight:normal; 	 } .focus_top_menu li a:hover { background-color:#223644; }  .focus_search{float:right;} .btn { border:0px solid #333333; width:21px; height:21px; outline:none; background-color: #191919; background-image: url(../images/search_ok.gif);  background-position:bottom left; padding:0px;   cursor:pointer; }  .busca { border:1px solid #FFF; vertical-align:top; margin:0; position:relative; top:0; background-color: #ffffff;  color:#646262; font-size:12px; font-family:Arial, Helvetica, sans-serif; float:left; letter-spacing:1px; height:13px; padding:3px 2px 3px 4px; width:196px;}  .left_side{float:left; width:199px; height:400px;} .left_side_green{ background-color:#e2f6d4; height:14px; text-align:right; padding:2px 10px 4px 10px; color:#656161; font-weight:bold;} .left_side_blue{ background-color:#e4f2f3; height:14px; text-align:right; padding:2px 10px 4px 10px; color:#656161; font-weight:bold;} .left_side_yellow{ background-color:#f4f1de; height:14px; text-align:right; padding:2px 10px 4px 10px; color:#656161; font-weight:bold;} .left_side_red{ background-color:#f4e4e7; height:14px; text-align:right; padding:2px 10px 4px 10px; color:#656161; font-weight:bold;}  .left_links_blue ul { 	padding: 0; 	margin: 0; 	line-height: 20px; 		font-size:11px; 	font-weight:normal; 	text-align:left; } .left_links_blue li { 	list-style: none; 	margin: 0; } .left_links_blue li a { 	width: 189px; 	background-color:#ffffff; 	text-decoration: none; 	color: #27494E; 	padding: 2px 0px 2px 10px; 	display: block; 	border-bottom: 1px solid #e3eff0;	 	line-height:20px; 	font-weight:normal; 	 } .left_links_blue li a:hover { background-color:#f0f7f8; 	color: #292728; 	text-decoration: none; } .left_links_yellow ul { 	padding: 0; 	margin: 0; 	line-height: 20px; 		font-size:11px; 	font-weight:normal; 	text-align:left; } .left_links_yellow li { 	list-style: none; 	margin: 0; } .left_links_yellow li a { 	width: 189px; 	background-color:#ffffff; 	text-decoration: none; 	color: #27494E; 	padding: 2px 0px 2px 10px; 	display: block; 	border-bottom: 1px solid #f1eedb;	 	line-height:20px; 	font-weight:normal; 	 } .left_links_yellow li a:hover { background-color:#f8f6eb; 	color: #292728; 	text-decoration: none; } input.text4{ 	border: 1px solid #B5BABA; 	font-family: arial, verdana, serif; 	font-size: 11px; 	font-weight:bold; 	margin-bottom:1px; 	margin-top:1px; 	color: #7C7D7D; 	vertical-align: middle; 	padding: 3px;  } td.top_menu { 	background-image: url(../images/topbar_bg.gif);  	background-repeat: repeat-x;  	border-top: 1px solid #CCCCCC;  	border-bottom: 1px solid #BBBBBB; }  td.top_menu2 { 	width: 20%;  	text-align: right;  	border-right: 1px solid #CCCCCC;  	border-top: 1px solid #CCCCCC;  	border-bottom: 1px solid #BBBBBB;  	background-image: url(../images/topbar_bg.gif);  	background-repeat: repeat-x; }  div.top_menu_link_container, div.top_menu_link_container_end { 	float: left; 	height: 31px; 	border-left: 1px solid #CCCCCC; }  div.top_menu_link_container_end { 	border-left: 1px solid #CCCCCC; }  div.top_menu_link { 	font-weight: bold; 	font-size: 13px; 	padding-top: 5px; 	padding: 6px 10px 0px 10px; }  div.top_menu_link_loggedin { 	height: 25px; 	text-align: right; 	font-weight: bold; 	font-size: 13px; 	padding-top: 5px; 	padding: 6px 0px 0px 10px; }  div.menu { 	width: 150px;  	border: 1px solid #CCCCCC;  	border-left: 3px solid #7391a8; 	background: #EEEEEE;  	padding: 0px 0px 10px 10px; 	margin-right: 10px; }  div.menu_header { 	margin-top: 10px; 	margin-bottom: 7px; }  td.menu_user { 	background-image: url(../images/menu_user.gif);  	background-repeat: repeat-x;  	background-color: #FFFFFF; 	padding: 5px 10px 5px 10px;  	border: 1px solid #CCCCCC;  	border-top: none;  	text-align: left; }  div.menu_item { 	float: left; 	padding-right: 5px; 	font-weight: bold; 	background: none; }  div.menu_sep { 	padding: 2px 0px 0px 10px; 	float: left; 	background: none; }  img.menu_icon { 	display: block; 	float: left;  	margin-right: 6px; 	margin-top:2px; }  img.menu_icon2 { 	margin-bottom: -3px; 	margin-right: 3px; }  div.menu_arrow { 	padding: 2px; 	float: left; }  div.menu_item_dropdown a { 	padding: 3px 40px 5px 7px; 	font-weight: normal; 	border-left: 3px solid #DDDDDD; 	display: block; 	background: #FFFFFF; }  div.menu_item_dropdown a:hover { 	padding: 3px 40px 5px 7px;  	font-weight: normal; 	background: #F2F2F2; 	border-left: 3px solid #BBBBBB; 	text-decoration: none; 	display: block; }  div.menu_dropdown { 	border: 1px solid #CCCCCC;  	border-top: none;  	background: #FFFFFF;  	position: absolute;  	margin-top: 6px; 	margin-left: -20px; 	z-index: 99; 	width: auto;  	white-space: nowrap;  }  td.topbar1 { 	padding-bottom: 5px; }  td.topbar2, td.topbar2_right { 	background-image: url(../images/menu_bg.gif);  	background-repeat: repeat-x;  	font-weight: bold;  	font-size: 15px;  	padding: 10px 10px 8px 15px;  	color: #FFFFFF; 	border-bottom: 1px solid #31537D; }  td.topbar2_right { 	font-weight: normal; 	padding: 10px 15px 8px 10px;  	text-align: right; }  td.content { 	vertical-align: top; 	text-align: left; 	background: #FFFFFF; }  div.content { 	width: 759px; 	min-height:600px; 	padding: 25px 15px 15px 15px;  	text-align: left;  	margin-left: auto;  	margin-right: auto; 	float:right; 	border-left:1px solid #b3b3b3; border-right:1px solid #b3b3b3; border-bottom:1px solid #b3b3b3; }

I am attempting to do a site with all divs for the layout. My main issue is that in the body of the homepage, there will be two columns: one a static image, and the other will be the content which may end up being longer than I had designed for. My main concern is that if the content does become longer, is there a way that the div that positions the footer can be moved down accordingly, and if the background image behind the static image will extend with the lengthy content.

Links:

How I want to look:
http://www.mrossana.com/newstrut/
Corresponding Style Sheet:
http://www.mrossana.com/newstrut/style2.css (*There is a lot of stuff on there that was not my doing. I'm mostly concerned with the id styles.)

How I want the layout to be with divs and my issue:
http://www.mrossana.com/newstrut/csslayout.html
Style Sheet:
http://www.mrossana.com/newstrut/style.css

Thanks!

hi,
kinda of new to working with css for layouts, but a friend told me its good to make the change over from using tables...

well heres my dilema.
i want to make a layout like this.....

Code:

|-----------------------------------|
|Header                             |
|-----------------------------------|
|  Advert      | Loginbox  |        |
|--------------------------|        |
|Main content              |        |
|Main content              |        |
|Main content              |        |
|-----------------------------------|

In tables... its 3 rows 3 column....
with 1st column on 1st row spanning 3 columns
and 3rd column on 2nd row spanning 2 rows
and 1st column on 3rd row spanning 2 columns

Attached is what i have so far for my css...
or visit www.ftapro.co.uk/csslayout.html
its just the Main content part which i can get to fit into place.

I am very greatful for any help.

Rob

I'm working on a site: www.wirelessguy.net

As you can see, the middle content is not extending all the way to the end of the middle iFrame. The code I'm dealing with is this.

Here is the content id that I created in my css file.
Code:

<div id="content">
	<iframe src="welcome.php" width = 100% height = 100% frameborder=1 scrolling=auto name="main">
    </iframe>
</div>

Here is the welcome.php file.
Code:

<body margin=0>
<div id = "welcome">
<table cellpadding=0 cellspacing=0>
	<tr>
    	<th>Welcome to the American Communications Web Site</th>
    </tr>
</table>
</div>
</body>

Here is my css that pertains to the middle content.
Code:

div#content
{
	position: absolute;
	top: 17%;
	left: 8%;
	right: 8%;
	bottom: 10%;
	height: 75%;
	border: 1.5px solid #333399;
}

#welcome table
{
	border:1px dotted red;
	width: 100%;
	height: 100%;
}

#welcome th    
{
	border:1px solid black;
	background: #FF9933;
	font: normal 18px;
}

Any idea why the table will not extend all the way to the right? Also, the bottom borders are not being shown. It seems that the table is extending past the area defined by "content" in my css.

Hi guys,

I'm now working on my first proper site and started with what I think is a fairly complicated layout. Basically I would like to have 3 fixed width columns 2 of which, the left side and the right side one, having fixed position. In addition, the middle column has to have a "backgound-attachment: fixed" and no-repeat properties. At the moment I have 2 main problems:

1. IE7 thinks the left sidebar should be on the right.
2. I can't get the backgound image to be displayed correctly. Basically, it's not displayed if I use no-repeat property. If I don't use it, the backgound image isn't positioned properly (applies to both IE7 and FF3).

I hope you can help, because I've spent nearly 2 days trying to work it out, but have had little success

<head>
<title></title>

<link rel='stylesheet' media="screen" type='text/css' href='main.css' /> </head>

<body>

<div id="logo"><img src="logo4.gif" width="47" height="600" /> </div>

<div id="nav"><img src="Images/Nav2.gif" width="162" height="512" /></div>

<div id="header"> Filled with lore ipsum </div>

</body>

</html>

and

body {

margin: 0 auto 0 auto;
width: 760px;
padding: 0;
background:gray; }

#logo {

position: fixed;
float: left;
height: 100%;
padding: 0;
margin: 0;
width: 47px;
background: white; }

#header {
width: 551px;
float:left;
margin-left: 47px;
padding: 0px;
background-image: url(Images/Contents2.gif);
background-attachment: fixed;
background-repeat: repeat-x;
background-color: white;
background-position: top left; }

#nav {
position: fixed;
float:left;
margin-left: 598px;
width: 162px;
background-color: white;
height:100%; }

THANKS ALOT

Hi,,

Guess you lads will find out the solution quick. The menu on the site: http://www.fisk.pyrabel.net/index.php always push the content down. and some issues in firefox as well.

any suggestions to clean it up ?

Thanks a million

Hi,

I'm having some layout troubles on my website: http://www.whollylife.org/

It looks the way I want when viewed with IE 6.0, but with FF (and I'm sure, all other standards compliant browsers) it looks a little off)

I'm just having issues getting the top margin, the float:left nav bar, and the content-container where I'd like them to be.

I figure, until I know how to resolve the issue, I'll post the site as viewable in IE...

any help?

Hello,
I am having trouble with the layout for round corners. I got it to work on Firefox, but can't seem to get it to function correctly in IE 6/7. There is a weird white gap at the bottom of the page, and the background color overflows at the top of the page.

The site is [mark-richter . com/project1/index.asp]

(Without the spaces around the .com. Sorry for brackets, rules prohibit me from posting links lol)

Thanks for any help you can give.

I have been pulling my hair out on this one because for the life of me I cannot make it work.

Here is my page:

www.nova-dataonline.com

Notice that in IE, the "Featured Products" section displays nicely and when you mouseover "Cisco Systems" the filler text displays well within the grey box. The entire "Featured Products" section apart from the manufacturer logos, is one image and the mouseover text is padded to appear correctly within the grey box which is part of the image.

Now notice in firefox that the entire layout breaks. The div displays much larger than I intended and the padded text does not display correctly. I have found that if I remove the padding from the div containing the background image, the div displays fine, but this leaves me without a way to style the content of the div in the correct place. So it appears that firefox is expanding the div based on the padding

here is the relevant markup:

PHP Code:
<div class="featured" id="feat_1" onmouseover="toggleDiv('feat_1',1)" onmouseout="toggleDiv('feat_1',0)">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.
    </div> 





and css:

Code:

.featured{
 visibility:visible;
 width:410px;
 height:350px;
 position:absolute;
 top:250px;
 left:340px;
 border:1px solid #999999;
 border-left:none;
 background-repeat:no-repeat;
 background-position:center;
 background-image:url(images/message/feat.jpg);
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:10px;
 font-style:normal;
 padding:102px 27px 29px 29px; 
}

#feat_1{visibility:hidden;}

and javascript (if it is even relevant to the problem):

PHP Code:
<script language="javascript" type="text/javascript">
<!--
function toggleDiv(id,flag) 
{
    if (flag == "1")
    {
        if (document.layers) document.layers[''+id+''].visibility = "show"
        else if (document.all) document.all[''+id+''].style.visibility = "visible"
        else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
    }
    
    if (flag == "0")
    {
        if (document.layers) document.layers[''+id+''].visibility = "hide"
        else if (document.all) document.all[''+id+''].style.visibility = "hidden"
        else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
    }
}
-->
</script> 





any idea?

http://925-sterling-silver-jewelry....udes/header.php

well this is my first proper CSS based site but i am having troubles with it. the problem is that in IE the div (main) starts near to the sidebar div, wheras in firefox it starts a bit further away! also at the moment the links at the bottom dont appear in IE but do in FF albeit little messed up.

help please?