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.
/* 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
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 CSSto 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 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;
}
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')
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!
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'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.
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 ??
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;
}
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?
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.
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
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?
It looks like I'm missing something basic.
I want a certain DIV to have the height of the window. The effect should be that there's never any need to scroll down.
Do I have to use JavaScript? I was told that it's possible with css, but I can't find the relevant property - or I'm doing something wrong.
It's been a long day of designing and I ran into a problem today. The website www.dcninc.com/newtest/security_testing.php is a new design I'm working on at work right now.
If you view it in Firefox you will notice there is no padding on the 2 right boxes (I did that on purpose to trouble shoot my problem) However if you view that same page in IE, it adds padding to the right side. Here is my CSS and HTML below.
http://pastebin.com/hRxZp9ub
http://pastebin.com/YwSYn7ti