CSS - Css Not Displaying In Ie

Test Site

I'm working on a new design, and it works in Firefox and Safari no problems - and in IE it works mostly with the exception of one thing.

None of the background images load. I've tried in 5.5, 6, and 7 and in all 3 nothing loads. How can it load the backgrounds in FF but not in IE. Am I doing something wrong here? Does IE not support:

background: #000 url("someimage.jpg") no-repeat;

???

Hi all, I have a dropdown menu that appears onmouseover and goes away onmouseout. The code works as it is posted here, works. What I was trying to do, was to move the style tag in the div with the id 'p_default_1', into a class in the CSS file. But when I remove the style tag from the div, and add the class (class="menu1"), the dropdown menu no longer gets displayed when i roll over it.

note to mods: sorry if this is in the wrong forum, I just don't know what the problem is with.

html Code:
Original - html Code <td bgcolor=white valign="top" class="menu" OnMouseOver="show_sub('p_default_1', this, 0);" OnMouseOut="hide_sub('p_default_1', this, 0);"> <a href="http://www.site.com/products.html"><img src="images/pri-button-products.gif" height=66 border=0></a><br> <a href="http://www.site.com/products.html"><img src="images/pri-ub-products.gif" height=65 border=0></a><br> <div bgcolor="#FFFFFF" align=left id="p_default_1" style="margin-left:0px;margin-top:0px;position:absolute;z-index:2; display:none;" width="175" > <table id="p_default_parents_1" class="white_table" width="175" cellpadding="0" cellspacing="0"> <tr> <td width="100%" nowrap style="border-bottom:solid 1px #C6C6C6;border-left:solid 1px #C6C6C6;border-top:solid 1px #C6C6C6;border-right:solid 1px #C6C6C6;padding-left:5px;padding-right:5px;padding-bottom:2px;padding-top:2px;" OnMouseOver="show_sub('p_default_9', this, 0);" OnMouseOut="hide_sub('p_default_9', this, 0);"> <div style="padding-top:4px; padding-bottom:4px; padding-left:4px; padding-right:4px; "> <a href="http://www.site1.com" class="sub_menu">Option 1</a><BR></div> <td style="border: 1px solid rgb(198, 198, 198); padding: 2px 5px;" onMouseOver="" onMouseOut="" nowrap="nowrap" width="100%"><div style="padding: 4px;"><a href="http://www.site2.com" class="sub_menu">Option 2</a><br></div> </td> </tr> <tr> <td style="border: 1px solid rgb(198, 198, 198); padding: 2px 5px;" onMouseOver="show_sub('p_default_13', this, 0);" onMouseOut="hide_sub('p_default_13', this, 0);" nowrap="nowrap" width="100%"><div style="padding: 4px;"><a href="http://www.site3.com/" class="sub_menu">Option 3</a><br></div> </td> </tr> </tbody></table></div></td>

  

<td bgcolor=white valign="top" class="menu" OnMouseOver="show_sub('p_default_1', this, 0);" 
OnMouseOut="hide_sub('p_default_1', this, 0);">
<a href="http://www.site.com/products.html"><img src="images/pri-button-products.gif" height=66 border=0></a><br>
<a href="http://www.site.com/products.html"><img src="images/pri-ub-products.gif" height=65 border=0></a><br>

<div bgcolor="#FFFFFF" align=left id="p_default_1" style="margin-left:0px;margin-top:0px;position:absolute;z-index:2; display:none;" width="175" >

<table id="p_default_parents_1" class="white_table" width="175" cellpadding="0" cellspacing="0">
<tr>

    <td width="100%" nowrap style="border-bottom:solid 1px #C6C6C6;border-left:solid 1px #C6C6C6;border-top:solid 1px #C6C6C6;border-right:solid 1px #C6C6C6;padding-left:5px;padding-right:5px;padding-bottom:2px;padding-top:2px;" OnMouseOver="show_sub('p_default_9', this, 0);" OnMouseOut="hide_sub('p_default_9', this, 0);">
    <div style="padding-top:4px; padding-bottom:4px; padding-left:4px; padding-right:4px; ">
    <a href="http://www.site1.com" class="sub_menu">Option 1</a><BR></div>
    <td style="border: 1px solid rgb(198, 198, 198); padding: 2px 5px;" onMouseOver="" onMouseOut="" nowrap="nowrap" width="100%"><div style="padding: 4px;"><a href="http://www.site2.com" class="sub_menu">Option 2</a><br></div> </td>
</tr>
<tr>
    <td style="border: 1px solid rgb(198, 198, 198); padding: 2px 5px;" onMouseOver="show_sub('p_default_13', this, 0);" onMouseOut="hide_sub('p_default_13', this, 0);" nowrap="nowrap" width="100%"><div style="padding: 4px;"><a href="http://www.site3.com/" class="sub_menu">Option 3</a><br></div>    </td>
</tr>
</tbody></table></div></td>

javascript Code:
Original - javascript Code function hide_sub(name, cell, i) { var b = document.getElementById(name); if (b != null) { b.style.display = 'none'; } } function show_sub(name, cell, i) { var b = document.getElementById(name); if (b != null) { b.style.display = ''; } }

  

 function hide_sub(name, cell, i) {


             var b = document.getElementById(name);


             if (b != null) {


                 b.style.display = 'none';   


             }


         }


         


         function show_sub(name, cell, i) {


             var b = document.getElementById(name);


             if (b != null) {


                 b.style.display = '';   


             }


         } 

css Code:
Original - css Code .menu1{ margin-left:0px; margin-top:0px; position:absolute; z-index:2; display:none; }

  

 .menu1{


     margin-left:0px;


     margin-top:0px;


     position:absolute;


     z-index:2;


     display:none;


 } 

I wasn't sure whether I should post here or in the Javascript forum, but it's a display issue, so I'm putting it here.

I have a problem with a trivial project that's driving me crazy. I'm using javascript to display a list of the last songs I've listened to. I want that list to display within a div. The problem is that it doesn't at all -- it seems to ignore all CSS positioning altogether.

You can see the problem here . You can view the script that's generating the text right here. It's all pretty obvious -- the list of songs that's in the background should be in the "i'm listening to" box.

Anyone seen anything like this before? I've searched all over Google and these forums and I can't find anything quite like it.

Hi guys,

Im hoping a CSS whizz can find an error in this code as I cannot for the life of me work out why content held in the 'main' div is appearing outside / overlapping the edge of the site design?

It loads perfectly in Firefox


Code:

#wrap {
	width: 820px;
	background: #CCC url(content.jpg) repeat-y center top;
	margin: 0 auto;
	text-align: left;
}
#content-wrap {
	clear: both;
	width: 760px;
	padding: 0; 
	margin: 10px auto;
}


/* Main Column */
#main {
	float: left;
	width: 70%;
	padding: 0; margin: 0 0 0 5px;
	display: inline;
} 

Any help would be greatly appreciated

Hi, I have labels that aren't displaying properly in IE.
I have used similar code in many parts of the site without problem.

Please see this page in IE6.

The label contents don't display

If I move the labels outside of the content div it does display...

Code:

<div id="content">
<div id="tempcontent">
<div id='confirmation'>
  <p><label>Email address:</label>james@got.com<br></p>
  <p><label>Duration of stay:</label>2 day(s)<br></p>
  <p><label>Number of guests:</label>4<br></p>
  <p><label>Arrival date:</label>2007-01-03 00:00:00<br></p>
  <p><label>Departure date:</label>2007-01-05 00:00:00<br></p>
</div>

Code:

#content {
position:relative; 
background-color:#ffffff; /* dcba72 */
margin-top: -1em;

#tempcontent {
margin: 4em 4em;
}

#confirmation {
	margin: 2em 8em;
	border: 1px solid #781351;
	padding: 1em 3em;
}

label
{

width: 15em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;
color:black;
}

Does anyone know what's going on?

I am sure that this is no surprise to many of you and hope that someone kind help me find a solution. I am having trouble displaying a drop down CSS menu in IE7, it seems to work fine in Firefox. Please advise and thank you for all your help with this. I have spent far too much time on this and still can't figure it out.

Website is located at: myasvn.org/_/campusrec/temp.php

PHP Code:
/* Navigation Menu */

ul#menu { 
    background: rgb(63, 69, 76) url('../_media/bk-menu.png') repeat-x;
     list-style-type: none; 
    list-style-image: none;
      list-style-position: outside;
       width: 950px;
    height: 34px;
    display: block;
    line-height: 34px;
    z-index:2;
    }

ul#menu li a {
    display: block;
    color: rgb(255, 255, 255);
    text-decoration: none;
    text-align: center;
    }

ul#menu li a:hover, ul#menu li:hover {
    background-color: rgb(53, 60, 66);
    }

ul#menu li {
    border-right: 1px solid rgb(53, 60, 66);
     float: left;
    }

ul#menu li ul { 
    position: absolute; 
    left: -999em; 
    background-color: rgb(238, 238, 238); 
    width: 165px; 
    list-style-type: none; 
    list-style-image: none; 
    list-style-position: outside; 
    }
    
ul#menu li li { 
    border-right: medium none; 
    width: 157px; 
    float: left; 
    line-height: 30px; 
    }
    
ul#menu li li a { 
    border-bottom: 1px solid rgb(210, 210, 210); 
    width: 157px; 
    color: #000000;
    text-decoration: none; 
    text-align: left; 
    padding-left: 8px; 
    display: block; 
    }
    
ul#menu li li a:hover { 
    color: rgb(255, 255, 255); 
    background-color: rgb(204, 0, 0); 
    }
    
ul#menu li:hover ul { 
    left: auto; 
    }
    
ul#menu li:hover ul, #menu li.sfhover ul { 
    left: auto; 
    } 

Hi,

I have a drop down menu which is using jquery to animate it. I am trying to set it up to display when JS is disables.

I have added the following code inside a <style> tag which is inside a <noscript> tag.

However, the drop down menu does not display it's drop downs. They can simply just appear, so there is no animation needed.

This is my code:

PHP Code:
 ul.tabs {
    display: table;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    height:40px;
    width:100%;
    }

ul.tabs li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    float: left;
    position: relative;
    padding:0 2px 0px 0px;
    }

ul.tabs a {
    position: relative;
    display: block;
    line-height:40px;
    padding:0 18px;
    color:#FFF;
    font-size:13px;
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    -khtml-border-radius: 5px 5px 0px 0px;
    border-radius:  5px 5px 0px 0px;
    }
    
ul.tabs a:hover, ul.tabs a.selected {
    background:#c95884;
    }

ul.tabs a.connect {
    position: relative;
    display: block;
    line-height:38px;
    padding:0 18px;
    background: #54c45f;
    font-size:13px;
    }

ul.tabs a.connect:hover, ul.tabs a.connect.selected {
    background:#68cb72;
    } 





Any ideas how I can make the sub items display?

I've downloaded a free CSS website template with the idea of just swapping out the graphics and text using Notepad. All is going well with one major exception - I cannot seem to change the graphics in the sidebar or main body. I put the new graphics in the same folder as the original graphics then just changed the img tag to reflect the new filename.

This results in the image spacer icon displaying but the new image does not. What is strange is that the alt tag will change correctly, just no image.

I know I'm overlooking something simple, but I seem to have hit the proverbial brick wall. Any help would be most appreciated!

I tried to attach the files but don't see that option and evidently I'm not permitted to post the url. Just google "templatemo 050 metal" to pull up the files.

Thanks for reading this and offering any help!

I need some help desperately. I am a mediocre CSS guy I am working on a site for a friend of mine. I, for the life of me, can't seem to get an image displayed in IE8 It displays fine in FF.
I have a zip file with the whole site so that someone who is an expert in CSS can show what is wrong.
I would be very grateful if someone can help me with this.
I am not allowed to provide my email since I am a new user.
I promise not to be an annoyance to anyone who is willing to share his/her email me so that I can send the files for him/her to look at.
I know I am asking too much, but I have no choice

Developing a page:
As this is my first posting I do not know how to write here the URL, system does not allow me

Problem is: I am using behavior: border-radius.htc and border-radius to create rounded corners in boxes. The rounded borders display correctly in Firefox, Chrome, Safari...and amazingly display well in IE7&8.

Except for one column on the right hand side. The right and bottom border does not display in IE (the 4 round corners do, however!). I can't figure why. Driving me crazy!

Another funny one: the border surrounding the chocolate buttons picture
<div class="ftproduct_image"> displays well in all browsers except in IE8. Why could something display well in IE7 but not in IE8? This is a new for me.

Any ideas welcomed! I guess you can't help without having a look at the page but I do not know how to give the uRL

Code:

<div id="s_site">
	<a href="#site">This site</a>
	<h2 id="site_h">About This Memorial Site</h2>
	<p id="site_p" class="tab_cont">This site is brought to you by the Royal Canadian Branch 3 Legion John Bernard Croak Victorian Cross.  In honor of those fallen and served in WW2.</p>
</div>

the h2 and p element are hidden using display:none; when I click on the anchor link i'd like them to apper using display:block; It seems like I may need to use javascript but I'd rther not use javascript at all, except for thos eunfortunate enough to still be using IE.

I can't figure it out I've tried amny thing that didnt work. I've been searching for a selector that will let me access these hidden elements but I can't come up with anything.

I half accomplished what I was trying but I can't get the changes to stick.

Thanks for reading

I am using the below CSS to display a photo at the top of my pages. The CSS worked fine with the original photo (using a template) on both firefox and IE. However, when I changed the photo for my own it stops appearing on IE. Firefox displays the picture perfectly, and the div that holds the image is sized correctly (shows as white space on page).

Does anyone know why this may be happening? I am using IE 7. The rest of the CSS is working, even the links to other images I use as backgrounds.

Code:

#header-photo {
	clear: both;
	height: 200px;
	width: 790px;
	margin: 0 auto;
	background: #FFF url(header-photo.jpg) no-repeat center center;

}

I'm working on a client's website and trying to get the navigation menu to look right in firefox, for some reason it seems to ignore all width properties and the table cells overlap, but only in firefox. IE displays it perfectly, any help would be appreciated.
www.entsource.com/hcs/
It is source viewable and the css code follows:

a.nav {
color: black;
text-decoration: none;
border: 1px solid #6D92A2;
width: 150px;
padding: 2px;
font-family: tahoma;
font-size: 11pt;
text-align: center;
}

a.nav:hover {
color: #F80808;
text-decoration: none;
border: 1px solid #F80808;
width: 150px;
padding: 2px;
font-family: tahoma;
}

table.pane {
width: 900px;
}

td.nav-cell {
width: 155px;
border-right: 2px solid #6D92A2;


}
td.main {
width: 750px;
padding: 10px;

}

hr {
color: #6D92A2;
height: 1px;
width: 400px;
}

strong.header {
color: white;
background-color: #CCCCCC;
width: 700px;
height: 20px;
border-top: 1px black solid;
border-bottom: 1px black solid;
font-size: 16pt;
font-family: tahoma;
}

strong.bold {
color: black;
font-size: 16pt;
font-family: tahoma;
}

I don't know what's wrong, but this HAS to be something simple I'm missing.

In my XHTML I have
Code:

<div class="curved"></div>

and for the CSS I have
Code:

.curved {
	background-image: url(Green_wavy_thing.jpg);
	background-color: #ffffff;
	background-repeat: no-repeat;
}

The image isn't even displaying in any browser. What am I missing? I've tried quotes, etc to no avail. Is my code wrong? The image is in the same directory as the html and CSS files.

Thanks,

Chris