When there is no border, why IE returns medium while FF returns 0px on the following query ?
.css("border-left-width")
I checked this in FF 3.6.3 and IE 6/7.
Example here
Currently, for things like background images, our css files have no domain specified. This works both in our development and production environments.
background-image: url(/images/bg.png);
For performance reasons (cookie-less domain), we'd like to switch this:
background-image: url(http://staticimagedomain.com/images/bg.png);
Ideally, we don't hard code those, so our development environments can still pull locally.
Any thoughts on how to best achieve this?
How can I find all elements on a page which have a color of "blue"?
alert($("* [color=blue]").attr("id"));
The above example does not work. Please recognize that color is a CSS attribute. I'm certain it is possible I just cannot figure out the correct method to do so.
In how many ways we can give color info in X/HTML, css?
I know some
Hex
color name
rgba
is there any other method?
and which method is preferred to use and which not? Please give explanation.
And what is the means of web-safe colors?
/* Style 1 */
.myclass {
background:#ff0;
border:1px solid #ff0
}
#myid {
width:80px;
height:80px;
}
/* Style 2 */
.myclass { background:#ff0; border:1px solid #ff0 }
#myid { width:80px; height:80px; }
I'm sure there must be more styles for writing CSS, I'd like to know what are they. Is there an article already written that lists all styles.
Thanks
hello
i have a application on php , i want to create some report in my application, but i wnat users print some of them on A4 and some of them in A5 and some of them on A3
how should i config css?
thank
Is there a "best" way to edit CSS?
I'm looking for a designer tool. It has to "visual"... less code.
Visual studio does a good job but it seems to be lacking when it comes to the actual design stage.
I'm building a browser extension that will insert a chunk of HTML into some pages. I'd like the page's CSS to not apply to this section. What is the best way to do this? Is there a good reset I can put on the root element of my HTML and set it to !important so it gets applied after others?
Hi there,
Having some problems, cant get the page to scroll or get scrollbar to appear. But it will scroll when middle mouse button is clicked.
Any ideas?
http://t-webdesign.co.uk/projects/geusa/job_posting.html
My stylesheet: http://t-webdesign.co.uk/projects/geusa/style.css
Thank you
I want to have divs of the same height.
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
does not work for be because my divs have a border, and the method described assumes, that they have not.
A jQuery solution I could not make work, because my divs resize late because of ajax and menu clicks and I can not find an event for this.
If i have a background image defined as:
#header
{
width: 100%;
background: url(/Content/images/header.jpg) -0 0 no-repeat;
}
and i want to overwrite that after the page loads. Shouldn't this code work?
$("#header").css('background-image', '/Content/images/aff/header_<%=affiliateID%>.jpg')
I have an issue with a site I am working on where the right wrapper keeps dropping down below the site. Obviously I want it to stay on the right hand side.
I've coded up a test case which shows my issue (I think) and I'm wondering if there is a better way to do things.
The website url is http://www.musicworkshop.co.nz/
Below is the test case which (I think) is the cause of my issue, however it may not be. The pink box drops down if it does not fit within the page width.
Is there a better way to do this?
John
<html>
<head>
<title> Test page </title>
<link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>
<div id="superbox">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
<div id="box5">
</div>
<div id="box6">
</div>
</div>
</body>
</html>
#outsidebox{
width: 100%;
}
#superbox{
width: 1000px;
height: 100px;
margin: 0 auto;
}
#box1{
height: 100px;
width: 200px;
background: red;
float: left;
}
#box2{
height: 100px;
width: 200px;
background: yellow;
float: left;
}
#box3{
height: 100px;
width: 200px;
background: blue;
float: left;
}
#box4{
height: 100px;
width: 200px;
background: green;
float: left;
}
#box5{
height: 100px;
width: 200px;
background: grey;
float: left;
}
#box6{
height: 100px;
width: 200px;
background: pink;
float: left;
}
Hi,
I have 5 pictures, and I will overlap these 5.
I read a lot of HowTo CSS / Div and overlapping, but I didn't get it at all.
I have a normal 500 width div container as "content" filler.
Into this div, I will have 5 pictures that are overlapping each other.
I try all "position:", but nothing fills what I want.
Hi folks,
Quick question. I want to change the color of an int based on the value being positive or negative, using css if possible.
Any ideas??
Thanks again!
I've noticed that Firefox throws me a warning on the following jQuery code:
$("li.example div.code:gt(4)").hide();
CSS Error: Unknown pseudo-class or pseudo-element 'gt'.
According to jQuery, it all should be correct. And it works, but I wonder how to fix this error for cleanness sake.
Hi Everyone:
I am wondering if there is some way to align text on the right of a photo, and keep the text in that same "box" even after the image ends using HTML and CSS. A quick "diagram" of what I am attempting to accomplish is below:
------- --------
------- --------
-Image- - Text -
------- --------
------- --------
--------
--------
Thanks for any help!
I have a bunch of elements with a classname
<p class="red"></p>
<div class="red"></div>
I cant seem to select the first element with the class="red" using the following CSS rule:
.red:first-child{
border:5px solid red;
}
What is wrong in this selector and how to correct it ??
In the son of suckerfish drop down menu:
http://www.htmldog.com/articles/suckerfish/dropdowns/example/
You see this rule
w\idth: 13.9em;
This can't be a typo as it appears various times in the css. What is it for?
This is the CSS I'm currently using to produce a horizontal menu. Does anyone have any suggestions on how to go about extending it to allow for submenus?
/* CSS Document */
.rhm1{
width:780px;
height:64px;
margin:0 auto;
background:url(images/rhm1_bg.gif) repeat-x;
}
.rhm1-left{
background:url(images/rhm1_l.gif) no-repeat;
width:15px;
height:64px;
float:left;
}
.rhm1-right{
background:url(images/rhm1_r.gif) no-repeat;
width:15px;
height:64px;
float:right;
}
.rhm1-bg{
background:url(images/rhm1_bg.gif) repeat-x;
height:64px;
}
.rhm1-bg ul{
list-style:none;
margin:0 auto;
}
.rhm1-bg li{
float:left;
list-style:none;
}
.rhm1-bg li a{
float:left;
display:block;
color:#ffe8cc;
text-decoration:none;
font:12px 'Lucida Sans', sans-serif;
font-weight:bold;
padding:0 0 0 18px;
height:64px;
line-height:40px;
text-align:center;
cursor:pointer;
}
.rhm1-bg li a span{
float:left;
display:block;
padding:0 32px 0 18px;
}
.rhm1-bg li.current a{
color:#fff;
background:url(images/rhm1_hover_l.gif) no-repeat left 5px;
}
.rhm1-bg li.current a span{
color:#fff;
background:url(images/rhm1_hover_r.gif) no-repeat right 5px;
}
.rhm1-bg li a:hover{
color:#fff;
background:url(images/rhm1_hover_l.gif) no-repeat left 5px;
}
.rhm1-bg li a:hover span{
color:#fff;
background:url(images/rhm1_hover_r.gif) no-repeat right 5px;
}
i want to enable css 3 in ie7. it's work perfect in Firefox but in Ie not work.
i download files from google code(IE8.js - DOMAssistantCompressed-2.7.4.js) to run css3 in ie but not work.
any body have idea in this problem?
Thank You
Hi,
I'm trying to construct a two row table similar to following:
---
-
where the bottom is filling the space of the upper row. Is this possible using CSS? In HTML I can do things like colspan.
This might seem like a bit of a design/css question but i really need some help.
This is the page http://library.permilia.com/Gavin/version2.0_beta/lead.html
It works on every browsers imaginable except chrome.
By it works i mean it applies a class .error that sets the borders to 1px solid #f00 which is a red border. In chrome for some reason you cannot change it no matter what!
Anybody got any ideas?
using xpath or css : How to get something which is selected on page using following html code.
in following code, Element1 is selected on page and I wanted to find name of element that is selected on page.
Element1