Pseudo CSS classes do not work

I'm trying to show the feedback of control when the user has made a click on anchor tags, buttons etc in the web page. To do this I use CSS pseudo-class: active, but could not see the feedback shown on controls. I tried with: hover,: visited but had no luck.

I thought that here in CSS 1.0 specification and blackberry browsers support, I think that these classes are not supported on blackberry browsers or may be I am doing something wrong.

Ex: input.button: active {background: url (blueButton.png)}

I tried the Storm 9530 model, but could not make it work.

If anyone worked on feedback control, showing a click on the control when the user has performed an operation, could you help me how to do on the blackberry browsers.

What I usually do is to change the image using JavaScript. On the element onclick(), I change its style characteristics to give the impression that this option is selected.

You can also do the trick where change you the style of images / the onclick() button and then to execute the rest of the code for the 'click' action, you run by using a setTimeout(). This is because the JavaScript thread must leave before he'll re - paint user interface

An example below:

function doClick() {

  document.getElementByID("myImage").src='images/selectedBtn.png';
  setTimeout('doRestOfClick()', 200);

}

function doRestOfClick() {

  // Whatever logic I wish to perform

}

Tags: BlackBerry Developers

Similar Questions

links CSS styles do not work
Hi I did a css style that is supposed to make links and visited links on the main part of my a color page and links and visited links on the bottom of my page of another color. I can't run and can't see why it won't work. Can anyone help? The site that I do is http://vintagemorgans.com

Attrributes of the class for the home page links are called "major" and the attributes of the class for the background links are called "low."

If anyone can help, I would really appreciate it!

.oO (shelld)

> I made the changes to the code and it still does not work. Links to the
> the bottom are supposed to change a different color after are visited.

Okay, I _did_ missed something...

island of http://Jigsaw.w3.org/css-validator/Validator?URI=http://vintagemorgans.com/&Warning=1&Prof = css2

Color values must begin with a ' # '.

Micha

TEREDO TUNNELING PSEUDO-INTERFACE DEVICE DOES NOT WORK CORRECTLY - ACCORDING TO AVG PC TUNE UP

My laptop is a HP G7030EA - MS Windows Vista Home Basic 32-bit SP2 Intel Pentium Dual CPU T2330 @ 1.60 GHz, 1.0 GB RAM, Mobile Intel 965 Express Chipset Family, bought new in February 2008. I have not changed any hardware, software, etc. I do not use it for games, only for things such as e-mails and visit websites

Until last month when my desktop computer broke, I used the laptop only occasionally as a backup of the computer. It never quite worked and seems to be unable to handle several tasks at once, often taking minutes for Google to load. When I get impatient and click the mouse too much I heard a horrible noise and the screen mouse cursor freeze for a minute or two.

As the laptop has become my main computer at the moment, I downloaded AVG PC Tune Up to see if it would improve it performance has not helped. I was surprised to see how much memory the AVG2013 anti virus program uses, but wonder if the speed of connection and freezing problems I experience result (AVG Tune Up conclusions on) the Teredo Tunneling pseudo-interface unit does not properly.

I follow AVG on screen re boards: looking for a software driver update but none was found, and I got the message "the best driver for your device software is already installed. Windows has determined that the driver software for your device is up-to-date, Tun Miniport, Microsoft Map.

This left me confused. If there is a problem with this device, no solution seems to exist.

Any help that will allow my laptop to function normally is welcome.

I understand that you want to know if the teredo adapter can cause performance problems.

The teredo adapter should not cause performance problems. It is really just used to allow devices work IPv4 with IPv6 Internet service provider. If the ISP was using IPv6 and your system did not have the adapter teredo, so it wouldn't work properly with the service provider. For now, IPv6 is a significant minority that the world continues to work on IPv4 as not all networks, Internet service providers, and businesses are not entirely passed to IPv6.

This thread on the Microsoft forums goes into a little more detail about the adapter teredo including how to disable it so that you only see it in Device Manager. Unless you are using IPv6, this shouldn't really be a problem.

If you start in safe mode, the performance problem persists? Turn on the computer and press F8 once per second for the Mode option, safe mode with networking. This will help you to further isolate the performance problem.

Furthermore, does this happen that the adapter is connected or not?

ul and Li classes do not work

Hello world
Im having a little trouble with some classes ul and li on this page http://www.flitecarz.co.uk/leaflet-flyer-printing.html
For the life of me I can't work why my ul class does not display the bullets and styles I have specified when you click on the button more info under one of the products.
Any pointers or help will be appreciated.

Try this:

{.product-details

left margin: 45px; / * Add this * /.

do-family: Verdana, Geneva, without serif.

do-size: 12px;

line-height: 22px;

Display: block //*remove this * /.

}

Nancy O.

CSS navigation does not work in Internet Explorer
I used the information on this site, http://htmldog.com/articles/suckerfish/dropdowns/, to help me create navigation using css that would be compatible with IE but it doesn't seem to work, when I load in IE I get an 'error on page' and the drop down menu does not work. It seems to work fine in firefox. This is the http://whatcom-mrc.wsu.edu/mrc_base.htm page.

Is this a problem with my css or javascript. Any help would be appreciated.
I thought about it.

Pseudo CSS classes

Do you know how to create a Web Page with more than a pseudo-class?
Hello. I hope you can help me with a problem I've been struggling with for the last two weeks. I'm trying to create a Web page by using Cascading Style sheets and I need to create two sets of colors of hyperlinks using the selectors for a: link, a: visited and a: hover.

Here is an example of the type of effect that I am creating:

http://www.plantation.org/web/residents.html - this page has a set of hyperlinks that are black, just passing through to white color on hover and another game of hyperlink colours which are blue.

These are the two classes I need to design:
First class:

a: link {}
do-family: Verdana, Arial, Helvetica, without serif.
font size: xx-small;
make-weight: bold;
color: #FFFFFF;
text-decoration: underline;
}
a: visited {}
do-family: Verdana, Arial, Helvetica, without serif.
font size: xx-small;
make-weight: bold;
color: #FFFFFF;
text-decoration: underline;
}
a: hover {}
do-family: Verdana, Arial, Helvetica, without serif.
font size: xx-small;
make-weight: bold;
color: #FFFF33;
text-decoration: underline;
}

Second class:
a: link {}
do-family: Verdana, Arial, Helvetica, without serif.
do-size: 10px;
make-weight: bold;
color: #FFFF33;
}
a: visited {}
do-family: Verdana, Arial, Helvetica, without serif.
make-weight: bold;
color: #FFFF33;
do-size: 10px;
}
a: hover {}
do-family: Verdana, Arial, Helvetica, without serif.
do-size: 10px;
make-weight: bold;
color: #FFFF33;
text-decoration: underline;
}

Can you explain how to do this using Dreamweaver? I know how to create two style sheets using CSS and attach them to a page, but when I do a sheet replaces the other. I don't have much chance of finding any information on the Internet and I confirmed to customer service by phone is not all the documentation in the forum or in the guide on how to do it. Thank you in advance for your help!
Hello Murray. Regret - I'm new to the forum so I wasn't sure which category, I should post my message under. The link to the document projectseven has also been provided by another user, and it solved my problem. Thank you for taking the time to answer! Best wishes.

The substitution of CSS page does not work

Can someone tell me what I'm missing? I am new to the APEX and CSS. I've searched and searched for answers, but nothing does. I can't get my CSS to override a standard page CSS templates.

My environment:
I'm hosting with appshosting.com.
Request Express 4.2.4.00.08
Oracle Database 10g Enterprise Edition Release 10.2.0.4.0 - production

Here's what I did:
1 downloaded my CSS file in the shared workspace to components-> cascading style sheets
2. model of copied and renamed page like mine
3 assigned my page template to all my pages
3. changes in the header of my page template HTML, added reference to my style sheet by ensuring that this follow-up to the standard style sheet (see extract of code below, my change in red)
#HEAD #.
< meta name = "viewport" content = "width = device-width, original scale = 1.0" >
"< link rel ="stylesheet"href="#IMAGE_PREFIX#themes/theme_24/css/4_1.css ">
< link rel = "stylesheet" href = "" #WORKSPACE_IMAGES #PDSLight.css "type =" text/css">"
"< script src="#IMAGE_PREFIX#themes/theme_24/js/4_1.js "> < / script >
< / head >
I have can see in firebug that APEX is picking up my stylesheet:
"<meta content= 'width = device-width, original scale = 1.0" ' name= "window">
"<link href="/i/themes/theme_24/css/4_1.css"' rel="stylesheet">
"" <link type= "text/css" " href="wwv_flow_file_mgr.get_file? p_security_group_id = 39384205349726775 & p_fname = PDSLight.css" rel="stylesheet">"
header #uheader hgroup {height: 50px;! important} this line shows when I click on the button "+" revealing the CSS in my file

< /link>

But as I fly over the header, style, it shows that he uses is the standard css:

header hgroup #uHeader {
height : 90px ;
position: relative
}
Any help would be greatly appreciated.

Rodney Bailey says:

Can someone tell me what I'm missing? I am new to the APEX and CSS. I've searched and searched for answers, but nothing does. I can't get my CSS to override a standard page CSS templates.

My environment:

I'm hosting with appshosting.com.

Request Express 4.2.4.00.08

Oracle Database 10g Enterprise Edition Release 10.2.0.4.0 - production

Here's what I did:

1 downloaded my CSS file in the shared workspace components--> cascading style sheets

2. model of copied and renamed page like mine

3 assigned my page template to all my pages

3. changes in the header of my page template HTML, added reference to my style sheet by ensuring that this follow-up to the standard style sheet (see extract of code below, my change in red)

#HEAD #.

I can see in firebug that APEX is picking up towards the top of my stylesheet:

header #uheader hgroup {height: 50px;! important} this line shows when I click on the button "+" revealing the CSS in my folder

Unlike Oracle, CSS is case sensitive. If the ID attribute of the element has the value "uHeader", then the selector in your rule of precedence must match this exactly. As Kees, the! important directive is also misplaced. However as your alternative style sheet is referenced after the theme CSS, and the (corrected) selector has the same specificity as the rule of theme, then it should not be necessary: the waterfall will cause the override rule to apply. Change the switch on header#uHeader hgroup , remove !important , and the substitution should work.

My .as class does not work in flex project

I have a .as file extended Sprite and restores Visual elements on the screen
the package of actions {}
import flash.display.Sprite;
SerializableAttribute public class Monaction extends Sprite {}
public void Monaction () {}
}
}
}
I am trying to enter it in a Flex project, to add these shapes to my stage.
I created a package called actions carried out under the programme of the CBC and saved the .as file.
Because it restores Visual elements, I thought that I could wrap as a UI component and add it to the stage. So I created a new MyUIComp.as .as file that basically looks like this:
the package of actions {}
import of actionscript. Monaction;
Import mx.core.UIComponent;
SerializableAttribute public class MyUIComp extends UIComponent {}

private var myAction:MyAction;
public void MyUIComp() {}
Monaction = new MyAction();
}
}
}
in my main mxml I add then to a UIComponent like this
< mx:UIComponent id = "actionLocation" / >
and in the script section, wiring, it:
private function init (): void {}
var actionToStage:MyUIComp = new MyUIComp();
actionLocation.addChild (actionToStage);
}
I don't get any errors, but nothing appears on the scene either.
Can someone be kind enough to tell me what I might have done wrong. I'm kinda new, so maybe I'm missing something obvious.
Thank you
David
P.S. Ideally I would not create a class wrapper MyUIComp to make my class to extend UIComponent. I would use the original class as follows:
import flash.display.Sprite;
Import mx.core.UIComponent;
SerializableAttribute public class Monaction extends Sprite UIComponent {}
}
but this double extends doesn't seem to work

In your custom UIComponent class, your never added your Monaction instance. Try this for the MyUIComp constructor:

public void MyUIComp() {}

Monaction = new MyAction();

this.addChild (myAction);

}

If this post answers your question or assistance, please mark it as such.

Greg Lafrance - Flex 2 and 3 certified ACE

www.ChikaraDev.com

Flex / development, training, AIR and Support Services

"For more specific class" does not not on sbRIO 9636

The application that I am forcing me to programmatically access arbitrary components of a nested group. Currently, I am doing the browsing the cluster using his property [] node recursively controls. Currently, my accessor VI to accomplish this works very well on a normal PC but does not work on my target in real time, a sbRIO 9636.

After some research, I determined that the function "To more specific class" does not work on my target in real time. I have attached a code base that shows the heart of the problem. It works fine on a PC but will return an error 53 when running on my target in real time.

A few questions:

(1) is 'To more specific class' supported on the sbRIO 9636 or not?
(2) if it is supported, what am I doing wrong?

(3) if it is not taken in charge, what are other methods for access by the arbitrary elements of a nested cluster program?
(4) if it is not supported, why LabVIEW allows me to place the feature even when the sbRIO 9636 is explicitly selected as my goal in my LabVIEW project? It seems prudent to restrict its use, if it is not supported. My day job has been effectively wasted because of this problem.

For reference, here's a few previous discussions

http://forums.NI.com/T5/real-time-measurement-and/modifing-cluster-component-properties-on-sbRIO-No-...

http://forums.NI.com/T5/real-time-measurement-and/quot-Manager-call-not-supported-quot-when-typecast...

Thank you
JAnthony

The other posts are correct, because it is currently not possible to use the function on a real-time target. This is a known issue and is being investigated for correction, but currently there is no work around. It is available on the pallets that this behavior is not intentional and should work.

You have described your application requires that recursively through a table and access to specific data. Does this mean that the Data Structure might be different when the vi is run and you need to adapt to a changing data type? If this isn't the case, then all you need to do is to get the value of the reference and then ungroup the cluster as needed then store the changed values to the same reference.

If you're going to have to settle you will encounter difficulties to be determined pragmatically you should do but I have a suggestion. Create a cluster with an enum and a Variant. You can use the enumeration to set the type of the variant in question. He chooses the type to convert the variant according to the code. It is a similar structure, like messages in queue manager and his messages that happening except that you will be passing a reference to this group that has both the message and the payload in one. The reference could be used to get the value and then the code must only be written to accept the Cluster of Enum and variant you can then convert the variant to the appropriate type for later use. For best performance, you also use in Place of the Structure element.

It's only a means potentially accomplish what you want. If you describe your program and needs more in depth, we are able to offer a more suitable solution for your application that does what you need. I wish you a nice day!

CSS transitions does not not on iPad

Hello..
My CSS transitions do not work on the ipad
After a little research, I wonder if it has to do with the z-index property of the elements I want to animate.
Could someone tell me if I'm completely off-direction and/or what could be wrong.
The tabs on the lower left corner of the page are supposed to animate upward and view the content, but they don't quite work... (nice work on many desktop computers)
http://tinyurl.com/transproblemipad
Thanks a lot before any guidance
Katrina

Hi Katrina,

CSS level 3 transitions do not work in the pre - IE9 browsers or devices touchscreen without the help of JavaScript. Contact devices can respond to flight HOVER States because they do not have a mouse. To call animations in mobile devices, you must use the OnClick event triggers or press on and hold.

Example with jQuery

http://jsfiddle.NET/NancyO/AP9Hm/4/

Nancy O.

BitmapData.Draw () does not work with crossdomain images
We develop a gallery of dynamic moving images using Flash 8 & AS2, for which images are called from another area. I used the Reflection class (in which bitmapdata.draw () of works) to achieve reflections. It works fine when the images are called from the same domain. But when the images are called from another area, the Reflection class does not work because bitmapdata.draw () does not work on images of crossdomain due to security sandbox. Although the images are appearing. I would be very grateful if anyone can answer, because I tried this for the last few days with little success.
There is some information at the bottom of this page:

http://livedocs.Adobe.com/Flash/8/main/00001950.html

And here
http://flashforever.homeip.net/blog/?p=4#comment-31

Select validation Spry and css formatting does not together, class issue?

Hello people,
I hope someone can help with the following, was stuck on this during 2 days and I am about to lose my mind.
1.) it will not validate but my css works.
< div >
< span id = "BoardMember" >
< select class = "turnintodropdown_demo2" name = "FundingSource_BoardMember" id = "BoardMember" >
< option value = "" > member of the < / option >
< option value = "1" > 1 < / option >
< option value = "2" > 2 < / option >
< option value = "3" > 3 < / option >
< option value = "4" > 4 < / option >
< option value = "5" > 5 < / option >
< option value = "6" > 6 < / option >
< option value = "7" > 7 < / option >
< / select >
</span >
< / div >
--------------------------------------------------------
2.) if I remove the class: "turnintodropdown_demo2" validation works, but my breaks of css.
< div >
< span id = "BoardMember" >
< select name = "FundingSource_BoardMember" id = "BoardMember" >
< option value = "" > member of the < / option >
< option value = "1" > 1 < / option >
< option value = "2" > 2 < / option >
< option value = "3" > 3 < / option >
< option value = "4" > 4 < / option >
< option value = "5" > 5 < / option >
< option value = "6" > 6 < / option >
< option value = "7" > 7 < / option >
< / select >
</span >
< / div >
--------------------------------------------------------
3.) span id = 'BoardMember' is the spry validation, but adding the = "turnintodropdown_demo2" class breaks validation.

I think I found my answer:

http://blueashes.com/2013/Web-development/HTML5-form-validation-fallback/

footer css does not work

I add a footer on my page and I want to change the color but his does not work, I created a class of footer, but the background won't change I don't its something simple, but I can't see it here is my code please.
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE = edge" >
< meta name = "viewport" content = "width = device-width, original scale = 1" >
< name meta = "description" content = "" >
< name meta = "author" content = "" >
<!-TemplateBeginEditable name = "doctitle"-->
< title > my events calendar < / title >
<! - TemplateEndEditable - >
" < link rel ="stylesheet"href =" https://MaxCDN.bootstrapcdn.com/font-awesome/4.5.0/CSS/font-awesome.min.CSS ">
<!-'bootstrap' Core CSS-->
" < link rel ="stylesheet"href =" http://MaxCDN.bootstrapcdn.com/bootstrap/3.3.5/CSS/bootstrap.min.CSS ">
<!-Custom-> CSS
"< link href ="... / CSS/business-casual. CSS"rel ="stylesheet">
<! - fonts - >
" < link href =" http://fonts.googleapis.com/CSS?family=open+sans:300italic, 400italic, 600italic, 700italic, 00italic 8, 400, 300, 600, 700, 800 "rel ="stylesheet"type =" text/css"> "
" < link href =" http://fonts.googleapis.com/css?family=Josefin+Slab:100, 300, 400, 600, 700, 100italic, 300itali c, 400italic, 600italic, 700italic "rel ="stylesheet"type =" text/css"> "
< div id = 'fb-root' > < / div >
< script > (function (d, s, id) {})
var js, SJF = d.getElementsByTagName (s) [0];
If (d.getElementById (id)) return;
js = d.createElement (s); js.ID = id;
js. SRC = "//connect.facebook.net/en_US/sdk.js#xfbml=1 & version = v2.5 & appId = 512896575525133;
fjs.parentNode.insertBefore (js, SJF);
(} (document, 'script', 'facebook-jssdk')); < /script >
<! - HTML5 Shim and Respond.js IE8 takes in charge of HTML5 elements and questions from the media - >
<!-WARNING: Respond.js does not work if you view the page via file://-->
<!-[if lt IE 9] >
" < script src =" https://OSS.MaxCDN.com/libs/html5shiv/3.7.0/html5shiv.js "> < / script > .
" < script src =" https://OSS.MaxCDN.com/libs/respond.js/1.4.2/respond.min.js "> < / script > .
<! [endif]-->
<!-TemplateParam name = "class" type = "text" value = ""-> "
< / head >
< class = "@@(_document['class']) body @" >
< div class = "mark" > my events calendar < / div >
< div class = "address bar" > < strong > where all your events are a click away < facilities > < / div >
<! - navigation - >
< nav class = "navbar, navbar - default" role = "navigation" >
< div class = "container" >
<!-brand and toggle get grouped together for better mobile display->
< div class = "bar navigation-header" >
< button type = "button" class = 'bar of navigation-toggle' data-toggle = "collapse" data-target="#bs-example-navbar-collapse-1" >
< span class = "sr only" > toggle navigation </span >
< span class = 'bar icons' > < / span >
< span class = 'bar icons' > < / span >
< span class = 'bar icons' > < / span >
< / button >

"< a class = 'bar of navigation-brand' href ="... / index.html "> my events calendar < /a >"
< / div >
<!-collect the nav links, forms, and other content to alternate->
< div class = "navbar-collapse collapse" id = "bs-example-navbar-collapse-1" >
< ul class = "navbar-nav nav" >
< li >
"< a href ="... / index.html "> home < /a >"
< /li >
< li >
"< a href ="... / calendar.html "> calendar < /a >"
< /li >
< li >
"< a href ="... / events.html "> events < /a >"
< /li >
< li >
"< a href ="... / venues/venues.html "> sites < /a >"
< /li >
< li >
"< a href ="... / registration.php "> feedback < /a >"
< /li >
< /ul >
< / div >
<!-/ .navbar-collapse->
< / div >
<!-/-> .container
< / nav >
<!-TemplateBeginEditable name = "EditRegion2"->
< div class = "container" >
< / div > <! - TemplateEndEditable - >
<!-/-> .container
<>footer
< div class = "footer" >
< div class = "row" >
< div class = "col-lg-12 text-Center" >
< p > copyright & copy; Your site Web 2014 < /p >
< / div >
< / div >
< / div >
< / footer >
<! - jQuery - >
" < script src =" https://code.jQuery.com/jQuery-1.11.1.min.js "> < / script > .
<!-'bootstrap' Core JavaScript-->
" < script src =" http://MaxCDN.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js "> < / script > .
<! - script to activate the carousel - >
< script >
$('.carousel').carousel ({}
range: 5000 //changes speed
})
< /script >
< / body >
< / html >

Thanks for the help I got it sorted, I removed my site from the wamp server and installed new ones now thanks again HAPPY NEW YEAR.

My resulotion of new year is to get this bloody site finished lol

Transition CSS does not work in Internet Explorer

I only tested in Firefox and IE, and for some reason any the legend that is supposed to slide comes automatically appears in Internet Explorer. You can find an example here http://css-tricks.com/examples/SlideinCaptions/. I've modified it a bit more, try to make friendly browser but I still can not work in Internet Explorer. Any help would be really appreciated here, thank you! I have bolded the parts I am having trouble with. Here is my code:
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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 "/ >"
< link rel = "stylesheet" href = "style.css" type = "text/css" / > "
< script type = "text/javascript" src = "javascript.js" > < / script >
< script >
NUM = Math.floor (Math.Random () * 3);
If (num == 1) {}
image = "bg1.png";
}
If (num == 2) {}
image = "bg2.png";
}
< /script >
< title > embroidery by CJ < /title >
< / head >
< onload = "MM_preloadImages('contact1.png','about1.png','producst1.png','index1.png') body, document.body.background = image" >
< div class = "header" >
< div class = 'wrapper' >
< div class = "logo" >
< img src = "logo.png" width = "438" height = "56" alt = "Embroidery by CJ" / > "
< / div >
< div class = "nav" >
< div class = "link4" >
< center >
"< a href ="contact.html"MM_swapImgRestore" onmouseover ="MM_swapImage ('Contact',", 'contact1.png', 1) "> < img src =" contact.png "alt ="Contact"name = 'Contact' width = height"73"="15"border ="0"id ="Contact"/ > < /a >
< /Center >
< / div >
< div class = "link3" >
< center >
"< a href ="about.html"MM_swapImgRestore" onmouseover ="MM_swapImage ('About',", 'about1.png', 1) "> < img src =" about.png "alt ="About"name = 'About' width ="56"height ="16"border ="0"id ="About"/ > < /a >
< /Center >
< / div >
< div class = "link2" >
< center >
"< a href ="products.html"MM_swapImgRestore" onmouseover ="MM_swapImage ('Products',", 'producst1.png', 1) "> < img src =" products.png "alt = 'Products' name = 'Products' width ="83"height ="20"border ="0"id ="Products"/ > < /a >
< /Center >
< / div >
< div class = "link1" >
< center >
"< a href ="index.html"MM_swapImgRestore" onmouseover ="MM_swapImage ('Home'", 'index1.png', 1) "> < img src =" index.png ' alt = 'Home' name = 'Home' width = "54" height = "16" border = "0" id = "Home" / > < /a >
< /Center >
< / div >
< / div >
< / div >
< / div >
< br / > < br / >
< div class = "container" >
< div class = "sidebar" >
Menu < h4 > < / h4 > < hr / >
< a href = "babies.html" class = "linkmain" > babies < /a > < br / > "
< a href = "bibs.html" class = "linksecondary" > bibs < /a > < br / > "
< a href = "blankets.html" class = "linksecondary" > covers < /a > < br / > "
< a href = "rot - cloths.html" class = "linksecondary" > bibs < /a > < br / >
< a href = "onesies.html" class = "linksecondary" > Bodies < /a > < br / > < br / > "
< a href = "bathroom.html" class = "linkmain" > bathroom < /a > < br / > "
< a href = ' WC - paper.html "class ="linksecondary"> paper toilet < /a > < br / >
< a href = "soaps.html" class = "linksecondary" > SOAP < /a > < br / > < br / > "
< a href = "hats.html" class = "linkmain" > hats < /a > < br / > "
< a href = "womens - hats.html" class = "linksecondary" > hats women < /a > < br / >
< a href = "baseball - caps.html" class = "linksecondary" > Baseball caps < /a > < br / > < br / >
< a href = "kitchen.html" class = "linkmain" > kitchen < /a > < br / > "
< a href = "aprons.html" class = "linksecondary" > aprons < /a > < br / > "
< a href = "napkins.html" class = "linksecondary" > towels < /a > < br / > < br / > "
< div class = "currentmain" > towels < / div >
< a href = "golf.html' class ="linksecondary"> Golf < /a > < br / >"
< a href = 'Cook - towels.html' class = "linksecondary" > kitchen < /a > < br / > < br / >
< a href = "weddings.html" class = "linkmain" > weddings < /a > < br / > "
< a href = "bottle - cozys.html" class = "linksecondary" > bottle comfortable < /a > < br / >
< a href = "t-shirts.html" class = "linksecondary" > T-Shirts < /a > < br / >
< a href = "lace - gloves.html" class = "linksecondary" > Lace Gloves < /a > < br / >
< a href = "lace - hankies.html" class = "linksecondary" > handkerchiefs lace < /a > < / div >
< div class = 'hand' >
< div class = "productleft" >
< center >
< class figure 'cap-right' = >
< img src = "img.png" alt ="" > "
< figcaption > kitchen towel with apples embroidered. < / figcaption >
< / figure >
< /Center >
< / div >
< div class = "productright" >
< center >
< figure class = "heading on the right" > < a href = 'Cook - towels.html' > < img src = "kitchentowelsapplesthumb.jpg" alt ="" > < / a > "
< figcaption > kitchen towel with apples embroidered. < / figcaption >
< / figure >
< /Center >
< / div >
< br class = "clearfloat" / > < br / > < br / > < br / >
< / div >
< div class = "ad" >
< p > < /p > < br / >
< / div >
< / div >
< / body >
< / html >
And style.css:
@charset "utf-8";
/ * CSS document * /.
HTML, body {}
height: 1195px;
margin: 0;
padding: 0;
background-color: #F0F0E3;
background-repeat: no-repeat;
}
H4 {}
color: #2FBBFF;
}
{.clearfloat}
Clear: both;
}
/ * Header * /.
. Header {}
height: 110px;
background-image: url (bg.png);
background-repeat: repeat-x;
-webkit-box-shadow: 0px 10px 1px #1E1E1E;
-moz-box-shadow: 0px 10px 1px #1E1E1E;
-ms-box-shadow: 0px 10px 1px #1E1E1E;
-o-box-shadow: 0px 10px 1px #1E1E1E;
box-shadow: 0px 10px 1px #1E1E1E;
}
{.linkmain}
color: #1E1E1E;
text-decoration: underline;
}
{.linksecondary}
color: #666;
text-decoration: underline;
}
{.linkmain:hover}
color: #2FBBFF;
text-decoration: none;
}
{.linksecondary:hover}
color: #8AD9FF;
text-decoration: none;
}
{.currentmain}
color: #2FBBFF;
}
{.currentsecondary}
color: #8Ad9FF;
}
. Wrapper {}
Width: 960px;
margin: 0 auto;
}
.logo {}
float: left;
Width: 438px;
margin: 34px 0 0 0;
}
. NAV {}
float: right;
Width: 510px;
margin: 70px 0 0 0;
}
{.link1}
Width: 25%;
}
{.link2}
float: right;
Width: 25%;
}
{.link3}
float: right;
Width: 25%;
}
{.link4}
float: right;
Width: 25%;
}
/ * Container * /.
. Container {}
Width: 960px;
margin: auto;
margin-top: 10px;
}
/ * Buffer * /.
. Sidebar {}
height: 738px;
Width: 17.5%;
float: left;
text-align: right;
background - image: URL (transparent1.png);
}
/ * Main * /.
.main {}
height: 675px;
Width: 624px;
float: left;
Padding: 0px 0px 0px 63px;
background-color: #FBFBF7;
}
.title {}
color: #1E1E1E;
}
{} .description
color: #666;
}
. Row {}
Width: 100%;
}
{.productleft}
Width: 50%;
float: left;
}
{.productright}
Width: 50%;
float: right;
}
Figure img {}
Width: 300px;
display: block;
}
Figure {}
display: block;
position: relative;
float: left;
overflow: hidden;
margin: 0 20px 20px 0;
}
figcaption {}
position: absolute;
background: rgba (0,0,0,0.75);
color: white;
padding: 20px 10px;
opacity: 0;
-webkit-transition: all s 0.6 facilitated;
-moz-transition: all s 0.6 facilitated;
-ms-transition: all s 0.6 facilitated;
-o - transition: all s 0.6 facilitated;
transition: all s 0.6 facilitated;
}
Figure: hover {} figcaption
opacity: 1;
}
Figure: before {}
content: 'paper towel ';
position: absolute;
color: white;
opacity: 0.75;
-webkit-transition: all s 0.6 facilitated;
-moz-transition: all s 0.6 facilitated;
-ms-transition: all s 0.6 facilitated;
-o - transition: all s 0.6 facilitated;
transition: all s 0.6 facilitated;
}
Figure: hover: before {}
opacity: 0;
}
.Cap-law: before {}
Bottom: 10px;
right: 10px;
}
figcaption .cap-right {}
bottom: 0;
right: 30%;
}
.Cap-right: hover {} figcaption
right: 0;
}
/ * Ad * /
.ad {}
Width: 144px;
float: right;
background-color: #FFF;
}

Hi John

IE10 even if he plays "catch up" on some features he surpassed all other browsers when it comes to typography, see - http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx

hix77-

You could get the same effect by using a transformation matrix of IE in IE8 and below, (but I would not recommend this). The other possibility is to use a transform of IE9 with the content property property (this property css insert text in the document) that way when you hover over the image that 'extra' text is inserted. But this is not a gradual slide in as the property of transition is needed for this.

The other alternative is to use slide-in jQuery plugin.

(I'll cause a disagreement now, then you have been warned!) -

IE8 is now on a decline in its use for private users, so if you're not targeting companies or professional users, don't worry about this browser too. Also IE introduced an automatic upgrade of the browser in its system of regular updates, (auto updates) users not on XP will have the most recent version of Internet Explorer installed for their system, (currently in Australasia, other regions in the fall of this year).

XP will be IE8, (using xp down at approximately 2% per month, currently 34 percent of the total, (Microsofts digits not mine)) Vista will be IE9, Windows 7/8 will be IE10, but illegal copies of windows are not these or other updates.

PZ

Float does not work? I need the text to the right of the image, but my CSS does not work. Pls help

Hello
I have some unusual difficulty get my images to float left/right in order to have text next to the image. In the image I provided, the red arrow is where I'd like to be but little text whatever I put in the CSS file, the text starts at the lower right part of the left side of the image floated. Can someone help me understand what is happening? The code for the HTML code is located here http://codeviewer.org/view/code:1f51 the code for the CSS is here: http://codeviewer.org/view/code:1f52
I use the CSS code for a Web site I designed and that works very well in this Web site. Why isn't it working here? The name of the image is "fundraiser.jpg".
Thanks for your help!

Problem is caused by you not declaring the correct instructions for .float-left css class selector:

Change this:

{.float-left

margin: 10px 5px 0 0;

}

To do this:

{.float-left

float: left;

margin: 10px 5px 0 0;

}

Pseudo CSS classes do not work

Similar Questions

Maybe you are looking for