CSS - It Shifts Up For Firefox

I'm not sure if this is an HTML problem or a CSS problem, but since it seems to be a display issue, I'll start here.

I have an annoying minor display issue on my site , the solution to which has alluded me for some time. The pop up menues are created using CSS specificity but I'm thinking that has no bearing on the issue because the menues aren't the only place the problem occurs.

In a number of places, I have implemented mouseover effects using the :hover pseudo-(class/element). In instances where the hovered content requires more screen space (to add a border or text decoration, etc) the whole page gets shifted a pixel or two (however much it takes to add the effect).

I've tried adding transparent borders around the static images and increasing line height around text, but to no avail. Any suggestions?

I have been dealing with this issue for a while now and I don't know if I just can't see it or maybe I just don't know what I'm doing.

In IE6, the div #primary is shifted almost off the screen to the left (or to the outside of the wrapper on the right), but on hover it shifts to the correct position. It works fine in FF2, FF3, safari 3.x and ie7.

I have tried so many things it would be too much to list. I've read about all kinds of IE hacks and tried most of them (holly hack, inline hack, hasLayout, etc) that I thought pertained to the issue. Maybe I didn't use them properly, i don't know at this point.

All of the code is a modified wordpress theme, sandbox, which i have customized for this particular layout.

I have left a black box around the affected div for testing purposes. If you look on the homepage you will see the div stuck off the left of the page (or right, i haven't been able to figure out what causes it to choose a side), as i have removed the links again for testing purposes. It will only shift if there are links or something to invoke the hover. Once the div has been redrawn in IE6 and moved to its correct position, it seems to stay where it should on subsequent pages.

I can provide the site for reference if needed.

thanks for any help at this point.

Code:

<div id="container">
		<div id="content-2">


			<div id="post-25" class="hentry p1 page publish author-admin category-uncategorized untagged y2008 m11 d10 h16">
				<h2 class="entry-title"></h2>
				<div class="entry-content">
<p>Life happens in the kitchen. That’s our belief, and we’re sticking to it.</p>
<p>For the past 35 years, Cooks has been the Twin Cities’ industry leader in all things culinary. We were the first cooking school to bring nationally recognized chefs and cookbook writers to the Twin Cities, the first retail store to incorporate cooking classes and the first specialty gourmet store to directly import culinary products.</p>
<p>And those won’t be our last firsts. We’re constantly growing, changing and challenging ourselves to bring the best products and experiences the food world has to offer to our customers.</p>



				</div>
			</div><!-- .post -->


		</div><!-- #content -->
	</div><!-- #container -->

	<div id="primary" class="sidebar">
		<ul class="xoxo">
		
			<li id="text-285739111" class="widget widget_text">						<div class="textwidget"><a href="/history" class="menuabout1">&nbsp;</a>
<a href="/passion" class="menuabout2">&nbsp;</a>
<a href="/community" class="menuabout3">&nbsp;</a>
<a href="/stuff" class="menuabout4">&nbsp;</a>
<a href="/employment" class="menuabout5">&nbsp;</a>
<a href="/donations" class="menuabout6">&nbsp;</a></div>
		
			</li>
		</ul>
	</div><!-- #primary .sidebar -->

	<div id="secondary" class="sidebar">
		<ul class="xoxo">
		
			<li id="text-273708591" class="widget widget_text">						<div class="textwidget"><ul id="aboutpanel">
 <li id="aboutbut1"><a href="/history"></a></li>
 <li id="aboutbut2"><a href="/community"></a></li>
 </ul>
<ul id="aboutpanelb">
<li id="aboutbut3"><a href="/passion"></a></li>
<li id="aboutbut4"><a href="/stuff"></a></li>
<ul></div>
		
			</li>
		</ul>
	</div><!-- #secondary .sidebar -->

here is the CSS, i use a separate ie6 css file, i have combined all CSS for easy viewing.

Code:

div#wrapper {
	width: 914px;
	margin: 12px auto 20px auto;
	padding: 0px;
}

* html div#primary {
	position:relative;
}


/*  CONTENT AND WIDGETS FORMATTING  */

div#container {
	float:left;
	width:914px;
}
 
div#content {               /* homepage template  USED BY HOME PAGE*/
	height:1%;
	margin-top: -18px;
	margin-right: 40px;
	margin-bottom: 0;
	margin-left: 200px;
}

div#content-2 {             /* secondary template  USED BY ABOUT PAGE */
	height:1%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	color: #333333;
	margin-top: 20px;
	margin-right: 380px;
	margin-bottom: 0;
	margin-left: 260px;
}

div#content-3 {             /* tertiary template */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	color: #333333;
	margin-top: 0;
	margin-right: 200px;
	margin-bottom: 0;
	margin-left: 200px;
}

div.sidebar {
	float:left;
	overflow:hidden;
}

div#primary {
	width:200px;
	margin-top: 18px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -98%;
}

div#secondary {
	width:315px;
	margin-top: 8px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -370px;
}

div.sidebar li {
	list-style:none;
	margin:0 0 2em;
}

div.sidebar li form {
	margin:0.2em 0 0;
	padding:0;
}

div.sidebar ul ul {
	margin:0 0 0 1em;
}

div.sidebar ul ul li {
	list-style:none;
	margin:0;
}

div.sidebar ul ul ul {
	margin:0 0 0 0.5em;
}

div.sidebar ul ul ul li {
	list-style:none;
}

div.sidebar div, div.sidebar ul {
	margin:0;
	padding:0;
}

i have a site that if the page isn't cached, some of the content starts like, at the top of the page and then shifts in to it's positioned place. why does this happen? how can i stop it?

i have a div tag absolutely positioned and inside that tag i ONLY have an image.

so if place it in some code like this:

Code:

<tr><td><div id="thetag"><img src="asdf.gif" width="10" height="20"></div></td></tr>

and following that right away, if i have another table row with whatever in it:

Code:

<tr><td>asdf</td></tr>

then what happens is that second row gets shifted up and gets put in place under the first row, making the image overlap the 'asdf'.

if i put at least one char after the image in the div, its fine and the second row will follow under the image on a new line like it should, but i dont want any text in there.

any ideas?

thanks

Hi All,

Hopefully I'm asking this in the right place-- this may be more of a CSS/HTML question.

I currently have a DIV at the top of my webpage, with it's style as "none."

[code]
<div id='confirm' style="Display:none;"><p>Item Has Been Updated</p></div>
Anyway, I have a little function that changes the display to "block" when an action occurs with database. Doing so, it display the DIV fine. However, it moves the "entire" page (meaning the rest of my DIVS) downward.

This is kind of an eyesore when everything moves like that.

Besides moving the DIV to the bottom of the page, how would I achieve displaying the DIV at the top without shifting the rest of the content downward?

Thanks very much.

Of course, IE is being a P.I.T.A. I can't figure out why this is happening... but it's probably something so simple I'm overlooking it.
I have a set of images and/or links set up as a list and the last item on the first row shifts down. After that row, everything looks fine. No problems on FF, Chrome and Safari (Mac). See this page for example and view with Explorer:

www[dot]cameronstevens[dot]ca/gallery[dot]html

Thanks

I'm having a few problems with my CSS design which I can't seem to solve right now, despite lots of searching and code editing.

I'm trying to do a simple design with two columns - a left menu and the main content on the right. It should be a simple page I think.

It's probably easier to see an example of the page I'm talking about:

http://edwin.netbits.co.uk/devshed/...blem/index.html

In Firefox, it looks fine. But in IE 6 the line "Some text" is slightly more to the right than the line "and some more text". If you select the text on the right, it's slightly more obvious (see screenshot).

It seems that the menu on the left is somehow shifting the text over. I have looked at tutorials (such as this one), but the test page I put together has the same problem.

I think this is probably a simple problem, but I can't work out what's wrong. The HTML and CSS code is shown below.

HTML:
Code:

<div id="contentscontainer">
  <div id="left">
    Menu
  </div>
  <div id="contents">
    Some text<br /><br />and some more text
  </div>
</div>

CSS:
Code:

div#contentscontainer
{
	padding: 0px;
	margin: 0px;
}
div#left
{
	float: left;
	width: 50px;
	padding: 0px;
	margin: 0px;
}
div#contents
{
	padding: 0px;
	margin-left: 170px;
}

Thanks,
Edwin

I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it.

The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox?

You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html).

css Code:
Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; }

  

 #main-nav


 {


     background-color: black;


     height: 40px;


 }


 #nav


 {


     position: relative;


     margin: 0;


     padding: 0;


 }


 #nav li


 {


     position: relative;


     float: left;


     display: table;


     width: 99px;


     height: 40px;


     border-right: 1px solid white;


     text-align: center;


     font-size: 10px;


 }


 #nav li:hover


 {


     background-color: darkred;


 }


 #nav a


 {


     display: table-cell;


     vertical-align: middle;


     line-height: 11px;


     font-weight: bold;


     text-decoration: none;


     color: #fff;


 }


 #nav li ul


 {


     position: absolute;


     padding: 0;


     background-color: gray;


     top: 40px;


     left: 0px;


 }


 #nav li ul li


 {


     width: 98px;


     border: 0;


     border-top: 1px solid white;


 } 

html4strict Code:
Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div>

  

 <div id="main-nav">


     <ul id="nav">


         <li id="m1"><a href="#1">Main Menu 1</a></li>


         <li>


             <a href="#2">Main Menu 2</a>


             <ul>


                 <li><a href="#2a">Sub-Category 1</a></li>


                 <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li>


             </ul>


         </li>


         <li>


             <a href="#3">Main Menu 3 with multiple lines</a>


             <ul>


                 <li><a href="#3a">Sub-Category 2</a></li>


             </ul>


         </li>


         <li><a href="#4">Main Menu item which has a really long name on it</a></li>


     </ul>


 </div> 

The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers.

Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem.

I'm having an issue where a website is showing up a few pixels off in Mac Firefox than it is in PC firefox. Anyone have a quick fix for this?

Mac Screenshots: http://graffetto.com/chops/clairus_screens.pdf

PC Firefox Screenshot:


Firefox, IE, and Netscape all look identical on PC, while firefox, IE and safari look identical on Mac, but different from PC (except safari - messed up text)

Any help is greatly appreciated

Edit: after reviewing my post I realized I was quite vague. What I'm looking for is a way to filter CSS so that only Mac Firefox users will receive one CSS file, and PC users will receive another.

Hi, I'm having an issue with Firefox displaying my home page correctly. It previews smaller than other pages in my site even though they all share the same style sheet.

In IE 7 my site previews fine, the issue is with Firefox for some reason the wrapper seems to shrink on the home page and any help or tips to steer me the right way would be greatly appreciated, thanks.

Code:

<---Style sheet---->
body {
	margin: 0;
	padding: 0;
	background-image: url(assests/wrapperimage.jpg);
	background-attachment: fixed;
	
	}


p {
	color: #FFFFFF;
	font-family: "Courier New", Courier, monospace;
	line-height: 20px;
	letter-spacing: 2px;
	font-size: 12px;
	margin-top: 0;
	margin-bottom: 0px;
	
		}
	
h1	{
	font-size: 2.4em;
	color: #00FF00;
	border-bottom-width: thin;
	border-bottom-color: #00FF00;
	border-bottom-style: dashed;
	margin-top: 40px;
	text-align: center;
			}
h2	{
	font-size: 20px;
	color: #CCFF66;
	text-align: center;
		}


#wrapper {
	width: 800px;
	height: 1150px;
	border-right: 2px solid #00FF00;
	border-left: 2px solid #00FF00;
	border-bottom: #000000 10px;
	margin-right: auto;
	margin-left: auto;
	background: #000000;
				}


		
#banner {
	
	height: 250px;
	width: 800px;
				}
#sidebar  {
	float: left;
	width: 190px;
	height: 500px;
	margin-top: 60px;
	margin-left: 10px;
	margin-bottom: 60px;
	padding-left: 10px;
	color: #FFFFFF;
	text-align: center;
	border-color: #999999;
	border-style: thin;
			}
#sidebar li	{
	list-style: none;
	background-image: url(assests/images/images/images/check.jpg);
	background-repeat: no-repeat;
	padding-left: 25px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 6px;
	text-align: left;
	}

#main  {
	float:right;
	width: 500px;
	padding: 5px;
	
					}

ul.nav 	{
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-left: 50px;
	padding-left: 0px;
	list-style: none;
	float: left;
	width: 750px;
	letter-spacing: 3px;
	}

ul.nav li	{
	float: left;
	padding-left: 10px;
	margin-left: 15px;
	margin-right: 10px;
				}
ul.nav a	{
	display: block;
	padding-left: 15px;
	padding-right: 5px;
	margin-left: 10px;
	margin-right: 5px;
	background-color: #000000;
	text-decoration: none;
	color: #00FF00;
	text-align: center;
		}
ul.nav a:hover	{
	background-image: url(assests/images/images/images/check.jpg);
	background-position: left;
	background-repeat: no-repeat;
	padding-right: 10px;
	color: #FFFFFF;	
	}

</style>

<----Home page HTML---->
<link href="main.css" rel="stylesheet" type="text/css" />


</head>


<body>
<div id="wrapper">
  
  <div id="banner">
   	  <img src="assests/images/starbanner.jpg" />
       	  
		
		  <ul class="nav">
       	  <li><a href="index.html">Home</a></li>
            <li><a href="aboutus.html">About us?</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="contactus.html">Contact Us</a></li>            
    </ul>
       
	</div>	


<div id="sidebar">

<h2>Why have a website?</h2>

<p>In todays market having a business or being a professional can cost thousands of dollars and you could be missing out on siginificantly increasing revenues. The internet is low cost method of marketing that yields results with the proper planning, marketing and implemnation. 
Taking advantage of the internet in your overall marketing plan is essential in today's market for your company to grow and remain competitve.

Take a look at our portfolio to see some of the work we've done or contact us today to schedule a no-obligation free consultation.</p>
<p>	
  
		
</p>
</div>






<div id="main">
<h1>Web Design Studio</h1>
<p>star media is a web design studio located in Troy, Michigan. Our specialty is providing afforadable and customized web design services as well as graphic design and print services. With our competitve pricing and custom tailored marketing programs we will drive customers to your website and through your business doors. Our competitive pricing and quick turn around time in developing websites ensures you have your website up and running as quickly as possible without breaking the bank.

From basic and simple websites to high caliber e-commerce database driven websites Gstar media does it all.  
<h2>Why have a website?</h2>

<p>In todays market having a business or being a professional can cost thousands of dollars and you could be missing out on siginificantly increasing revenues. The internet is low cost method of marketing that yields results with the proper planning, marketing and implemnation. 
Taking advantage of the internet in your overall marketing plan is essential in today's market for your company to grow and remain competitve.

Take a look at our portfolio to see some of the work we've done or contact us today to schedule a no-obligation free consultation.</p>
</div>

</div>
</body>

</body>
</html>

<-------About US HTML------>
<link href="main.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="wrapper">
  
  <div id="banner">
   	  <img src="assests/images/starbanner.jpg" />
       	  
		
		  <ul class="nav">
       	  <li><a href="index.html">Home</a></li>
            <li><a href="aboutus.html">About us</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="contactus.html">Contact Us</a></li>            
    </ul>
       
	</div>	


<div id="sidebar">
<h2>We offer:</h2>

	
  <ul>
		<li>web design</li>
		<li>web hosting</li>
		<li>e-commerce</li>
		<li>logo design</li>
		<li>business card design</li>
		<li>flyer design</li>
		<li>customized marketing campaigns</li>
		<li>Search engine optimization</li>
		<li>web maintence</li>
		<li>illustration</li>
	</ul>
</p>
</div>






<div id="main">
<h1>Our Promise.</h1>
<p>star media is created with the goal of providing affordable web design service to small business owners and professionals. I graduated from Sheridan college with a degree in business and later went on to get a degree in graphic design. With a strong background in business I understand how to market your business and message effectively to prospective customers that will help spread the awarness of your products and services in order to increase your revenues. I have a strong understanding of graphic design principles with a working knowledge of CSS/XHTML, Photoshop CS3, and Illustrator CS3.
</p>
</div>

</div>
</body>
</html>

Can someone please help me, i am desparate to intergrate transparency into my forum but im finding out what a pain in the *** it is.

I tried semi transparent png's, but they only work in firefox and IE7 but most people are using IE6 (42.3%). I looked around on the internet for a fix that solves the ie6 png transparency issue but i didnt find one that shows it as semi transparent and doesnt bugger all of the links.

Now ive moved onto CSS, ive found a solution that works great for IE 6 + 7 but not firefox. What happens is i apply a transparent css to the pagebackground:

Code:

	filter:alpha(opacity=50);
	opacity: 0.5;

but it applies it to everything on top as well. To get around this i apply a non transparent css to everything on top:

Code:

	filter:alpha(opacity=100);
	opacity: 1;

This works fine in IE making the background transparent and the contents on top solid but in firefox everything (including the content and the background) is transparent. Is there anything i can do to get around this? Its getting really annoying! Any help you can give would be much appreciated.

James

my css in IE is GREAT and look good. but on firefox, it doesnt show my background and all that. can anyone give me some suggestions.

www.na-magodai.net

I have a question regarding CSS and it's compatibility with FireFox, the problem is, when I have the CSS in a seperate file (e.g. <link rel="stylesheet" type="text/css" href="content.css"> ) it wont work in FireFox browser, works fine in Internet Explorer, but when I copy and paste the CSS directly onto the page, in between the <head> </head> tags of course, it works fine in FireFox and Internet Explorer fine, what am I doing wrong, do I need to specify something in the "stylesheet type" tag above?

Any help would be great!

Have a page at

www.maxxedmotors.com/damo

There is a div called "container" which is supposed to surround all of the content with a border.

This works fine in IE 6/5.x, but in firefox the border only surrounds the div called "header".

Can anyone tell me where i'm being dumb

Any help greatfully appreciated.

i read the thread posted about this not too long ago, and tried out the DOCTYPE! tag suggested, along with a few others from W3...

however all that did was screw up the page more.

anything you could do to help would be great

Page Link