Here is the CSS...how can I make it layout as it should in IE6?
.AuthorName_Pic {
width:186px; position:absolute;
right:0px; bottom:-120px;
padding:20px 10px 20px 15px;
margin:20px 0px 0px 0px;
background:url(images/ThumbDark.jpg) no-repeat; z-index:100;
}
Hi, I'm using the HTML5 elements and in a project i'm working on (see it here) and the css seems to be working fine in Chrome. However, it doesn't appear to be working in Safari or Firefox (I haven't tested IE, but I'd imagine it's the same), and the page layout is all over the place.
Any ideas why this may be? I know Firefox and Safari both support these elements, and Safari is webkit-based like Chrome, so I can't figure out what the problem is.
I'm getting this Warning (it's not a error, my CSS is valid).
I choosed full report just to check to validate
You have no background-color set (or
background-color is set to
transparent) but you have set a color.
Make sure that cascading of colors
keeps the text reasonably legible.
What is this and how to solve. I'm getting this on total 57 selectors.
May websites, including professional ones usually have a "W3C Markup Validator" and "W3C CSS Validator." Why do you put them there? Is it just pride or is it justified? If it is more than pride, what justifies them?
i tried to search in google but no one talked about this.
i want a css solution to create a liquid tag box like the orange ones in this :
http://www.mixx.com/stories/10402914/haiti_us_gov_t_grants_matching_3_to_1_donations_to_worldvision_for_haiti
so, even if the word is long the tag box will fit it.
i want the same shape
Thanks
I have navigation for which I need to set a color for the selected item. It's flat HTML and CSS.
Here's the menu code:
<ul id="top_navigation">
<li class="border_red"><a href="index.html">Home</a></li>
<li class="border_red"><a href="about.html">About</a></li>
<li class="border_red"><a href="services.html"><font color="#cf3533">Services</font></a></li>
<li class="border_red"><a href="careers.html">Careers</a></li>
<li class="border_red"><a href="news.html">News</a></li>
<li class="border_red"><a href="sitemap.html">Sitemap</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
And here's the CSS - there's the basic set up and then a class to put the pipe between the items:
#top_navigation {
width: 696px;
margin: 0px;
padding: 0 0 0 4px;
list-style-type: none;
overflow: hidden;
}
#top_navigation li {
width: auto;
height: 17px;
margin: 0px;
padding: 1px 10px 0 10px;
float: left;
}
#top_navigation li a {
margin: 0px;
padding: 0px;
display: block;
font-size: 12px;
text-align: center;
text-decoration: none;
}
#top_navigation li a:hover {
color: #cf3533;
}
This sets the pipe on the right.
.border_red {
border-right: 1px solid #d7d7d7;
}
I tried combining the two and creating a _selected style, and the pipe shows up, but I can't get the color to change for the selected.
I have to be WCAG Priorities 1,2,3-compliant, so I can't just set it manually with .
The beginnings of a site here:
http://qaa.miltonfame.org/
html and css pass validation tests
Page displays fine in all Mac browsers I have tried (Safari, Firefox, Camino)
Page displays fine in Windows 7 FireFox
Nothing but background renders in Explorer 8 Windows 7 (and in other Explorer versions via screenshot services.) View Source shows that Explorer is getting the content - it's just not appearing on screen.
No idea how to approach addressing this - any suggestions would REALLY be appreciated.
Thanks a million.
Neither the <blink> tag nor the text-decoration:blink; style in css are supported in Internet Explorer.
Is there any technique available for making blinking text in IE?
basically i have this click function in jquery: (this is just a snippet, not full)
$('.block').click(function(){
var id= $(this).attr('id');
i want to chnage the background color of the block that has been clicked only, assigned with the id i.e.
$('.block').click(function(){
var id= $(this).attr('id');
$('.block').css('background-color','grey');
but where do i assign the id, so jquery knows, to only turn the clicked block into grey, not the others, cheers
I’m currently working on this theme : http://tf.ffffffive.com/fancy/
I just need a few pointers on how to get it working in IE6 and IE7 .
-The positioning is a bit off.
-If you guys have a helpful blog post of maybe give me a hand with some CSS coding I would really appreciate it.
Also the Javascript scrolling effect isn't working correctly due to the positioning. Any tips would be appreciated.
Thanks, Henry
Hi,
I have a css class like:
.foo {
background-color: red;
}
then I have a class specified for a list:
.list1 li {
background-color: tan;
}
is it possible to set one style class to just point to another? Something like:
.list1 li {
.foo;
}
not sure how to articulate that - I just want the .list li style to be whatever I define for the .foo class.
Thanks
How to give cross browser transparency to background only?
I want to give transparency to background of ul { background: } only don't want to make text inside ul li a {} transparent.
ul {
filter: alpha(opacity=50); /* internet explorer /
-khtml-opacity: 0.5; / khtml, old safari /
-moz-opacity: 0.5; / mozilla, netscape /
opacity: 0.5; / fx, safari, opera */
}
this code make everything transparent http://perishablepress.com/press/2009/01/27/cross-browser-transparency-via-css/
See Wikipedia http://en.wikipedia.org/wiki/Css
If you look at the heading, it says "Cascading Style Sheets", then it has an underline.
How do you do that?
.heading1 {
/* heading with underline */
}
I want to implement the 1140grid at my site. The layout is pretty simple:
100% header
25% sidebar 75% page
100% footer
see also http://jsfiddle.net/KB5Nq/
the problem is that i would like to change the stack order when the site is in mobile view:
100% header
100% page
100% sidebar
100% footer
however, by default it arranges the blocks in the same order as they appear in the source code: header, sidebar, page, footer.
is there an easy css-only fix for that?
Do you know any good article on "When to use display:block when :inline and when :inline-block" and why?
and when we will have to override display:?? through css for any HTML tag/element?
hi
I want my page's BODY not to be scrollable but a DIV inside the BODY should be scrollable.
I have this in my css file:
body {
overflow:hidden
}
.mainSection {
overflow:scroll
}
but it doesn't work and the DIV doesn't become scrollabel (it just shows two disabled scroll bars for the DIV)!
After a bunch of animating, adding classes and setting css styles. is there an easy way to reset an element to be back in its original server delivered state?
I am trying to make a bar chart using tables, which I have almost accomplished to my liking. The last step I want is text over my image which represents the bar. Here is the code I have thus far for building my little bar charts:
$height = 50;
//build length
$width = 450;
$multi = $brewAvg / 5;
$width = $width * $multi;
print " <tr > <td > $count. <a href=\"$breweryURL\"> $brewR</a> </td> <td > <img src=\"blueBar.png\" width=\"$width\" height=\"$height\"> </td> </tr> ";
And this produces something like this:
You can see in the code how I simply calculate the length of the bar based on a breweries rating. What I want to do next is have the rating number show on top of each breweries on the left hand side. How would I go about accomplishing this?
Update:
I tried a tutorial I read here:
http://www.kavoir.com/2009/02/css-text-over-image.html
and I changed my code to this:
print "<div class=\"overlay\"> ";
print " <tr valign=\"middle\" > <td > $count. <a href=\"$breweryURL\"> $brewR</a> </td> <td > <img src=\"blueBar.png\" width=\"$width\" height=\"$height\"> </td> </tr> ";
print"
<div class=\"text\">
<p> $brewAvg </p>
</div>
</div>
";
And my css I added was this:
<style>
.overlay {
position:relative;
float:left; /* optional */
}
.overlay .text {
position:absolute;
top:10px; /* in conjunction with left property, decides the text position */
left:10px;
width:300px; /* optional, though better have one */
}
</style>
And it did put any of the value son top of my images. All the text is in a list above all the bars like this:
Is it bad to be semantic purist all
the time, at work? is it not achievable all
the time ?
when i saw code of any other
person/interviewee. I know selection
of element for a purpose is most
important thing.
what i should judge person ability
from his code; from a good written,
managed, optimized css or how he
wrote class and id names?
Or both every time.
I know XHTML CSS but PHP knowledge is not much and i want to get familiar with one framework to make wordpress themes quickly for clients
Available Frameworks
* Atahualpa
* The Buffet Framework
* Carrington
* Hybrid
* Sandbox
* Thematic
* WP Framework
* Thesis
In firefox on link hand cursor is showing which is ok but in IE7 it's showing text cursor.
How to get same cursor(hand) on links in all browser?
Can i add something in CSS reset to get cursor in all browser on links.?
I have a background image on top of which there is some text.
It is very hard to read the text because of the background.
I would like to add a white background just around the text itself, such that the text could be easily read. How can I accomplish this using CSS/Javascript/jQuery ?
Is it possible to have a bunch of <select> dropdowns in html that only display a small (say 10 pixels wide) icon, but when you click it the drop down has a list with the icons beside a descriptive string. (Let's see if ASCII art works on SO):
[X]
| X - Disable |
| v/ - Enable |
| O - Ignore |
+-------------+
[O]
[v]
[X]
Can that be done in CSS? Or in jQuery?
Hello All,
I would like to brighten an image on my webpage on mouseover using css or javascript.
Ive seen some examples using opacity and filters in styles but they dont seem to work for me.
Thanks in advance
CP