CSS - Switching From Ie To Firefox: What Can I Do?

I have a personal website that has 13 different styles - easily switchable through a drop-down menu. Is it possible to insert background music (bgsound=) in CSS and make it work with the switching I have?

Here is the URL: http://brandon.ennis.tv/home.shtml

I'm in need of a method to change an image to different images in the same spot when the user hovers over their respective text links.

So far I have only found methods that work with only 2 different images or they just change upon hovering over the image itself and not text located elsewhere.

THanks.

Hi,
what I'd like to do is have a few style sheets, then have a dropdown box where the user can select a theme and it will switch the style sheet in the link rel= according to which theme they chose. This should be pretty simple but I'm not much of a programmer. Can anyone help me out with the code for this?

Thanks

Hi, I'm using a regular drop-down manu for a CSS change. I can easily get regular links to work, but the drop-down menu will only work in Mozilla. In IE, if I add a 'submit' or 'change' button, the page is reloaded to the home page, and I don't want to make a million different menus, one for each page. Anyone know how to fix it?

Here's the page's URL, and the code I use for the drop-down.
http://www.pokevista.com/home.shtml

<form name="change" method="change" action="http://www.pokevista.com/home.shtml?"><select>
<option>Style Switch:</option>
<option value="#"onClick="setActiveStyleSheet('nav1'); return false;" style="background-color: rgb(0, 33, 87); color: rgb(125, 167, 217);">Winter</option>
<option value="#"onClick="setActiveStyleSheet('nav2'); return false;" style="background-color: rgb(101, 189, 96); color: rgb(0, 94, 15);">Spring</option>
<option value="#"onClick="setActiveStyleSheet('nav3'); return false;" style="background-color: rgb(240, 112, 0); color: rgb(255, 255, 0);">Summer</option>

<option value="#"onClick="setActiveStyleSheet('nav4'); return false;" style="background-color: rgb(153, 37, 7); color: rgb(255, 185, 0);">Autumn</option>
</select></form>

{yes, I'm 15 and a Pokemon fan. Bite me. ^__^;}

i've been searching the web for a couple weeks trying to find a simple way to swap CSS classes onMouseOver, making a simple, and elegant Rollover button. i've found tons of examples with really complex methods, but i really need to do it with CSS classes.

so i've read repeatidly that by putting the following code as your TD tag you'll be able to change class names. and it simply doesn't work at all.

the code i'm having a problem with reads like this:
<td class="out" onMouseOver="this.className='over'" onMouseOut="this.className='out'">

it just doesn't work. anyone at all who can give me a code that does work, i'd be more than appreciative.


oh, and by the way i'm using IE 6.0.2600

Is it possible to change the bullets of an unordered list when you hover over the <li> element using CSS?

I've tried something like this..

Code:

#ulist ul{
	list-style: none;
}
#ulist li a{
	list-style: square;
}

the list
Code:

<ul id="ulist">
   <li><a href="#">Element 1</a></li>
   <li><a href="#">Element 2</a></li>
   <li><a href="#">Element 3</a></li>
   <li><a href="#">Element 4</a></li>
</ul>

But that doesn't work, the reason I think is because the list-style is being applyed to the <a> and not the <li> element.

If not a CSS, how would I use JavaScript to determine the <li> element and add the "square" bullet style to it?

Cheers,
Fozzy

Hello,
I came to this forum for help a couple months ago and was very impressed with how my questions were answered, so I hope nobody minds me coming around again.
I've begun to create a stylesheet for my website that is completely fluid, rather than the 500px wide container my old stylesheet has. I've run into a couple problems that may or may not be related:
1) In my header div, I have an <h1> element and a <ul> that I'd like to be on the same line, but they're on different ones.
2) Both Firefox and Safari draw unnecessary scroll bars (both vertical and horizontal).
3) Sometimes my footer div will inch up from the bottom of the screen, where I'd hoped to leave it anchored.

Here is a test html: http://www.bsuto.com/test.html
and here is the css: http://www.bsuto.com/fluid.css

Thanks!
-Brian

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>

I built a website and its rendering one way in firefox and another in IE. I want it to display just the way Firefox has it. However, IE keeps messing up the padding and the whole layout is destroyed. Can anyone look at my code and tell me where I am going wrong?


Please can someone tell me what I must do to get the code working in both IE and Firefox.

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

I have a site using CSS for layout

It has one main div called main-column that sits in the middle of the page
and has a background image. Within this there are 3 columns columns.

the trouble is the background of the main column does not show up behind
these three. If you right click it says there is a background image there but nothing is showing.

my css is:

Code:

#main-column
{
width:750px;
height: 100%;
margin-left: auto;
margin-right: auto;
background-image:url(/site_images/bodyback.jpg);
}

#left-column
{
width:150px;
float:left;
}

#contents-column
{
width:450px;
float:left;
}

#right-column
{
width:150px;
float:right;
}

and html is:

Code:

<!-- Start of main column -->
<div id="main-column">

<!-- Start of Left Column Div -->
<div id="left-column">
<? include("../includes/leftnav.php"); ?>
<!-- End of Left Column Div -->
</div>

<!-- Start of contents Column Div -->
<div id="contents-column">
<? include("../includes/main.php"); ?>
</div>

<!-- Start of right Column Div -->
<div id="right-column">
<? include("../includes/rightnav.php"); ?>
<!-- End of right Column Div -->
</div>

<!-- End of Main Column Div -->
</div>

Any idea how I can correct this?

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