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
Is there a way to make the scrollbar auto-hide when a user is not scrolling a webpage on an Android device, but make it visible when it is scrolling?
Please note that Firefox browsers does have this behaviour enabled by default, it's just Chrome and stock(Samsung, HTC) browsers that don't.
This is what I currently have:
-webkit-box-flex: 1;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
And I can always see the scrollbar on the list (except in ffox)
can we give different color to scroll bar face color and arrow background ?
right now if I apply " scrollbar-face-color " it is applying to both arrow background as well as scroll bar thump
can we give two different colors ?
So far I know, the conditional comments are only supported for different Versions of IE.
Likeways, can we provide conditional comments for other browsers too.
If Yes, How? If no, what could be the best alternative?
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)|
Hi,
Im trying to override the grey text of a disabled input and textarea. At the moment Im only really concerned with it working in Webkit and Mozilla. At the moment Im currently using every trick in the book that I know of:
input[@disabled=true], input[@disabled],
button[disabled]:active, button[disabled],
input[type="reset"][disabled]:active,
input[type="reset"][disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
select[disabled] > input[type="button"],
select[disabled] > input[type="button"]:active,
input[type="submit"][disabled]:active,
input[type="submit"][disabled],input[disabled="disabled"], input[disabled] {
color: black !important;
}
Sure it does change the colour if I change it to something else, however when I choose black it is still greyed out a bit.
Any ideas? I am using Ext JS if I can use that to manipulate it. Thanks.
I am just trying to center a div on the page. It works in chrome but in i.e. the div is still on the left:
<html>
<head></head>
<body>
<div id="container" style="margin:0 auto; width:200px;">
test
</div>
</body>
</html>
Everything I've read has said that to center a block element, simply add margin:0 auto and specify a width, so I don't know why this isn't working.
I am testing on IE 7.0.5730
I have a div that is 200px by 200px.
If I want to place a 30x30px no-repeat background image at the top left corner position of 120px from the left and 50px from the top ... while also allowing the text inside that div to be displayed on top of the background image ... how would I do that?
I tried the following, but it doesnt appear to work.
background:url(http://example.com/background-image.png) no-repeat 120px 50px;
Any ideas how to perform what I want to accomplish?
I got into a math problem
my content box is 700pc wide
my hentry (inside content) is 100% wide with padding of 10px
wich make the hentry to be wider that the content resulting and overflow...
Any solution
Here is the page : http://www.equipe94.com
I have firebug and removing the width 100% work, but it send by wordpress so how to overwrite a width:100% with nothing ?
Chrome/WebKit and Firefox have different rendering engines which render fonts differently, in particular with differing dimensions. This isn't too surprising, but what's surprising is the magnitude of some of the differences.
I can always tweak individual elements on a page to be more similar, but that's tedious, to say the least. I've been searching for more systematic solutions, but many resources (e.g. SO answers) simply say "use a reset package." While I'm sure this fixes a bunch of other things like padding and spacing, it doesn't seem to make any difference for font dimensions.
For instance, if I take the reset package from http://html5reset.org/, I can show pretty big differences (note the layout dimensions shown in the inspectors). [The images below are actually higher res than shown/resized in this answer.]
<h1 style="font-size:64px; background-color: #eee;">Article Header</h1>
With Helvetica, Chrome is has the shorter height instead.
<h1 style="font-size:64px; background-color: #eee; font-family: Helvetica">Article Header</h1>
Using a different font, Chrome again renders a much taller font, but additionally the letter spacing goes haywire (probably due to the boldification of the font):
<style>
@font-face {
font-family: "MyriadProRegular";
src: url("fonts/myriadpro-regular-webfont.eot");
src: local("?"), url("fonts/myriadpro-regular-webfont.woff") format("woff"), url("fonts/myriadpro-regular-webfont.ttf") format("truetype"), url("fonts/myriadpro-regular-webfont.svg#webfonteknRmz0m") format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: "MyriadProLight";
src: url("fonts/myriadpro-light-webfont.eot");
src: local("?"), url("fonts/myriadpro-light-webfont.woff") format("woff"), url("fonts/myriadpro-light-webfont.ttf") format("truetype"), url("fonts/myriadpro-light-webfont.svg#webfont2SBUkD9p") format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: "MyriadProSemibold";
src: url("fonts/myriadpro-semibold-webfont.eot");
src: local("?"), url("fonts/myriadpro-semibold-webfont.woff") format("woff"), url("fonts/myriadpro-semibold-webfont.ttf") format("truetype"), url("fonts/myriadpro-semibold-webfont.svg#webfontM3ufnW4Z") format("svg");
font-weight: normal;
font-style: normal; }
</style>
...
<h1 style="font-size:64px; background-color: #eee; font-family: Helvetica">Article Header</h1>
I've tried a few resets/normalize packages to no avail. I just wanted to confirm here that this is indeed a fact of life (even omitting the more glaring offenders like IE and mobile) and I'm not missing some super-awesome solution to this mess.
im trying to create a horizontal scrolling box to create a "timeline" effect... but i cant seem to get it to scroll horizontally, versus the vertical scroll bar that shows up...thoughts?
#container{
width:500px;
height:250px;
border:1px solid #cc61b8;
overflow:auto;
}
.container-bits{
width:250px;
height:498px;
float:left;
}
<div id="container">
<div class="container-bits">Content Here</div>
<div class="container-bits">Content Here</div>
<div class="container-bits">Content Here</div>
<div class="container-bits">Content Here</div>
<div class="container-bits">Content Here</div>
<div class="container-bits">Content Here</div>
</div>
Hi,
I am trying to break away from using tables in my formatting, and am trying out using userlist html tags <ul>
Say I have a panel with 10 controls, and I want a 3 columns display, therefore 3 controls in each row, and a total of 4 rows for 10 controls.
Should I use 4 different <ul> or should I just stack them inside one <ul>
Please tell me the advantages and disadvantages
Thanks
hi. i used this corner style:
.corners4{
background:url(../img/panelHeaderColor.jpg) repeat-x;
-moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px;
-moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
}
but, this doesn't work in IE, is there any IE equivalent for this?
thanks
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?
I've had this problem in a lot of different webs. You have a font which has different anti-aliasing options, the designer uses the same font with different anti-aliasing options on different parts of the text on the web. So there is a difference between some elements.
In this case I have sharp, crisp, strong and smooth. I've used a font generator to get the code to access it via @font-face. Even so, I also have the original .otf if important to know. Is there a method to access this?
I upload a picture of what I mean and my actual code:
![@font-face {
font-family: 'light';
src: url('../_fnt/light/gothamrnd-light.eot');
src: url('../_fnt/light/gothamrnd-light.eot?#iefix') format('embedded-opentype'),
url('../_fnt/light/gothamrnd-light.woff') format('woff'),
url('../_fnt/light/gothamrnd-light.ttf') format('truetype'),
url('../_fnt/light/gothamrnd-light.svg#../_fnt/light/gothamrnd-light') format('svg');
font-weight: normal;
font-style: normal;
}]![enter image description here][1]
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.
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
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.
Looking for example code that uses semantic HTML that I can use to test stylesheets with. The version/doctype is unimportant though HTML5 would be great. When I say "comprehensive" - I am looking for use of definition lists, forms, tables, plus all the usual.
Thanks
I'm working on a website for a small law office. In the side-menu, I'm trying to highlight the "current page". I have tried changing the background of the LI, but this doesn't quite do the trick; the list item doesn't spread to the full width of the menu, so it looks bad.
Here's a jfiddle. I would like the yellow section to highlight like the pink section is highlighted: filling up the full vertical and horizontal space, not just highlighting the text.
Any suggestions on how to do this? I've included the style tag in the html just for example, obviously, and my real solution will be a little different when it's done. But I can't move forward until I figure out how to somehow highlight the entire line.
please give me the code.
input file:
#box8 {
position:absolute;
}
#box8 .buttons {
text-align:left;
}
output file should be like this:
headers:#box8
#box8
Items:position:absolute;
text-align:left;
Hi everybody,
I'm trying to make four columns that are centered on the frontpage. I would like it to look like this example:
http://www.clutterpad.com/
My code looks like this:
#bottom-container {width:100%;height:250px;position:relative;}
#bottom-mid {background-color:white;}
#bottom-left, #bottom-mid, #bottom-right {height:250px;}
#bottom-left, #bottom-right {width:50%;float:left;}
#bottom-left {background-color:white;position:absolute;top:0px;left:0px;}
#bottom-right {background-color:white;position:absolute;top:0px;left:50%;}
#bottom-mid {position:relative;margin:0px auto; width:1000px;z-index:2;}
#column-container {width:100%; margin:20px auto;}
.column {width:200px;float:left;font-size:10pt;font-family:Arial;margin:20px 10px;}
But it's not working out. How should I code it to look like the example I mentioned before?
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
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 ?