|
CSS - Ie Not Displaying Images
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; ??? Similar TutorialsHi all. I've tried searching the net but every solution either isn't applicable or doesn't work. My problem is that all my CSS background images are not displaying at all in ie7. they are called in via link id. so: PHP Code: <a href="javascript:void(0)" id="cus" onClick="changeCus()"><img src="/images/space.gif" height="30" width="50" alt="" title="Customer Ratings" /></a> fairly simple stuff. the corresponding css is PHP Code: a#cus{background:url("../images/custM.png")no-repeat;left:-140px} I have treid changing the link as in ../../images... but that was dumb. Adding a background position. Adding display:inline. Adding display:block. Can anyone please aligten me as to why all my css images are failing. It works fine in FireFox. My doctype is set to strict. It is the correct path to the images. The images are on the server. Any help would be greatly apprcieated. Thanks in advance Jaza Hi All, Does anyone know how to display an image at an angle (for example 45 degrees)? TIA HywelC Hi, I don't know what is wrong with my CSS. I created an ads in eBay with few photos. The thumb images should be aligned properly, but currently is not. I have used firebug to check its css structure, but I can't find anything unusual. Any suggestion would be very appreciated. Thanks Hi! I am making an online store for a very important client of mine. I build a shopping sub-list which floats to the left of the main page... and it looks BEAUTIFUL in Safari. But the images are not displaying correctly in Firefox. I was hoping somebody could help me. Also, could somebody tell me how it looks on IE? I have a mac, and my client is probably using IE... so I can't see how it looks Anyway, the site is.... blocked and the CSS #shoppinglist1 li { float:right; list-style: none; display:block; } #shoppinglist1 a{ width:100px; height:20px; text-decoration:none; background-image:url(images/shoppingmenu-bgsmall.gif); background-repeat: repeat; background-position: center center; } #shoppinglist1 a:hover { width:100px; height:20px; text-decoration:none; background-image: url(images/shoppingmenu-hover.gif); background-position: center center; } #shoppinglist1 a:active { width:100px; height:20px; text-decoration:none; background-image: url(images/shoppingmenu-active.gif); background-position: center center; } and the HTML <div id="shoppinglist"> <img src="images/shoppingmenu_top.gif" style="margin: -15px auto;"/> <ul id="shoppinglist1"> <li><a href="#"><img src="images/shoppingmenu_03.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_04.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_05.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_06.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_07.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_08.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_09.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_10.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_11.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_12.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_13.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_14.gif" align="center" border="0"/></a></li> </ul> <img src="images/shoppingmenu_bottom.gif" /> </div> Thank you so much for your help! Hi, I'm having a slight problem with my css. I want to display a comment with a number of images to the right of it. e.g "Excellent" plus 5 stars next to it (note: images of stars) so i tried this: Code: <div id = "commentText"> Excellent </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "commentText"> Fantastic </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> css Code:
#commentText
{
font-size: 100%;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
padding-left: 30px;
}
#star
{
display: inline;
height: 24px;
background-image: url(images/star.png);
background-repeat: no-repeat;
padding-left: 20px;
}
I currently have comment with 3 stars displayed underneath it - however they are only half being shown for some reason. Any help is appreciated to help me get the desired effect. Thanks! 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? Hi, I'm trying to write a simple website but I can't get it to run correctly in Internet Explorer. It looks fine in Firefox and Safari, but in IE none of the CSS is used, it looks like a regular html document. I've run the Validations for both files and they pass (aside from the html file throwing errors about the css styles). Here is my code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>TITLE</title> <link rel="stylesheet" type="text/css" href="style.css"> <!-- Date: 2009-08-10 --> </head> <body bgcolor="#D5D5D5"> <center> <banner> <img src="toptile.jpg" height="150px" width="100%" alt="topbanner"> </banner> <br> <logo> <img src="bannerlogo.png" alt="logo"></logo> <navbar> <img src="navbar.png" width="100%" height="650px" alt="background"> </navbar> <blackbar><img src="black.png" width="100%" height="20px" alt="blackbox"></blackbar> <br> <middle> <table border="0" width="800px" cellpadding="10" bgcolor="#DBFBFF"> <tr> <td width="50%" valign="top"> <br><br><br><br><br> <center> Coming Soon... </center> </td> </tr> </table> </middle> </center> </body> </html> and the CSS: Code: logo
{
position:absolute;
display:block;
margin-left: auto;
margin-right: auto;
top:10px;
width:100%;
z-index:3;
}
banner
{
position:absolute;
top:-10px;
left:-10px;
right:0px;
z-index:2;
}
middle
{
position:absolute;
display:block;
top:100px;
margin-left: auto;
margin-right: auto;
width:100%;
z-index:1;
}
navbar
{
position:absolute;
top:140px;
left:0px;
right:0px;
z-index:-1;
}
blackbar
{
position:absolute;
top:140px;
left:0px;
right:0px;
z-index:4;
}
I realize I'm probably not using all the best practices, but it displays fine on everything but IE. Can someone please help me out here. Thanks I'm working on a site (here) that has a two column style layout. Everything works fine in almost any browser OTHER than IE... In IE, the main (right) column shifts so that it is below the content length of the left (floated) column. I want them to be side by side... I've been playing with different solutions for several days. Can anyone help? (link to css file). relevant html: Code: <div id="wrapper"> <div id="container"> <div id="content"> <div id="left"> <!-- Left Block Start --> <!-- Left Sidebox Start --> <!-- Left Sidebox End --> <!-- Left Block End --> </div> <div id="main"> <!-- Center Sidebox Start --> <!-- Center Sidebox End --> <!-- BEGIN: Default News-index Article --> <!-- END: Default News-index Article --> </div> </div> </div> <div class="clearing"> </div> </div> relevant css: Code: /* styles to create table-less layout */
#wrapper {
padding-top:10px;
background-color: white;
text-align:center;
}
#container {
width: 770px;
height: auto;
margin: 0 auto 0 auto; /* sets the left and right margins to auto for everything else */
border-top: 1px solid white;
}
#content {
/*width: 770px; */
text-align:center;
}
#main {
text-align: left;
margin-left: 175px;
width: 595px;
}
#left {
text-align: left;
float: left;
width: 160px;
}
/* utility clearer class */
.clearing {
height: 0px;
clear: both;
}
thanks in advance for the 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 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) {
css Code: Original - css Code .menu1{ margin-left:0px; margin-top:0px; position:absolute; z-index:2; display:none; }
.menu1{
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 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 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 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. Please help. I have a page with a table just inside the body tag, which i dont want displayed. This is an ad table and i have no control over it because my free host puts it there. I have my own table inside a <div> tag, which I do want displayed. How can i set up my stylesheet to not display the table just inside the body tag but to do display the table inside the div tag? thanks Hi, I have a simple question. Is it possible to display and hide a list if i click on a link using CSS? I'm not looking to change pages or anything. I know it can be done using Javascript but I would rather not use it. I've done a few searches for hiding lists in CSS but to no avail. Thanks, Hi for some reason some style are getting lost when ie is displaying the page i am developing, if somone could have a look that would be fantastic edited links because question has been answered Thanks everyone I'm confused as to what's causing this... http://www.houndsandme.com/ It looks great in FireFox of course... but in IE6 the #column div is longer than it's supposed to be so that the background of the inner elements doesn't cover it all the way. It's almost like either the padding of the #column div, or the margin of the inner div (but only the last one) is incorrect... Also, have a look at IE7 for some really strange happenings... Make sure you scroll over the nav links hey all, i am working on new site but it is displaying wrong in IE (surprise surprise). i have been playing around to see if i can get it sorted but am not having any luck, if anyone can offer an idea that would be appreciated. here is the CSS Code:
<style type="text/css">
html, body {padding: 0;
color: #000; background: #eee;
font-family: Arial, Veranda, sans-serif;
margin: 0 140px 0 140px;}
h1 {color: #FFF; background: url('smallpardimg.jpg') center no-repeat #eef;
font: bold 200%/1em Arial, Verdana, sans-serif;
padding: 3em 1em 0; margin: 0 0 0 0;
border-left: 1px solid gray; border-right: 1px solid gray;}
#main {font-size: small; color: #AAA; background: #FFF;
margin: 0; padding: 2.5% 12.5%; clear: left;
border-top: 1px solid gray;}
#nav {margin: 0; padding: 0 0 0 0; float: left; background-color:#eef; border-left: 1px solid gray;
border-right: 1px solid gray;}
#nav li {list-style:none; float: right;
font-size: 12px; line-height: 20px; white-space: nowrap;}
#nav a {display: block; float: left; padding: 0 10px 0 10px;
text-decoration: none; font-weight: normal;
border: 1px solid; border-color: #EEF #EEF #EEF #EEF; color: #333; width: .1em;}
html>body #nav a {width: auto;} /* fixes IE6 hack */
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#nav a {float: none;} /* End IE5-Mac hack */
#nav a:hover {background-color: #eef; color: #ccc;
border-color: #eee #CCC #eee #ccc;}
</style>
and here is how it is being used in the html Code: <h1></h1> <ul id="nav"> <li><a href="/render/">?</a></li> <li id="current"><a href="/newmed/">contact us</a></li> <li><a href="/photos/">about globalhotel</a></li> <li><a href="/design/">my account</a></li> <li><a href="/webdev/">hotels</a></li> </ul> <div id="main"> <p> Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> </div> and finally here is a link to the page where i am having probs. thanks in advanced RF |
|||||||