CSS - Firefox Issue!!! What Is The Typical Css Problem For This Issue?

Hi,

Ive got a site im currently working on using html and css. After just putting the navigation bar in ive discovered it lookins perfect in IE and slightly off in firefox:

http://www.lnicholson.co.uk

It looks hows i want it to in IE but in fiefox i notice that there is a bigger gap above the navigation bar and I have no idea how to get rid of it. Its quite annoying as some of my friends use firefox!

Any help would be much appreciated, if you need anymore info let me know.

Thanks

Lozza

Kay, So I've been trying to open a gaming league, but unfortunately my skills lie in PHP and C++. Not so much html and css. For some reason this site works pretty well in IE, but has what I call micro-tears in the firefox version, I'm really not sure whats wrong with it, can anyone help?

http:// www . vl-league.com / index . html

is the site.

Hello, this is my first post on this forum! I've noticed there's another firefox thread right above mine, I don't mean to spam the forum with firefox issues but I checked that one first and it didn't have the same problem as I'm having.

I'm a novice to CSS, I've only been on it for around 2-3 months for college, and i've encountered a problem I can't find a solution to likely because there could be so many ways for it being wrong.

If anyone can please help me with this problem, i'd appreciate it so much!

I'm just starting to create a template for college, and for some reason I've just noticed it's not working in firefox. I use i.e to develop at school so I haven't noticed it until now, and I can't seem to find a solution.

I've uploaded the template here so it can be seen:

bonkenmoose.com/john

It works fine in internet explorer, but seems to be not working correctly in Firefox.

Any help will be great!

Thanks.

Hi

I'm developing a new site and have only just started with CSS. The site uses an external style sheet. I have only developed one page so far which looks fine in IE 6/7 but (some) content appears to 'drop/change position' slightly in Firefox (note the bottom navigation and contact info on the page footer in particular). I needed to add an extra div tag for the hyperlink style - could this be the cause? Also the search button and the form text area seems to change position when viewed in Firefox?

Not sure what is going on! Any help would be appreciated!

Link he http://www.yarmside.co.uk/version2/index.html

Thanks.

Would FF be able to interpret this background-image line? The bullets are not showing up on the page and all the references have been checked and verified the image exists and is in the proper directory.

Code:

li.indent{
	background-image: url('getdoc?webc=images/bullet_sm.gif');
	background-repeat: no-repeat;
	background-position: 0,0;
	margin-left: 10;
	padding-left: 10;
	margin-bottom: 5;
}

Thanks

I've been working with this issue for the better part of the day, and I think whatever the issue is, is one I'm not seeing because I've been doing just that. So I'm hoping to get a little guidance from those of you who're far superior to me in the world of CSS.

On this site ianrobinett.com/designwork/SAMPO/Sitev1/ I've been working on, in Mozilla, the fullwidth div I put below my other divs (in the main body content area), is appearing off to the right of the Twitter widget. In Chrome and IE, funny enough, it's right, and it's Mozilla having the fit.

I honestly figure this is something small, and something I'm just missing because I've been looking at the code all day.

Never mind. Thx.

I normally do not have an issue with firefox and CSS but this renders fine in IE. Any suggestions:

In IE it looks the way it should.

Code:

div#wrapper {
		margin: 0 auto;
		margin-top: 20px;
		border: 1px solid #ffffff;
		width: 760px;
		height: 100%;
		background: #6f1727 url('../../images/logo_grayscale2.png');
		background-position: bottom right;
		background-repeat: no-repeat;		
}

html>body div#wrapper {
		min-height: 600px;
		height: 100%;
}

But in FF The wrapper div will not scale to 100% of the containing divs.

Any ideas would be much appreciated.

It will not let me send a link to the site in this post.

Hello,
here is the code i'm using for my lightbox. it works perfectly in Firefox but in IE it doesn't center and the background is solid black instead of a transparent black with 75% opacity.

any ideas how to fix it?



Code:

   <!-- Lightbox - Begin -->
                <div id="admsg" style="background:black;-moz-opacity:0.75;filter:alpha(opacity=75%);position:absolute;margin:0px;z-index:1000;left:0;top:0;display:none"></div>
                <div id="admsg2" style="width:600px;height:400px;position:absolute;z-index:1001;margin:0 auto;top:90px;left:0; right:0;margin-left:auto;margin-right:auto;border:solid 5px;background:white;text-align:center;display:none;padding:10px">
                <!-- Message & Advertisement Here -->
                <center><img src="/images/roller.gif"></center><br><h3>Please wait while your file is being uploaded...</h3><i>Depending on your connection this may take up to a few minutes.</i><br/><br/><br>
                </div>
                <!-- Lightbox - End -->

and when the submit button is pressed i call a JS function which does the following:

Code:

document.getElementsByTagName("body")[0].style.overflow="hidden";
document.getElementById("admsg").style.display="block";
document.getElementById("admsg").style.width = screen.width;
document.getElementById("admsg").style.height = screen.height;
document.getElementById("admsg").style.width = document.body.scrollWidth;
document.getElementById("admsg").style.height = document.body.scrollHeight;
document.getElementById("admsg2").style.display="block";

hey all,
i'm having a really strange issue with firefox users on windows. basically, my site is simple. i've got navigation on the left, and a content table on the right. it's all done with CSS.

firefox users on windows have been complaining that sometimes (not all the time) the content window has been loading half way. it's beendoing this on numerous PCs with firefox, and i can't figure it out. sometimes it loads the whole content box, sometimes it stops half way.
it's fine all the time in IE on both platforms, and firefox on a mac.

here is the code i'm using for the content boxes:

#content_table { FONT-FAMILY: Verdana, Helvetica; width: 60%; margin: 0 auto; border: 1px solid #999; overflow: hidden; }

#content_table h2 { FONT-FAMILY: Verdana, Helvetica; margin: 0; -moz-opacity: 1; font-size: 15px; text-align: left; padding: 2px 0 2px 15px; font-weight: bold; background: #000 url(../../../../images2/title.png) repeat-x; color: #fff; border: 1px solid #000 }

#content_table p { font-size: 12px; FONT-FAMILY: Verdana, Helvetica; -moz-opacity: 1; padding: 5px; background: #333333; color: #FFF; margin: 1px }

if you're on a PC, check it out:

link

thanks!

I seem to have an issue with the float parameter in Firefox.

If you look at the following URL in IE, it should display fine, but in firefox the container doesn't expand to hold the div's within, as they're floated. I've seen other people use floats just fine in firefox, but it doesnt' seem to work for me..

http://www.arestaenterprise.com/enf/

Any help is appreciated

Thanks!

The site I am working now has a discussion group. Sometimes someone will post a pic and the thread will break the 955px boundary of the wrapper.

In Firefox, what happens is the thread will leave the wrapper.
In IE, the thread makes the wrapper expand.

In an ideal world I'd have all images resized or not even limit myself to a 955px width, but this won't work with this site...

I'd like to know if it is possible to make the thread div leave the wrapper in tact at 955px like it does in Firefox.

Thanks in advance :}

Hello everyone! A pre-emptive thank you to anyone and everyone who reads and responds to my questions! I'm new to CSS, being more of a designer and far, far less of a coder, so forgive any potential glaring errors I may be making. I'm having to learn all this stuff as I go along, with little to no guidance, so any advice you guys might have as far as repairing my lackluster coding will be taken with shy graciousness.

I'm attempting to put together a basic template for a website I am trying to build, to use in conjunction with concrete5, an open-source CMS. I've managed to make it look and operate correctly in IE and Chrome, but in FireFox the navbar on the bottom does not align itself correctly. It jumps several hundred pixels down the page and jolts sharply to the left.

I've managed to make use of the @-moz tag to get it to accept FireFox-specific behavior. However, I cannot get it to maintain absolute positioning, despite assigning it that attribute. Rescaling the window or zooming in and out in a browser causes it to slide around willy-nilly, even if I reposition it specifically in the CSS.

As a note, I had a lot of trouble getting other elements to properly center in the process of making the whole template, but I'm not sure what was causing that, either. I've not been able to get things to center themselves properly or respond correctly to instructions; I'm basically running in the dark, here.

The code is below. Please let me know what I'm doing wrong!

Code:

<?php
defined('C5_EXECUTE') or die(_("Access Denied."));
$this->inc('elements/header.php');
?>

<body>
<div id="container">
    <div id="navbar">
	   	<div class="navspacer">
        	<a href=""></a></div>
        <div class="nav1">
        	<a href="plans.html"></a></div>
        <div class="nav2">
        	<a href="phones.html"></a></div>
        <div class="nav3">
        	<a href="broadband.html"></a></div>
        <div class="nav4">
        	<a href="index.html"></a></div>
		<div class="nav5">
        	<a href="services.html"></a></div>
		<div class="nav6">
        	<a href="accessories.html"></a></div>
   		<div class="nav7">
        	<a href="locations.html"></a></div>
          <div class="display">
          <div class="presentation">
          	<div class="columnzone">
		<div class="column1">
			<div class="columncontent">
				  <?php
         	$a = new Area('Sidebar');
         	$a->display($c);
         	?>
			</div>
            </div>
		<div class="column2">
			<div class="columncontent">
			    <?php
         	$a = new Area('Main');
         	$a->display($c);
         	?>
			</div>
		</div>
		<div class="column3">
			<div class="columncontent">
			    <?php
         	$a = new Area('Column3');
         	$a->display($c);
         	?>
			</div>
		</div>
        </div>
        </div>
	<div id="bottomnav">
        <div class="bnav1">
        	<a href="contactus.html"></a></div>
        <div class="bnav2">
        	<a href="feedback.html"></a></div>
        <div class="bnav3">
        	<a href="employment.html"></a></div>
      	</div>
        </div>
        </div>
</div>
</div>
<div class="footer">
<?php  $this->inc('elements/footer.php'); ?>
</div>
</body>

And the CSS:

Code:

/* CSS Document */

body {
	font:12px Trebuchet MS, Tahoma, Arial;
	color:#000000;
	background:url(/images/bg.jpg) repeat;
				
}

#container {
margin:0 auto;
width:1050px;
bottom:0;
}

/*	NavBar 	*/

#navbar {
	width: 928px;
	height: 90px;
	position:absolute;
	padding-left:50px;
	top:0;
}

#navbar li {
    list-style:none;
    display:inline;
}

.navspacer a {
	display:inline;
	float:left;
	width: 20px;
	height: 90px;
	background:url(/images/nav00.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav1 a {
	display:inline;
	float:left;
	width: 132px;
	height: 90px;
	background:url(/images/nav01.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav1 a:hover { 
	background:url(/images/nav08.png) no-repeat;
}

.nav2 a {
	display:inline;
	float:left;
	width: 127px;
	height: 90px;
	background:url(/images/nav02.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav2 a:hover { 
	background:url(/images/nav09.png) no-repeat;
}

.nav3 a {
	display:inline;
	float:left;
	width: 139px;
	height: 90px;
	background:url(/images/nav03.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav3 a:hover { 
	background:url(/images/nav10.png) no-repeat;
}

.nav4 a {
	display:inline;
	float:left;
	width: 114px;
	height: 90px;
	background:url(/images/nav04.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav4 a:hover { 
	background:url(/images/nav04.png) no-repeat;
}

.nav5 a {
	display:inline;
	float:left;
	width: 126px;
	height: 90px;
	background:url(/images/nav05.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav5 a:hover { 
	background:url(/images/nav12.png) no-repeat;
}

.nav6 a {
	display:inline;
	float:left;
	width: 129px;
	height: 90px;
	background:url(/images/nav06.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav6 a:hover { 
	background:url(/images/nav13.png) no-repeat;
}

.nav7 a {
	display:inline;
	float:left;
	width: 141px;
	height: 90px;
	background:url(/images/nav07.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav7 a:hover { 
	background:url(/images/nav14.png) no-repeat;
}

/*	NavBar End 	*/


/*	Central Display Area 	*/

.display {
	display:block;
	height:475px;
	left: 74Px;
	position: static	;
	width:950px; 
	background:url(/images/display.png) top no-repeat;

}

/*	Central Display Area 	*/


/*	Presentation Area 	*/

.presentation {
	display:block;
	height:466px;
	position: absolute;
	left:71px;
	width:908px;
	top:421px;
	background:url(/images/presentation01.png) top no-repeat;
}


.columnzone {
	margin-top:-35px;
	padding-top:52px;
	position:relative;
	z-index:0;
}

.columncontent {
	padding: 18px 0px 0px 0px;
}

.column1 {
	width:259px;
	float:left;
	padding: 0px 15px 10px 20px;
}

.column2 {
	width:303px;
	float:left;
	padding: 0px 10px 10px 9px;
}

.column3 {
	width:259px;
	float:left;
	padding: 0px 10px 10px 15px;
}

/*	Presentation Area End	*/


/*	Bottom Nav	*/


#bottomnav {
	display:block;
	width: 928px;
	height: 90px;
	position:absolute;
	margin-top:887px;
	margin-left:21px;
}

#bottomnav li {
    list-style:none;
    display:inline;
}

.bnav1 a {
	display:inline;
	float:left;
	width: 326px;
	height: 37px;
	background:url(/images/presentation02.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.bnav1 a:hover { 
	background:url(/images/presentation05.png) no-repeat;
}

.bnav2 a {
	display:inline;
	float:left;
	width: 250px;
	height: 37px;
	background:url(/images/presentation03.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.bnav2 a:hover { 
	background:url(/images/presentation06.png) no-repeat;
}

.bnav3 a {
	display:inline;
	float:left;
	width: 332px;
	height: 37px;
	background:url(/images/presentation04.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.bnav3 a:hover { 
	background:url(/images/presentation07.png) no-repeat;
}


@-moz-document url-prefix() {
  #bottomnav {
   	display: inline-block;
	position:absolute;
	width: 928px;
	height: 90px;
margin-left:0px;
padding:0 0 0 0; 
} 

/*	Bottom Nav End	*/

.footer {
	background:url(/images/footer.png) no-repeat;
	height:60px;
	text-align:center;
	color:#fefaca;
	padding-top:18px;
	margin-top: -500px;
	margin-bottom:20px;
	position:relative;
	z-index:2;
}

I have a basic layout as follows:

Code:

   <div id="wrapper">
   
         <div id="header">
		 
		 	<!--#include virtual="/siteadmin/includes/inc_header.asp" -->		 
			   
		 </div>     
		 
		 <!-- Begin Left Column - Menu -->
		 <div id="leftcolumn">
		 
		<!--#include virtual="/siteadmin/includes/inc_admin_menu.asp" -->
		 
		 </div>
		 <!-- End Left Column - Menu -->
		 
		 <!-- Begin Right Column - Content -->
		 <div id="rightcolumn" align="left">
		       		 
		<!--#include virtual="/siteadmin/includes/inc_menu_page.asp" -->					 	
		 
	 	</div>
		 
		 <!-- End Right Column - Content -->
		 
		 <!-- Begin Footer -->
		 <div id="footer">
		       	
				<!--#include virtual="/siteadmin/includes/inc_footer.asp" -->
			    
	     </div>
		 <!-- End Footer -->		 
		 
   </div>

Which uses the following css

Code:

body {
	margin-top: 0px; 
	margin-bottom: 0px; 
	margin-left: 0px; 
	margin-right: 0px;
	font-family: "trebuchet ms", Arial, Helvetica, sans-serif;
	background-color:#FFFFFF;
}
 
#wrapper {
	margin: 0px;
	width: 100%;
	padding: 0px;
}
#header {
	color: #333;
	width: 100%;
	float: left;
	border: 0px solid #ccc;
	height: 100px;
	background-image: url('/media/images/headerBackground.gif');
}
#leftcolumn {
	color: #333;
	border: 0px solid #ccc;
	background: White;
	padding: 10px;
	width: 195px;
	float: left;
	padding-left: 10px;
	padding-right: 10px;
}
#rightcolumn {
	float: left;
	color: #333;
	border: 0px solid #ccc;
	background: White;
	padding: 10px;
	height: 100%;
	display: inline;
	padding-left: 10px;
	padding-right: 20px;	
}
#footer {
	width: 100%;
	height:27px;
	clear: both;
	color: #333;
	border: 0px solid #ccc;
	background-image: url('/media/images/footer_bg.jpg');
	background-repeat:repeat-x;
}

Anyway the problem is, IE will display as it needs to while firefox will put the right colum down below the left column, header and footer are in the correct spot. Am I doing something wrong here? (very new to layout css)

Hey all,

I am working on completely redoing our website (FizzPow.com) I have a border-right: on my left column in a wordpress template I am modifying. It looks fine in Chrome, IE9, Safari5, but in FF7, it moves my right column all the way down.

Here's the site:
FizzPow.com/newsite

I am an experienced programmer but fairly novice with HTML/CSS. Please be kind and I very much appreciate your help!