Learn VBA & Macros in 1 Week!

CSS - Images Show Up In Ie But Not Firefox...

Full Excel VBA Course - Beginner to Expert

Images Show Up In Ie But Not Firefox...	View Content

I am a total CSS newbie...but I am trying to make my page display properly in both IE and firefox...

Right now IE is perfect, and firefox displays nothing in the center!

http://www.charlotteweddingphotos.com

Two CSS files:

http://www.charlotteweddingphotos.c...resentation.css

http://www.charlotteweddingphotos.c...-box-layout.css

I searched the net, and people were talking about clearing, and this and that...let me know if you know what my problem is!

Thanks so much in advance!

Full Excel VBA Course - Beginner to Expert

Why Won't These Background Images Show Up In Firefox, But It Looks Perfect In Ie?

Similar Tutorials

View Content

<body>
<div id="wrapper" style=" vertical-align:middle;">
<div id="border-top">
<div id="border-left">
<div id="border-right">
<div id="border-bottom"> </div>
</div>
</div>
</div>
</div>
</body>

body {
background-color:#5E362C;
margin: 0 0 0 0;
}

#wrapper {
width: 828px;
height: 558px;
position:relative;
left: 50%;
margin-left:-414px;
}

#border-top {
background-image: url(../Webdesign/MIRAGE services1_r2_c2.jpg);
background-position:top left;
background-repeat:no-repeat;
width: 828px;
height: 558px;
}

#border-left {
background-image: url(../Webdesign/MIRAGE services1_r3_c2.jpg);
background-position:top left;
background-repeat:no-repeat;
width: 828px;
height: 558px;
margin-top:20px;
}

#border-right {
background-image: url(../Webdesign/MIRAGE services1_r3_c18.jpg);
background-position:top right;
background-repeat:repeat-y;
width: 828px;
height: 557px;
margin-top:-20px;
margin-bottom:20px;
}

#border-bottom {
background-image: url(../Webdesign/MIRAGE services1_r10_c3.jpg);
background-position:bottom right;
background-repeat:no-repeat;
width: 828px;
height: 558px;
margin-top:-1px;
}

Thanks for the help !

Getting Images To Show

Similar Tutorials

View Content

I'm pretty new to website design. I have a lot of programming experience (C++, Java, Python) but very little HTML/CSS experience.

I'm learning Django right now and am having trouble with my presentation. I'm hoping someone here can help me. I'm not sure how many here know Django so I'll try and skip over as much of that as I can.

I have a somewhat cookie-cutter CSS stylesheet I'm using so I can learn the environment. Below are snippets of my .html files and .css file.

base.html
Code:

<body>
    <div id="header">
        <div id="title">
            <div id="innertitle">
                {% block header %}{% endblock %}
            </div>
        </div>
    </div>

index.html
Code:

{% block header %}
    <h1>Signal Auctions</h1>
{% endblock %}

main.css
Code:

#header {
    margin:0 auto;
}

#title {
    padding:20px 20px;
    margin:0 auto;
    background:#333 url('images/titlebg.png') repeat-x scroll 50% 50%;
}

#innertitle {
    width:90%;
    margin:0 auto;
}

h1 {
    font-size:3em;
    padding-left:10px;
}

The problem is that I can't seem to get the image images/titlebg.png to display. I don't think it's an issue with pathing - I have other images in the same location that do display and I use the same method to call them.

Any thoughts?

Help.. Css Images Don't Show Up In Ff

Similar Tutorials

View Content

Good Day,

I am trying to figure out why my CSS Rollover images are not showing up in FireFox, but do in IE. Below are links to my pages and CSS, and if anyone can give me some suggestions, ideas I would be very grateful!!!

Brook

http://www.karmaimports.net/centercss.htm

http://www.karmaimports.net/cssrollover.css

what is should look like: http://www.karmaimports.net/center.htm

Wordpress Help (no Images Show)

Similar Tutorials

View Content

Sorry to ask but I cannnnnnot find this answer. I know it can be done too...

Ok,

I have a wordpress site and every time I add in custom CSS with a

"background-image"
TAG

It works locally but not when I plug it to the live site.

The graphics are a navigation bar thats it... here is the code

Code:

@charset "utf-8"; /* CSS Document */  a span { 	display: none; }  #container #nav { 	background-image: url(../images/nav.png); 	height: 30px; 	width: 926px; 	margin-left: 100px; } #container #nav li { 	float: left; 	list-style-type: none; }  a.main_nav { 	display: block; 	height: 30px; 	z-index: 1; } a.main_nav:hover { 	background-position: 0px -30px;  } #nav_1 { 	background-image: url(DIRECT WEB LOCATION OF IMAGE); 	width: 133px; 	float: left; 	padding-left: 5px; 	background-repeat:no-repeat; } #nav_2 { 	background-image: url(DIRECT WEB LOCATION OF IMAGE); 	width: 182px; 	float: left; 	padding-left: 10px; 	background-repeat:no-repeat; } #nav_3 { 	background-image: url(DIRECT WEB LOCATION OF IMAGE); 	width: 160px; 	float: left; 	padding-left: 5px; 	background-repeat:no-repeat; } #nav_4 { 	background-image: url(DIRECT WEB LOCATION OF IMAGE); 	width: 148px; 	float: left; 	padding-left: 5px; 	background-repeat:no-repeat; } #nav_5 { 	background-image: url(DIRECT WEB LOCATION OF IMAGE); 	width: 115px; 	float: left; 	padding-left: 5px; 	background-repeat:no-repeat; } #nav_6 { 	background-image: url(DIRECT WEB LOCATION OF IMAGE); 	width: 122px; 	float: left; 	padding-left: 5px;	 	background-repeat:no-repeat; } #nav_7 { 	background-image: url(DIRECT WEB LOCATION OF IMAGE); 	width: 122px; 	float: left; 	padding-left: 5px; 	background-repeat:no-repeat; }

and my HTML

Code:

<div id="nav"> <a href="" class="main_nav" id="nav_1"><span>button</span></a> <a href="" class="main_nav" id="nav_2"><span>button</span> </a> <a href="" class="main_nav" id="nav_3"><span>button</span> </a> <a href="" class="main_nav" id="nav_4"><span>button</span> </a> <a href="" class="main_nav" id="nav_5"><span>button</span> </a> <a href="" class="main_nav" id="nav_6"><span>button</span> </a> <a href="" class="main_nav" id="nav_7"><span>button</span> </a>     <div class="clear"></div>   </div>

if anyone can help me understand why this does not work in WP that would be most gracious of you

-Jordan

Absolute Positioned Images Don't Show In Ie5

Similar Tutorials

View Content

I have created a 2-column liquid layout that works perfectly in Safari, FF(Win & Mac), Netscape(Win & Mac), IE5(Mac) and IE6(Win).

In IE5 and 5.5 (Win) I don't get any images. the images are all position:absolute, with their containers set to position: relative. I tried them at first as simple image tags with a class assigned. I then tried to wrap them in Divs with ids. I also messed a little with the z-indexes. Nothing has worked so far.

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=iso-8859-1" />
<style type="text/css" media="screen"><!-- @import url(css/base.css); --></style>
<style type="text/css" media="print"><!-- @import url(css/print.css); --></style>	
</head>

<body>
<div id="container">
<div id="head">
<div id="headerTitle"><img src="images/headerTitle.gif" alt="Ken Dalton" height="100" width="325" border="0"/></div>
<div id="headerGraphic"><img src="images/headerGraphic_Home.gif" alt="Header Graphic" height="100" width="400" border="0"/></div>
</div>
<div id="leftColumn">
<img src="images/typewriter_Home.gif" alt="typewriter" height="220" width="120" border="0"/>
<p class="linkSelectedTop1">Welcome</p>
<p class="link1"><a href="bio.php">Biography</a></p>
<p class="link1"><a href="blog.php?category=">Musings</a></p>
<p class="link1"><a href="guestBook.php">Guest Book</a></p>
<p class="link1"><a href="links.php">Links</a></p>
<p class="link1"><a href="mailto:ken@kendalton.com">Contact</a></p>
</div>
<div id="rightColumn">
<div id="rightPages48"><img src="images/rightPages48.gif" alt="graphic" height="600" width="48" border="0"/></div>
<div id="krdPortrait"><img src="images/krdPortrait.gif" alt="Portrait of Ken Dalton" height="200" width="175" border="0"/></div>
<h1>Welcome</h1>
<p class="clear">&nbsp;</p>
</div>
<div id="footer"><p>&nbsp;</p></div>
</div>
</body>
</html>

The CSS...

html {
height: 100%;
margin: 0 auto;
padding: 0;
text-align: left;
background-color: #000000;
}

body {
height: 100%;
margin: 0;
padding: 0;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 80%;
background-color: #000000;
}

a {
text-decoration: none;
color: #A50023;
}

#container {
position: relative;
margin: 0;
padding: 0;
min-height: 100%;
}

* html #container {
height: 100%;
}

#head {
position: relative;
background-image: url("../images/headerBlend.gif");
background-repeat: repeat-x;
background-position: 0 0;
text-align: left;
margin: 0;
padding: 0;
height: 100px;
}

#headerTitle {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}

#headerGraphic {
position: absolute;
top: 0;
right: 0;
z-index: 9;
}

#rightPages48 {
position: absolute;
top: 0px;
right: 0;
z-index: 10;
}

#krdPortrait {
position: absolute;
top: 0px;
right: 64px;
z-index: 10;
}

#leftColumn {
float: left;
top: 100px;
left: 0;
z-index: 10;
width: 120px;
margin: 0;
padding: 0;
background-color: #000000;
text-align: right;
}

#leftColumn p {
font-weight: bold;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding-right: 9px;
padding-top: 3px;
padding-bottom: 3px;
}

#leftColumn a {
color: #BFA673;
}

#leftColumn a:hover {
color: #A50023;
}

.link1 {
border-top: 1px solid #606880;
margin-top: 0px;
margin-bottom: 0px;
padding-right: 9px;
padding-top: 3px;
padding-bottom: 3px;
}

.linkSelected1 {
color: #A50023;
border-top: 1px solid #606880;
margin-top: 0px;
margin-bottom: 0px;
padding-right: 9px;
padding-top: 3px;
padding-bottom: 3px;
}

.linkSelectedTop1 {
color: #A50023;
margin-top: 0px;
margin-bottom: 0px;
padding-right: 9px;
padding-top: 3px;
padding-bottom: 3px;
}

#rightColumn {
position: relative;
min-height: 100%;
margin: 0;
margin-left: 120px;
padding: 0;
background-image: url("../images/rightColumnFill48.gif");
background-repeat: repeat-y;
background-position: 100% 0%;
background-color: #FFFFFF;
text-align: left;
}

* html #rightColumn {
height: 100%;
}

#rightColumn h1, h2, h3, h4, h5, h6, p {
margin-left: 36px;
margin-right: 320px;
margin-top: 0px;
margin-bottom: 0px;
}

#rightColumn h1 {
font-size: 200%;
color: #606880;
padding-top: 36px;
}

#rightColumn p {
color: #333333;
margin-top: 9px;
}

#clear {
width: auto;
height: 500px;
margin-right:48px;
margin: 0;
padding: 0;
margin-right:48px;
background-color: Transparent;
}

#footer {
width: auto;
height: 72px;
margin: 0;
padding: 0;
background-color: #000000;
}

#footer p {
margin-top: 36px;
}

How To Get Background Images To Show Correctly?

Similar Tutorials

View Content

I am working on this page:
http://concrete-creative.com/pp/products.html

and the problem I am having is that I want the rest of the "flower" image to show behind the content area... I have it set as the background image of that table, but it's not showing up. Here's an image of how it is supposed to appear:
http://concrete-creative.com/pp/pp_sample.jpg

Can anyone direct me on how to work this out?

Thank you!

(I posted this is the HTML forum too but can't figure out how to move it, so I just posted it here too)

Ie Doesn't Seem To Want To Show My Background Images Lately?

Similar Tutorials

View Content

Hey everyone,

I was trying to create a design for a friend, so I started it in Firefox, I got halfway done, went and checked it in IE7, and the background image isn't showing. Here is my code along with a screen shot of it in Firefox and IE7.
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
   <meta http-equiv="Content-Script-Type" content="text/javascript" />
   <title></title>
   <style type="text/css">/* <![CDATA[ */
/* globals */
* {
 margin: 0;
 padding: 0;
}
body {
 background-color: #0E1211;
 color: #FFFFFF;
 font-family: tahoma, verdana, arial;
 font-size: 1em;
 background-image: url( background1.gif );
 background-repeat: no-repeat;
}
a img {
 border: 0;
}
a, a:link, a:visited, a:hover, a:visited {
 color: #EC5568;
 text-decoration: none;
}
a:focus {
 outline: none;
}
a:hover {
 text-decoration: none;
}
#container {
 padding: 10px;
}
#menu {
 float: left;
 width: 20%;
 opacity: .6; /* All others */
 -moz-opacity: .6; /* Gecko browsers */
 filter: alpha( Opacity: 50 );
 background-color: #666666;
 text-align: center;
}
#menu li {
 display: block;
 line-height: 200%;
 list-style-type: none;
}
#menu a {
 padding: 5px;
 padding-right: 80px;
 padding-left: 80px;
 background-color: #333333;
}
#menu a:hover {
 background-color: #000000;
}
#menu h2 {
 text-align: left;
 padding-left: 15px;
 font-size: 16px;
}
#main {
 margin-left: 1%;
 padding: 1%;
 float: right;
 width: 77%;
 opacity: .6; /* All others */
 -moz-opacity: .6; /* Gecko browsers */
 filter: alpha( Opacity: 50 );
 background-color: #666666;
 text-align: justify;
}
	/* ]]> */</style>
  </head>
  <body>
   <div id="container">
    <div id="menu">
     <h2>asdf</h2>
     <ul>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
     </ul>
    </div>
    <div id="main">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam justo elit, ullamcorper ut, dapibus quis, faucibus eu, magna. Nam pede. Fusce tincidunt volutpat tellus. Vestibulum ultrices. Donec augue felis, commodo quis, vestibulum in, tincidunt nec, turpis. Etiam orci ipsum, consectetuer sed, volutpat lacinia, tempor et, ante. Etiam bibendum, dui consectetuer varius facilisis, nisi ante ultrices dui, et tincidunt felis tortor in pede. Aenean sagittis, nisi sed consequat dictum, arcu justo dignissim urna, mollis sodales est mi id urna. Aliquam erat volutpat. Sed sit amet nisi. Quisque sodales mi sed dolor.

Sed tortor. Vestibulum aliquam semper magna. Suspendisse ac urna vitae turpis sagittis semper. Sed arcu est, sollicitudin sed, vulputate ut, volutpat vitae, mi. Integer porta eros ac mi. Ut mattis est sed nulla. Donec nec eros. Vivamus vestibulum congue mi. Fusce vel quam at elit condimentum lobortis. Nunc adipiscing, risus rutrum volutpat lobortis, est massa vestibulum ipsum, et mollis est sem eget odio. Integer eu metus id mauris tempor pellentesque. Mauris lacinia tincidunt diam. Donec pulvinar. Phasellus lectus augue, feugiat eget, aliquam ut, egestas sed, purus. Donec dolor arcu, commodo vitae, scelerisque ut, lobortis sed, sapien. Mauris nonummy tellus id mauris. 
    </div>
   </div>
  </body>
 </html>

Screen shot for FF.
Screen shot for IE7.

Any ideas on why this is happening? IE has been going weird when ever I use background images

Hidden Images Show For A Split Second On Page Load

Similar Tutorials

View Content

I've started using a JavaScript carousel script on my website, http://www.rockitdesign.co.uk/new/. When I loaded the page in Firefox and safari every image in the carousel would appear and then all but the top would disappear which is how it should be.

Sorry for the bad explanation, any way to stop this?

Background Color And Image Won't Show In Firefox

Similar Tutorials

View Content

I have just started writing a page and the first thing I did was establish a body background color and image. It works in IE but not FF.

Can someone please give me a clue what is wrong.

I have searched all the CSS books and the internet but I cannot find an answer.

Thanks in advance.

The URL is http://www.childrens-stories.me.uk/

Learning Css - I Don't Understand Why Ie Doesn't Show The Same As Firefox

Similar Tutorials

View Content

Hello! I am learning CSS on my own which is an authentic crusade
So i decided to start with blogs since i have one of my own and i want to give it a personal look. I decided to download some blog templates available in the web to open and see how they work, somehow i managed to understand what i wanted but there are somethings that i don't understand.
I decided to stick with this blog template but i came to realize that it doesn't show correctly in IE, the side bar color doesn't show and the font size is bigger. I wonder why that happens...can someone tell me?
Quote:
http:// nicetobehere-btemplates.blogspot.com/

And since the code is too big to post here you can download it from here
Quote:
http:// btemplates.com/2009/01/16/nice-to-be-here/

I will apreciate very much if you can help me with this!!

Images Don't Appear In Ie But Do In Firefox...

Similar Tutorials

View Content

Can someone please help this newbie to css figure something out? In firefox, the images in my sideboxes seem to appear fine. But in IE, they don't work at all.

For example, please look at http://www.kettlebell.com/brandnewsite/five-minutes-with/tyveculus.html

The CSS is found he
http://www.kettlebell.com/brandnewsite/css.css

Any ideas why this is not working in IE but does in FF? I had a problem earlier with my "snippets" not appearing in IE but working in FF. I was able to fix it by changing to "absolute" positioning. (which I don't understand why, but it worked). However, with these images, I've tried different compinations of positioning, but it doesn't seem to matter.

Please, someone help! This is keeping me from wrapping it up!

Thanks very much in advance.

Gaps Between Images? (firefox)

Similar Tutorials

View Content

http://67.177.129.17/BrianRoyer/xhtml%20compliant/

Why are their gaps between the logo, navigation row, and content area only in firefox?

/ssi/style.css for stylesheet

Thanks guys.

Repeating Background Images In Firefox

Similar Tutorials

View Content

For some reason repeating backgrounds won't repeat in Firefox unless I specify a height for the div.

They show up ok in IE.

This will display:

Code:

#contentcontainer {
  background-image: url('images/layout/content_bg.png');
  background-repeat: repeat-y;
  height: 350px;
  width: 785px;
  font-size: 0px;
  margin: 0px;
  padding: 0px;
  background-color: #fff;
}

This won't:

Code:

#contentcontainer {
  background-image: url('images/layout/content_bg.png');
  background-repeat: repeat-y;
  width: 785px;
  font-size: 0px;
  margin: 0px;
  padding: 0px;
  background-color: #fff;
}

I need to find a way around this as my pages are varying lengths.

Any ideas?

Thanks,

Beardy

Lines Under Images That Are Links (in Firefox)

Similar Tutorials

View Content

on this page http://tampabay-online.org/cetr/artists.php

I am getting lines under the images and text that are links (I do not want the line under the images). This happens in Firefox. It displays how I want it to in IE and Opera. I usually design my sites for Firefox but I really trust Opera's compliance.

my css includes :
Code:

a img {
border: none;
}

Any ideas where the lines are coming from?

Thanks!

Firefox Putting Gray Border On Some Images

Similar Tutorials

View Content

Firefox is putting a gray border on most of my images. The border is sometimes on the bottom or off to the right. If I add padding to the images sometimes the border will go away. The images are not links. I have basically covered every option in CSS to eliminate the problem with no prevail my CSS:

Code:

body img{ padding: 0; border:none; -moz-border-radius: 0; -khtml-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -webkit-box-shadow: 0 0 0 #000;   -moz-box-shadow: 0 0 0 #000; text-decoration: none; outline:none; overflow: hidden; }

Hopefully someone has encountered this before or has some information to help?

Images Aligned Differently In Safari And Ie/firefox

Similar Tutorials

View Content

You'll have to bear with me on the CSS, the file is a mess. I couldn't get it to do what I want, so I had to copy the file from someplace else, so there's alot of code commented out.
The HTML is much cleaner though!

The issue is in the image above is that the 'Contact' and 'Back to Projects' images are too high in Safari. In IE and Firefox they're placed correctly.
All the other images on the rest of the site line up fine, as you can see with the JW logo, Resume link, and even the bar across the screen

All the images are in their own < li > (I think it's weird myself, but it works). And the placement is done in the CSS.

Code:

<li id="ResumeHigh"><a href="resume.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('resume','','images/resume_rollover.gif',1)"><img src="images/resume.gif" name="resume" border="0"  id="about" /></a></li>

<li id="ContactHigh"><a href="contact.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contact_rollover.gif',1)"><img src="images/contact.gif" name="contact2" border="0" id="contact2" /></a></li>

<li id="BackHigh"><a href="index.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Back','','images/back_to_proj_rollover.gif',1)"><img src="images/back_to_proj.gif" name="Back" width="141" height="9" border="0" id="Back" /></a></li>

And the CSS Alignment:
Code:

#ResumeHigh {left:550px; top: 62px; width: 141px; height: 11px;}
#ContactHigh {left:550px; top: 78px; width: 141px; height: 11px;}
#BackHigh {left: 550px; top: 101px; width:141px; height:9px;}

Full Pages:
http://www.jerrywatersarchitect.com/sample/contact.asp
http://www.jerrywatersarchitect.com/sample/jw2.css

Any ideas whats causing the 'Contact' and 'Back to Projects' to be a few pixels too high?
I appreciate any help you can provide.

Website Images Positioning Ok On Ffox And Ie On Pc But Not On Apple Firefox Or Safari

Similar Tutorials

View Content

Hey guys i have some image layout problems with my images on safari and firefox on Mac only. Firefox and safari on PC seem fine but its only happening on Mac. The positioning of the images have moved dramatically.

Not sure how to fix it

CSS is validated and so is xhtml strict

Absolute Positioning Within A Relative Table Not Working With Firefox. Firefox Bug!?

Similar Tutorials

View Content

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.

Embedded Images Vs Css Images

Similar Tutorials

View Content

Im just curious, what are the advantages of using css to import all your images (that arnt dynamic) as apposed to inserting them into your html using the <img> tag?

Filtering Mac Firefox Vs. Pc Firefox Css?

Similar Tutorials

View Content

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.