In the videos playlist at the bottom, video description (background black) needs to go 20 pixels down. You will understand it better if you view the website with Firefox.
[links not working anymore]
#content #videos .playlist { float:left; width:442px; height:292px; margin:10px 0; background:#FFFFFF url(images/bg_videoplaylist.gif) repeat-x; background-position:-1px 0; border:1px solid #083684; position:relative; overflow:hidden; }
#content #videos .playlist .entries { position:absolute; width:10000em; height:60px; }
#content #videos .playlist .entries .video { float:left; width:422px; height:60px; font-size:14px; font-weight:bold; text-decoration:none; padding:20px; background:transparent url(images/player_entry.gif) 0 0 no-repeat; }
#content #videos .playlist .entries .playing { background-position:0px -80px; }
#content #videos .playlist .entries .paused { background-position:-432px -80px; }
#content #videos .playlist .entries .progress { opacity:0.8; }
#content #videos .playlist .entries em { float:right; color:red; font-style:normal; margin:14px; }
#content #videos .playlist .entries .description { float:right; width:442px; height:212px; background:#000 url(http://flowplayer.org/img/player/btn/play_large.png) right bottom no-repeat; }
#content #videos .playlist .entries .description p { color:#FFF; width:422px; height:192px; font-size:12px; font-weight:none; text-decoration:none; padding:10px; position:absolute; }
None of the suggestion above worked. I solved it with margin-left:-20px. Hate internet explorer!
IE6/7 has issues with mixing floats and absolute positioning. Try removing the position:absolute from #content #videos .playlist .entries .description p
Your link is broken, the correct url should be http://pangeaadvisors.org/SS.jpg
In Firefox 3.5 I see it exactly the
same as your screenshot of IE (20
pixels raised).
In IE6 I see it aligned to the base
but with 20px on the left
and IE7 the same as IE6 but with some glitch
in the scrolling.
In firefox the first 2 items are miss-placed, but the 3rd item in the playlist is displayed correctly. The factor effects this is the length of the title. Longer title display fine, shorter with the 20px gap, the line-height pushes the time-stamp down.
If you add another div inside the "video" wrapping around the title and define a height and width on this with overflow:hidden, it should standardize and stop the issue of some blocks being different heights to others.
With this done you can then use a couple of CSS hacks to write rules for any misbehaving browsers by using
position:relative;
top:XXpx
A little down-and-dirty but should work just fine. Can't be more specific since I can't actually re-create your problem in my browsers.
Related
I want the first picture to be aligned to the right bored of the black div, but I can't move the picture "Char" from where it is.
http://www.charlestonshop.it/homepageteo.html
<style type="text/css">
html, body {
width:100%;
height:100%;
margin:0;
}
div#container {
height:100%;
}
div#container div {
width:50%;
height:100%;
float:left;
background-repeat:no-repeat;
background-size:contain;
}
div#container div#left {
/* background-image:url('http://www.charlestonshop.it/charback9.jpg');*/
background-position: right;
background-color: black;
}
div#container div#right {
/* background-image:url('http://www.charlestonshop.it/charback10.jpg');*/
background-position: left;
background-color: white;
}
.charleft img{
max-width:100% !important;
height:auto;
display:block;
}
.charright img{
max-width:100% !important;
height:auto;
display:block;
float:right;
}
</style>
Add the below to your css, if you already have rules in place- add the additional styles as outline below:
#left{
position:relative; /* have a reference point for child positioning */
}
.charleft img{
position:absolute; /* position absolutely */
right:0; /* position on the right hand side of the parent, #left */
}
The benefit of this as opposed to using float, is you wont have to either clear the float, or accommodate for any changes it may later inflict on your layout.
You have to add float: right to .charleft div which contains the image
.charleft{
float: right;
}
it's very easy to do, just add this to your css code.
#left > .charleft{
float: right;
}
That's all.
I'm working on a site for a friend at http://blueridgemusclecars.com/ . I want the logo at the top center, and the phone number and location right aligned, but I would like the text in the same plane horizontally as the logo. Right now the text is below and to the right of the logo. Here is my CSS for the header, any ideas?
header {
width:100%;
position:relative;
z-index:2;
}
h1 {
padding:45px 20px 37px 26px;
/*background:url(../images/h1-bg.jpg) 0 0 no-repeat;*/
/*float:right;*/
}
h1 a {
display:block;
width:500px;
height:278px;
text-indent:-999em;
margin:0 auto;
background:url(../images/logo.png) 0 0 no-repeat;
}
.address {
display:block;
font-size:14px;
line-height:28px;
text-align:right;
color:#b22300;
}
.phone {
display:block;
font-size:25px;
line-height:30px;
text-align:right;
color:#fff;
margin-top:-5px;
}
Set your .fright class to have a negative top margin.
.fright { margin-top: -100px; }
The markup could probably be reworked a little (e.g., not sure why the link and image are in an <h1>), but easiest thing on this page I think is adding the following to your CSS:
.wrapper { height: 300px; } //reduce empty space
.fright { margin-top: -195px; } //align phone number with image bottom
That looks pretty good in Chrome anyway...good luck!
Basically, the current setup has space between the top of the page and the #header div. I want to remove that space. Tried searching, came up with adding
position:absolute;top:0;left:0;
to the #header div, it works (positions it at the top without space) but the rest of my divs loose all their structure. How to position it at the very top and preserve the current layout of the rest of the divs?
I am also using an image underneath the divs as a background. Using this code.
body
{
background-image:url('../imagez/bestone1400.jpg');
background-repeat:no-repeat;
background-position:top, center;background-size:100%; 2000px;
}
Thanks in advanced.
#container
{
width:100%;
}
#header
{
background-color:#FFA500;
height:400px;
}
#leftcolumn
{
background-color:#FFD700;
height:200px;
width:10%;
float:left;
}
#content
{
background-color:#EEEEEE;
height:200px;
width:80%;
float:left;
}
#rightcolumn
{
background-color:#FFD700;
height:200px;
width:10%;
float:right;
}
#footer
{
background-color:#FFA500;
clear:both;
text-align:center;
}
There is likely padding or margin on html or body. Try something like:
html, body {
padding: 0;
margin: 0;
}
There may also be padding or magins on divs or other elements, so a universal selector might work:
* {
padding: 0;
margin: 0;
}
But it is generally good practice to implement a css reset, like this one, which may be the best solution.
You should remove the Default browser padding, margin and border, use:
/*reset default browser settings */
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
I am using the code below, but .under is not rising above (and covering up) #portfolio_content .img img as it should on hover.
#portfolio_wrap {
overflow:hidden;
width:980px;
float:left
}
#portfolio_content {
float:left;
clear:both;
margin:0 auto;
overflow:hidden;
width:650px!important
}
#portfolio_content ul {
list-style:none
}
#portfolio_content .img a { }
#portfolio_content .img a:hover { }
#portfolio_content .img {
display:block;
float:left;
height:210px;
margin:0 35px 35px 0!important;
overflow:hidden;
padding:0;
width:307px
}
#portfolio_content .img img {
display:block;
position:absolute!important;
overflow:hidden;
z-index:3!important
}
#portfolio_content .img .title, #portfolio_content .img .title a {
font-size:22px;
margin:100px 0 10px 0;
float:left!important;
width:307px;
text-align:center;
position:relative
}
.desc {
font-size:13px;
display:block;
text-align:center!important;
margin:0 auto!important;
width:307px
}
.under {
z-index:2!important;
display:inline;
position:absolute;
width:307px;
height:210px
}
.under:hover { z-index:4!important }
Any thoughts? I am assuming this is related to z-index, but I don't know what I have done wrong.
Without seeing the page rendered, I would have to assume the problem is that you cannot actually hover over .under (z-index:2) as it is hidden under the #portfolio_content .img img (z-index:3) initially and therefore you would just be hovering the img instead.
You cannot hover over .under since it's always "under" your images, tw16 is right.
Instead of playing with z-indexes, try actually placing .under inside .img but on top of your images and with display:none, and then do something like :
.img:hover .under{
display:block;
}
I might add your markup isn't quite optimized and .img should be directly placed on the a tags, not on useless inside spans, which are waaaay too many anyway :)
Edit : (as answer to comment)
In case there is no image to show, your markup will be different (as i suppose generated by a server side script, like php) as when there is one to display (for instance you won't echo the img tag).
You can as well use that condition to write 2 differents classes, for instance .img and .no-img :
.no-img .under{
display:block;
}
.img .under{
display:none;
}
.img:hover .under{
display:block;
}
I've got a shadow background for my site layout showing up fine in IE, but firefox only shows the shadow (an image) if I use "height:100px;", or if I actually type some text in. I'm using the shadow img with a div for the layout. How can I make this work in firefox?
css:
.bg_shadow {
margin-left:auto;
margin-right:auto;
background:url("../images/bg_shadow.gif") repeat-y scroll left top transparent;
width:1024px;
height:100%;
}
body {
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
background:#fff;
min-width:600px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
font-size:90%;
text-align:center; /*used in centering the liquid layout in the browser window */
/*background:#CCCCCC;*/ /*page background color */
}
#wrapper {
margin:0 auto;
width:1000px; /* you can use px, em or % */
text-align:left;
}
a {
color:#01128E;
}
a.link:hover {
color:#FFFFFF;
background-color:#01128E;
text-decoration:none;
}
h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;
}
p {
margin:.4em 0 .8em 0;
padding:0;
line-height:1.35em;
}
img.padme {
margin:10px 25px;
}
#ads img {
display:block;
padding-top:10px;
}
/* Header styles */
#header {
clear:both;
float:left;
width:100%;
position:relative;
}
#header {
border-bottom:1px solid #000;
}
#header p,
#header h1,
#header h2 {
padding:.4em 15px 0 15px;
margin:0;
}
#header p.login{
position:absolute;
top:0;
right:0;
text-align:right;
margin:0;
padding-top:10px;
}
/* 'widths' sub menu */
#horizontal_border {
clear:both;
background:#eee;
border-top:4px solid #01128E;
margin:0;
padding:0px 15px !important;
text-align:right;
}
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%;
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
}
/* 2 Column (right menu) settings */
.rightmenu .colleft {
right:25%; /* right column width */
background:#FAFAFA; /* left column background colour */
}
.rightmenu .col1 {
width:71%; /* left column content width (left column width minus left and right padding) */
left:27%; /* (right column width) plus (left column left padding) */
}
.rightmenu .col2 {
width:21%; /* right column content width (right column width minus left and right padding) */
left:31%; /* (right column width) plus (left column left and right padding) plus (right column left padding) */
}
/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;
}
#footer p {
padding:10px;
margin:0;
}
.slogan{
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
color:#999999;
position:relative;
top:-20px;
left:30px;
}
.header_gradient{
background:url("../images/header_gradient.gif") repeat-x scroll left top transparent;
}
.background_color{
background-color:#EEEEEE;
}
#nav_div{
width:100%;
height:35px;
background:url("../images/spacer.gif") repeat left top;
}
html:
<div class="bg_shadow">
<div id="wrapper">
<p>Main Content</p>
</div>
</div>
well, got lucky....put in "overflow:hidden" in the bg_shadow class and the shadow showed up exactly how i wanted it to. not sure why, but this worked.
thanks for your replys.
height:100%;
100% of what? If you don't specify a height on the parent <body>, the 100% is meaningless.
The browser can't know the height of the body because it depends on the height of the child element... which is a height you're trying to specify in percentage relative to the height of the body. CSS breaks this circular dependency by saying that percentage heights are ignored and auto is used instead if the containing block doesn't have a specified height.
If this is working for you in IE, you are probably in Quirks Mode. This works because in Quirks Mode, the <body> element is (incorrectly) used to represent the viewport, and so has an inherent specified height of however big the window is. But you don't want to be in Quirks Mode, it's full of incredibly sucky bugs. Use a Standards Mode DOCTYPE and IE will behave more like the other browsers.
Then use .bg_shadow { min-height: 100px; } or whatever the minimum height is to show the shadow if you really don't have any static content inside it. For IE6, you can add a rule like * html .bg_shadow { height: 100px; } to work around the lack of support for min-height without breaking other browsers that would take height: 100px; literally.
Try using min-height: 100px; in your CSS or adding &nsbp; to your empty element in your HTML.