|
CSS - Ie6 Egg Timer Appears Over Links With Background Image
Hi,
I have some links in a <ul> list. I have set them to have a background image using CSS. When I rollover the links using IE6 the egg timer appears briefly. No such problem with FF or Opera. Anyone come across this before? Here's my CSS: Code: #section1 div ul{
padding:0;
margin:0;
}
#section1 div li{
list-style-type:none;
margin:15px 0 0 0;
}
#section1 div li a{
color:#fff;
text-decoration:none;
padding-right:20px;
background: transparent url(/newsite/images/square.gif) right center no-repeat;
display:block;
}
Similar TutorialsHi All, It has been 20 years since I last wrote a program and CSS wasn't even thought of then so I need a little help. I wish to place a text area/box with a background I can put text on top of in my html. Any image should work. I wish the text area/box to start 15% from the left edge and cover 70% of the screen width and be as high as the image. I would like the image to automatically re-size to take care of different screen resolutions. I would like to have no scroll bars on the text area/box and I would like the text to be fixed so it cannot be changed by someone typing in the text area/box. However for future reference I would like to know how to turn the scroll bars on so the text scrolls but the image stays fixed. I have included the html I thought would work but doesn't. Any help would be greatly appreciated, Thanks, **** Roose <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > <html> <head> <meta http-equiv="Content-Type"" content="text/html; charset=UTF-8"> <meta name="revisit-after" content="7 days"> <meta content="MSHTML 6.00.5730.13" name="GENERATOR" > <title>TestBox</title> <style tyle=text/css> txta { width: 735px; background-image: url(new.jpg); border: 1px solid #781351; height: 80px; padding: 1px; position: absolute; left:15%; } </style> </head> <body> <div id="txta"> <textarea name="t1" width "735px" height: "85px"> </div> </body> </html> Hi all, I am having difficulty with the background for an image link. I have the following: 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>
<title>Test page</title>
<style type="text/css">
a:hover { color: #FFFFFF; background: #0000ff; text-decoration: none; }
a:hover img { background: none; }
.box { background: #00ff00; padding: 1em; }
.box img { border: 0; }
</style>
</head>
<body>
<div class="box">
<p><a href="#"><img src="images/a1a8aa6a43.jpg" alt="" /></a></p>
<p><a href="#">Text link</a></p>
</div>
</body>
</html>
I have a global style for links that change the background color and the color of the text. However, this also changes the background color of an image link which makes it look odd. I attempted to fix this with Code: a:hover img { background: none; }
But this does not fix the issue. Any thoughts? I am using XHTML strict because the CMS I am using forces me to an XHTML stylesheet. Also, this is just a snippet of the code of the actual page but the bug is present in this snippet. Hi, I have a simple table <table id="sometable"> <tr> <td> <a href="link1">link1</a> <td> <a href="link2">link2</a> </table> with a style sheet table#sometable {width: 100%;} table#sometable a:hover{background-color: #A9A9A9;} What I want is on a hover the whole cell changes color, not just the link. How can I do this? Also should I be using a table in the first place? Thanks Colin Hi, i'm having trouble in my navigation section getting the background color to display behind the links. It works fine in the content section, just not the navigation - why is this? Here is my code - Code: @import url('layout.css');
body {
background-image: /images/skyBACK.gif;
background-repeat: repeat-y;
background-attachment: scroll;
background: url('images/skyBACK.gif');
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
#container {
width: 1020px;
margin: 10px auto;
}
#masthead {
text-align: center;
width: 698px;
height: 140px;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #a9a9a9;
border-bottom: 1px solid #808080;
border-left: 1px solid #a9a9a9;
background-color: #fafaff;
}
#navigation {
position: relative;
float: left;
width: 148px;
margin-top: 10px;
margin-bottom: 10px;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #a9a9a9;
border-bottom: 1px solid #808080;
border-left: 1px solid #a9a9a9;
background-color: #66cccc;
}
#content {
float: left;
width: 518px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
padding: 10px;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #a9a9a9;
border-bottom: 1px solid #808080;
border-left: 1px solid #a9a9a9;
background-color: #66cccc;
}
#footer {
text-align: center;
clear: both;
width: 698px;
padding-top: 5px;
padding-bottom: 5px;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #a9a9a9;
border-bottom: 1px solid #808080;
border-left: 1px solid #a9a9a9;
background-color: #fefeff;
}
/* Masthead Styles */
#masthead h1 {
color: #3d6c87;
}
#masthead h3 {
color: #5f8ea9;
}
/* Navigation Styles */
#navigation ul {
list-style-type: none;
width: 100%;
display: block;
margin: 0;
padding: 0;
}
#navigation li {
display: block;
margin: 0;
padding: 0;
border: 1px solid #fff;
background-color: #fff;
}
#navigation a {
color: #0033ff;
text-decoration: none;
display: block;
border: 1px solid #fff;
background-color: #fff;
}
#navigation a:hover {
color: #fff;
text-decoration: none;
border: 1px solid #5f8ea9;
background-color: #5f8ea9;
}
/* Content Styles */
h6 {
color: #000000;
}
h5 {
color: #000000;
}
h4 {
color: #000000;
}
h3 {
color: #000000;
}
h2 {
color: #000000;
}
#content h1 {
color: #000000;
}
#content img {
padding: 1px;
border: 1px solid #808080;
}
/* Footer Styles */
#footer p {
color: #808080;
margin-top: 5px;
}
#footer a {
color: #5f8ea9;
text-decoration: underline;
}
#footer a:hover {
color: #33627d;
text-decoration: none;
}
a {
color: #0033ff;
text-decoration: underline;
}
a:hover {
color: #33627d;
text-decoration: underline;
}
.style_bold {
font-weight: bold;
}
.style_italic {
font-style: italic;
}
This is very strange to me any help would be greatly appreciated. The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. In short, I'm trying to get this one image to tile down the page to the bottom, underneath a static background image. Basically, it's a 2pixel high image that's ready to tile vertically, just having a tough time getting it to work. You can clearly see the problem here, a gap at the bottom: http://www.groundedgroup.com/clients/NWR/ Here's the relevant css: http://www.groundedgroup.com/client...WR-GG/style.css I've googled and subsequently tried out some solutions, but no luck. Got any ideas? Thanks in advance. PS - Is there a way to keep the spiders from indexing my links above? The site is on a test server, so I don't want the url indexed. Hi, I have a question about setting up the Body background-image via a linked external stylesheet. I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG. When I embed the following in my index.html, I see the background show up: ** inside index.html file ** <BODY STYLE="background-image: url(test.JPG);"> blah </BODY> BUT, when I define my background in the externally linked myStyle.css file, the background does not load: ** inside myStyle.css file ** BODY { background-image: url(test.JPG); } ** inside index.html file ** <LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css"> <BODY> blah </BODY> </LINK> Please help. thanks! Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: 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"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) Hi I am redesigning my blog and took it down completely. I want to place the day's text post on the day's photo post on top of the latter, while graying out the photo. Is that possible without using flash? I'm trying to create a little background image for each image on this page. A kind of crappy looking polaroid type background image. It works fine in Firefox, but not in IE. Any ideas? http://www.rhizaowns.com/holly/index.php Code: div.top {
border: 10px solid #CCCCCC;
border-bottom-width: 0px;
padding: 0px;
background-image: url(menutile.jpg);
}
The code above yields this . It is uneven with the normal image, though both are the same size. I simply want to tile the bg image to the border even with the normal menu images. What am I doing wrong? I am trying to put labels below images on my new site design. See: www.jwsuretybonds*com/jw09 I figured out how to get them vertically aligned, but I am having problems with the horizontal, as when I change the browser size, they move. Here is one of the examples: Code:
#homepage-bar h2.construction {
position:fixed;
top:225px;
left:505px;
}
I tried changing to position: absolute; I also tried to use percentages on the left: I know this is easy, but I can't find the fix after googling for 30 minutes. Help! My website works in safari, but not in IE or firefox. My question is, how do I get my links to match up in the other browsers? I am converting my news system from tables to pure CSS. So far its going great, and I'm almost complete except for one problem; Each post has a category, and the category image is displayed in each post using "background-image" in CSS. Although it somehow comes back in the background of each link within the <div> (in Firefox). I have attached an image of what I'm talking about. Here's the html (simplified): Code: <div class="games"> <div class="newstoryinfo"> <h2>Topic goes here</h2> </div> text text text text text text text text text text text text text text text text text text text text text and so on... </div> Here's the CSS Code:
.news {
background-image: url("/img/topics/1.gif");
background-color: transparent;
background-repeat: no-repeat;
border: 1px solid black;
padding: 10px;
}
.news div {
text-align: justify;
margin-left: 1ex;
margin-bottom: 10px;
padding-left: 60px;
padding-right: 5%;
line-height: 1.6em;
}
.newstoryinfo {
padding-top: 5px;
color: #888;
font-size: 11px;
font-family: "Lucida Grande", Verdana, Geneva, Lucida, Helvetica, sans-serif;
}
Can someone please tell me how to make links in the "text text text.." area display with a white/transparent background? Thank you! Hi all, This is probably simple, but I can't get it working for some reason. At http://www.bartlett-family.net/chri...ett/index2.html I want the 8 image links below the "Quote of the moment" to be centered between the vertical lines. I'd appreciate help. CSS is here and the class in "centerinline". edit: the sites @ www.tomaustin.dsl.pipex.com/webdev Ive been doing some googling and cant find out how it works how do i apply attributes like a:link, a: hover to an image I had some like Code:
image a:hover, a:link, a:active, a:visited {
border: etc..
}
this does not work..it comes up with the horrid blue and purple backgrounds how do i do it? tom: ) Hobby Helper Model Trains The above link is where my problem is... If you look at the middle column running down the page, there are several text links that I have the CSS working nice with the background color changing to orange. There is an arrow image that should follow the mouse as I run over these text links, but can't figure out how to get the darn thing to move. Any help will be GREAT!! THANKS! I want to use php to get images from a database and display them as css background-image attributes I know that the css Code: #id { background-image: url ('path/file'); }
works (obviously) and the html Code: <img src='image-generator-script.php'> also works but the css Code: #id { background-image: url ('image-generator-script.php'); }
doesn't work for me. It seems as though it should work. Why place such a seemingly arbitrary limitation on CSS as only being able to display images from existing files? I've done lots of searching through documentation and on forums, but not found anything conclusive either way. A couple of people have said it works. But it doesn't for me. Is there some extra configuration step I'm missing? Does anyone know for a fact that it works? -- so I can know for sure that somewhere I'm making a blunder in my code. But the code is simple, and I don't see where it could go wrong. (As is always the case!!) I can see the image in the browser just by pasting in the script link to the address bar. I know that url() specifiers are relative to the location of the stylesheet, not the html document, but in this case the html, the css, and the php are all in the same directory. I can't see what I could be doing wrong, so it really looks like you can't do it. But why?? And why isn't it mentioned in the documentation? (At least in the placers I've looked.) If you store all your images in a database, how on earth can you display any of them in CSS except by using a script in the url() specifier? I've seen plenty of tips about generating css files from php (I already do it), but that won't help in this case. All I can think of is to have php write the image data from the database into a temporary file, and put that file name into the url() specifier. But what a horrible kludge!! I will be very grateful to anyone who can give me solid facts on this question. Andrew Blake |
|||||||