CSS - My External Css Is Not Rendering In Firefox

Hey folks, here's an odd problem that's got me totally stumped.

I've got a nine item unordered list, each of which is a link that contains both text and a background image. The background image is a large spritebox. I'm using background-position to shift the spritebox to display the sprite specific to the a:link and also to display a separate a:hover version.

Looks great in Safari and CSSEdit, but in Firefox four of the links are misplaced and the sprite is incorrect. The hover state is correct, however.

This is hard to explain, but the example should help illustrate the problem. My thought was that it was related the psuedo class of a:link, but nothing I've tried seems to help. Any thoughts?

The example file contains both the HTML and the CSS (just to simplify this problem for this forum). The full background image and the file containing the sprites is at my website, artmeetsearth dot org slash 2011 slash codetest dot html. To get the image type socialmediaicons.jpg instead of codetest.

Thanks for any help you can offer!

Hello,

I am using ASP.NET to create a web application. I HAVE to use a master page which means that I do not have complete control over the rendering.

The trick is, the master page defines a menu at the top of the page. I need to create a table that dynamically fills the contents of the REMAINDER of the screen. If there is any overflow, I want to scroll the contents.

Does anyone know how I can have the table fill the REMAINDER of the screen? I can nest DIVs and such once I have that outer table.

Thank you!
Crystal

Greetings everyone! I've been working on the following page for a couple of days now, and it looks fine in Safari and Firefox, but all my CSS fail in IE. I don't know what the problem is. Feel free to view the page at the following url http://www.netunification.com/demo/

I spoke with a friend and he speculates IE is having problems with the float command. I'm not so sure of this because I used the same CSS techniques while building the following site (http://www.the904.com/demo/).

The904 page renders perfectly in IE and I can't figure out what the difference is between the pages. I thought I used the same concept with both pages.

I've been trouble shooting the problem for a couple of days now, but I haven't had any luck. Can please someone take a look at my net u page (http://www.netunification.com/demo/) and suggest a solution

Thanks in advance for any/all assistance. Your time and effort is greatly appreciated!

Walt

Hi guys, pretty new to CSS layout, and recently created a site for my girlfriend. I used 960 grid system to handle my layout css, and it renders perfectly in safari/FF/IE7+... after I installed IE Tester, i realized that IE6 wasnt rendering properly. The menu and z-index stuff arent appearing correctly.

If anyone can have a quick look and let me know where my code is causing issues it would be a great help.

I'm not allowed to post the URL, as im a new user, but I guess I can send through PM if you want to have a look?

Thanks a bunch.

Hi,
I've designed a site that looks excellent on IE and Firefox on a PC, as well as (as far as I've been told) Safari. However, I've seen a couple of instances on IE on a Mac where the menu doesn't render correctly.
The page can be viewed here.

On the problem browsers, the top menu items will be displayed in two stacks, rather than across the bottom of the image. If anyone out there has any idea why this is happening, I'd appreciate the help.

The menu code in the HTML:
Code:

<table border="0" width="665" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" align="center" valign="top"> 
<ul class="topmenuul" id="dmenu">
<li class="topmenuli"><a href="home.htm" class="topmenutitle">H O M E</a>
</li>
<li class="topmenuli"><a href="weddings.htm" class="topmenutitle">W E D D I N G S</a>
</li>
<li class="topmenuli"><a href="#" class="topmenutitle">P O R T R A I T S</a>
<ul class="submenuul">
<li class="submenuli"><a href="authors.htm">Authors & Artists</a></li>
<li class="submenuli"><a href="families.htm">Families</a></li>
<li class="submenuli"><a href="musicians.htm">Musicians</a></li>
</ul>
</li>
<li class="topmenuli"><a href="solo.htm" class="topmenutitle">S O L O</a>
</li>
<li class="topmenuli"><a href="#"class="topmenutitle">E M M A</a>
<ul class="submenuul">
<li class="submenuli"><a href="bio.htm">Bio</a></li>
<li class="submenuli"><a href="press.htm">Press</a></li>
<li class="submenuli"><a href="contact.htm">Contact</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table> 

The CSS for the menu:
Code:

.topmenuul{
	list-style-type:none;
	margin: 0px;
	padding:0px;
}

.topmenuli{
	list-style-type:none;
	float: left;
	margin-left: 10px;
/*	border-left:1px solid #000000; */
/*	border-right:1px solid #000000; */
	padding: 0px;
	color: #000000;
}


.topmenutitle{
	display:block;
	color:#000000; 

}
.topmenuli a:link {
	color: #000000;
	}
.topmenuli a:visited {
	color: #000000;
	}
.topmenuli a:hover{
	display:block;
	padding-top: 1px;
 	padding-bottom: 1px;
	text-decoration:none; 
	color:#cccccc; 
	background:#fff;
	width: 120px;
}

.submenuul{
	list-style-type:none;
	position:absolute;
	margin: 0;
	padding: 0;
	display:none;
	color:#000000;
}

.submenuli a{
	display:block;
	padding-top: 1px;
 	padding-bottom: 1px;
	width: 120px;
	text-decoration:none; 
	color:#000000; 
	background:#fff;
	margin-top: 1px;
}

li:hover ul, li.over ul{ /* lists nested under hovered list items */
	display: block;
}

#dmenu li>ul { 
	top: auto;
	left: auto;
}

#content {
	clear: left;

}
-->

#dmenu {
	font-family: Georgia, Helvetica, Sans-Serif;
	font-size:10px;
	text-align:center;
	font-color: #000000;
}

.topmenutitle {
	background:#fff; 
	text-indent:0px;
	text-decoration: none;
	padding:0px;	
	padding-top: 1px;
 	padding-bottom: 1px;
	color:#000000;
	width: 120px;
}

.submenuul {
	background-color:#fff;
	background-position: top left;
}

.submenuli a{
	text-decoration: none;
	color: #000000;
	padding-top: 3px;
 	padding-bottom: 3px;
}
.submenuli a:link{
	color:#000000;
	}
.submenuli a:visited {
	color:#000000;
	}
.submenuli a:hover{
	text-decoration: none;	
	background:#fff;
	color: #cccccc;
	padding-top: 3px;
 	padding-bottom: 3px;
}

when i dont turn of cache in IE my website seems to forget some css rules half of the time

its really annoying cause i only see it when i browse the site on the server not local...and only when caching is turned on

i use the equal heights columns technique from positioniseverything.net

the site having the problem is here

the problem is visible on the home page....i think around 1/5th of the clicks...

then the link in the top left content box that should be absolute; bottom:0;
just crawls up to the text....

like my question is WHY?? does it only do it sometimes

First of all I just updated my Dreamweaver from 2004 MX to CS4. I have not used CSS before.

I now want to update my sites to XHTML 1.0 Transitional and thought I would start using CSS.

I am having trouble with the text losing or changing color and size once it gets posted. It looks fine in browser preview.

So first some general questions. What is the difference between assigning properties to heading or class? Do I or should I use both the heading and class on a bit of text? Do I attach the style sheet to the template or to just the pages? All my pages are made from one template.

I have several books, that tell how to create style sheets, but not what to do with this problem!


Thanks, Jill

http://codymays.net/~private_ftp/theed
When viewing this page in IE6, I see the background of the content div rendered below the footer. The second you select all, click on another window and click back, or minimize the maximize the window, it goes away.

Is this a problem with my code or a bug in IE (because it works in IE7). Either way, what should I do to go about fixing it?

Surprise, surprise.

I'm using a very simple example of a tabbed interface. Each tab is its own div with a border and a bgcolor. As you will see, IE is displaying the tabs such that they hang 1px over their background container while FF displays as expected.

I'm thinking it has something to do with the float but can't seem to figure it out.

Any ideas?

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.hdr	{
	background-color: #ccc;
}

.tab	{
	padding: 0px 5px;
	background-color: #666;
	border: 1px solid #000;
	border-bottom: none;
	color: #fff;
	float: left;
}

.tab.active	{
	background-color: #fff;
	color: #000;
	margin: 0px 3px 0px 3px;
}
</style>
</head>

<body>

<div class="hdr">
	<div class="tab active">tab 1</div>
	<div class="tab">tab 2</div>
	<br style="clear: both" />
</div>
</body>
</html>

Here's my page:
dev.papatime.rewards.openi.com/rewards09/
NOTE: As new member I am not allowed to post a link, so please add h-t-t-p://

Looks great in FF, Chrome, and Safari. In IE8 the grey box at the top of the right hand column is not aligned to the top, throwing off the whole page.

You can see the HTML by viewing source of the page, and I will include the relative CSS below.

CSS of the container:
.twoColFixRtHdr #container {
width: 801px;
background: #FFFFFF;
margin: 0 auto;
border: 0px solid #FFFFFF;
text-align: left;
}

CSS of the main column:
.twoColFixRtHdr #mainContent {
margin: 0 274px 0 0;
padding: 0;
width:527px;
}

CSS of the sidebar:
.twoColFixRtHdr #sidebar1 {
float: right;
width: 261px;
padding-top: 0px;
text-align:center;
vertical-align:top;
position:relative;
}

Been banging my head against a wall for hours on this, any help would be GREATLY appreciated!

Hello Gang!

First off, thank you for taking your time to help a noob.

Here is my problem:

With what I think is the same coding, the page is displaying two different ways. (see image). The left-hand column is made by using <?php include("news.htm"); ?> so I know for sure there are no differences between the pages (at least is that section).

Can anyone spot why the pages render 2 different ways?

LINK 1
LINK 2

Thank you for your time.

Hi,
Trying to get my website to work in IE7. Got to collumns. Side bar and main content. It works fine in firefox, opera and chrome but not in IE7. In IE7 the main content doesn't appear next to the side bar, instead its at the bottom the pade.
The site is at accentibrass dot com

If anyone has any ideas they'd be much appreciated!
thanks

Hi there. I have discovered something odd in FF - When rendering borders, the FF engine has a strange offset.

If you have the border-top:none; then the right border is exactly 1px higher than the left border.

Have anyone experienced the same problem ?

- Emil

Hi there,
I have the following in my css file:
} #headerBannerWrapper {
background-image: url(/GREENLOGO.jpg);
background-position: bottom left;
background-repeat: no-repeat;
background-color: #DEF2B0;
padding: 0px;
margin: 0px;
} #headerBannerWrapper img {
padding: 0px;
margin: 0px;
vertical-align: bottom;
However the banner doesn't get rendered in IE7. It renders OK in IE8

Any help most appreciated.

The above is linked to the following class:
.clearFix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;

NB If the banner has content inside then it renders OK, however if there is no contents inside then the banner (green background) is not displayed.

Hi,

Does anyone have any Ideas how to fix the two rendering bugs shown in the screenshots below?

In IE5.5 The two top bars that stretch across the screen stretch too far distorting the page slightly. (Circled in red).

http://www.explosiveracing.net/test/render_bugs/ie55.jpg

In NN6 the backgrounds on the table cells do not fill correctly looking unsightly. (Circled in red). If you compare this to viewing the site in FF then you can see what I mean

http://www.explosiveracing.net/test/render_bugs/nn6.jpg

Site: http://www.explosiveracing.net/test/