I am creating a <div> with a class someClass
.someClass {
overflow:scroll
/*other props*/
}
The problem is that the scrollbars are always visible even when the data is not overflowing. I want the scrollbars to be visible only when data actually overflows.
why does the border get like this, i want it around the videoclip, if i use float it do the border correctly, if i use position, then it gets like that, and i dont want to use float.
#clip{
position: relative; right: 1px; border: 2px solid #FF3399;
}
I am trying to centre the link with the image, but can't seem to move the content vertically in any way.
<h4>More Information</h4>
<a href="#" class="pdf">File Name</a>
The icon is 22 x 22px
.pdf{ }
.pdf:before{padding:0 5px 0 0; content: url(../img/icon/pdf_small.png);}
.pdf:after{content: " ( .pdf )"; font-size: 10px;}
.pdf:hover:after{color: #000;}
is it possible with just css2 to have the following:
3 divs:
<div id="wrap_centre">
<div class="top"></div>
<div class="mid"></div>
<div class="bot"></div>
</div>
all the content to be in the flexible div.mid section
overlap the top and bottom parts
not fussed about ie6
here's the photoshop with centre slice:
as you can see the top and bottom parts are quite large and i need to overlap them from the middle slice...
When I show a hidden div that is stored inside an <li> tag the icons are pushing down to the bottom of the <li>. How can I prevent this?
Here's the HTML:
<ul>
<li>Utah
<ul>
<li>Park City
<ul>
<li>Park Cat 1
<div><img class="portf_edit" /></div>
<div><img class="portf_archive" /></div>
<div><img class="portf_delete" /></div>
</li>
<li>Skiing
<div><img class="portf_edit" /></div>
<div><img class="portf_archive" /></div>
<div><img class="portf_delete" /></div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Here's the li css:
li {
list-style-type:none;
vertical-align: top;
list-style-image: none;
left:0px;
text-align:left;
clear: both;
}
.portf_edit{
float:right;
position: relative;
right:50px;
display:block;
}
.portf_archive{
float:right;
position: relative;
right:-5px;
display:block;
}
.portf_delete{
float:right;
position: relative;
right: -60px;
display:block;
}
Here's a screen shot prior to expanding which shows the icons how I want them to line up:
Here's the screen shot prior to expanding which shows where the icons are being pushed to:
hi, i really need to place an image somewhere in the page (100 pixels from the left side for example) but i want to control where the center of the image will be,
when i use left:100px; , the image is positioned 100px from its left edge and not from its center...
is there a way i can choose where the center of the image will be and not the left/right edge?
So here's another IE cross-compatibility issue. My website, www.zerozaku.com, is compatible with Chrome and Firefox, but IE has an issue with my Mini-Chat overflowing out of the box. Could anyone help?
P.S. I've only tested it on IE8, Firefox, Chrome
hey guys,
i have a probably rather simpel problem:
my website has two layers:
1) a drag&drop navigation on top which should be positioned absolute, so scrolling doesn't affect the bars.
2) a content area in the back behind the navigation which should be scrollable.
you can see what i mean right here: http://jsfiddle.net/Pghqv/
however now, i cannot click links in my content-area in the back. any ideas or solutions how i can still have the same position result and the links in the back are working?
thank you very much.
Hi there,
The title says it all, my website looks good in Iexplorer 8 and Firefox but the part of the picure and top navigation is laso noty in place, can anyone figur out why? For me it's a mysterie
http://www.friesecomputerservice.nl/
Hi,
I have this page.
login: [email protected]
password: m
As you can see in IE7 there isn't any border below 'Alcorcon', 'Madrid', etc. In FF yes.
Why?
Regards
Javi
I'm trying to figure out the best way to create a row of three boxes (columns), with dividers between boxes 1 and 2, and boxes 2 and 3. The text would need to be centered within each box.
h2 {
color: #00ADEF;
margin-top:0;
margin-bottom:0;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:bold;
line-height:23px;
}
p {
margin-top:0;
}
.3colwrapper {
width: 930px;
margin: 0 auto;
}
.colbox {
float:left;
margin: 10px;
width: 210px;
background:#DDD;
padding:10px 40px;
}
<div class="3colwrapper">
<div class="colbox"><h2>Step One</h2>
<p>Sign up</p>
</div>
<div class="colbox"><h2>Step Two</h2>
<p>Verify</p>
</div>
<div class="colbox"><h2>Step Three</h2>
<p>Participate</p>
</div>
</div>
Here's what I've worked up so far: http://cssdesk.com/YyjAr
Hi I'm not too sure how to create the attached image effect where the right hand side is my main content and it shades onto my left sidebar which has a gradient effect downwards.
So I'm creating this website and there is a strange untraceable bug that causes the header to move down 10 or so pixels. On a refresh the header could be correct or it could be broken. I've been testing it on Adobe Browserlab and the results are different every time.There is no discernible pattern making it incredible hard to track down.
http://www.freeimagehosting.net/uploads/c866bf594d.jpg
Has anyone ever had this problem and been able to fix it?
Hi,
i have this page.
login: [email protected]
password: m
I've gave a width to "td.select_edad label" but it doesnt work..
I know it's deprecated, so what is your advice?
Another question: why "height" (also deprecated) is working ok for the fields of the filter?
Regards
Javi
I have a navigation bar, and underneath a black div on which the drop-down elements from the navigation bar drops. This is not the main function of the black div. It is just for design, but it works really well. You can see here what i am talking about: http://www.ecoloc.ro/interior/test/regeneration . Now, what i want to do is that every time a main element from the navigation bar is hovered, an image big enough to cover the main element and a part of that black div beneath it will appear. You can see in the link that i posted, on that black gap i want the image. Can this be done?
Thank you!
Hi
My question is, can I control the style of the paging element separately of top and bottom, I have set the paging to appear in both top and bottom of the gridview, and I want to see that the top pagination is little high up in the page, to do that I used the cssClass and set margin-top:20px and made the position: absolute, this does change the position of the top paging area and set it rightly for me, but the bottom pagination has also come up as a result and now sits inside the grid data!! Is there any way to solve this?
Thanks and regards
Arunendra
Filters like
img {filter:flipV;}
I'm guessing are pretty old, I just was asked by a colleague why they weren't working for him in FF. I assume they were an IE only thing that died out a while back?
I have a setup lets say like follows:
<div id="nav">
<div id="innernav">
//With dynamic content here.
</div>
</div>
I am running a script that sizes #nav to the size of the browser window in height. But sometimes my dynamic content is now getting bigger than the height of the window.. Is there a way I can enforce that when #innernav exceeds #nav that #nav will increase in size?
I'm having trouble with the alignment of two images on the footer of my temporary website (http://www.rotimioyewole.com). I'm new to the YUI grid, which I think may be a factor.
It should look roughly like this (works correctly in Chrome and Safari, haven't tested IE yet):
(http://cl.ly/44fH)
But on FF and Opera look like this:
http://cl.ly/44aO
If I can have some sort of consistency then the website would at least be presentable. Ideally, I would also like to align both images on the same Y axis, as well as the text next to the icons. I had trouble figuring out how to search for a solution..can anybody help me?
Thanks in advance
body{
background-image: url("./content/site_data/bg.jpg");
background-size: cover;
background-repeat: no-repeat;
font-family: 'Lobster', cursive;
}
Check: http://demo.jayantbhawal.in on firefox browsers, NOT in widescreen mode.
The code works on Chrome(Android + PC) and even the stock Android browser, but NOT Firefox(Android + PC). Is there any good alternative to it? Why is it not working anyways? Googled this issue a lot of times, but no one else seems to have this problem. Is it just me? In any case, how do I fix it?
There are quite some questions on SO about it too, but none of them provide a legitimate solution, so can someone just tell me if they have background-size: cover; issues on firefox too?
So basically tell me 3 things:
1. Why is it happening?
2. What is a good alternative to it?
3. Is this happening to you too? On Firefox browsers of course.
Chrome Version 35.0.1916.114 m
Firefox Version 29.0.1
Note: I may already be trying to fix it so at times you may see a totally weird page. Wait a bit and reload.