CSS - Css Works On Ff But No Ie6

www.strutmag.com/newstrut/

I'm working on a site that is using CSS layout. I use a Mac at work and the site looks great on it. I've checked it on the Mac on Safari, IE, and Firefox. When I went home the other day, and I checked the site on my PC (on IE and Firefox), the site did not layout correctly. I think the main issue is the relationship between the left section (where the large image is) and the floated right content box. I was really surprised to see it not working on my PC, so now I'm at a loss. I'm wondering if anyone has any suggestions about about the cross-platform, cross-browser differences I need to account for. Please help! Thanks!

CSS

Here's the css code.

Code:

.toolbar a:hover, .toolbar a:focus, .toolbar a:active {
	background-color:#F5F9FA;
}
.toolbar {
	border:0;
	padding:0;
	margin:auto;
	border-collapse:collapse;
}
.toolbar a {
	display:block;
	text-align:center;
	vertical-align:middle;
	white-space:nowrap;
}

.toolbar a:hover, .toolbar a:focus, .toolbar a:active {
	text-decoration:none;
}

It works fine when you hover over a link, it lights up the back of the td which is what I want. However I would like the whole td to act as a link. So wherever you move the mouse over the td it lights up and would link to the page, instead of just over the text.

Any suggestions?

hi

The following CSS code works in Firefox, but not IE.

The site has a fixed top bar using CSS which works perfectly in firefox, but stuffs up in IE.

Does anyone know what I need to change it to to fix the problem?

Code:

		html, body
		{
			margin: 0;
			padding: 0;
			height:100%; 
			max-height:100%; 
			font-size: 90%;
			font-family: verdana, sans-serif, arial, helvetica;
			background-image: url('images/gradient.jpg');
			background-repeat: repeat-x;
			background-color:#fff;
		}
		
		#header
		{	position: fixed;
          		top: 0px;
           		left: 0px;
           		width: 100%;
           		height: 100px;
           		z-index: 1;
			height: 50px;
			margin-bottom: 2em;
			background-image: url('images/gradient2.jpg');
			background-repeat: repeat-x;
		}

		#topmenu
		{
			position: absolute;
			left: 250px;
			top: 30px;
			width:560px;
		}

		#stats
		{
			position: absolute;
			right: 15px;
			top: 5px;
			text-align: center;
		}

		#gutter
		{
			float: left;
			width: 3%;
			height: 1px;
		}

		#col
		{
			float: left;
			width: 70%;
			margin-bottom: 1em;
			padding-right: 3%;
			margin-top: 5.5em;
		}
		
		#rescol
		{
			float: left;
			width: 94%;
			margin-bottom: 1em;
			padding-right: 3%;
			margin-top: 5.5em;
		}

		#rescol a {		
			text-decoration:none;
		}

		#rescol td {		
			text-align: center;
		}

		#col1
		{
			float: left;
			width: 45%;
			margin-bottom: 1em;
			border-right: 1px solid #ccc;
			padding-right: 3%;
			margin-top: 5.5em;
		}
		
		#col2
		{
			float: left;
			width: 15%;
			margin-left: 3%;
			margin-bottom: 1em;
			padding-right: 3%;
			margin-top: 5.5em;
		}
		
		#col3
		{
			position: absolute;
			right: 30px;
			margin-left: 3%;
			margin-bottom: 1em;
			margin-top: 5.5em;
		}
		
		#footer
		{
			clear: both;
			height: 50px;
			padding: .5em;
			font-size: 11px;
		}

		#footer ul {
			border-top: 1px solid #ccc;
			margin: 0;
			padding: 1em 0 0 0;
			list-style: none;
		}

		#footer li a, #footer li span {
			display: block;
			float: left;
			padding: 5px 1em;
			border-right: 1px solid #ccc;
		}

		#footer li span.copyright {
			border-right: none;
		}

		a:hover {
			color: #003;
		}

		h1
		{
			margin: 0;
			padding: .5em;
		}
		
		h2
		{
			margin: 0;
		}

		hr.c {	
			border: none 0; 
			border-top: 1px solid #ccc;
			width: 100%;
			margin-bottom: 10px;
			text-align: center;
			height: 1px;
		}


		<!--[if IE 6]>

		body
 		{
  		overflow: hidden;
  		}

		div.content
 		{
 		height: 100%;
  		overflow: auto;
  		}

		<![endif]--> 

I got my css menu to work in Firefox and have it to show the way I want it to, but now in IE it just shows up as a list of course, the experienced people will no that by looking at the code which I hope you can help me out by fixing it, so here it is dont laugh.

Code:

ul#menu{
	margin:0;
	padding:0;
	list-style-type:none;
	width:790px;
	display:block;
	height:40px;
	text-transform:uppercase;
	font-size:13px;
	background:transparent url("images/black.jpg") repeat-x top left;
	font-family:Helvetica,Arial,Verdana,sans-serif;
}
ul#menu li{
	display:block;
	float:left;
	margin:0;
	pading:0;
	border-right:1px solid #ffffff;
	}
ul#menu li a{
	display:block;
	float:left;
	color:#ffffff;
	text-decoration:none;
	padding:12px 20px 0 20px;
	height:28px;
	}
ul#menu li a:hover{
	background:transparent url("images/blue.jpg") repeat-x top left;	
	}

Thank You

I am trying to make a menu on my website and it works well on internet explorer 7. I went onto firefox to check it and it is not working so great. The link is:-alrwritingservices.co.uk.

The css:-

Code:

.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(backygnav.gif) center center repeat-x;
list-style
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: #FFFFFF; font-weight: bold;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(backgnavhover.gif) center center repeat-x; text-decoration: none; font-weight: bold; float: left;
}

The html:-

Code:

<ul class="solidblockmenu">
<li><a href="index.php" class="current">Home</a></li>
<li><a href="about.php">About Me</a></li>
<li><a href="samples.php">Samples</a></li>
<li><a href="manual.php">Manual</a></li>
<li><a href="testimonials.php">Testimonials</a></li>
<li><a href="quote.php">Get A Quote</a></li>
<li><a href="faq.php">FAQ Section</a></li>
</ul>
<br style="clear: left" />

How would i make it look better in firefox and would would be the hack for internet explorer. Is theer any help available on the internet about this?

Many thanks in advance, Stevo

Hi, I have apage where the div only works on the bottom on the page. I am trying to place it also in the center to divide content. Here is the CSS code:
Code:

.doubleLine{
    clear:both;
    position:relative;
	float:left;
	width:1172px;
	height:6px;
    background-image: url(images/common/double_line.gif);
	background-repeat: no-repeat;
    margin-left:37px;
    margin-right:0px;
    margin-top:6px;
    margin-bottom:6px;
    padding:6px 0px 6px 0px;
}

can anyone tell me why this div with an image won't appear between content? I havetried everything I could think of.

thanks

I have the following CSS that I believe is valid, but it only works in IE. In fact in IE it works perfect, but in FireFox it does not display anything at all.

Code:

<div style="font-size:8px; text-align:left; background-color:red; width:100px;"><div style="font-size:8px; background-color:green; width:75px;"></div></div>

What I am trying to do is display a rating. In the above example, the rating is 75/100, so a green bar 75px long over a red bar 100px long.

is there anything special i need to do to get CSS to work with IE?

Here is what i have above the </head> tag
Code:

<link rel="stylesheet" type="text/css" href="layout.css">

the layout.css has:

Code:

catheader { 
color:#ffffff;
font-size: 14px;
font-weight: bold; 
font-family: verdana;
}

then in the <body> i have
Code:

<catheader>My New Category</catheader>

In netscape it shows correctly, in IE it doesnt read it at all.

any ideas?

Hi,
I'm trying to create a transparent background for the main text part of a site. I have the following code in the .css file:

Code:

.dataContainer {
	background-image:url('/images/transluscentbg.png');
	*background: none:
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transluscentbg.png',sizingMethod='scale');
	padding:10px;
}

and call it he
Code:

<html><head>
<link rel="stylesheet" type="text/css" href="styles/kr.css" />

<meta name="description" content="">
	<meta name="keywords" content="">
<script src="rollover.js" type="text/javascript"></script>

</head>
<body id={$styleName|lower}>
	<!-- BEGIN OUTER WRAP -->
	<div id="bodywrap">
		<div id="logoSpace">
		</div>
		<!-- BEGIN MAIN CONTAINER -->	
		<div id="content">
	        <div id="contentBorders">
			<div id="mainContent" class="clearfix map{$mapNum}">
				<div id="navBar">

			<div id="innerContent" class="clearfix">
				{include file="nav.tpl"}
				<div class="goContent">
                                <div class="dataContainer">
               lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem 
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
lorem ipsum 
</div>
</body></html>

This works fine in Firefox, but .dataContainer has no transparent background in IE. HOWEVER! It does work in both IE and Firefox if, instead of using <div> tags, I put the content in a table (<table><tr><td class="dataContainer">).

Anyone have any idea why this might be happening and how i might be able to get the <div> to work?

I am new to style sheets, and I have been trying to get an entry level position with a web developer here close to me. They sent me a PSD and told me to layout using nothing but CSS and no tables. So I did so... and it looks fantastic in Firefox, but not at all good in IE. The only real problem is with the positioning.. the content color and size and everything seems to be fine.... all the positioning is done in the code on the website, where you can view source... I pasted the CSS code below, but doubtful it will help much. Can anyone offer me some help? The site is he http://www.eomnis.com/test

the style sheet is here http://www.eomnis.com/test/css.css and i pasted the style sheet code below. Thanks for any help everyone.

Aaron


<style type="text/css">
body {
background-image: url('images/main_background.jpg');
background-color:#000000;
background-repeat: no-repeat;
margin: 0px;
}
.top_text {
font-size: 14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFF00;
font-weight:400;
}
.bold_grey{
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#EEEEEE;
font-weight:300;
letter-spacing:inherit;
}
.small_text{
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#EEEEEE;
font-weight:300;
letter-spacing:inherit;
}
form {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:10px;
font-weight:300;
}
.select {
font-size:9px;
height:15px;
}
.input {
font-size:9px;
height:16px;
width:160px;
}
.zip {
width: 94px;
height:16px;
font-size:9px;
}
.Footer_links{
color:#CCCCCC;
font-size:14px;
font-weight:300;
text-decoration:none;
}

</style>

I have the following CSS:
Code:

#leftcontent
{
    position: absolute;
    top: 135px;
    left: 20px;
    width: 150px;
    border: 0px;
}

#centercontent
{
    border: 1px solid #999999;
    top: 135px;
    margin-left: 170px;
    margin-right: 140px;
}
html>body #centercontent
{
    margin-left: 170px;
    margin-right: 140px;
}
#rightcontent
{
    position: absolute;
    top: 135px;
    right: 20px;
    width: 120px;
    border: 0px;
}

This works just fine in Firefox, but I see some problem in IE6. As I resize the width of IE window, the right border line of the center content disappears. Maybe this CSS has some problem; maybe html inside has some problem. I don't know exactly what is causing this, but I need to fix it. I don't want the right border line to disappear. I want it to be visible at all times. How can I fix this problem? How can I make the right border line visible at all times?

(This is where I use this CSS.)

Hi

I have a website which works fine in Firefox, but has problems in Internet Explorer. can someone please have a look and see what is wrong? the positioning of the Div boxes go wrong in IE, and also it seems like the site is scretched vertically.

many thanks

Hi all,

I got my css layout to work in Opera, which is already an achievement for a newbie like me. But I'm facing some problems with FF and IE.

First: in both the header image is gone
Second: in IE the menu images are shown too wide resulting in a messed up menu
Third: IE for some reason widens up the sidebar and content so the sidebar is shown below and also the footer is misplaced.

I'm still trying to debug it myself but I don't seem to be able to solve them.

my blog

Any help or ideas are appreciated. Kind regards,

Jef

What's up folks,

just looking for a bit of help on a dropdown issue.

Here's the page in question.

Here's the CSS:
Code:

#mainmenu li li {
background:transparent none;
float:none;
height:22px;
}

#mainmenu li#windows li a {
background:transparent none;
color:#BA0000;
padding:5px;
text-align: left;
font-size:11px;
height:auto;
}

#mainmenu li#windows li a:hover {
color:#FF7921;
background-color:#6C6C6C;
}
li ul {
display: none;
position: absolute; 
margin-top:-1px;
background:#eee;
border:1px solid;
border-color:#6C6C6C;
border-top:0;
z-index:600;
width:127px;
}

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

li:hover ul, li.over ul { 
display: block;
}

This problem is a strange one:
the dropdown list works as it is, however, if i ditch the #windows (which is from the parent list) and replace it with a class (adding the class into the parent list item as i should), the dropdown doesn't work the same.

Any ideas why ?

Thanks.

I'm a pretty new CSS coder, and primarily use Firefox so I designed my website based on that browser, and now when I try opening it in IE it looks completely wrong and different.

Does it have to do with my margins? I have no idea--if someone can just point me in the right direction to even figure out where the problem lies (and even better if you know how to fix it!) that would be fabulous.

The website is www.yarniapdx.com and it looks exactly how I want it to in Firefox, but in IE it's a mess!

Thank you so much in advance,
-lindsey