I have some code which is working fine in IE8, FF & Safari on a PC, but not in IE7. The idea is to have a large button, with a background image in the tag, and text & a foreground image. When the user rolls over the button, the background image is replaced with a different one:
CSS:
ul { list-style-type:none; }
ul li { display:inline; }
ul li.link a {
position:relative;
float:left;
margin:0 10px 10px 0;
background:url(templatebtn.jpg) no-repeat;
width:294px;
height:250px;
display:block;
padding:6px 0 0 6px;
}
ul li.link a:hover {
position:relative;
float:left;
margin:0 10px 10px 0;
background:url(templatebtnover.jpg) no-repeat;
width:294px;
height:250px;
display:block;
padding:6px 0 0 6px;
cursor:pointer;
}
HTML:
<ul>
<li class="link">
<a id="button1" class="btn">
<div class="btntitle"><p><strong>A title</strong></p></div>
<div class="btnpic"><img src="pic.jpg" /></div>
</a>
</li>
...
</ul>
In IE7, the image is not replaced on hover, and the cursor doesn't change to a pointer. Even if I remove most of the gunk from the css a:hover, and just have a:hover { cursor:pointer; } it still doesn't work (i.e. the cursor doesn't change). I've googled this for an age & must be missing something obvious... And ideas?
Thanks,
G
Change div to span. XHTML and HTML <5 do not allow div inside a.
Edit: Oh and while you are at it, remove the p, because p inside span is not allowed. :)
Edit 2: Add a href attribute to the a tag.
Related
My website shows different output in .aspx page while using same structure & CSS in html page it shows correct output but in apsx page css gets collapse. I check both code twice & it is same but output gets different.
HTML Page Output
ASPX page output
HTML Code
<!--bg-img-container-starts--><div class="bg-img-container">
<!--bg-img-starts--><div class="bg-img">
<!--header-starts--><div class="header">
<!--logo-starts--><div class="logo">
<h2><a title="Quista" href="#">Quista</a></h2>
</div><!--logo-ends-->
<!--menus-starts--><div class="menus">
<ul class="nav">
<li>Home <div class="pipe"></div></li>
<li>Services</li>
<li>Pricing</li>
<li>Track Orders</li>
<li>About Quista</li>
<li class="call">Call Us :- +91 1234 1245</li>
</ul>
</div><!--menus-ends-->
</div><!--header-ends-->
</div><!--bg-img-ends-->
CSS
html, body{
margin:0;
padding:0;
width:100%;
height:100%
}
.clear{clear:both}
body{
font-family:'Quicksand', sans-serif;
}
.bg-img-container{
width:100%;
position:relative;
height:100%
}
.bg-img{
width:100%;
max-height:768px;
height:100%;
background:url(../Images/0000.jpg) no-repeat;
background-size:cover;
}
.header{
width:100%;
max-width:1200px;
position:relative;
margin:0 auto;
padding:15px 0 0 0
}
.logo{
width:20%;
display:inline-block;
}
.logo h2{
font-family:'MyriadPro-BoldCondIt';
font-size:4em;
padding:0;
margin:0;
letter-spacing: 5px
}
.logo a{
color:#fff;
text-decoration:none
}
.menus{
width:79%;
display:inline-block;
}
.nav{
marging:0;
padding:0
}
.nav li{
display:inline-block;
list-style:none:none;
}
.nav li a {
padding:15px 25px 15px 25px;
color:#fff;
text-decoration:none;
display:block
}
.nav li a:hover{
border-bottom:2px solid #FFF
}
.call{
background:#df6b5e;
border-radius:50px
}
.call a{
font-weight:bold;
padding:15px 25px 15px 25px !important
}
.call a:hover{
border:none !important
}
I think problem is with top div (img-bg-container) because in css I have given height 100% & it's child div max:height:768px. Though problem solves if I keep min height instead max height in aspx page but How come it shows diiferent output when codes are same..
Do one thing. Right click on page and and select inspect element. and check both the page html and css. It will be easy to compare and find which css is not working.
Also check the form tag css as we place form tag above all HTML tags and inside body tag in asp.net. Usually HTML page do not have such structure. check and let me know.
I am building a navbar. This is what I want;
change the background-color on the link when hoover over it.
first and last link background should have round corners.
The problem is that either all links get rounded corner or none does!
CSS
nav {
width:100%;
line-height:2;
}
nav ul {
list-style:none;
}
nav li a {
text-decoration:none;
color:white;
float:left;
width:90px;
display:block;
background-color:blue;
padding-left:10px;
}
nav li a:first-child {
border-radius:5px;
}
nav li a:last-child {
border-radius:5px;
}
nav li a:hover {
color:blue;
background-color:white;
}
HTML
<nav>
<ul>
<li>Hem
</li>
<li>om oss
</li>
<li>hitta hit
</li>
<li>Kontakta
</li>
</ul>
</nav>
What you are looking for is something like this?
http://jsfiddle.net/gespinha/mkDWj/2/
You should trigger the a within the first and last li, not the first and last a within an li element, because all li only have one a (which is automatically its own first and last.
You other issue was that you were assigning all borders to have the same radius, when you just want the edge borders to have a radius value.
CSS
nav li:first-child a {
border-radius:5px 0 0 5px;
}
nav li:last-child a {
border-radius:0 5px 5px 0;
}
For more detailed information on the border-radius attribute check this documentation http://www.w3schools.com/cssref/css3_pr_border-radius.asp
i try to make a list Horizontal like
I try to make when hover each item (text and dot) then cursor is the same when hover <a> tag like
But it's true for hover text not for both dot and text.
Frist problem: i can't make width is auto include both dot and text.
Second: I think a tag must be surrounded li to do: hover both (dot and text).
How to make that work. Thanks
Here is my code http://jsfiddle.net/Q6CZ2/
<div id="wrap">
<ul id="navbar">
<li>Exhibits and Events
</li>
<li>About Us</li>
<li>Contact</li>
<li>Press</li>
</ul>
</div>
try this fiddle
it wraps the "li" tags in the "a" tags like so:
<a href="#"><li>Exhibits and Events
</li></a>
that may be what you want.
as for you second problem try deleting:
* {
padding:0px;
margin:0px;
}
and:
#wrap {
margin: 50px;
width:600px;
height:40px;
}
also try this fiddle
You need to change the hovered cursor if li to pointer to change the cursor of the bulletin mark
since you have the rule #wrap a it is overriding the color applied by rule #wrap li:hover
Try
#wrap li:hover, #wrap li:hover a{
color: #CCC;
cursor: pointer;
}
Demo: Fiddle
if i understand your question correctly, you want to use:
li{
cursor:pointer;
}
although i dont know why you want that cursor, because the dot still wont act as a link.
You can keep your <a> tag inside of the <li> tag with this:
* {
padding:0px;
margin:0px;
}
#wrap li {
float:left;
}
#wrap {
/*border: 1px solid #000;*/
margin: 50px;
width:600px;
height:40px;
}
#wrap li {
width:150px;
color:green;
}
#wrap a {
margin-left:-20px;
padding-left:20px;
color:green;
text-decoration:none;
display:block;
}
#wrap li:hover,
#wrap li:hover a {
color: #CCC;
}
http://jsfiddle.net/Q6CZ2/9/
I have an oddly specific error concerning CSS, Firefox and Windows.
Let me explain: I use
vertical-align:sub;
... and it displays correctly with Firefox on Linux and IE on Windows but not with Firefox and Windows. I use the same version of Firefox on both Linux and Windows.
Some pictures of the problem (sorry for the inconvenience but, I can't post pictures or more than 2 links yet, so I have to do it like that):
http://www.mercuryproductions.de/kram/Errors.html
link to the page: http://www.sontag-consult.com/
If I fiddle around with the vertical-align I can get it to work with FF on Win, but it messes up the other combinations.
This is how I would do it:
CSS
Add this to your CSS file:
ul
{
margin:0;
padding:0;
}
ul li
{
margin:0 0 0 3px;
padding:0;
display:inline-block;
list-style-type:none;
}
ul li:first-child
{
margin-left:0;
}
ul li a
{
padding:3px 8px;
display:block;
font-weight:bold;
text-decoration:none;
color:#fff;
background-color:#000;
}
ul li a i
{
margin:2px 5px 0 0;
display:block;
float:left;
width:20px;/* width of your img */
height:15px;/* height of your img */
background:url(/sprites.png) no-repeat;/*your img file here*/
}
HTML
And this is what your HTML code should look like:
<ul>
<li>
<i></i>Lang 1
</li><li>
<i></i>Lang 1
</li><li>
<i></i>Lang 1
</li>
</ul>
DEMO
BTW, it's probably recommended that you use image sprites.
Updated:
Solution 1 (IMG tags):
CSS
ul li a img
{
margin:2px 5px 0 0;
border:0;
display:block;
float:left;
width:20px;/* width of your img */
height:15px;/* height of your img */
}
HTML
<ul>
<li>
<img src="/deutsch.png">Deutsch
</li>
</ul>
Demo
Solution 2 (w/ image sprites):
CSS
ul li a i
{
background:url(/sprites.png) no-repeat;
margin:2px 5px 0 0;
display:block;
float:left;
width:20px;/* width of your img */
height:15px;/* height of your img */
}
ul li a i.deutsch
{
background-position:0 0;
}
Solution 3 (w/o image sprites):
CSS
ul li a i
{
margin:2px 5px 0 0;
display:block;
float:left;
width:20px;/* width of your img */
height:15px;/* height of your img */
}
ul li a i.deutsch
{
background:url(/deutsch.png) no-repeat center center;
}
HTML
<ul>
<li>
<i class="deutsch"></i>Deutsch
</li>
</ul>
I have a css menu in my aspx page.I want the selected menu to have the same style as hover menu(change the color).I have the css for both hover and current selected menu,and hover is working fine. I have googled this problem and solution was to set "class= current" in the li section of the html code.But my doubt is whether I have to set "class=current" each li sections or is there any need of javascript to report which one is selected out of the menu. I am newbie to css.Please help me..
<div id="tabsJ">
<ul class="menu">
<!-- CSS Tabs -->
<li><span>Reports</span></li>
<li><span>Employee</span></li>
<li><span>Equipment</span></li>
<li><span>Scanner</span></li>
</ul>
</div>
I have used this css
#tabsJ {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
border-bottom:1px solid #24618E;
}
#tabsJ ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsJ li {
display:inline;
margin:0;
padding:0;
}
#tabsJ a {
float:left;
background: url("../images/tableftJ.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsJ a span {
float:left;
display:block;
background:url("../images/tabrightJ.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}
#tabsJ #current a {
background-position:0% -42px;
}
#tabsJ #current a span {
background-position:100% -42px;
color:#FFF;
}
Sam Warren - Added jsfiddle - http://jsfiddle.net/ejLTy/
Actually I have this menubar in the masterpage for all the four pages,DataLog.aspx,EmployeeDetails.aspx,EquipmentDetail.aspx and ScannerDetail.aspx.
No Need of JavaScript. Just change li as,
<li class="current"><span>Reports</span></li>
<li><span>Employee</span></li>
<li><span>Equipment</span></li>
<li><span>Scanner</span></li>
for page DataLog.aspx. Use the same routine for all pages by changing the li class as current.
For hover use the pseudo element property in css called
your_division:hover
Hey Just put class="current" in first li. you will get selection on each link. And also
Go to following link, you will get different kind of menus as well as you can customize menu also as per your requirement.:
http://www.cssmenumaker.com/
check it the example of your updated CSS i have just added (current) id in your li
and where you want the selected link add the current id in that particular li.
http://jsfiddle.net/ejLTy/2/