|
CSS - A:hover Pseudo-class As Parent Selector In Ie
Forgive the subject, I'm not sure how to describe this oddity. This seems to only happen in IE, test with this snippet:
Code:
<style>
a:hover span { color: Green }
</style>
<a href="#"><span>link</span></a>
One would expect the text to turn green when hovering, but it doesn't. Works fine in other browsers as it should, but not in IE. However, if you add any valid style, regardless of function, to the bare :hover pseudo-class of the anchor, it works fine. For example, this doesn't change the theoredical function at all: Code:
<style>
a:hover { visibility: inherit }
a:hover span { color: Green }
</style>
<a href="#"><span>link</span></a>
But now it works fine in IE. It doesn't recognize the psuedo-class as a parent unless there's an explict valid style for the item itself. Order doesn't appear important. I guess I'm posting in part as a PSA and just to have this odd behavior confirmed by third parties. I've done a lot of reading on IE bugs and don't recall seeing this come up. It probably stems from the lack of :hover support for non-anchor tags. Confirm/deny/comment? Similar TutorialsHey guys. I'm still learning css so excuse some crude styles. I don't know how to explain this so grap IE 6 and click here. Scroll down the links on the left until you get to the last one "Printable Pics." As you can see for some reason the last two links jump down the page and a big blank spot appears in it's place when you hover your mouse over it. It doesn't do that in firefox or opera so I don't know whats' going on. Heres my CSS: Code: body {
text-align: center;
height: 100%;
background-image: url(images/bg_title.gif);
}
img {
border: none;
}
#wrapper {
width: 780px;
height: 100%;
margin: 0 auto;
text-align: left;
position: relative;
background-color: #FFFF7D;
color: #000000;
border: solid 2px #0000ff;
}
#header {
width: 780px;
height: 143px;
margin-bottom: 3px;
}
#headerImage {
width:200px;
float: left;
margin-right: 2px;
}
#headerImage img {
margin: 0px;
}
#headerLogo {
width: 577px;
float: left;
margin: 0px;
}
#headerLogo img {
margin: 0px;
}
#navagation {
width: 204px;
margin-bottom: 1px;
float: left;
margin-right: 1px;
}
.navIcon {
float: left;
margin-right: 2px;
margin-bottom: 1px;
padding: 0px;
}
.navButton {
float: left;
margin-bottom:1px;
padding: 0px;
}
a.navButton:link {
border: none;
}
a.navButton:visited {
border: none;
}
a.navButton:hover {
border: 1px solid #000000;
}
#mainContentArea {
float: left;
width: 570px;
height: 711px;
border: solid 1px #000000;
background-color: #ffffff;
margin-bottom: 3px;
}
#footer {
height: 1px;
margin-top: -1px;
clear: both;
overflow: hidden;
}
Thanks in advance! -Tim Hi I've got a bit of a problem. I am making a website and what I want to do is create links with block background showing an image, which changes to just pink on a mouse over. what I did was make a div, give it classname menu_items and in that div put different hyperlinks. my code: Code: /* Menu picture caption */
.menu_items a { display: block; color: #FFF; background-color: #FF0066; text-decoration: none; padding: 5px; position: absolute; }
#menu_0910_dg000 { background-image: url('img/0910_dg000.jpg'); height: 90px; width: 140px; top: 100px; left: 0px; font-size: 12pt; }
#menu_0910_dg000:hover { background-image: none; color: #FFF; }
#menu_0910_dg601 { background-image: url('img/0910_dg601.jpg'); height: 90px; width: 140px; top: 100px; left: 150px; font-size: 12pt; }
#menu_0910_dg601:hover { background-image: none; color: #FFF; }
#menu_0910_dg200 { background-image: url('img/0910_dg200.jpg'); height: 90px; width: 140px; top: 100px; left: 300px; font-size: 12pt; }
#menu_0910_dg200:hover { background-image: none; color: #FFF; }
#menu_0910_elderly { background-image: url('img/0910_elderly.jpg'); height: 90px; width: 440px; top: 0px; left: 0px; font-size: 18pt; }
#menu_0910_elderly:hover { background-image: none; color: #FFF; }
#menu_0910_demos { background-image: url('img/0910_demos.jpg'); height: 90px; width: 890px; top: 200px; left: 0px; font-size: 20pt; }
#menu_0910_demos:hover { background-image: none; color: #FFF; }
Code: <div class="menu_items"> <a id="menu_0910_dg000" href="0910_elderly.html">Assignment: DG000 Introducing Competency-Centred Learning </a> <a id="menu_0910_dg601" href="0910_elderly.html">Assignment: DG601 Digital Video</a> <a id="menu_0910_dg200" href="0910_elderly.html">Assignment: DG200 Creative Programming for Designers</a> <a id="menu_0910_elderly" href="0910_elderly.html">Project: Elderly Interacting with the Digi-world</a> <a id="menu_0910_demos" href="0910_elderly.html">External: Demos Bar Committee</a> </div> You can see that I first used the nested selector .menu_items a, but this doesn't work with hover, so .menu_items a:hover doesn't work. Why not and how to fix?:S gr Bram Hi everyone, Been racking my brains trying to figure out why a class is not being applied to a div, then i narrowed it down and realised that the ID selector is always taking precedence to the class attribute. Consdier this html page: Quote: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <style type="text/css"> #container { background-color: red; width: 100px; height: 50px; } .change_bg { background-color: green; } </style> </head> <body> <div id="container" class="change_bg" ></div> </body> </html> The div's background color comes out red and not green, as one would expect. Why is this happening? aren't styles supposed to be cascading? isn't that what CSS is all about? I can use !important but i want to know why it's not doing what is expected. Many thanks Using the following example: 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
a
{
display: block;
}
a.one.on, a:hover.one, a:hover.one.on
{
color: red;
}
a.two.on, a:hover.two, a:hover.two.on
{
color: orange;
}
a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
</style>
</head>
<body>
<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>
<p> </p>
<a href="#" class="one on">one</a>
<a href="#" class="two on">two</a>
<a href="#" class="three on">three</a>
</body>
</html>
Notice how, in IE6 (works fine in FF), when the secondary style named 'on' is added, all 3 links in the 2nd set display the properties of the style: Code: a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
(since it is last in the list) rather than the style specified by their respective numbers (i.e. 'one', 'two' or 'three'). Is there a way to overcome this in IE. I have another problem with IE for Windows: I have several links which should not appear as links but should inherate the colors (grey or black) and decoration (none) from their parents ... works fine every where except MSIE for windows (where the usual red and blue - but no underline - appear) the relevant styles: <style type="text/css"> a:link { text-decoration: none; color: inherit; } a:visited { text-decoration: none; color: inherit; } </style> the relevant html: <h3 style="padding: 0; margin: 0.25em;color:#000000; ">Some <a href="http://www.theDanceGypsy.com/danceFinder.shtml" target="viewFrame">Dance Events</a> near you:</h3> <ul class="newsList"> <li><a href="http://www.thedancegypsy.com/danceList.php?dance=dance-26:6-4" target="viewFrame"><span class ="unconfirmed">6/25: Bernardston~ <cite>Eastern Squares</cite> </span></a></li> <li><a href="http://www.thedancegypsy.com/danceList.php?dance=dance-30:6-4" target="viewFrame">6/26: Brattleboro~ <cite>Paneurhythmy</cite> </a></li> anyone have any idea for a workaround? Thanx I'm a bit confused about the class and id selector. It seems they both produce the same result. I've a book and it said that the id selector can be used once. Is that mean used once on the web page or on the css? <div class="content"></div> <div id="content"></div> Thanks. Greets, I hope someone can help me achieve this in IE6. it should be simple (famous last words?) ... but am stumped right now: What I am trying to achieve: I'm trying to get a class displayed for a link in an unordered list (Ie: Have the "home" section highlighted when I'm on the index page and so forth) Html/cfm code: Code: ... <div id="LeftMenu"> <ul> <li><a href="./index.cfm" title="Home">Home</a></li> <cfif (GetAuthUser() neq "")> <li><a href="./index.cfm?action=edit_profile" title="Edit Profile" <cfif request.action eq "edit_profile"> class="l_menu_selected"</cfif>>Edit profile</a></li> <li> </li> <li><a href="./index.cfm?logout=1" title="Logout" style="font-size: 8pt; color: red; ">Logout</a></li> <li> </li> <cfelse> <li><a href="./index.cfm?action=create_profile" title="Create Profile" <cfif request.action eq "create_profile"> class="l_menu_selected"</cfif>>Create profile</a></li> </cfif> </ul> </div> ... The css bit that goes with it: Code:
#LeftMenu
{
width: 200px;
}
#LeftMenu ul
{
margin: 0px;
padding: 0px;
}
#LeftMenu ul li
{
margin-top: 2px;
margin-left: -14px; /*WHY ON EARTH does ie set me up with some kind of funky margin on the left I didn't ask for???*/
}
#LeftMenu ul li a:link, #LeftMenu ul li a:visited,#LeftMenu ul li a:active
{
display: block;
background-color:#99cdff;
height: 28px;
width: 170px;
vertical-align:middle;
line-height:30px;
margin:0px;
padding-left: 30px;
font-weight:bold;
font-size: 8pt;
background-image: url(../images/arrow.gif);
background-repeat: no-repeat;
background-position: left center;
}
#LeftMenu ul li a:hover, #LeftMenu ul li a.l_menu_selected, .l_menu_selected
{
background-color:#6fb2f8;
}
I gather my last selector is where it's FUBAR. When parsing the page, I can clearly see the class tag is displayed... but the desired colour doesn't show up. Code: <li><a href="./index.cfm?action=create_profile" title="Create Profile" class="l_menu_selected">Create profile</a></li> Our client uses IE6 exclusively, so... no matter how nice it looks in FF (too many good developing tools to pass it up)... i need this displayed properly in IE6. As a bonus: if someone can tell me why the <li>'s are shown by default with a left padding of 20px in IE (hence, me having to resort to "margin-left: -14px;") I'm a CSS newbie and have a basic question. It seems that the selectors class and id do ecaxtly the same thing. So this begs the question: Which one should I use and why is it better then the other selector? I see that both should not begin with a number (css1) and I am unclear about the requirement for the selector to be unique. Thanks Folks! I want to know if ID Selectior for a class is avaible in css. I got many textboxes cssclass'es applied to .TEXTBOX_BLACK but I wantto add extra attribute to only Textbox10 something like overflow :auto; thanks much before any answers. regards. my attempt is below but ofsure not working: .TEXTBOX_BLACK { border-style : solid; border-width: 1px; border-color:Black; font-family: Tahoma; height:14px; width:140px; background-color: #414141; } .TEXTBOX_BLACK #TextBox10 { overflow :auto; } Hello, This is my first post at devshed and I must say I am more than excited to have found this community... I am having a css problem and I was hoping that someone might be able to help me? I am trying to add "styles" to my wysiwyg text editor... My editor plugin points to a css file to define the different "styles" for text. Currently it is working fine with the following code... all of the styles listed below in the css display correctly: Code:
/* Typography Styles */
ul.bullet-1, ul.bullet-2, ul.bullet-3, ul.bullet-4, ul.bullet-5, ul.bullet-6, ul.bullet-7, ul.bullet-8 {
padding-left: 15px;
overflow: hidden;
margin-left: 5px;
}
ul.bullet-1 li, ul.bullet-2 li, ul.bullet-3 li, ul.bullet-4 li, ul.bullet-5 li {
list-style: none;
padding-bottom: 3px;
margin-bottom: 5px;
padding-left: 10px;
}
ul.bullet-6 li, ul.bullet-7 li, ul.bullet-8 li {
list-style: none;
padding-bottom: 3px;
margin-bottom: 5px;
padding-left: 22px;
}
ul.bullet-1 li {background: url(../images/typo/bullet-1.png) 0 5px no-repeat;}
ul.bullet-2 li {background: url(../images/typo/bullet-2.png) 0 5px no-repeat;}
ul.bullet-3 li {background: url(../images/typo/bullet-3.png) 0 5px no-repeat;}
ul.bullet-4 li {background: url(../images/typo/bullet-4.png) 0 5px no-repeat;}
ul.bullet-5 li {background: url(../images/typo/bullet-5.png) 0 5px no-repeat;}
ul.bullet-6 li {background: url(../images/typo/bullet-6.png) 0 2px no-repeat;}
ul.bullet-7 li {background: url(../images/typo/bullet-7.png) 0 2px no-repeat;}
ul.bullet-8 li {background: url(../images/typo/bullet-8.png) 0 3px no-repeat;}
pre {
padding: 10px;
background: #f6f6f6;
border-top: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
border-left: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
}
blockquote {
display: block;
font-style: italic;
font-size: 120%;
line-height: 150%;
width: auto;
padding: 10px 20px 10px 20px;
margin: 15px 0;
background: #f6f6f6;
border-top: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
border-left: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
}
blockquote.blue, blockquote.red, blockquote.green, blockquote.purple, blockquote.orange, blockquote.brown, blockquote.grey {
display: block;
font-style: italic;
font-size: 120%;
line-height: 150%;
width: auto;
padding: 0px 20px;
margin: 15px 0;
border: 0;
background: 0;
}
blockquote.blue{color: #0D507A;}
blockquote.red{color: #D12E2E;}
blockquote.green{color: #74A824;}
blockquote.purple{color: #9E0E87;}
blockquote.orange{color: #CC8300;}
blockquote.brown{color: #8B6846;}
blockquote.grey {color: #666;}
blockquote.quotes {
display: block;
background: url(../images/typo/quote-start.png) 0 5px no-repeat;
padding: 0px 20px 0 38px;
margin: 20px 0;
font-size: 120%;
line-height: 150%;
width: auto;
color: #666;
border: 0;
}
blockquote.quotes p {
padding: 0 38px 0 0;
margin-top: 0;
background: url(../images/typo/quote-end.png) 100% 100% no-repeat;
}
.important, .important-blue, .important-red, .important-green, .important-purple, .important-orange, .important-brown, .important-grey {
padding: 15px;
margin: 15px 0;
}
span.important-title, span.important-title-blue, span.important-title-red, span.important-title-green, span.important-title-purple, span.important-title-orange, span.important-title-brown, span.important-title-grey {
position: absolute;
display: block;
margin-top: -24px;
background: #fff;
padding: 0 8px;
font-weight: bold;
font-size: 120%;
}
.important {border: 1px solid #333;}
.important-blue {border: 1px solid #0D507A;}
.important-red {border: 1px solid #D12E2E;}
.important-green {border: 1px solid #74A824;}
.important-purple {border: 1px solid #9E0E87;}
.important-orange {border: 1px solid #CC8300;}
.important-brown {border: 1px solid #8B6846;}
.important-grey {border: 1px solid #666;}
span.important-title {color: #333;}
span.important-title-blue {color: #0D507A;}
span.important-title-red {color: #D12E2E;}
span.important-title-green {color: #74A824;}
span.important-title-purple {color: #9E0E87;}
span.important-title-orange {color: #CC8300;}
span.important-title-brown {color: #8B6846;}
span.important-title-grey {color: #666;}
span.number, span.number-blue, span.number-red, span.number-green, span.number-purple, span.number-orange, span.number-brown, span.number-grey {
display: block;
font-size: 170%;
float: left;
margin: 2px 10px 0 15px;
}
span.general_heading{
background: url(http://mysite.com/components/com_magazine/layouts/images/bg/bg10.png) #3A3A3A repeat-x 0px 0px;
display: block;
height: 26px;
line-height: 26px;
text-indent: 8px;
font-size: 12px;
font-weight: bold;
color: #cccccc;
font-family: 'Arial Narrow', Arial, Helvetica, sans-serif;
margin: 0px 3px 3px 3px;
text-transform: uppercase;
}
span.number {color: #333;}
span.number-blue {color: #0D507A;}
span.number-red {color: #D12E2E;}
span.number-green {color: #74A824;}
span.number-purple {color: #9E0E87;}
span.number-orange {color: #CC8300;}
span.number-brown {color: #8B6846;}
span.number-grey {color: #666;}
span.highlight {background: #FFFBD5;padding: 1px 2px;}
span.highlight-blue {color: #0D507A;}
span.highlight-red {color: #D12E2E;}
span.highlight-green {color: #74A824;}
span.highlight-purple {color: #9E0E87;}
span.highlight-orange {color: #CC8300;}
span.highlight-brown {color: #8B6846;}
span.highlight-grey {color: #666;}
span.highlight-bold {font-weight: bold;font-size: 120%;}
span.dropcap, span.dropcap-blue, span.dropcap-red, span.dropcap-green, span.dropcap-purple, span.dropcap-orange, span.dropcap-brown, span.dropcap-grey {
display: block;
font-size: 260%;
float: left;
margin: 0px 4px 0 0;
line-height: 100%;
}
span.dropcap {color: #333;}
span.dropcap-blue {color: #0D507A;}
span.dropcap-red {color: #D12E2E;}
span.dropcap-green {color: #74A824;}
span.dropcap-purple {color: #9E0E87;}
span.dropcap-orange {color: #CC8300;}
span.dropcap-brown {color: #8B6846;}
span.dropcap-grey {color: #666;}
span.inset-left {
display: block;
color: #000;
padding: 15px;
float: left;
width: 20%;
font-size: 110%;
font-weight: bold;
font-style: italic;
}
span.inset-right {
display: block;
color: #000;
padding: 15px;
float: right;
width: 20%;
font-size: 110%;
font-weight: bold;
font-style: italic;
}
span.attention, span.notice, span.alert, span.download, span.approved, span.media, span.note, span.cart, span.camera, span.doc {display: block;padding: 8px 10px 8px 36px;margin: 15px 0;}
span.attention {overflow: hidden;color: #B79000;border: 1px solid #E7BD72;background: #FFF3A3 url(../images/typo/attention.png) 10px 50% no-repeat;}
span.notice {color: #648434;border: 1px solid #9BCC54;background: #CDEFA6 url(../images/typo/notice.png) 10px 50% no-repeat;}
span.alert {color: #CF3738;border: 1px solid #FFACAD;background: #FFD5D5 url(../images/typo/alert.png) 10px 50% no-repeat;}
span.download {color: #1C6B8B;border: 1px solid #6ABCE2;background: #A8CDE3 url(../images/typo/download.png) 10px 50% no-repeat;}
span.approved {color: #666;border: 1px solid #a8a8a8;background: #ccc url(../images/typo/approved.png) 10px 50% no-repeat;}
span.media {color: #C76E34;border: 1px solid #FFBB65;background: #FFE0B6 url(../images/typo/media.png) 10px 50% no-repeat;}
span.note {color: #B79000;border: 1px solid #E7BD72;background: #FFF3A3 url(../images/typo/note.png) 10px 50% no-repeat;}
span.cart {color: #666;border: 1px solid #C5C5C5;background: #E6E6E6 url(../images/typo/cart.png) 10px 50% no-repeat;}
span.camera {color: #666;border: 1px solid #C5C5C5;background: #E6E6E6 url(../images/typo/camera.png) 10px 50% no-repeat;}
span.doc {color: #C76E34;border: 1px solid #FFBB65;background: #FFE0B6 url(../images/typo/doc.png) 10px 50% no-repeat;}
HOWEVER.... WHEN I ADD THE FOLLOWING "STYLES" / CODE TO THE CSS ABOVE... MY EDITOR ONLY RECOGNIZES A FEW OF THE ITEMS?!?! I WAS TOLD I NEEDED TO DO SOMETHING WITH THE CLASS SELECTOR NAMES? Code: .general_heading{
background: url(http://mysite.com/components/com_magazine/layouts/images/bg/bg10.png) #3A3A3A repeat-x 0px 0px;
display: block;
height: 26px;
line-height: 26px;
text-indent: 8px;
font-size: 12px;
font-weight: bold;
color: #cccccc;
font-family: 'Arial Narrow', Arial, Helvetica, sans-serif;
margin: 0px 3px 3px 3px;
text-transform: uppercase;
}
.heading {
background: url(http://mysite.com/components/com_magazine/layouts/images/bg/bg9.png) #890605 repeat-x 0px 0px;
display: block;
height: 28px;
line-height: 28px;
text-indent: 8px;
font-size: 12px;
font-weight: bold;
color: #cccccc;
font-family: 'Arial Narrow', Arial, Helvetica, sans-serif;
margin: 0px 3px 3px 3px;
text-transform: uppercase;
}
/*side bar*/
/* The box sorrounding the side bar*/
div.box_sidebar{
background-color: #F7F7F7;
border: 1px solid #C0D5EC;
color: #333333;
float: right;
margin: 40px 10px 10px 10px;
padding: 10px 10px 10px 10px;
top: 40px;
}
div.sidebar {
float: left;
width: 29%;
}
img.user_image_class{
margin: 5px 5px 5px 5px;
}
/* article title*/
.article_title, a.article_title{
}
.background-image img{
margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
}
/*author mini profile*/
.box_author{
background-color: #F7F7F7;
border: 1px solid #C0D5EC;
color: #333333;
margin: 30px 20px 20px 10px;
padding: 5px 5px 5px 5px;
}
/* descriptions*/
.description{
background-color: #ffffff;
color: #333333;
font-size: 12px;
margin: 3px 3px 3px 3px;
}
.description div p{
background-color: #ffffff;
color: #333333;
font-size: 12px;
margin: 3px 3px 3px 3px;
}
/*intro*/
.intro_horizontal {
background-color: #ffffff;
color: #333333;
display: block;
font-size: 12px;
margin: 5px 5px 5px 5px;
}
.quotes {
padding: 0 10px 0 10px;
width: 230px;
}
.quotes div {
background-color: #ffffff;
color: #333333;
font-size: 14px;
font-weight: bold;
}
.quotes img {
padding: 0px 10px 0px 10px;
}
/* Alignment of the text of the sidebar area*/
.sidebar_area {
text-align: left;
}
/* Alignment of the image in the sidebar area*/
.sidebar_area img{
float: right;
}
.sidebar_article_title {
background-color: #ffffff;
color: #666666;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
hr {
background-color: #ffffff;
color: #ebebeb;
height: 0px;
border-style: dotted;
}
TIA RYAN Don't know if I got the language right on the headline? I've got the following css for my forms: .form table { border-collapse: collapse; color: black; border: 1px solid black;} and the markup looks like this <table class="form" width="100%" cellspacing="0"> however when I link a different page to the same sheet I'm getting a table that has been styled with the above scc even though i haven't marked up the class... any ideas... good http://www.rickweston.com/my_ucwdc/membership/register.php bad http://www.rickweston.com/judge/about_judge/index.php thnks for any help Is there a way of changing a parent class based on a child class like. ../[class=child]{ } This way i can change a parent class if it has this child Any ideas? Hi, Is there a good way to use css to make every element with a specified class name to have some hover attribute, for instance .class:hover would do something? For some reason it doesn't work for me unless I say div.class:hover or a.class:hover, etc. I have to specify an element. Hey guys, I'm hoping what I need to do involves only CSS (though, it wouldn't shock me if I needed a lot more!) Anyways, the basic thing I'm doing is a table that hold lots of numbers. I'm creating a "times table" - which looks roughly something like this: ......1 2 3 //top row (multiples) 1.....1 2 3 2.....2 4 6 3.....3 6 9 Now, when you rollover, let's say, the '6' - the TD background color for the '6', left '2' and top '3' would change to a different color (bolded in this example). This would work the same way for every other number as well, which involves overlapping classes. I can only get one rollover working, with simple 'hover' commands. I've search for an answer for hours, to no avail. any suggestions? And here's a more "code specific" example of the table: <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>1</td><td>1</td><td>2</td><td>3</td> </tr> <tr> <td>2</td><td>2</td><td>4</td><td>6</td> </tr> <tr> <td>3</td><td>3</td><td>6</td><td>9</td> </tr> </table> Thanks so much guys! please please somebody help me with this... i have given my links some effects with this code: Code: <style type="text/css">
<!--
a img {border: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; border-bottom:3px double; color: #000000;}
a.head,
a.head:link { text-decoration: none; }
a.head:hover { text-decoration: none; }
//-->
</style>
it works fine on my links, but the class "head" doesn't seem to be effecting the link with that class....it still has the same hover effect as the other links. I have class="head" in the link tag of the element, but it still doesn't work. I want no effect on this link since it is an image and I don't want a double-underline on it. The only thing I can think of is that maybe the head image isnt being effected correctly because it is an include file, but I don't think that really matters. Thanks! Hello everyone. I would like to make a layout that fills the entire window but not more. The content of the page i want to display in a container that is always on a certain distance from the window border. I came up with this code which works perfectly in FF but not in IE. html4strict Code: Original - html4strict Code <html> <head> <title>layouttest</title> <style type="text/css"> body { margin: 0px; } table { empty-cells: show; } #container { position: absolute; top: 38px; bottom: 27px; left: 161px; right: 19px; overflow: auto; background: maroon; } </style> </head> <body> <table cellspacing="0" cellpadding="0" style="height: 100%; width: 100%;"> <tr> <td style="width:142px;height:100%;" bgcolor="green"></td> <td style="height:100%;" bgcolor="blue"><table width="100%" height="100%" cellspacing="0"> <tr><td colspan="3" style="height:37px"></td></tr> <tr> <td style="width:16px;"></td> <td bgcolor="red" valign="top" style="overflow: hidden;"><div id="container"> adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br /> adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br /> adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br /> </div></td> <td style="width:16px;"></td> </tr> <tr><td colspan="3" style="height:26px"></td></tr> </table></td> </tr> </table> </body> </html> <html> I have looked through various threads here and found a lot of ideas for making it work in IE but it never did. So if you could help me with this i would be very thanksful. thx - HoB I've got a form that I'm trying to lay out. I've prepared examples. http://www.dollardns.net/devshed/example1.html This is approximately what the form should look like. But I don't like how I managed to pull it off. I've explicitly declared a height for the middle row in my form. I want this to be automatic based on the contents. http://www.dollardns.net/devshed/example2.html But this is what happens if I take out the explicit height. The float lefts for the inner "box"es confuse the parent div into thinking it has no content. So the height collapses, and chaos results. http://www.dollardns.net/devshed/example3.html I've also tried making the "box"es use a display of "inline". But that doesn't work possibly cause inline elements are not supposed to contain block elements. Any recommendations? Does anybody know how to simulate the :after pseudo-element for msiepc? I want to add a small image icon on at the end of a regular anchor tag which MUST stay as an inline element and therefore can't use a background image to accomplish this (as this doesn't work over multiple lines in ie.) More specifically. Does anybody know a reliable cross-browser way of adding a small image (such as an arrow) to the end of an <a> tag that wraps over multiple lines? Cheers dudes Is it possible to inline a :hover... something like this: <a href="loc" style="color: blue;" style:hover="color: red;">Click here</a> Now that in particular doesn't work, but can you do something like that by editing the style=""? (I know it's best to just have a separate css file. I'm just wondering if it can be done) If i have the following html: PHP Code: <div id="centre"> <h2>Header</h2> <p>Lorem ipsum appareat definiebas has eu. Eam consul ancillae ex.</p> <p> Sumo percipit instructior te mei. Est diceret convenire periculis ad, id vix facilisis sadipscing.</p> <p>Ei per aeque petentium tincidunt, posse inimicus ad sit.</p> </div> I want to select the first letter within the first <p> element, I've tried to do it using double pseudo-elements: PHP Code: div#centre p:first-child:first-letter { etc. } But this obviously won't work, because the <p> ain't first. I realise that i could do it very simply by just giving the first paragraph a class, but the use pretty much requires contextual selection, It seems the equivalent of second:child (which is what i want) will be available in css3, Even ideas would be great, Cheers |
|||||||