|
CSS - .thumbnail:active Img Doesn't Work In Ie 8, But Works In Chrome & Ie Compatibility
Can anyone help me get this to work in IE? Here's the link to the page I'm working on, which I'll be moving from my site to the proper domain soon.
... (annoyed - can't post urls as a new user, which makes this forum limiting - is there a way around this? How about if I try "#" = "." and "|" = "/" http:||krisbunda#com|bb|db-series-planters#html ) ... Here's the "thumbnails" CSS I'm using: CSS Code: Original - CSS Code .gallerycontainer{ position: relative; text-align:right; margin-left: 0em auto; margin-right: 0em auto; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } .thumbnail img{ border: .25em solid #FFF; margin: .5em .5em .5em .5em; height: 8.5em; width: 8.5em; } .thumbnail:active{ background-color: transparent; } .thumbnail:active img{ border: 0em solid #3F0; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: #999; padding: 0em; left: -250em; border: .25em dashed gray; visibility: hidden; color: #FFF; text-decoration: none; text-align:center; height:auto; width:auto; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: .25em; padding: 0em; height:auto; width:auto; } .thumbnail:active span{ /*CSS for enlarged image*/ visibility: visible; top: 0em; left: 1.5em; /*position where enlarged image should offset horizontally */ z-index: 5; height:auto; width:auto; }
And here's the HTML: (well, the html will have to be viewed in the browser because of the "No URLs" rule) Thanks in advance for any help. Similar TutorialsMy web page looks fine on FF and Chrome, but doesn't on IE. Everything is pushed up. Anyone have any suggestions? I have searched the net and can't find a solution. egoboosters . org / newindex1 . htm This is kind of a continueation of a thread in the JS forum. But I am trying to do a CSS only thing here, so I thought it would be more appropriate here. I have these tabs that change color by altering the background position. Normal is orange, hover is yellow, and active is supposed to go kind of pink. Hover works fine as you see. But active does nothing, both in FF and IE. I gathered up all the style stuff that's relevant and put it all in the one file, tho that's not usually how I code things. But anyway, the code can talke clearer than I can. http://www.colleenweb.com/tests/atest.html Why doesn't active work??? It's late at night so the head isn't 100% but Ive been beating on it a while. Thanks!!! Hello. I am new to css and i made the following h1{ position:absolute; left:850px; top:300px; color:green; } I put this in a form that i wanted to be shown at the right bottom of my screen and in mozzila it worked fine, but i found out that in internet explorer it didn't and in general i coudn't view right anything that had specific positions. Is there a bug? Here's the code (it's all in the one file). (I had a link but I'm too new here) 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=ISO-8859-1"></meta>
<title> image border bug test</title>
</head>
<body onload="highlightimg()">
<div id="container">
<a class="aclass" ><img src="a.jpg" id="i1" alt="alttext"/></a>
<a class="aclass" ><img src="b.jpg" id="i2" alt="alttext"/></a>
<a class="aclass" ><img src="c.jpg" id="i3" alt="alttext"/></a>
</div>
<script type="text/javascript">
function highlightimg(){
document.getElementById('i2').setAttribute('style','border-width: 3px 3px 3px 3px; border-color:red;border-style: solid;');
}
</script>
</body>
</html>
Internet explorer refuses to apply the border style to the center (or either of the other) images. Any thoughts? (This is a small test case, the style must be applied with js in the actual application I'm building). Hi there, Kindly have a look on below CSS property. What i want to ask is: when i'll click on a button, it should be look active. I mean it would have to get property of .sidebar_menu:active But it doen't works. Please elp me out from this. Code: <!--Sidebar menu button start-->
.input {
color : #FF9000;
font-size:20px;
;
}
.sidebar_menu{
border: 0px;
background: url('images/word-real.jpg') no-repeat top left;
font-size:18px;
font-weight:bold;
text-decoration:none;
color:#FFFFFF;
font-family: Verdana, Arial, Helvetica;;
width:97px;
height:42px
}
.sidebar_menu:hover {
border: 0px;
background: url('images/word-over.jpg') no-repeat top left;
color:#009BC9;
}
.sidebar_menu:active {
border: 0px;
background: url('images/word-over.jpg') no-repeat top left;
color:#009BC9;
}
br { clear: left; }
<!--Sidebar menu button End-->
Code: <a rel="11"><input type="button" value="worship" class="sidebar_menu"/></a> <a rel="22"><input type="button" value="prayer" class="sidebar_menu"/></a> <a rel="33"><input type="button" value="cell" class="sidebar_menu"/></a> <a rel="44"><input type="button" value="city" class="sidebar_menu"/></a> <a rel="55"><input type="button" value="mission" class="sidebar_menu"/></a> I want this menu bar to be at the very top of the page, in IE it looks fine but in Chrome the text is below the box, any ideas would be appreciated? Code: <html> <head> <style type="text/css"> .people { position:absolute; right:0px; top:0px; width:300px; height:25px; background-color:#E4E4E4; vertical-align:super; } </style> <title>home | account | about | help</title> </head> <body> <div class="people"> <p><b><font color="#0077CC" face="Arial" size="2">home</font></b><font face="Arial"> <font color="#CCCCCC">|</font> </font><b> <font color="#0077CC" face="Arial" size="2">account</font></b><font face="Arial"> <font color="#CCCCCC">|</font> </font><b> <font color="#0077CC" size="2" face="Arial">about</font></b><font face="Arial"> <font color="#CCCCCC">|</font> </font><b> <font color="#0077CC" face="Arial" size="2">help</font></b></p> </div> </body> </html>
Hi I am not new to web development but fairly new to css and learning css-xhtml for web 2.0. I am making a design at http://www.superstaruk.com/v/ it shows fine in IE but in FF, Chrome and Opera etc it shows broken. Main problem is with pistioning the divs and also the background of free delivery does not appear. Can anybody help me please by pointing out the problem? I read the box-model but even according to that i am unable to solve this. thank you Hi all, I have a problem in scaling images, I re-size all images by -50% to make them act as thumbnails at the following address: http://www.magic-photography.co.uk/photoselector.html It works fine in Chrome using the following simple CSS: Code: a img { border: none; height: 50%; width:auto; text-align: left; }
however in IE/Firefox the images do not re-scale at all. Very very grateful for any help offered. Thanks Hello everone, i just joined today in this community and looking forward to enjoying here for a quite long time as i want to develop myself with css. I have a horizontal menu which is based on an image that has three layers: unvisited link, hover link, active link. but somehow i cant get my active links to work and cant understand where im making a mistake. you can find php and css codes below. and i appreciate any single comments suggestions. PHP code: Code: <?php
$block = ( is_front_page() ? 'h1' : 'div' );
// arguments for wp_list_pages
$list_args = k2_get_page_list_args(); // this function is pluggable
?>
<?php echo "<$block class='blog-title'>"; ?>
<a href="<?php echo get_option('home'); ?>/" accesskey="1"><?php bloginfo('name'); ?></a>
<?php echo "</$block>"; ?>
<p class="description"><?php bloginfo('description'); ?>
<ul id="menu">
<li id="home"><a href=""<?php if(is_home() || is_single() || is_category() || is_tag() || is_author() || is_year() || is_month()) { echo ' class="active"'; }?>>home</a></li>
<li id="archives"><a href="?page_id=2"<?php if(is_page('archives')) echo ' class="active"'; ?>>archives</a></li>
<li id="news"><a href="?page_id=35"<?php if(is_page('news')) echo ' class="active"'; ?>>news</a></li>
<li id="contact" class="last<?php if(is_page('contact')) echo ' active"'; ?>"><a href="?page_id=31">contact</a></li>
CSS code: Code: #menu {
list-style: none;
padding: 0;
margin: -105px 25px;
width: 332px;
height: 30px;
background: url('images/menu.gif');
position: relative;
}
ul#menu li { width: 80px;
height: 30px;
padding: 0 4px 0 0;
text-indent: -900px;
float: left;
}
ul#menu li.last { padding: 0; }
ul#menu li a, ul#menu li a:visited, ul#menu li a:hover { display: block; width: 80px; height: 30px; background: transparent url('images/menu.gif') no-repeat; outline: none; }
ul#menu li#home a, ul#menu li#home a:visited { background-position: 0 0; }
ul#menu li#archives a, ul#menu li#archives a:visited { background-position: -84px 0; }
ul#menu li#news a, ul#menu li#news a:visited { background-position: -168px 0; }
ul#menu li#contact a, ul#menu li#contact a:visited { background-position: -252px 0; }
ul#menu li#home a:hover { background-position: 0 -30px; }
ul#menu li#archives a:hover { background-position: -84px -30px; }
ul#menu li#news a:hover { background-position: -168px -30px; }
ul#menu li#contact a:hover { background-position: -252px -30px; }
.home ul#menu li#home a, .home ul#menu li#home a:visited, .home ul#menu li#home a:hover { background-position: 0 -60px; cursor: default; }
.archives ul#menu li#archives a, .archives ul#menu li#archives a:visited, .archives ul#menu li#archives a:hover { background-position: -84px -60px; cursor: default; }
.news ul#menu li#news a, .news ul#menu li#news a:visited, .news ul#menu li#news a:hover { background-position: -168px -60px; cursor: default; }
.contact ul#menu li#contact a, .contact ul#menu li#contact a:visited, .contact ul#menu li#contact a:hover { background-position: -252px -60px; cursor: default; }
i think the problem may be with the last 4 lines of CSS code because they are related to the active links but dont know how i can find out the problem. thank you for any single suggestions and comments. I'm going mad with this, I tested the CSS a:hover function over FF 1.0.7 and IE6, and the style file is simple: PHP Code: h3 { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } p { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } a { text-decoration: none; } a:hover { color:#636500; } a:visited { color:#cecf9c; } a:link { color:#cecf9c; } searched through the forum but seems nobody has got this problem... I just want the link to change color, I imported the css file to my html and it worked for the first time. I clicked on the link and then use brower's "Back" button to test it again, but the hover feature is not working anymore. I think it may be affected by the a:visited style, but how do I make a:hover work all the time? Thanks for helping. Hi There all, I've got this problem with a overflow div tag. I've tried just about everything possible. Easy way of saying it, I want a content box that is basically form 80px of the page down to the bottom of the browser. This "content box will be scrollable, but i want a menu to be the top 80 pixels of the page. EDIT: IE just does the content in the full page! Here's sample here of my small css: Code: <style type='text/css'>
#content {
top: 75px;
bottom: 0px;
width: 100%;
position: absolute;
overflow: auto;
}
</style>
Thanks in advance! James hi, i wanted to change a look of form submit buttons a bit and i found out i can do it using inline css, example: Code: <input type="submit" name="subbtn" value="Send" style="background-color: #fbbe2c; width: 120px; font-family: tahoma; font-size: 12px; font-weight: bold; color: #66666;"> but can't figure out how to define it using internal or external css. i tried this: Code:
<head>
<style type="text/css">
input.btn { background-color: #fbbe2c; width: 120px; font-family: tahoma; font-size: 12px; font-weight: bold; color: #66666; }
</style>
</head>
...
<input type="submit" name="subbtn" value="send" class="btn">
which seems the most correct to me, but it doesn't work. style defined in this way is ignored. i'm sure there is a way to do it, but it seems i don't know the right way. could you help, please? Hi, I have a strange problem where an inline style works, but if I put it in a new style class, it won't! Here is the CSS for a menu list: Code: #menu li{
vertical-align:middle;
height:2em;
padding-left:7px;
padding-top:6px;
float:left;
margin-left:25px;
background-color:#8D8387;
display:block;
}
And then I want to apply this to the first list item: Code: .noMargin{
margin-left:0;
}
When I apply that class to the list item, nothing happens. However, when I use the inline style: style="margin-left:0;", it does work. What's going on? Thanks (please note, i'm a noob).. What i have right now: ################ HTML: ################ <div id="aboutusimage"></div> ################ CSS: ################ #aboutusimage { width:400px; height:75px; background-image:url(/images/about.jpg); position:relative; left:189px; top: 4px; margin-bottom:30px; } ======================== What i'd like to have: ################ HTML: ################ <div id="banner" class="about"></div> ################ CSS: ################ #banner { width:400px; height:75px; position:relative; left:189px; top: 4px; margin-bottom:30px; } #banner.about { background-image:url(/images/about.jpg); } ====================== For some reason, the image disapears when i do this :\ Any advice? Hi, link to wesbite why doesn't the drop down menu, that works in IE6 not work in Firefox 0.8? It is pure CSS, no Javascript. OK, I know it doesn't validate and don't care too much about that. I know putting tables inside an anchor tag is frowned on but hey, it works and I didn't think it up. I thought IE was the worst when it came to CSS compliance? Any ideas how I can fix it? Thanks, John Hi guys Look here www DOT clickemarketing DOT com The date, before each article, should show at right. This date uses the .createdate css class, which is this Code:
.createdate {
color: #A9A9A9;
vertical-align: top;
padding-bottom:2px;
float: right;
font-size: 11px;
}
I don't know why IE shows it at left... FF shows ok Is there any way to correct this class, and make date show at right in this pseudo browser, worm collector, spyware downloader called IE ? Thanks Hi guys, I've trying to achieve the following. I want to have a div element floating on the right 100px from the top and the rest of content is filled with text. PHP Code: <div>[image]</div><p>text 1</p><p>text 2</p> I could do this easily with simple float:right but then the image would at 0px from top and if I try to move it down (using margin or padding) the text wouldn't reach above it (would get cut off at the width of the image form the right) If I try to add another div with 100px height and 10px (for example) width above the image, the text overlaps over my image div Any ideas how to achieve this? Below is my full html code PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html > <head> <title>float</title> <style type="text/css"> .content { width: 400px; background: #FFFF00; padding: 5px; } .floatright { float: right; height: 100px; border: 1px solid #000; } .offset { width: 10px; } .imgholder { width: 100px; clear: right; } </style> </head> <body> <div class="content"> <div class="floatright offset"></div> <div class="floatright imgholder"><h1>image</h1></div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare. Vestibulum a nulla id velit elementum imperdiet. Nam a purus. Suspendisse non enim. Nullam id sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas aliquet varius tellus. Aliquam sed nunc eu tortor semper vulputate. Nunc risus. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare. Vestibulum a nulla id velit elementum imperdiet. Nam a purus. Suspendisse non enim. Nullam id sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas aliquet varius tellus. Aliquam sed nunc eu tortor semper vulputate. Nunc risus. </p> </div> </body> </html> This is my CSS File: PHP Code: .linkbody { padding: 15px 15px 6px; color: white; font-family: Verdana; font-size: 10pt; width: 160px; background-color: #006EA1; } and this my html file: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<head>
<title> Schmid </title>
<link type="text/css" rel="stylesheet" href="css2.css">
</head>
<body>
<center>
<table class="linkbody" width="800">
<tr>
<td>
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</td>
</tr>
</table>
</center>
</body>
</HTML>
In Firefox the padding works fine, but in the IE6 it doesn't work at all makes me angry thx for any help My site works fine with Opera 7 but refuses to work properly with IE6 and Firefox. There's definately a problem with how each browser renders my CSS. I for one cannot figure out what to change so that the site would work with all three browsers. That being said, would anyone be grateful enough to help me out? Thanks! URL: URL I've included some screenshots of how the site looks like on all three browsers. URL URL URL |
|||||||