Hi,
i have this page.
login: [email protected]
password: m
As you can see in IE7 the selects for the age, and radio buttons are not well organized. In FF and IE8 no problem.
Any idea?
Regards
Javi
Not sure why I am having such a hard time with this. Trying to add a 10px top margin to a that is inside of a div. But that does not add the gutter I want and just pushes the containing div down 10px.
Styles
#item{width:738px; height:168px; background-image:url(../images/item_bg.png);margin:0px auto;}
#description{width:314px; height:55px;}
#description p{font:12px arial; color:#666666;margin:10px 0 0 30px;}
HTML/PHP
echo "<div id='item'>
<div id='description'><p>{$row['description']}</p></div>
</div>";
If I use padding it works fine but I want to know why margin-top isn't working?
For testing
I don't want to upload css to FTP on each change till site complete , but site and content is online. (i'm not talking about saving page locally then apply css)
Can i just apply css locally to any online page.
it would be easier to edit and see changes locally till css work end.
and i want to see applied effect on FF and IE.
How to do that? Is it possible.
I list products on my homepage and on a company details page.
I use the exact same HTML, but for some reason the product appears different:
The productname is "Artikel 1".
Here the product is displayed correctly: http://www.zorgbeurs.nl/
Notice how the green price area is right below the product.
But here: http://www.zorgbeurs.nl/bedrijven/76/mymedical
the green price area is all the way at the bottom of the page.
Why?
I have a parent container, that has child containers within it. 2 child containers take up 60% width and 40% width respectively. They have no margin, and they have padding, but use box-sizing so this is included in the width. But for some reason they don't sit side by side. If I change one of them to 39% width then it looks fine.
What am I doing wrong?
Example can be seen at http://jsfiddle.net/Rcaet/
Hi All,
i need an equivalent or an alternative for this code in internet explorer using the filter method
background: -moz-linear-gradient(center bottom , rgb(132, 133, 132) 0%, rgb(35, 35, 35) 49%, rgb(104, 104, 104) 100%) repeat scroll 0% 0% transparent;
the most important thing in the code is the points ( 0% - 49% - 100% )
i believe that the filter method doesn't have points and doesn't accpect more than two parms for the colors ,
Is there a way to do it in filter or a javascript script for that ?
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 just need a sanity check here... DEMO
Basically, I can't figure out how to get the box under the link to get wider as more content is added. It seems fixed to the width of the parent div (or the width of, say, the longest element like the select or a really long word with no spaces), despite being absolutely positioned. I use this trick all the time with ul and li but it doesn't make sense to use that in my situation, and for some crazy reason it just won't work with a div inside a div.
I don't want to set a width (which, of course, works) because I don't always know what will be in this box. GRR
Thanks :\
i have this
<li><a href="#" >title</a> <span style='text-align:right;'>(0)</span></li>
its not working
and this
<li><a href="#" >title</a> <span style='float:right;'>(0)</span></li>
its go to the down line (not working)
its appear like that
|title (0) |
i want it
|title (0)|
Why W3C Validator showing parsing error on this. I selected CSS3 profile also from dropdown.
a[href $=.xls]{background: transparent url(ms-excel-icon.gif) left top no-repeat;
padding-left: 22px;display: block;height: 16px;}
background-color:transparent doesnt work on SELECTs in browsers other than FireFox.
So how I specify background-color:transparent for FF alone and background-color:#something for others ?
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>
what I want:
when i hover upon a link it should fill the background with a fixed width (say 225px) background color.
the length of the text of the link should not be considered.
thank you so much.
Hi there, I would like to know some opinions from experienced developers on what they think the definitive way to size fonts (in a base sense). I know that working with ems is considered best but im referring to the best way to set the base font size.
There is the technique of setting font to 10px using 62.5 method but i think ie has an issue with rounding which throws this out slightly (perhaps not)
YUI framework uses
body {
font:13px/1.231 arial,helvetica,clean,sans-serif;
/* for IE6/7 */
*font-size:small;
/* for IE Quirks Mode */
*font:x-small;
}
which really confuses me!
Tripoli uses
html
{
font-size:125%;
}
body
{
font-size:50%;
}
a list apart suggest something along the lines of :
body {
font-size: 16px;
*font-size: 100%;
}
So which is the best either out of these methods or any alternatives. The best being the easiest to work with and the most reliable cross browser.
I have 2 div boxes. It's all working fine but when the browser is shrunk to less than 800 pixels or so, the second div moves underneath the first div. How can I force it to always stay to the right of it?
#testbox1 {
background-color: #0000ff;
min-width: 300px;
width: 30%;
height: 200px;
position: relative;
float: left;
}
#testbox2 {
background-color: #00ffff;
width: 500px;
height: 200px;
position: relative;
float: left;
}
Hi
I am trying when user clicks on one of the images seen here
http://techavid.com/design/test.html
That the image in background is only thing focused. All icons are greyed out until user clicks and when they do the colored version of the icon is only showing. Currently the color image of each icon appears behind the greyed out version when mouseover not active.
Can this be done?
thank you,
paul
In the bottom cap of this page (bottom with corners) I seem to be having a weird IE6 issue. I've tried Google with no luck, as really, how do you ask this question.
In IE6, the corner images that are floated left and right seem to cause the whitespace to drop.
http://www.duncanhadleytriathlon.ca/
Any suggestions for why this may be?
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?
i have the following divs
<div id="outer"><img src="myimgpath"><div id="name">Username</div></div>
now i want to fix the inner div to the outer div's top right corner
hello
so i have a content box and this menu box.. now the menu box moves when you have the browser in normal fullsize, and if you change size of the browser...
here is picture:
What do i do wrong?
Here is my code:
#menu {
position: absolute;
background: #FFF;
text-decoration: none;
border: 1px solid #000;
color: #000;
padding-left: 14px;
padding-right: 14px;
margin: 12px;
}
#content {
margin: auto;
width: 800px;
border: 1px solid #000;
padding: 10px;
}
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?
I'm working on a site for a client at the moment, and have it working correctly in all browsers except IE7 (IE6 and IE8 tested fine). It's a WordPress site and the theme is a child theme of the Thematic framework.
This is an example of a page that is not displayed correctly in IE7:
http://roynesbitt.credit-medics.co.uk/our-donors
The main content is forcing vertical and horizontal scrollbars on the main wrapper and is also not pushing the footer down, so that is appearing midway through it.
The irony is that this works correctly in IE6, it's just IE7 that is displaying this issue.
Any suggestions on how to fix are gratefully received.
I may bounce my head off the wall shortly, I can't believe that something as stupid as this has utterly defeated me ... therefore I turn to you, Stack Overflow ... for guidance and enlightenment.
Problem: Sit div at foot of page, 100% width, outside of any sort of wrapper.
Proposed Solution: http://ryanfait.com/sticky-footer/
Implementation with content: http://www.weleasewodewick.com/redesign/index_content.html
Implementation with no content: http://www.weleasewodewick.com/redesign/index.html
with content - Good, works nicely
no content = bad, footer sits exactly height of footer below the viewport.
I really would appreciate your input into this, it's completely vexed me for the past hour. I wholly expect some form of ridicule :)
Thanks!
Foxed
Hey,
http://t-webdesign.co.uk/new/
How would i go about getting the grey div (#content_right) to expand to the same size as the left hand side div without using a fixed height attribute?
Thank you
hi,
How can I hide the small dots nearby each picture in IE7 ?
http://www.sanstitre.ch/drupal/portfolio?tid[0]=38
I've tried wiht text-decoration:none and list-style-type:none but it didn't work
thanks