It seems that padding style applying to <td /> doesn't work on IE7 in my computer, but is okay on FireFox3.5.
Is this a correct behavior? Or I get wrong.
Thanks.
Hello,
I'm using (trying to use) jQuery to add a class to the first paragraph of every div with class of ".djBio" My problem is that it's only adding the class to the first div.djBio, not all divs with that class. Here's the code. I am also using the fancy letter jquery plugin to add the drop cap to the first paragraph (which also is only applying to the first div.djBio, not all)
jQuery(function( $ ){
$('.servicesContent p:first, .about-usContent p:first, .djBio p:first').fancyletter().addClass('firstP');
});
Thanks so much for your help!
if IDE by default adding ; at end. should i remove?
selector {property:value;property:value;property:value;property:value;}
I read on an article semicolon not required at end.
Suppose I have markup as setup
http://jsfiddle.net/ADxne/
Currently drop downs look like
To solve the 1st problem, I could add a margin-top to child ul's to compensate for padding in list items http://jsfiddle.net/ADxne/1/
.horMenu > li > ul {
margin-top: 10px;
}
but for the 2nd problem without a fixed width list or list items, is there a way to position the sub menu to the right of the list item? Or is the only way to set a fixed width? http://jsfiddle.net/ADxne/2/
I have 5 list items that act like tabs for a page stored in a Masterpage in a asp.net application. When the user selects a list item, I would like to redirect the the page, and change the class for that list item (tab) to show the active tab the user is on. What is the best way to dynamically change the class of the list item based on the user interaction with them, and maintain the state?
Hi,
I have just finished redesigning this site (www.imustsolutions.co.za) and I have a problem with the header and the footer when the user zooms in (Cntrl + in FF).
Here is the problem:
The background color of the footer/header does not paint to fill the rest of the screen (horizontally) when the user zooms in.
What am I doing wrong?
Here is the site again: www.imustsolutions.co.za
Thanks in advance.
Regards,
M
I am trying to have some LIs within a UL align left, right, and center within a page. For the life of me, I can't figure out how to keep something "centered" on the same line as a left and right aligned LI.
<style>
ul {
margin:1em 0;
padding:0
}
ul li{
display:inline-block;
white-space:nowrap;
margin:5px
}
ul li.left{
float: left;
text-align:left;
}
ul li.center{
float:left;
text-align: center;
}
ul li.right{
float: right;
text-align:right;
}
</style>
<ul>
<li class="left">left</li>
<li class="center">center</li>
<li class="right">right</li>
</ul>
<ul>
<li class="left">left</li>
<li class="right">right</li>
</ul>
<ul>
<li class="left">left</li>
</ul>
Can anyone help? BTW, I've trying to avoid DIVs.
Thanks!
I've been developing a web app for a few weeks now and ended up with about a 1000 lines. I am sure not all the selectors are being used and am trying to clean it up. At the same time, I don't want to do it manually for obvious reasons.
Is there a safe and an efficient way to remove unused selectors? For this, am I supposed to navigate the entire website to let it know which selectors are not being used? (I use javascript to add some selectors so these might not show up until a particular usecase is seen)
I'm building a Drupal theme up and want to know if there is a Drupalish way to add a css file only if the user has js turned off.
This would ideally go in the theme.info file to keep it neat!
Something like this would be ideal:
conditional-stylesheets[if no javascript][all][] = nojs.css
If this isn't possible then I'm going to keep all the css that needs JS out of the css files, and add it dynamically using JS but this seems a bit messy...
Any ideas?
I am trying to set the font-weight for an element based on the font that gets chosen. For example, I may be trying to do something like this:
h1 {
font-family: Arial Narrow, Impact, sans-serif;
font-weight: ?;
}
Let's say I want the font-weight to be "bold" if the user has Arial Narrow installed on their system, but "normal" if the browser has to use Impact, and maybe "bold" if the user's system has neither of those fonts. Is this possible? If so, how would I go about doing this?
Hi there. I've got quite big trouble, because i need to anathematise from styling some input types. I had something like:
.registration_form_right input:not([type="radio")
{
//Nah.
}
But i don't want to style checkboxes too.
I've tried:
.registration_form_right input:not([type="radio" && type="checkbox"])
.registration_form_right input:not([type="radio" && "checkbox"])
.registration_form_right input:not([type="radio") && .registration_form_right input:not(type="checkbox"])
How to use &&? And I'll need to use || soon, and I think that usage will be same.
Thanks.
I'm wanting to be able to create a banner of floating images based on what are uploaded via users. The tool needs to have images of 50x50 and 100x100. At the moment, I just want to randomly display the images and tried to apply float:left. However, as you can see below - it leaves gaps.
Is there an easy way to do this without programatically positioning the images?
If you want the code so far, it's here:
.wall {
width: 300px;
background-color: red;
display: table;
}
.wall img {
float: left;
}
and
<div class="wall">
<img src="man1.png" alt=""/>
<!-- ETC... !-->
</div>
Hi, hows it going,
I have searched through the forums and good old google and have found many answers but non seem to work on my page.
Anyway here is the question,
I have 2 divs that are positioned side by side, and I wish to get rid of the whitespace
www.blisshair.com.au/test.html :(http://www.blisshair.com.au/test.html)
I want to the black from the "link 1" to join to the main content in the center,
Any help would be greatly appreciated,
Thank you.
EDIT: Tried opening in Internet explorer 8 and it seems top exactly how I want it, besides the 2 bottom divs not lining up,
Is it possible to do this with an UL and SPAN tags ? I am aiming for a tabbed look, for example, when you click on link 2, the background around link 2 goes black and the black color "flows" into the main content page, sorry if this doesnt make sense, early AM here :D
Thanks again
I want to change the background color of in-viewport elements (using overflow: scroll)
So here was my first attempt:
http://jsfiddle.net/2YeZG/
As you see, there is a brief flicker of the previous color before the new color is painted. Others have had similar problems.
Following the HTML5 rocks instructions, I tried to introduce requestAnimationFrame to fix this problem to no avail:
http://jsfiddle.net/RETbF/
What am I doing wrong here?
In Word you can place an image on a page and have the text flow nicely around it. I was wondering how far one can get towards this using CSS, noting that is has to work in IE6.
I already have something sort of close using float, but the floated child-element still 'blocks' text above it. So it partially wraps. Is it possible to put a child div at some arbitrary position in the parent, and have text flow around it freely?
The actual use-case here is to put illustrations inside the main content , where each illustration is implemented inside a child .
I repeat, it has to work on IE6. And I don't want to get too involved in browser-specific hacks... floating the child at least works on IE6 with no tweaking.
Currently I have like this:
<div>
<div class="illustration">
<img src="image1.png" />
<p>Illustration caption</p>
</div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. Atvero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
div.illustration
{
float:right;
border-top: 1px solid #505050;
border-left: 1px solid #505050;
border-right: 1px solid #505050;
border-bottom: 1px solid #505050;
margin-right:30px;
margin-top:100px;
text-align:center;
padding:2px;
background: #96C3FF;
}
div.illustration p
{
margin:0;
font-size:small;
font-style:italic;
padding:0;
}
Hi,
i have this page:
login: [email protected]
password: m
I want to have the string "Editar mi perfil" aligned on the right, so i have added:
text-align: right
but it doesn't work,
I have tried also:
float:right
It works but goes a bit upper than I want.
Any idea?
Regards
Javi
Hi people,
I am working on a website curently. Here is the link for it.
Good News : The site is fine on FireFox, Chrome and IE 8.
Bad News: It is not fine on IE 7. Alignment problems, hyperlink colour problems, etc.
What should i do to make things normal on IE7 too.
Any amount of help would be appreciated.
Thanks
I'm having to issues lining up items properly in my html code. I am not sure why they are lining up the way I want them to.
First the header My Color Library is a full line height above the horizontal ruler. I want it right above the ruler.
Second my X box in the td with the background is justified right fine but I actually want it in the top right hand corner not centered vertically.
Here's some example html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FunctionalColor&Design</title>
</head>
<html>
<body>
<table style="width=900px; margin-left: auto; margin-right: auto;">
<tr>
<td>
<P>
<div style="font-size: 1em; line-height: 1em; font-weight: bolder; padding: 0px;">My Color Library</div>
<div align="right" class="removeall">
<a href="colors">
<img src="http://2100computerlane.net/workingproject/images/x-button.png" />
<bold>Remove All</bold>
</a>
</div>
<HR/></p>
<div class="mycolor">
<table><!--width="900px" -->
<tr>
<td style="border: none; background-color: #f8d3cf; width:125px; height:80px; border-spacing: 10px; padding:0;">
<div style="padding:0; vertical-align:top;" align="right" class="remove">
<a href="f8d3cf" style="padding: 0px;">
<img src="http://2100computerlane.net/workingproject/images/x-button.png" style="padding: 0px;"/>
</a>
</div>
</td>
<td style="border: none; width:10px;"></td>
<td style="border: none; background-color: #f8d3cf; width:125px; height:80px; border-spacing: 10px; padding:0;"></td>
<td style="border: none; width:10px;"></td>
<td style="border: none; background-color: #f8d3cf; width:125px; height:80px; border-spacing: 10px; padding:0;"></td>
<td style="border: none; width:10px;"></td>
<td style="border: none; background-color: #f8d3cf; width:125px; height:80px; border-spacing: 10px; padding:0;"></td>
<td style="border: none; width:10px;"></td>
<td style="border: none; background-color: #f8d3cf; width:125px; height:80px; border-spacing: 10px; padding:0;"></td>
<td style="border: none; width:10px;"></td>
<td style="border: none; background-color: #f8d3cf; width:125px; height:80px; border-spacing: 10px; padding:0;"></td>
<tr>
<td style="border: none; font:.6em Arial, Helvetica, sans-serif; width:125px; height:20px;">Desert Warmth<br/>70YR 56/190 A0542</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
Is it possible to have a navigation system optimized using javascript, but for the sake of search engines, have the hyperlinks still be crawlable?
Or maybe a condition statement that calls HTML code only if javascript is not enabled in the browser or when crawled by a search engine?
Hello,
I want to center a div, but the general way is
#selector{position:relative;margin:0px auto;}
What exactly is wrong below
#crp{top:40%; position:absolute; margin:auto;}
The Div below is not nested but a standalone. The #crp is going to the extreme right.
<div id="crp">...something goes here....</div>
Thanks
Jean
Hi to everybody.
I need to do a border for my website that looks like this one. The only way I know is to split the website with 9 div, such :
1 2 3
4 5 6
7 8 9
and create 8 images, respectively:
top-left (on 1)
top central (on 2)
top-right (on 3)
left (on 4)
right (on 6)
bottom-left (on 7)
bottom-center (on 8)
bottom-right (on 9)
The div 5 is attempt as main. But the whole strategy looks not so well-formed. Any tips? Thanks
in firefox I can usee firebug, in chrome I can use the css console. Both to make live changes to css for troubleshooting purposes. However I do not know of a way to do this in IE, which is where I have the most css issues.
So, whats the best way to troubleshoot css issues in IE?
Thanks!
I have a black background div of a size which contains an image.
<div id="Banner">
<img onclick="expand();" src="hola.jpg">
</div>
#Banner {
position:relative;
height:50px;
width:50px;
margin:0 auto;
background-color:#000000;
-webkit-transition: all 0.5s ease-in-out 0.5s;
-moz-transition: all 0.5s ease-in-out 0.5s;
-o-transition: all 0.5s ease-in-out 0.5s;
transition: all 0.5s ease-in-out 0.5s;
}
<script type="text/javascript">
function expand(){
document.getElementById('Banner').style['height'] = '250';
document.getElementById('Banner').style['width'] = '250';
}
</script>
So when the user clicks on the image, the div transitions to 250, 250.
My problem is that, i want it to to transition to full screen. The following javascript
function does expand to fullscreen but the transition effect doesn't come. I need to do it from a javascript code without jquery.
function expand(){
document.getElementById('Banner').style['position'] = 'absolute';
document.getElementById('Banner').style['height'] = '100%';
document.getElementById('Banner').style['width'] = '100%';
document.getElementById('Banner').style['top'] = '0';
document.getElementById('Banner').style['left'] = '0';
}
Please advice.
Update : Solution
Roger below has provided with an alternative solution. This takes care if the document
has already been scrolled and is another place. Will expand the div to full browser screen.
sz=getSize(); //function returns screen width and height in pixels
currentWidth=200;
currentHeight=200;
scalex=sz.W/currentWidth;
scaley=sz.H/currentHeight;
transx=0-((expandingDiv.offsetLeft+(currentWidth/2))-(sz.W/2))+document.body.scrollLeft;
transy=0-((expandingDiv.offsetTop+(cuttentHeight/2))-(sz.H/2))+document.body.scrollTop;
transx = transx.toString();
transy = transy.toString();
document.getElementById("Banner").style['-webkit-transform'] = 'translate('+transx+'px,'+transy+'px) scale('+scalex+','+scaley+')';