|
CSS - Ie Image Link Issue
I'm having another link issue. I have images in a <ul> that are links. (It's a gallery using Slimbox + Mootools). Everything looks fine in FF. However, in IE, I get these little maybe 2 or 3 pixel (width) link lines that are blue and then purple when visited. They are not on every image. In fact, my <ul> has 4 lines of six images, and the little extra pixel lines fall in the margin after the first image of every line. Here's my CSS:
Code: a img {
border: 0 none;
margin: 4px 4px 10px 4px;
text-decoration: none;
}
a:hover img {
border: 1px solid #e5cb43;
margin: 3px 3px 9px 3px;
}
ul.photog {
list-style-position: outside;
padding: 0px; margin: 0px;
border: none;
background-color: #979089;
width: 850px;
text-align: center;
margin-right: auto;
margin-left: auto;
}
li.photog {
margin: 0px;
padding: 0px;
list-style-type:none;
}
Strange thing is that I have another <ul> that uses identical code to that one and doesn't have the problem I am experiencing with this one. Any help would be greatly appreciated. Thanks in advance! Similar TutorialsI have my links defined with a dashed border, but I don't want this on linked images and I'm trying to figure out if I can accomplish this with CSS only without additional markup in my HTML file. Here is a sample file: http://www. shawkey.com/test/imagebordertest.html Any suggestions on how I can get the dashed border to not appear below the image and only appear below the text with just CSS? 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(!) Hello I'm new to the forum and I'm hoping someone can help me with a question. I predominantly use html to build websites but I'm finding that the topic of frames is frowned upon. So I'm wondering if I can use CSS instead but their is a catch....here's the situation... I've built a page that has a .swf movie that I made with Swish V2. The last scene includes a link to another page that includes a jpg with an image map. I'd like to have this link with the image map load in the first page so that the viewer is forced to go through the swf movie to get to the image map each time. The problem I'm having is that the Swish program allows the link to work in the same window but it shows the address as being the link and not the parent windows address. These pages are used for roleplay in a chat server. If I leave it as it stands now they will be able to save the page with the image map on it and avoid the macromedia movie each time. Is there something that can be done? Thanks in advance for your time. mira I have a <ul> list in which I set the opacity for the <li> elements. Inside the <li> elements I have <a> elements. The issue is that the <a> element text is inheriting the opacity for the <li>??? Here is a link http://casadelmar.tmhdesign.com Thanks. OK I am pretty new to CSS. I am working with my first CSS layout... I am trying to make some images on a page, links. However the problem I am running into is that the images are getting a link border around them, which I do not want. Is there any way to specify this not to happen for images? Any input is greatly appreciated! ~Una I'm trying to style all images that have link around them - to have no border nor background. I'm using the following but no luck: PHP Code: a:link img, a:visited img { background:none; background-color:transparent; margin:0px; padding:0px; border:none; } a:hover img, a:active img { background:none; background-color:transparent; margin:0px; padding:0px; border:none; } Just wondering if there was any way to have a background-image as a link? The reason why: I have a banner across the top of a site, and I'm sure I can probably lay it out using Divs, but I had made the banner a background anyways because I have a horiz. nav. menu that needed to go across the bottom of the banner on the left side. Essentially, there's a logo at the top left, nav. menu on the bottom left, and an image on the entire right side. But now I realized that I should make the logo a link back to the main page of the site. So can I make a background-image as a link, or do I need to pull it out and make it a regular image? Thanks. Hello, i am new to css and i am trying to create text links on an image file using css and html my problem is i can create one text link using the css and html code i am about to post. but i need to have 4 or 5 text links on this picture example would be Text Link Text Link Text Link Text Link Text Link here is the css i am using Code:
.imagecontainer {
position:relative;
float:right;
}
.imagecontainer a {
position:absolute;
top:200px;
left:235px;
color:#FFFFFF;
font-weight: bold;
}
here is the html code Code: <div class="imagecontainer"> <img alt="" src="http://durin78.squarespace.com/storage/BLUE_TILE_ROUNDED_CORNERS-2.png" /> <a href="http://durin78.squarespace.com/blogs/category/ranting-and-raving/">Your Saint For Suicide</a> </div> Hi, Please help me with this, I'm at my wit's end. I can not for the life of me set the background image of a link from the CSS. I can do it from the link HTML itself with: Code: style="background-image: url(resources/menu_over.jpg);" But I CANNOT do it from the CSS with something like this: Code: <a class="navlink" href="#">asdf</a> Code: .navlink
{
/*background-color: red;*/
background-image: url(resources/menu_over.jpg);
}
Also, I am referincing my CSS file correctly b/c I tested it with "background-color", as you can see above. Please help... thanks I'm trying to combine Code: a img and Code: a:after So I'm trying to set :after for links that have images in them...I have no idea how to do it. This doesn't work: Code: a img:after This doesn't work either: Code: a>img:after I'm not sure if its my browser's lack of support for CSS again or just me. OK, I've made this work in the past with no problem, but for some reason, I can't figure out this simple snippet of css for a navigation rollover with an image. Here's my code: Code:
a.creative_development{
width:289px;
height:28px;
background-image:url('../images/services_titles/creative_title.gif');
}
a.creative_development:hover{
width:289px;
height:28px;
background-image:url('../images/services_titles/creative_title_on.gif');
}
I've checked the paths, folder name, and image names, but it's not working. Can someone see what I'm doing wrong? thanks I am trying but failing to get this to work. I have used a slider (bxslider)and made some changes to it so that I have my other slides visible. Then I have added a background png so that the right and left images are covered with a transparent png with around 80% opacity. Now the problem I am having is that because I have applied this image to the div it is now stopping the links being active. Can anyone help me get this right, I need the transparent png to be over the main viewport so the right and left images are not fully shown. If you view this url you will see what i mean: http://www.barryzimmerman.co.uk/new/ When you see the text for each slide, it should be an active link to the website, but because of the png it is stopping this. I really want to achieve this, so any help much appreciated. The css files are he http://www.barryzimmerman.co.uk/new/css/design.css http://www.barryzimmerman.co.uk/new/css/content.css Please help Look at this page http://hometown.tmhdesign.com See the right hand column, top element labeled "Quick Connections"? The icons are a bg on the containing div element that is holding an ul. I have that bg exactly where I want it in FF, but in IE7 is higher than it should be by about 5-10 pixels. I have a test page for an image and it does not display a border. It only changes the cursor to a hand on hoover. Once clicked and subsequently returned to the page, the image does not have the dotted outline of its' border either. This is as it should be. Here is the code: Code: <html>
<head>
<style>
img, fieldset {
border: 0;
}
</style>
<a href="http://validator.w3.org/check?uri=referer" border="0"><img
src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
</head>
</body>
Next, I have my development pages where I have multiple link styles on each page defined by an external style sheet, prime.css. here is the relavant portion of the code: Code: a:link {
color: #2F4F4F;
text-decoration: underline;
}
a:visited {
color: #778899;
text-decoration: underline;
}
a:active {
text-decoration: underline
}
a:hover {
text-decoration: underline;
background-color: #2F4F4F;
color: #FFFFFF;
}
.intraLink:link {
color: #2F4F4F;
text-decoration: none;
background-color: #FFFFFF;
}
.intraLink:visited {
color: #778899;
text-decoration: none;
}
.intraLink:active {
text-decoration: none;
background-color: #FFFFFF;
}
.intraLink:hover {
text-decoration: none;
background-color: #FFFFFF;
color:#D2691E;
}
.back:link {
color: #2F4F4F;
text-decoration: none;
background-color: #FFFFFF;
}
.back:visited {
color: #778899;
text-decoration: none;
}
.back:active {
text-decoration: none;
background-color: #FFFFFF;
}
.back:hover {
text-decoration: none;
background-color: #FFFFFF;
color:#2E8B57;
}
.image:link {
color: #2F4F4F;
text-decoration: none;
background-color: #FFFFFF;
}
.image:visited {
color: #778899;
text-decoration: none;
}
.image:active {
text-decoration: none;
background-color: #FFFFFF;
}
.image:hover {
text-decoration: none;
background-color: #FFFFFF;
color: none;
}
.pageStyle {
background-color: none;
font-family: "Helvetica Neue", Arial, helvetica, sans-serif;
width: 800px;
font-size: 62.5%;
margin: 0 auto;
padding-top: 50px;
margin-bottom: 25px;
line-height: 1.5;
}
#main {
float: left;
width: 590px;
padding-bottom: 25px;
}
Explanation for the multiple styles: the default link style is to change the 'default' hyperlinks to match my color scheme. The .intraLink is for links within the current page. The .back style is for calling the previous page and finally the .image style is for all images with href references. Even though this scheme works there is a slight problem. Once an image that is used as a link is clicked and user returns to the page then the image has a dotted line as a border! I'd like it to not have that border, i.e., I'd like it to work just as the test page works, nice and clean. Also, I'm not sure about my linking styles. I'm new with CSS and it just seems like I've done more than I really need too; like it seems like it's a lot to do to simply not have the border appear when the test page is so lean! Is there a better way? Here's the offending page code and thanks for taking the time to read this, I know it's a trivial point but I'd like to understand why: Code: <html>
<head>
<title>index.html :: home page
</title>
<link rel="stylesheet" type="text/css" href="prime.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body class="pageStyle">
<b>:: Index.html ::</b><hr>
<div id="main">
<ul>
<li>
<a href="rs_cv.html">My CV</a>
</li>
</ul>
</div>
<a href="http://validator.w3.org/check?uri=referer" border="0" class="image"><img
src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
</body>
</html>
I had been helped on this board previously with this question for a site I was working on. I am using the same approach on another site to link back to the home page from the internal pages. And for all intents and purposes it is working. However I could/can not figure out how to precisely position where the link starts and ends. http://www.guestwardho.com/campground_map.html If, for example, you go to the above page and put your mouse over the header image you will see the link begins at the left edge of the header image. If you move to the right the link 'ends' a little more then half way across the image - at the uppercase 'H' in 'Ho' for reference. Again, this is fine for this purpose/site, but cannot figure out how to control where the link area starts and ends. Thank you in advance for your assistance. ok here is a thing, it is also a firefox and ei related issue, when i specify background image for my link and specify lef-padding so that, small image that i attached looks like bulleting point, now if my width of the link is longer then my column then logically it will continue on a next line, and everything is great in firefox, but in ei what happens to background image it centers between two lines. So how can i fix it so it sticks to with in first boundary edges of the first line like in fire fox. to see example check the opticsblog.com Hi ppl, I am new to CSS, and I need help... I have this code in my word-press footer.php ,what I want is to turn image that i put as footer image(footer.jpg),into image-link to other page, I tried something like this but dont work... Code:
div id="footer" onclick="SOME PAGE'>
<a href="<?php bloginfo('url'); ?>">
<img src="images/footer.jpg" alt="<?php bloginfo('name'); ?>" />
...but something i do wrong, below is a original code that i want to edit! Code:
?php
/**
* @package WordPress
* @subpackage Default_Theme
*/
?>
<hr />
<div id="footer" role="contentinfo" style="vertical-align:bottom;"><div style="vertical-align:bottom;"><table width="735" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td height="190" align="left" valign="bottom"> </td>
</tr>
<tr>
<td height="43" align="left" valign="bottom"> </td>
</tr>
<tr>
<td><div align="right" style="margin-right:20px; color:#333333;">Copyright by <a href="<?php bloginfo('url'); ?>/">
<?php bloginfo('name'); ?>
</a> 2010. - 2014. All rights reserved.</div></td>
</tr>
</table>
</div>
</div>
</div>
<?php /* "Just what do you think you're doing Dave?" */ ?>
<?php wp_footer(); ?>
</body>
</html>
Hi, I have a link and an image next to each other. I want to make the link hovered when I do mouseover on image. How do I do that ? Here is the code I have now. <a href="javascript:undefined" id="imageLinkId">GMNA</a> <script language="javascript"> if( ... ) { document.write('<img src="/graphics/channel/plus.png" id="div18Img" alt="Maximize this section" onMouseOver= >'); } else { document.write('<img src="/graphics/channel/minus.png" id="div18Img" alt="Minimize this section" onMouseOver= >'); } </script> Thanks |
|||||||