Few more questions

hey all,

i got a few minor problems:

  1. on my video gallery, i got boxover.js that should give each vid a title and desc when hovering it, however the div that contains the info is behind that #wrapper div, i guess its a z-index problem, how can i solve it?
    2)again regarding the vid gallery, there’s no bottom border for some unknown reason, any1 got any idea why?
  2. atm the Video and the controls on the vid gallery are styled with table, is there another way to position them in the location they are now without the table?

link to vid gallery : http://sospets.brinkster.net/newsite/vids.asp

  1. now on homepage, in the lists below of the images, FF2 have no space between the discs and the texts, its not a big deal ofc, but if there’s some easy fix for it then i’d like to have it :slight_smile: (this problem also appears in the images themselves, its just hard to see it because there’s only about 1px space between each li)

thanks for ur help :slight_smile:

Yes, it’s a z-index problem. If you look inside the boxover.js and then add this line in bold. it will work.


function init() {
    oDv.appendChild(dvHdr);
    oDv.appendChild(dvBdy);
    oDv.style.position="absolute";
    oDv.style.visibility='hidden';
 [B]   oDv.style.zIndex='9999';[/B]
    document.body.appendChild(oDv);    
}


2)again regarding the vid gallery, there’s no bottom border for some unknown reason, any1 got any idea why?

Which element is supposed to have a border? The popup has a white border if that’s what you meant.

  1. atm the Video and the controls on the vid gallery are styled with table, is there another way to position them in the location they are now without the table?

You could float the controls to the right and the video to the left as long as you give then the proper widths and then nudge them into position with margins. You can’t vertically align with floats so you could use display;inline-block instead of floats (as we have shown you in other threads) and then you could vertically align those to the middle. I would use floats and nudge the controls into position with a top margin.

  1. now on homepage, in the lists below of the images, FF2 have no space between the discs and the texts, its not a big deal ofc, but if there’s some easy fix for it then i’d like to have it :slight_smile: (this problem also appears in the images themselves, its just hard to see it because there’s only about 1px space between each li)

thanks for ur help :slight_smile:
You’ve set the list to display:inside which means it will be placed next to the text and not outside the principal box. The exact position is determined by the browser so you can’t really do much about it.

It would be better to use list-style: outside instead and give some margin to the ul. As you haven’t got unique classes you will have to make sure that you cancel out styles form elements that don;t need it (or apply a class to the ul that hasn’t got a class.)



.right ul{margin:0 20px 0 0;list-style:outside;padding:0}
#mdogs{list-style:none;padding:0;margin:0}


As an aside all those js rollovers should be done with simple css and swap the image on hover and save a mile of html code. They should also be in a list and not bare anchors next to each other which is bad for accessibility.

hey,

Yes, it’s a z-index problem. If you look inside the boxover.js and then add this line in bold. it will work.

thanks, solved it :slight_smile:

Which element is supposed to have a border? The popup has a white border if that’s what you meant.

oops, forgot to mention its the #wrapper / #wrapper-split that dont have the border bottom, i noticed this problem is in every page with height more than 100%. (checked with chrome, on IE border works fine.)

You could float the controls to the right and the video to the left as long as you give then the proper widths and then nudge them into position with margins. You can’t vertically align with floats so you could use display;inline-block instead of floats (as we have shown you in other threads) and then you could vertically align those to the middle. I would use floats and nudge the controls into position with a top margin.

ehm, top margin? i just removed the table, used <div class=“controls”> floated it to the right but its in the bottem, tried to play abit with margins and it work fine until i came to check in opera 10 and the controls were in a complete different spot :slight_smile: this is what i tried:

.controls{
    width:25px;
    float:right;
    bottom: 200px;
    right: 155px;
    position:absolute;
}

also in IE there’s too much space between each button.

It would be better to use list-style: outside instead and give some margin to the ul

thanks, works, but is there some way to give list-style inside just to the first li? i tried to give it class=“first” and…

.right ul .first {
    list-style-type: none;
    list-style-position:inside;
}

didn’t work out

As an aside all those js rollovers should be done with simple css and swap the image on hover and save a mile of html code. They should also be in a list and not bare anchors next to each other which is bad for accessibility.

im going to need alot of help here …do u mean putting images on top of each other or something like that? if yes then some1 already told me that in the past but i have no clue on how to achieve that.

thanks for ur help :slight_smile:

[QUOTE=ulthane;4764410]h

oops, forgot to mention its the #wrapper / #wrapper-split that dont have the border bottom, i noticed this problem is in every page with height more than 100%. (checked with chrome, on IE border works fine.)
[/QUOTE]

I already fixed this in the major update I sent to you via PM.:slight_smile:

You can’t add top and 2px bottom borders to an element that is 100% high or else it will be 4px too big for the space it sits in. In the example I gave you I removed the top and bottom borders and placed them on inner elements instead.

You can’t set the body to a fixed height either as that messes everything up and you need to use the 100% high routine I gave you also. All the fixes were in the PM.

Here is the code I sent.


<!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>&#1488;&#1505;.&#1488;&#1493;.&#1488;&#1505; &#1495;&#1497;&#1493;&#1514; &#1488;&#1513;&#1511;&#1500;&#1493;&#1503;</title>
<meta name="description" content="&#1488;&#1505;.&#1488;&#1493;.&#1488;&#1505; &#1495;&#1497;&#1493;&#1514; &#1488;&#1513;&#1511;&#1500;&#1493;&#1503;" />
<meta name="keywords" content="S.O.S,SOS,&#1488;&#1505;.&#1488;&#1493;.&#1488;&#1505;,&#1495;&#1497;&#1493;&#1514;,&#1488;&#1513;&#1511;&#1500;&#1493;&#1503;,&#1495;&#1514;&#1493;&#1500;&#1497;&#1501;,&#1499;&#1500;&#1489;&#1497;&#1501;,&#1488;&#1497;&#1502;&#1493;&#1509;,&#1514;&#1512;&#1493;&#1502;&#1493;&#1514;,donate,ashkelon,pets,adopt,&#1506;&#1502;&#1493;&#1514;&#1492;,ashqelon" />
<link href="default.css" rel="stylesheet" type="text/css" />
<script src="http://sospets.brinkster.net/newsite/http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<style type="text/css">
html, body, address, blockquote, div, form, fieldset, caption, h1, h2, h3, h4, h5, h6, hr, ul, ol, ul, li, table, tr, td, th, p, img {
    margin: 0;
    padding: 0;
}
ul, ol, li {
    list-style-type: none;
}
img, fieldset {
    border: none;
}
html, body {
    height: 100%;
}
body {
    margin:0;
    background: #99CCFF;
    color: #484848;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100.01%;
}
#wrapper, #wrapper-split {
    width: 994px;
    min-height: 99%;
    margin:0 auto 0;
    position: relative;
    top:3px;
    z-index: 1;
    overflow: hidden;
    background: #FFF;
    border-left:2px solid #257310;
    border-right:2px solid #257310;
}
#wrapper-split {
    background: #FFF url(http://sospets.brinkster.net/newsite/images/split_bg.gif);
}
* html  #wrapper-split{height:99%}/* ie6 treats height as min-height*/ 
#header {
    width: 994px;
    padding-top: 150px;
    position: relative;
    z-index: 100;
    background: url(http://sospets.brinkster.net/newsite/images/hd.jpg) no-repeat;
    border-top:2px solid #257310;
}
#header #nav {
    width: 994px;
    background: url(http://sospets.brinkster.net/newsite/images/nav.gif) repeat-x;
    overflow: hidden;
    text-align:center;
}
#header #nav ul {display: inline-block;}
* html #header #nav ul{display:inline}/* ie6 hack to get inline-block effect*/
*+html #header #nav ul{display:inline}/* ie7 hack to get inline-block effect*/

#header #nav ul li {
    float: left;
    position: relative;
}
#header #nav ul li a, #header #nav ul li a.last {
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    display: inline-block;
    background: url(http://sospets.brinkster.net/newsite/images/nav_line.gif) right center no-repeat;
    text-decoration: none;
    color: #FFF;
}
#header #nav ul li a.last {
    background: none;
}
#header #nav ul li a:hover, #header #nav ul li a:focus {
    color: #000;
}
.content, .left, .right {
    width: 954px;
    min-height: 100px;
    margin: 20px;
    float: left;
    text-align: right;
    direction: rtl;
    display:inline;/* ie6 double margin fix*/
}
.left, .right {
    width: 457px;
}
.right {
    float: right;
}
.content h1, .left h1, .right h1 {
    display: block;
    font-size: 180%;
    color: #0000ff;
    padding-bottom: 15px;
    font-family:"Times New Roman", Times, serif;
}
.content h2, .left h2, .right h2 {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-weight: normal;
    line-height: 1;
}
.right h3 {
    margin: 0;
    padding: 0;
    font-size: 140%;
    font-weight: bold;
    line-height: 1;
}
.animals img {
    margin: 5px auto;
    display: block;
    clear: both;
}
.left img, .right img {
    margin: 5px auto;
    display: inline-block;
    clear: both;
}
.right h1 + h2 + h3 + img {
    margin-top: 5px;
}
.mdogs {
    width:142px;
    height:142px;
    padding-right:1px;
    padding-left:1px;
}
.right ul {
    width: 225px;
    margin-bottom: 30px;
    display: inline-block;
    float: right;
    text-align: right;
    direction: rtl;
}
.right ul h1 {
    font-size: 160%;
    font-weight: bold;
    padding-bottom: 5px;
    color: #484848 !important;
}
.right ul li {
    list-style-type: disc;
    font-weight: bold;
    list-style-position: inside;
}
.right ul li a {
    color: #484848;
    text-decoration: none;
}
.right ul li a:hover, .right ul li a:focus {
    color: #FF8040;
}
.right ul.lastul {
    width: 190px;
    float: left;
}
.ltr {
    direction: ltr;
    text-align: left;
}
.rtl {
    direction: rtl;
    text-align: right;
}
.center {
    direction: rtl;
    text-align: center;
}
a:link, a:visited {
    color:#484848;
}
a:hover, a:focus {
    color:#FF8040;
}
.content a, .right a, .left a {
    font-weight:bold;
    text-decoration:none;
}
#border{
    clear:both;
    background:#257310;
    height:3px;
     overflow:hidden;
    width: 998px;
    margin:0 auto 0;
    position:relative;
    z-index:2;
}
</style>
</head>
<body>
<div id="wrapper-split">
    <div id="header">
        <div id="nav">
            <ul>
                <li><a href="english.asp">About us</a></li>
                <li><a href="aboutus.asp">&#1506;&#1500; &#1492;&#1506;&#1502;&#1493;&#1514;&#1492;</a></li>
                <li><a href="volunteer.asp">&#1492;&#1514;&#1504;&#1491;&#1489;&#1493;&#1514;</a></li>
                <li><a href="donations.asp">&#1514;&#1512;&#1493;&#1502;&#1493;&#1514;</a></li>
                <li><a href="links.asp">&#1511;&#1497;&#1513;&#1493;&#1512;&#1497;&#1501;</a></li>
                <li><a href="gallery.asp">&#1490;&#1500;&#1512;&#1497;&#1492;</a></li>
                <li><a href="adopted.asp">&#1502;&#1510;&#1488;&#1493; &#1489;&#1497;&#1514;</a></li>
                <li><a href="cats.asp">&#1488;&#1502;&#1509; &#1495;&#1514;&#1493;&#1500;</a></li>
                <li><a href="dogs.asp">&#1488;&#1502;&#1509; &#1499;&#1500;&#1489;</a></li>
                <li><a class="last"  href="index.asp">&#1491;&#1507; &#1492;&#1489;&#1497;&#1514;</a></li>
            </ul>
        </div>
    </div>
    <div class="left center">
        <h1>&#1497;&#1493;&#1501; &#1492;&#1488;&#1497;&#1502;&#1493;&#1509; &#1492;&#1489;&#1488;</h1>
        <h2>&#1513;&#1489;&#1514; &#1492;- 18/12/2010<br />
            &#1489;&#1497;&#1503; &#1492;&#1513;&#1506;&#1493;&#1514; 11:00 - 13:00, &#1502;&#1513;&#1514;&#1500;&#1514; &#1495;&#1494;&#1511;&#1497;&#1492;, &#1488;&#1513;&#1511;&#1500;&#1493;&#1503;</h2>
        <br />
        &#1502;&#1508;&#1514; &#1492;&#1490;&#1506;&#1492; (&#1502;&#1513;&#1514;&#1500;&#1514; &#1495;&#1494;&#1511;&#1497;&#1492;): <img src="http://sospets.brinkster.net/newsite/images/map.gif" alt="" /> </div>
    <div class="right center">
        <h1>&#1499;&#1500;&#1489;&#1497; &#1492;&#1495;&#1493;&#1491;&#1513;</h1>
        <h3>&#1502;&#1493;&#1511;&#1492;</h3>
        <img class="mdogs" src="http://sospets.brinkster.net/newsite/images/moca.jpg" alt="" /> <br />
        <br />
        <ul>
            <h1>&#1510;&#1512;&#1493; &#1511;&#1513;&#1512;</h1>
            <li>050-8254227</li>
            <li><a href="mailto:sosashkelon@gmail.com">sosashkelon@gmail.com</a></li>
            <li><a href="http://www.facebook.com/group.php?gid=6742471593">&#1488;&#1504;&#1495;&#1504;&#1493; &#1489;&#1508;&#1497;&#1497;&#1505;&#1489;&#1493;&#1511;</a></li>
        </ul>
        <ul class="lastul">
            <h1>&#1513;&#1493;&#1493;&#1492; &#1499;&#1504;&#1497;&#1505;&#1492;</h1>
            <li><a href="stories.asp">&#1502;&#1488;&#1502;&#1512;&#1497;&#1501;</a></li>
            <li><a href="vids.asp">&#1505;&#1512;&#1496;&#1493;&#1504;&#1497;&#1501;</a></li>
            <li><a href="gallery.asp">&#1490;&#1500;&#1512;&#1497;&#1492;</a></li>
        </ul>
        <h1>&#1495;&#1491;&#1513;&#1493;&#1514; &#1492;&#1488;&#1514;&#1512;</h1>
        <h2>&#1488;&#1497;&#1503; &#1495;&#1491;&#1513;&#1493;&#1514;</h2>
    </div>
</div>
<div id="border"></div>
<script type="text/javascript">
    _uacct = "UA-1867581-6";
    urchinTracker();
</script>
</body>
</html>

You could instead just fake it a bit by leaving the borders on the outer wrapper but reducing its height to about 98% so that it still fits inside the viewport. It won’t be pixel perfect but is easier than changing everything around to get it exact.

Something like this:


<!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>&#1488;&#1505;.&#1488;&#1493;.&#1488;&#1505; &#1495;&#1497;&#1493;&#1514; &#1488;&#1513;&#1511;&#1500;&#1493;&#1503; - &#1505;&#1512;&#1496;&#1493;&#1504;&#1497;&#1501;</title>
<meta name="description" content="&#1488;&#1505;.&#1488;&#1493;.&#1488;&#1505; &#1495;&#1497;&#1493;&#1514; &#1488;&#1513;&#1511;&#1500;&#1493;&#1503;" />
<meta name="keywords" content="S.O.S,SOS,&#1488;&#1505;.&#1488;&#1493;.&#1488;&#1505;,&#1495;&#1497;&#1493;&#1514;,&#1488;&#1513;&#1511;&#1500;&#1493;&#1503;,&#1495;&#1514;&#1493;&#1500;&#1497;&#1501;,&#1499;&#1500;&#1489;&#1497;&#1501;,&#1488;&#1497;&#1502;&#1493;&#1509;,&#1514;&#1512;&#1493;&#1502;&#1493;&#1514;,donate,ashkelon,pets,adopt,&#1506;&#1502;&#1493;&#1514;&#1492;,ashqelon" />
<link href="default.css" rel="stylesheet" type="text/css" />
<script src="http://www.google.com/jsapi"></script>
<script>google.load("swfobject", "2.1");</script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<style type="text/css">
html, body, address, blockquote, div, form, fieldset, caption, h1, h2, h3, h4, h5, h6, hr, ul, ol, ul, li, table, tr, td, th, p, img {
    margin: 0;
    padding: 0;
}
ul, ol, li {
    list-style-type: none;
}
img, fieldset, table {
    border: none;
}
html, body {
    height:100%;
}
body {
    margin:0;
    background: #99CCFF;
    color: #484848;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100.01%;
}
#wrapper, #wrapper-split {
    width: 994px;
    min-height:98%;
    margin:0 auto 0;
    position: relative;
    top:3px;
    bottom:3px;
    z-index: 1;
    overflow: hidden;
    background: #FFF;
    border:2px solid #257310;
}
#wrapper-split {
    background: #FFF url(http://sospets.brinkster.net/newsite/images/split_bg.gif);
}
* html #wrapper-split, * html #wrapper {
    min-height:98%
}
#header {
    width: 994px;
    padding-top: 150px;
    position: relative;
    z-index: 100;
    background: url(http://sospets.brinkster.net/newsite/images/hd.jpg) no-repeat;
}
#header #nav {
    width: 994px;
    background: url(http://sospets.brinkster.net/newsite/images/nav.gif) repeat-x;
    overflow: hidden;
    text-align:center;
}
#header #nav ul {
    display:-moz-inline-box;
    display:inline-block;
}
* html #header #nav ul {
    display:inline
}
*+html #header #nav ul {
    display:inline
}
#header #nav ul li {
    float: left;
    position: relative;
}
#header #nav ul li a, #header #nav ul li a.last {
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    display: inline-block;
    background: url(http://sospets.brinkster.net/newsite/images/nav_line.gif) right center no-repeat;
    text-decoration: none;
    color: #FFF;
}
#header #nav ul li a.last {
    background: none;
}
#header #nav ul li a:hover, #header #nav ul li a:focus {
    color: #000;
}
.content, .left, .right {
    width: 954px;
    min-height: 100px;
    margin: 20px;
    float: left;
    text-align: right;
    direction: rtl;
    display:inline;
}
.left, .right {
    width: 457px;
}
.right {
    float: right;
}
.content h1, .left h1, .right h1 {
    display: block;
    font-size: 180%;
    color: #0000ff;
    padding-bottom: 15px;
    font-family:"Times New Roman", Times, serif;
}
.content h2, .left h2, .right h2 {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-weight: normal;
    line-height: 1;
}
.left img, .right img {
    margin: 5px auto;
    display: inline-block;
    clear: both;
}
.right h1 + h2 + img {
    margin-top: 5px;
}
.mdogs {
    width:142px;
    height:142px;
    padding-right:1px;
    padding-left:1px;
}
.right ul, .content ul {
    width: 225px;
    margin-bottom: 30px;
    margin-right: 20px;
    display: inline-block;
    float: right;
    text-align: right;
    direction: rtl;
}
.first h1, .content ul h1 {
    font-size: 160%;
    font-weight: bold;
    padding-bottom: 5px;
    color: #484848 !important;
}
.right ul li, .content ul li {
    list-style-type: disc;
    font-weight: bold;
}
.right ul .first {
    list-style-type: none;
    list-style-position:inside;
}
.right ul li a, .content ul li a {
    color: #484848;
    text-decoration: none;
}
.right ul li a:hover, .right ul li a:focus, .content ul li a:hover, .content ul li a:focus {
    color: #FF8040;
}
.right ul.lastul, .content ul.lastul {
    width: 190px;
    float: left;
}
.ltr {
    direction: ltr;
    text-align: left;
}
.rtl {
    direction: rtl;
    text-align: right;
}
.center {
    direction: rtl;
    text-align: center;
}
a:link, a:visited {
    color:#484848;
}
a:hover, a:focus {
    color:#FF8040;
}
.content a, .right a, .left a {
    font-weight:bold;
    text-decoration:none;
}
#mdogs {
    width:99%;
    margin:5px auto 10px;
    padding:0 1px 10px 1px;
    background:#BCC5E1;
    border:1px solid #000;
    list-style:none;
    text-align:center;
    font-family:arial;
}
#mdogs li {
    display:-moz-inline-box;
    display:inline-block;
    vertical-align:top;
    margin:5px 0 0 3px;
    border:1px solid #000;
    font-weight:bold;
    list-style:none;
    text-align:center;
}
* html #mdogs li {
    display:inline
}
*+html #mdogs li {
    display:inline
}
#mdogs li a {
    float:left;
    padding:5px 1px 5px 1px;
    text-decoration:none;
    background:#FFF;
    color:#444;
}
#mdogs li a:hover {
    background:#CCC;
    color:#000;
}
#mdogs img {
    width:142px;
    height:142px;
}
#mdogs li, #mdogs li a {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}
#mdogs li a {
    border:1px solid #000;
    margin:-1px;
}
.content table {
    margin: 0 auto 10px;
}
.pets {
    width:530px;
    border:5px outset #267411;
}
.petstd {
    color:#0066FF;
}
.pets h3 {
    color:#FF0000;
    font-weight:bold;
    font-size:100%;
    line-height:1;
}
.pets h4 {
    padding-bottom: 15px;
    font-weight:bold;
    font-size:120%;
    line-height:1;
}
.pets td {
    text-align:right;
    width:265px;
    border:1px solid #267411;
}
.pets td.lefttd {
    text-align:center;
}
.pets img {
    width:260px;
    height:310px;
    margin:5px auto 5px auto;
}
.links {
    width:650px;
    border:3px outset #267411;
}
.links td, .links th {
    border:1px solid #267411;
    vertical-align:top;
}
.titles {
    background-color:#FFFF00;
}
.vids a {
    margin:1px 1px 1px 1px;
}
.vids {
    direction:ltr;
}
#video {
    width:100%;
    position:relative;
}
#video ul.controls {
    width:25px;
    top: 175px;
    right: 120px;
    position:absolute;
    list-style:none;
    margin:0;
}
#video ul.controls li {
    margin:0 0 20px;
    list-style:none;
}
h5 {
    display: block;
    padding-bottom: 15px;
    font-family:"Times New Roman", Times, serif;
    color:#FF0000;
    font-size: 160%;
    font-weight: bold;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <div id="nav">
            <ul>
                <li><a href="english.asp">About us</a></li>
                <li><a href="aboutus.asp">&#1506;&#1500; &#1492;&#1506;&#1502;&#1493;&#1514;&#1492;</a></li>
                <li><a href="volunteer.asp">&#1492;&#1514;&#1504;&#1491;&#1489;&#1493;&#1514;</a></li>
                <li><a href="donations.asp">&#1514;&#1512;&#1493;&#1502;&#1493;&#1514;</a></li>
                <li><a href="links.asp">&#1511;&#1497;&#1513;&#1493;&#1512;&#1497;&#1501;</a></li>
                <li><a href="gallery.asp">&#1490;&#1500;&#1512;&#1497;&#1492;</a></li>
                <li><a href="adopted.asp">&#1502;&#1510;&#1488;&#1493; &#1489;&#1497;&#1514;</a></li>
                <li><a href="cats.asp">&#1488;&#1502;&#1509; &#1495;&#1514;&#1493;&#1500;</a></li>
                <li><a href="dogs.asp">&#1488;&#1502;&#1509; &#1499;&#1500;&#1489;</a></li>
                <li><a class="last"  href="index.asp">&#1491;&#1507; &#1492;&#1489;&#1497;&#1514;</a></li>
            </ul>
        </div>
    </div>
    <div class="content center vids"> <a title="header=[Pomeranians wanna go out!] body=[<b>Video Author:</b> nelliedana] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('cuayz8ueDHE&feature=related', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/defaultcaz9zy0k copy.jpg" onmouseover="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/defaultcaz9zy0k.jpg'" onmouseout="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/defaultcaz9zy0k copy.jpg'" /></a><a title="header=[Eight Below Trailer] body=[<b>Video Author:</b> jessica0421] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('NXkoGlxVbLY', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/default[5] copy[1].jpg" onmouseover="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/default[5][1].jpg'" onmouseout="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/default[5] copy[1].jpg'" /></a><a title="header=[Hatchi: A Dog's Tale - HD Trailer] body=[<b>Video Author:</b> SonyPicturesDVD] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('Y6U7mAnPtw4', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/default[9] copy.jpg" onmouseover="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/default[9].jpg'" onmouseout="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/default[9] copy.jpg'" /></a><a title="header=[&#1492;&#1501; &#1494;&#1511;&#1493;&#1511;&#1497;&#1501; &#1500;&#1506;&#1494;&#1512;&#1514;&#1499;&#1501; &#1499;&#1491;&#1497; &#1500;&#1495;&#1497;&#1493;&#1514;...] body=[<b>Video Author:</b> MegDebora] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('JjjA5JKKG7Q', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/default[5] copy.jpg" onmouseover="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/default[5].jpg'" onmouseout="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/default[5] copy.jpg'" /></a><a title="header=[&#1499;&#1500;&#1489;&#1497;&#1497;&#1492; &#1506;&#1497;&#1512;&#1493;&#1504;&#1497;&#1514; &#1488;&#1513;&#1511;&#1500;&#1493;&#1503;] body=[<b>Video Author:</b> MegDebora] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('M8A89auTdro', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/default[11] copy.jpg" onmouseover="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/default[11].jpg'" onmouseout="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/default[11] copy.jpg'" /></a><a title="header=[&#1500;&#1488; &#1504;&#1493;&#1496;&#1513;&#1497;&#1501; &#1489;&#1504;&#1497; &#1502;&#1513;&#1508;&#1495;&#1492;!] body=[<b>Video Author:</b> MegDebora] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('dR6s5ae0634&feature=related', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/default[3].jpg" onmouseover="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/default[3][1].jpg'" onmouseout="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/default[3].jpg'" /></a><a title="header=[Dazzle's Dazzling Tricks] body=[<b>Video Author:</b> KatsDogs] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('RmcTW_FgL_U', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/dazzle2.jpg" onmouseover="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/dazzle.jpg'" onmouseout="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/dazzle2.jpg'" /></a><a title="header=[Dog Tricks for a Rainy Day] body=[<b>Video Author:</b> KatsDogs] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('A1KKfNQSEqg', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/rainy2.jpg" onmouseover="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/rainy.jpg'" onmouseout="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/rainy2.jpg'" /></a><a title="header=[OK Go - White Knuckles - Official Video] body=[<b>Video Author:</b> OkGo] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('nHlJODYBLKs', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/okgo.jpg" onmouseover="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/okgo2.jpg'" onmouseout="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/okgo.jpg'" /></a><a title="header=[To everyone who loves dogs] body=[<b>Video Author:</b> samoyedbg] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('4xOZmx4nRKU', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/love.jpg" onmouseover="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/love2.jpg'" onmouseout="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/love.jpg'" /></a><a title="header=[&#1495;&#1497;&#1493;&#1514; &#1489;&#1491;&#1512;&#1493;&#1501;] body=[<b>Video Author:</b> MegDebora] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('RIFdKOJ7Stw&feature=related', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/south.jpg" onmouseover="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/south2.jpg'" onmouseout="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/south.jpg'" /></a><a title="header=[&#1495;&#1497;&#1493;&#1514; &#1492;&#1491;&#1512;&#1493;&#1501; &#1494;&#1511;&#1493;&#1511;&#1493;&#1514; &#1500;&#1506;&#1494;&#1512;&#1514;&#1499;&#1501;] body=[<b>Video Author:</b> MegDebora] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('gxLXGxAweRU&feature=related', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/news.jpg" onmouseover="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/news2.jpg'" onmouseout="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/news.jpg'" /></a><a title="header=[Marley and Me] body=[<b>Video Author:</b> HDtrailerHeaven] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('oIaYc3DNNX0', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/marley.jpg" onmouseover="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/marley2.jpg'" onmouseout="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/marley.jpg'" /></a><a title="header=[Water Leak Problem] body=[<b>Video Author:</b> Tiggerific16] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('NIVsZRPx_Dw', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/water.jpg" onmouseover="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/water2.jpg'" onmouseout="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/water.jpg'" /></a><a title="header=[An Engineer's Guide to Cats] body=[<b>Video Author:</b> klusmanp] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('mHXBL6bzAR4', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/guide.jpg" onmouseover="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/guide2.jpg'" onmouseout="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/guide.jpg'" /></a><a title="header=[Lets see the Dog Whisperer do this!!] body=[<b>Video Author:</b> bltmic] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('jCnAjel02lM', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/belive.jpg" onmouseover="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/belive2.jpg'" onmouseout="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/belive.jpg'" /></a><a title="header=[&#1489;&#1493;&#1488;&#1493; &#1500;&#1506;&#1513;&#1493;&#1514; &#1488;&#1514; &#1492;&#1492;&#1489;&#1491;&#1500; - Let's make a difference] body=[<b>Video Author:</b> BehindBarsIL] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('S0fCozUMl5g', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/vol.jpg" onmouseover="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/vol2.jpg'" onmouseout="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/vol.jpg'" /></a><a title="header=[&#1502;&#1492; &#1488;&#1514;&#1492; &#1506;&#1493;&#1513;&#1492; &#1506;&#1501; &#1495;&#1502;&#1497;&#1513;&#1492; &#1513;&#1511;&#1500;&#1497;&#1501;?] body=[<b>Video Author:</b> MegDebora] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('18L2p5JdUNo', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/five.jpg" onmouseover="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/five[1].jpg'" onmouseout="this.src='http://sospets.brinkster.net/newsite/photos/vidphotos/five.jpg'" /></a>
        <div id="video">
            <div id="ytapiplayer"> You need Flash player 8+ and JavaScript enabled to view this video. </div>
            <script type="text/javascript">
// <![CDATA[
    var params = { allowScriptAccess: "always", bgcolor: "#cccccc", allowFullScreen: "true", wmode: "transparent" };
    var atts = { id: "sosPetsPlayer" };
    swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer", "ytapiplayer", "625", "469", "8", null, null, params, atts);
//]]>
</script>
            <ul class="controls">
                <li><a href="javascript:void(0);" onclick="play();"><img src="http://sospets.brinkster.net/newsite/images/play.png" alt="" /></a></li>
                <li> <a href="javascript:void(0);" onclick="pause();"><img src="http://sospets.brinkster.net/newsite/images/pause.png" alt="" /></a></li>
                <li><a href="javascript:void(0);" onclick="stop();"><img src="http://sospets.brinkster.net/newsite/images/stop.png" alt="" /></a></li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
    function onYouTubePlayerReady(playerId) {
        ytplayer = document.getElementById("sosPetsPlayer");
        ytplayer.loadVideoById("cuayz8ueDHE&feature=related", 0);
    }
    function loadNewVideo(id, startSeconds) {
        if (ytplayer) {
            ytplayer.loadVideoById(id, parseInt(startSeconds));
        }
    }
    function play() {
        if (ytplayer) {
            ytplayer.playVideo();
        }
    }
    function pause() {
        if (ytplayer) {
            ytplayer.pauseVideo();
        }
    }
    function stop() {
        if (ytplayer) {
            ytplayer.stopVideo();
            ytplayer.stopVideo();
        }
    }
</script>
-->
<script type="text/javascript" src="http://sospets.brinkster.net/newsite/boxover.js"></script>
<script type="text/javascript">
    _uacct = "UA-1867581-6";
    urchinTracker();
</script>
</body>
</html>


this is what i tried:

.controls{
    width:25px;
    float:right;
    bottom: 200px;
    right: 155px;
    position:absolute;
}

Wrap the video and the controls in a div that has position relative applied and that will create a stacking context for the absolutely placed child and will therefore be consistent between browers. (Note that “float” and absolute positioning are mutually exclusive and absolute positioning wins out and float is ignored.)

Put the controls in a list and not bare anchors and never use breaks to make space. Just apply the correct margin to the bottom of the list as required and it will be exact cross browser.


        [B]<div id="video">[/B]
            <div id="ytapiplayer"> You need Flash player 8+ and JavaScript enabled to view this video. </div>
            <script type="text/javascript">
// <![CDATA[
    var params = { allowScriptAccess: "always", bgcolor: "#cccccc", allowFullScreen: "true", wmode: "transparent" };
    var atts = { id: "sosPetsPlayer" };
    swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer", "ytapiplayer", "625", "469", "8", null, null, params, atts);
//]]>
</script>
           [B] <ul class="controls">
                <li><a href="javascript:void(0);" onclick="play();"><img src="http://sospets.brinkster.net/newsite/images/play.png" alt="" /></a></li>
                <li> <a href="javascript:void(0);" onclick="pause();"><img src="http://sospets.brinkster.net/newsite/images/pause.png" alt="" /></a></li>
                <li><a href="javascript:void(0);" onclick="stop();"><img src="http://sospets.brinkster.net/newsite/images/stop.png" alt="" /></a></li>
            </ul>[/B]
        
[B]</div>[/B]



#video {
    width:100%;
    position:relative;
}
#video ul.controls {
    width:25px;
    top: 175px;
    right: 120px;
    position:absolute;
    list-style:none;
    margin:0;
}
#video ul.controls li {
    margin:0 0 20px;
    list-style:none;
}


thanks, works, but is there some way to give list-style inside just to the first li? i tried to give it class=“first” and…

.right ul .first {
    list-style-type: none;
    list-style-position:inside;
}

didn’t work out

Place the class on the ul and then you can address all the children through that class also if required.


.right ul.newclass,
.right ul.newclass li{
    list-style-type: none;
    list-style-position:inside;
}

Don’t use the same class that you are using somewhere else on a different type of element as that makes it really awkward to keep track. (Usually just set list-style on the ul and the list will inherit. I’ve duplicated it above because you have previously applied styles directly to the list element and IE won’t change unless you again address the list element and not the ul.)

Remember also that lists have default padding/margin that varies between browsers so you need to set them to zero and then just set exactly what you need. The room for a bullet is accomplished with a left margin on the ul (or left padding).

I usually remove all margin and padding from lists to start with and then only apply it when needed as most of the times lists don’t have bullets.

ul{
margin:0;
padding:0;
list-style:none;
}

Note that nearly all elements have default margins and you need to control them if you want them to be the same cross browser. Most browsers use a top and bottom margin on elements like headings and p elements and uls but IE7 and under only apply a bottom margin. Therefore to be consistent you need to set the margin you want and all browsers will be the same.

im going to need alot of help here …do u mean putting images on top of each other or something like that? if yes then some1 already told me that in the past but i have no clue on how to achieve that.

The last example on this page shows how to apply a background image on rollover to a foreground image. You could even just use opacity to get a [URL=“http://www.pmob.co.uk/temp/disroll-opacity.htm”]similar effect and just use the same image.

Just remember to put all those images in a list structure. It is not only more accessible but much easier to see the code when formatted nicely.

hey,

when i used ur solution with the 100% height, ppl with small resolution cant scroll down for some reason… thats why i changed to 797px but if thats wrong too then i tried to take the body height to 100% and leave the rest at 797px (i want all the pages have the same size and not every page in a different size…as it would be with height 100% as far as i know)

Before i go to the rest of the solutions u gave, i got a problem, i just noticed in IE 6 the right side of the page is all at the bottom, what is causing this?

u can see that here :
http://sospets.brinkster.net/newsite/

thanks.

Hi,

I believe I’ve addressed these issue in previous code :slight_smile:

The columns have dropped in iE6 because you have overstated the width with too much margin.

Change the margins to this.


.left, .right {
    width:457px;
   [B] margin:20px 0 20px 0;
}[/B]
.right {
    float:right;
    [B]margin:20px 20px 20px 0;[/B]
}


Ie6 will always try and stretch elements if you overstate them which can break the layout unlike other browsers that ignore anything that doesn’t fit and just let it basically stick out.

You’ve also broken the IE inline-block hack because you combined them into a comma separated rule which means that you break ie6 and 7 at the same time. They must be separate because they are rules that feed code to ie6 and ie7 via separate mechanisms. If combined the rule fails.

They should be like this:


* html #mdogs li {display:inline}
*+html #mdogs li {display:inline;}
* html #header #nav ul{display:inline}/* ie6 hack to get inline-block effect*/
*+html #header #nav ul{display:inline}/* ie7 hack to get inline-block effect*/


The rules must also follow in the stylesheet after the original inline-block rule or they still wont work.

Regarding the height of the layout then you should never fix the height but its ok to use a min-height. However a min-height of 979px is nonsense and you should use a min-height of the browsers viewport which is 100%. This means that people with small screens can still scroll to see the content but people with large screens will get a background all the way to the bottom.

No sites are ever the same height and it would be a fruitless and pointless exercise to try and make every page the same height unless it was a small site with virtually no real content.

The content should normally dictate the height but as users don’t like short pages they usually use the 100% high method so that on small pages the screen fills the viewport.

In the code I originally gave you there was a rule missing to allow IE6 to scroll and it was this:


* html  #wrapper-split,
* html #wrapper{
height:99%;
overflow:visible;
}/* ie6 treats height as min-height*/ 


Here it is in place in the old original code I gave you.


<!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>&#1488;&#1505;.&#1488;&#1493;.&#1488;&#1505; &#1495;&#1497;&#1493;&#1514; &#1488;&#1513;&#1511;&#1500;&#1493;&#1503;</title>
<meta name="description" content="&#1488;&#1505;.&#1488;&#1493;.&#1488;&#1505; &#1495;&#1497;&#1493;&#1514; &#1488;&#1513;&#1511;&#1500;&#1493;&#1503;" />
<meta name="keywords" content="S.O.S,SOS,&#1488;&#1505;.&#1488;&#1493;.&#1488;&#1505;,&#1495;&#1497;&#1493;&#1514;,&#1488;&#1513;&#1511;&#1500;&#1493;&#1503;,&#1495;&#1514;&#1493;&#1500;&#1497;&#1501;,&#1499;&#1500;&#1489;&#1497;&#1501;,&#1488;&#1497;&#1502;&#1493;&#1509;,&#1514;&#1512;&#1493;&#1502;&#1493;&#1514;,donate,ashkelon,pets,adopt,&#1506;&#1502;&#1493;&#1514;&#1492;,ashqelon" />
<link href="default.css" rel="stylesheet" type="text/css" />
<script src="http://sospets.brinkster.net/newsite/http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<style type="text/css">
html, body, address, blockquote, div, form, fieldset, caption, h1, h2, h3, h4, h5, h6, hr, ul, ol, ul, li, table, tr, td, th, p, img {
    margin: 0;
    padding: 0;
}
ul, ol, li {
    list-style-type: none;
}
img, fieldset {
    border: none;
}
html, body {
    height: 100%;
}
body {
    margin:0;
    background: #99CCFF;
    color: #484848;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100.01%;
}
#wrapper, #wrapper-split {
    width: 994px;
    min-height: 99%;
    margin:0 auto 0;
    position: relative;
    top:3px;
    z-index: 1;
    overflow: hidden;
    background: #FFF;
    border-left:2px solid #257310;
    border-right:2px solid #257310;
}
#wrapper-split {
    background: #FFF url(http://sospets.brinkster.net/newsite/images/split_bg.gif);
}
* html  #wrapper-split,
* html  #wrapper{
    height:99%;
 overflow:visible;
}/* ie6 treats height as min-height*/ 
#header {
    width: 994px;
    padding-top: 150px;
    position: relative;
    z-index: 100;
    background: url(http://sospets.brinkster.net/newsite/images/hd.jpg) no-repeat;
    border-top:2px solid #257310;
}
#header #nav {
    width: 994px;
    background: url(http://sospets.brinkster.net/newsite/images/nav.gif) repeat-x;
    overflow: hidden;
    text-align:center;
}
#header #nav ul {display: inline-block;}
* html #header #nav ul{display:inline}/* ie6 hack to get inline-block effect*/
*+html #header #nav ul{display:inline}/* ie7 hack to get inline-block effect*/

#header #nav ul li {
    float: left;
    position: relative;
}
#header #nav ul li a, #header #nav ul li a.last {
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    display: inline-block;
    background: url(http://sospets.brinkster.net/newsite/images/nav_line.gif) right center no-repeat;
    text-decoration: none;
    color: #FFF;
}
#header #nav ul li a.last {
    background: none;
}
#header #nav ul li a:hover, #header #nav ul li a:focus {
    color: #000;
}
.content, .left, .right {
    width: 954px;
    min-height: 100px;
    margin: 20px;
    float: left;
    text-align: right;
    direction: rtl;
    display:inline;/* ie6 double margin fix*/
}
.left, .right {
    width: 457px;
}
.right {
    float: right;
}
.content h1, .left h1, .right h1 {
    display: block;
    font-size: 180%;
    color: #0000ff;
    padding-bottom: 15px;
    font-family:"Times New Roman", Times, serif;
}
.content h2, .left h2, .right h2 {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-weight: normal;
    line-height: 1;
}
.right h3 {
    margin: 0;
    padding: 0;
    font-size: 140%;
    font-weight: bold;
    line-height: 1;
}
.animals img {
    margin: 5px auto;
    display: block;
    clear: both;
}
.left img, .right img {
    margin: 5px auto;
    display: inline-block;
    clear: both;
}
.right h1 + h2 + h3 + img {
    margin-top: 5px;
}
.mdogs {
    width:142px;
    height:142px;
    padding-right:1px;
    padding-left:1px;
}
.right ul {
    width: 225px;
    margin-bottom: 30px;
    display: inline-block;
    float: right;
    text-align: right;
    direction: rtl;
}
.right ul h1 {
    font-size: 160%;
    font-weight: bold;
    padding-bottom: 5px;
    color: #484848 !important;
}
.right ul li {
    list-style-type: disc;
    font-weight: bold;
    list-style-position: inside;
}
.right ul li a {

    color: #484848;
    text-decoration: none;
}
.right ul li a:hover, .right ul li a:focus {
    color: #FF8040;
}
.right ul.lastul {
    width: 190px;
    float: left;
}
.ltr {
    direction: ltr;
    text-align: left;
}
.rtl {
    direction: rtl;
    text-align: right;
}
.center {
    direction: rtl;
    text-align: center;
}
a:link, a:visited {
    color:#484848;
}
a:hover, a:focus {
    color:#FF8040;
}
.content a, .right a, .left a {
    font-weight:bold;
    text-decoration:none;
}
#border{
    clear:both;
    background:#257310;
    height:3px;
     overflow:hidden;
    width: 998px;
    margin:0 auto 0;
    position:relative;
    z-index:2;
}
</style>
</head>
<body>
<div id="wrapper-split">
    <div id="header">
        <div id="nav">
            <ul>
                <li><a href="english.asp">About us</a></li>
                <li><a href="aboutus.asp">&#1506;&#1500; &#1492;&#1506;&#1502;&#1493;&#1514;&#1492;</a></li>
                <li><a href="volunteer.asp">&#1492;&#1514;&#1504;&#1491;&#1489;&#1493;&#1514;</a></li>
                <li><a href="donations.asp">&#1514;&#1512;&#1493;&#1502;&#1493;&#1514;</a></li>
                <li><a href="links.asp">&#1511;&#1497;&#1513;&#1493;&#1512;&#1497;&#1501;</a></li>
                <li><a href="gallery.asp">&#1490;&#1500;&#1512;&#1497;&#1492;</a></li>
                <li><a href="adopted.asp">&#1502;&#1510;&#1488;&#1493; &#1489;&#1497;&#1514;</a></li>
                <li><a href="cats.asp">&#1488;&#1502;&#1509; &#1495;&#1514;&#1493;&#1500;</a></li>
                <li><a href="dogs.asp">&#1488;&#1502;&#1509; &#1499;&#1500;&#1489;</a></li>
                <li><a class="last"  href="index.asp">&#1491;&#1507; &#1492;&#1489;&#1497;&#1514;</a></li>
            </ul>
        </div>
    </div>
    <div class="left center">
        <h1>&#1497;&#1493;&#1501; &#1492;&#1488;&#1497;&#1502;&#1493;&#1509; &#1492;&#1489;&#1488;</h1>
        <h2>&#1513;&#1489;&#1514; &#1492;- 18/12/2010<br />
            &#1489;&#1497;&#1503; &#1492;&#1513;&#1506;&#1493;&#1514; 11:00 - 13:00, &#1502;&#1513;&#1514;&#1500;&#1514; &#1495;&#1494;&#1511;&#1497;&#1492;, &#1488;&#1513;&#1511;&#1500;&#1493;&#1503;</h2>
        <br />
        &#1502;&#1508;&#1514; &#1492;&#1490;&#1506;&#1492; (&#1502;&#1513;&#1514;&#1500;&#1514; &#1495;&#1494;&#1511;&#1497;&#1492;): <img src="http://sospets.brinkster.net/newsite/images/map.gif" alt="" /> </div>
    <div class="right center">
        <h1>&#1499;&#1500;&#1489;&#1497; &#1492;&#1495;&#1493;&#1491;&#1513;</h1>
        <h3>&#1502;&#1493;&#1511;&#1492;</h3>
        <img class="mdogs" src="http://sospets.brinkster.net/newsite/images/moca.jpg" alt="" /> <br />
        <br />
        <ul>
            <h1>&#1510;&#1512;&#1493; &#1511;&#1513;&#1512;</h1>
            <li>050-8254227</li>
            <li><a href="mailto:sosashkelon@gmail.com">sosashkelon@gmail.com</a></li>
            <li><a href="http://www.facebook.com/group.php?gid=6742471593">&#1488;&#1504;&#1495;&#1504;&#1493; &#1489;&#1508;&#1497;&#1497;&#1505;&#1489;&#1493;&#1511;</a></li>
        </ul>
        <ul class="lastul">
            <h1>&#1513;&#1493;&#1493;&#1492; &#1499;&#1504;&#1497;&#1505;&#1492;</h1>
            <li><a href="stories.asp">&#1502;&#1488;&#1502;&#1512;&#1497;&#1501;</a></li>
            <li><a href="vids.asp">&#1505;&#1512;&#1496;&#1493;&#1504;&#1497;&#1501;</a></li>
            <li><a href="gallery.asp">&#1490;&#1500;&#1512;&#1497;&#1492;</a></li>
        </ul>
        <h1>&#1495;&#1491;&#1513;&#1493;&#1514; &#1492;&#1488;&#1514;&#1512;</h1>
        <h2>&#1488;&#1497;&#1503; &#1495;&#1491;&#1513;&#1493;&#1514;</h2>
    </div>
</div>
<div id="border"></div>
<script type="text/javascript">
    _uacct = "UA-1867581-6";
    urchinTracker();
</script>
</body>
</html>

Hope that helps :slight_smile:

Hey,

Thanks paul for the answers, the problems are solved :slight_smile:

u are also right about making the heights 100% instead of a fixed height :slight_smile:

in IE 6 the lists on the right side went down a line, so i added this to solve it

  • html .right ul {display:inline;}

i’ve also added all of ur previous solutions and they work good :slight_smile:

and also i saw from some of ur other posts that u recommanded using table-layout:fixed; if i used a fixed width for a table to speed it up, added it too, if there’s any other nice tips like those i’d like to know them :slight_smile:

now in the homepage in the UL where the month dogs are, there’s no left border, what’s causing this? i tried to decrease the right/left padding/margin to get it solved but it didn’t, seems like its a problem only in IE 8, also in the adoption tables there’s no left inner border (of the left side TD)

regarding this :

The last example on this page shows how to apply a background image on rollover to a foreground image. You could even just use opacity to get a similar effect and just use the same image.

Just remember to put all those images in a list structure. It is not only more accessible but much easier to see the code when formatted nicely.

i don’t think its possible, since my website gets images/infos from the database, and this example requires using the images as background in the CSS file.
the only way i can think of to do that is maybe using inline CSS, what do u think?

[QUOTE=ulthane;4765095]Hey,

now in the homepage in the UL where the month dogs are, there’s no left border, what’s causing this? i tried to decrease the right/left padding/margin to get it solved but it didn’t, seems like its a problem only in IE 8, also in the adoption tables there’s no left inner border (of the left side TD)

It looks like an IE8 bug with the rtl on the parent. Adding position:relative to #mdogs seems to fix it.


#mdogs{position:relative}

i don’t think its possible, since my website gets images/infos from the database, and this example requires using the images as background in the CSS file.
the only way i can think of to do that is maybe using inline CSS, what do u think?

If it’s managed by your database then perhaps think about using an unobtrusive JS instead of all that inline javascript. The JS forum could help with that.

You could load both images into the html at the start and then hide one and show the other one withh css but the second image would need a class added to it to identify it as the rollover.

Or Just use a faded rollover like my example which uses only one image.

It looks like an IE8 bug with the rtl on the parent. Adding position:relative to #mdogs seems to fix it.

it dodn’t work but i just changed the dir of the #Mdogs to LTR and it worked :slight_smile:

If it’s managed by your database then perhaps think about using an unobtrusive JS instead of all that inline javascript. The JS forum could help with that.

You could load both images into the html at the start and then hide one and show the other one withh css but the second image would need a class added to it to identify it as the rollover.

Or Just use a faded rollover like my example which uses only one image.

yeah i liked the faded rollover too, but how does that solves my problem with CSS excactly? i see u still use CSS for ur images

also why in IE 7 the lists in the homepage below of the images dont have disc? all other versions of IE and other browsers got it.

Yes that would do it as well but my fix did work as I have it running here locally with no problems but never mind.

yeah i liked the faded rollover too, but how does that solves my problem with CSS excactly? i see u still use CSS for ur images

You can just apply the filter to the image itself. Only one image needs to be in the html and no javascript needed. You could use a grayscale filter for IE rather than the faded effect (others get opacity).


<!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=iso-8859-1" />
<title>Disjointed Rollover</title>
<style type="text/css">
.outer {
    float:left;
    margin:0;
    padding:0;
    list-style:none;
    text-align:center;
}
.outer li {
    float:left;
    margin:0 5px 0 0;
    padding:0;
    list-style:none;
    text-align:center;
    border:1px solid #000;
}
.outer li a {
    position:relative;
    text-align:center;
    display:block;
    border-top:15px solid red;
    padding:2px;
    background:#fff;
}
.outer li a img {
    -ms-filter:'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';/* ie8*/
     /*opacity for IE5+*/
     filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    /*opacity for older Mozilla browsers*/
  -moz-opacity: 0.3;
    /*opacity for newer mozilla/safari*/
  opacity: 0.3;
    border:none;
}
.outer li a:hover img {
    -ms-filter: "Alpha(Opacity=100)";/* ie8*/
    /*opacity for IE5+*/
  filter: alpha(opacity=100);
    /*opacity for older Mozilla browsers*/
  -moz-opacity: 1.0;
    /*opacity for mozilla/safari*/
  opacity: 1.0;
}
.outer li a:hover {
    visibility:visible
}
</style>
</head>
<body>
<h1>Disjointed rollover</h1>
<p>IE5.5 - IE8 Plus most other modern browsers .</p>
<ul class="outer">
    <li><a href="#"><img src="images/zimg1.jpg" alt="test image" /></a></li>
    <li><a href="#"><img src="images/zimg2.jpg" alt="test image" /></a></li>
    <li><a href="#"><img src="images/zimg3.jpg" alt="test image" /></a></li>
    <li><a href="#"><img src="images/zimg4.jpg" alt="test image" /></a></li>
    <li><a href="#"><img src="images/zimg5.jpg" alt="test image" /></a></li>
</ul>
</body>
</html>


also why in IE 7 the lists in the homepage below of the images dont have disc? all other versions of IE and other browsers got it.

I couldn’t see an easy fix other than setting the bullet to inside for ie7.

e.g.


*+html .right ul.firstul,
*+html .right ul.lastul{
    list-style:inside
}


Yes that would do it as well but my fix did work as I have it running here locally with no problems but never mind.

Well dunno why it didn’t work for me then, but for the tables it does work.

I couldn’t see an easy fix other than setting the bullet to inside for ie7.

works, thanks :slight_smile:

You can just apply the filter to the image itself. Only one image needs to be in the html and no javascript needed. You could use a grayscale filter for IE rather than the faded effect (others get opacity).

really nice thing! but requires lots of fixes it seems :wink:

  1. in general, there’s no need of the red bar (i’d like to keep the boxover.js), what lines do i need to remove?
  2. well, if i use opacity for some pages then ill just use it for all (it also looks better) so i removed the lines for the grayscale and added :
filter:Alpha(Opacity=30);-ms-filter:"Alpha(Opacity=30)"
  1. in IE the boxes for the images are in place but the images themselfs are in the right side of the page…
    4)in chrome/FF there’s no onmouseover effect
  2. in opera the videos jumping down a line after each image
  3. the controls have now moved up in IE 7 only, how do i fix that? *edit: oops, they also went up on FF and chrome

thanks for ur help :slight_smile:
u can look at the vids page now to see the updated version of it (+css)
http://sospets.brinkster.net/newsite/vids.asp

The video needs to have clear:both added as you placed floated content above it. However, previously you had the images as inline-block and not floated so I’ve returned the inline-block but in the new structure below.

Everything else seems to be working in all the browsers you mentioned.


[B].outer {
    margin:0 0 15px;
    padding:0;
    list-style:none;
    text-align:center;
    width:100%;
}
.outer li {
 display:-moz-inline-block;
    display:inline-block;
    margin:0 2px 5px 0;
    padding:0;
    list-style:none;
    text-align:center;
}
* html .outer li {display:inline}
*+html .outer li{display:inline;}
.outer li a {
    position:relative;
    text-align:center;
    display:block;
    padding:2px;
    background:#fff;
    border:1px solid #000;
}
* html .outer li a{display:inline-block}
*+html .outer li a{zoom:1.0}
.outer li a img {
    filter:Alpha(Opacity=30);
    -ms-filter:"Alpha(Opacity=30)";
    -moz-opacity:0.3;
    opacity:0.3;
    border:none;
}
.outer li a:hover img {
    -ms-filter: "Alpha(Opacity=100)";
    filter:alpha(opacity=100);
    -moz-opacity:1.0;
    opacity:1.0;
}
.outer li a:hover {
    visibility:visible;
}
#video {
    width:100%;
    position:relative;
    clear:both;
}[/B]

Full working page:


<!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>&#1488;&#1505;.&#1488;&#1493;.&#1488;&#1505; &#1495;&#1497;&#1493;&#1514; &#1488;&#1513;&#1511;&#1500;&#1493;&#1503; - &#1505;&#1512;&#1496;&#1493;&#1504;&#1497;&#1501;</title>
<meta name="description" content="&#1488;&#1505;.&#1488;&#1493;.&#1488;&#1505; &#1495;&#1497;&#1493;&#1514; &#1488;&#1513;&#1511;&#1500;&#1493;&#1503;" />
<meta name="keywords" content="S.O.S,SOS,&#1488;&#1505;.&#1488;&#1493;.&#1488;&#1505;,&#1495;&#1497;&#1493;&#1514;,&#1488;&#1513;&#1511;&#1500;&#1493;&#1503;,&#1495;&#1514;&#1493;&#1500;&#1497;&#1501;,&#1499;&#1500;&#1489;&#1497;&#1501;,&#1488;&#1497;&#1502;&#1493;&#1509;,&#1514;&#1512;&#1493;&#1502;&#1493;&#1514;,donate,ashkelon,pets,adopt,&#1506;&#1502;&#1493;&#1514;&#1492;,ashqelon" />
<link href="default.css" rel="stylesheet" type="text/css" />
<script src="http://www.google.com/jsapi"></script>
<script>google.load("swfobject", "2.1");</script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<style>
/* General */
html, body, div, form, fieldset, h1, h2, h3, h4, h5, h6, hr, ul, ol, li, table, tr, td, th, p, img {
    margin:0;
    padding:0;
}
ul, ol, li {
    list-style-type:none;
}
img, fieldset, table {
    border:none;
}
html, body {
    height:100%;
}
/* Wrapper */
body {
    background:#99CCFF;
    color:#484848;
    font-family:Arial, Helvetica, sans-serif;
    font-size:100.01%;
}
#wrapper, #wrapper-split {
    width:994px;
    min-height:99%;
    margin:3px auto;
    position:relative;
    z-index:1;
    overflow:hidden;
    background:#FFF;
    border:2px solid #257310;
}
#wrapper-split {
    background:#FFF url(http://sospets.brinkster.net/newsite/images/split_bg.gif);
}
* html #wrapper-split, * html #wrapper {
    height:99%;
    overflow:visible;
}
/* Header & Nav */
#header {
    width:994px;
    padding-top:150px;
    position:relative;
    z-index:100;
    background:url(http://sospets.brinkster.net/newsite/images/hd.jpg) no-repeat;
}
#header #nav {
    width:994px;
    background:url(http://sospets.brinkster.net/newsite/images/nav.gif) repeat-x;
    overflow:hidden;
    text-align:center;
}
#header #nav ul {
    display:-moz-inline-box;
    display:inline-block;
}
* html #header #nav ul {
    display:inline;
}
*+html #header #nav ul {
    display:inline;
}
#header #nav ul li {
    float:left;
    position:relative;
}
#header #nav ul li a, #header #nav ul li a.last {
    height:40px;
    line-height:40px;
    padding:0 20px;
    display:inline-block;
    background:url(http://sospets.brinkster.net/newsite/images/nav_line.gif) right center no-repeat;
    text-decoration:none;
    color:#FFF;
}
#header #nav ul li a.last {
    background:none;
}
#header #nav ul li a:hover, #header #nav ul li a:focus {
    color:#000;
}
/* Left & Right & Content */
.content, .left, .right {
    width:954px;
    min-height:100px;
    margin:20px;
    float:left;
    text-align:right;
    direction:rtl;
    display:inline;
}
.left, .right {
    width:457px;
    margin: 20px 20px 20px 10px;
}
.right {
    float:right;
    margin:20px 20px 20px 10px;
}
.content h1, .left h1, .right h1 {
    display:block;
    font-size:180%;
    color:#0000ff;
    padding-bottom:15px;
    font-family:"Times New Roman", Times, serif;
}
.content h2, .left h2, .right h2 {
    font-size:100%;
    font-weight:normal;
    line-height:1;
}
h5 {
    display:block;
    padding-bottom:15px;
    font-family:"Times New Roman", Times, serif;
    color:#FF0000;
    font-size: 160%;
    font-weight:bold;
}
.left img, .right img {
    margin:5px auto;
    display:inline-block;
    clear:both;
}
.ltr {
    direction:ltr;
    text-align:left;
}
.rtl {
    direction:rtl;
    text-align:right;
}
.center {
    direction:rtl;
    text-align:center;
}
a:link, a:visited {
    color:#484848;
}
a:hover, a:focus {
    color:#FF8040;
}
.content a, .right a, .left a {
    font-weight:bold;
    text-decoration:none;
}
/* Month Dogs List */
#mdogs {
    width:99%;
    margin:0 auto 10px;
    padding:3px 2px 3px 2px;
    background:#BCC5E1;
    border:1px solid #000;
    list-style:none;
    text-align:center;
    font-family:arial;
    direction:ltr;
}
#mdogs li {
    display:-moz-inline-box;
    display:inline-block;
    vertical-align:top;
    margin:3px 2px 3px 2px;
    border:1px solid #000;
    font-weight:bold;
    list-style:none;
    text-align:center;
}
* html #mdogs li {
    display:inline;
}
*+html #mdogs li {
    display:inline;
}
#mdogs li a {
    float:left;
    padding:2px 1px 2px 1px;
    text-decoration:none;
    background:#FFF;
    color:#444;
}
#mdogs li a:hover {
    background:#CCC;
    color:#000;
}
#mdogs img {
    width:142px;
    height:142px;
}
#mdogs li, #mdogs li a {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}
#mdogs li a {
    border:1px solid #000;
    margin:-1px;
}
/* Contact us & worth entry & Website news */
.right ul {
    width:225px;
    margin-bottom:30px;
    margin-right:20px;
    display:inline-block;
    float:right;
    text-align:right;
    direction:rtl;
}
* html .right ul {
    display:inline;
}
.right ul li.first h1 {
    font-size:160%;
    font-weight:bold;
    padding-bottom:5px;
    color:#484848 !important;
}
.right ul li {
    list-style-type:disc;
}
.right ul.lastul {
    width:190px;
    float:left;
}
.right ul.lastul li, .right ul.firstul li {
    font-weight:bold;
}
.right ul li.first {
    list-style-type:none;
}
*+html .right ul.firstul, *+html .right ul.lastul {
    list-style:inside;
}
.right ul li a {
    color:#484848;
    text-decoration:none;
}
.right ul li a:hover, .right ul li a:focus {
    color:#FF8040;
}
/* All tables */
.content table {
    margin: 0 auto 10px;
    border:3px outset #267411;
}
.titles {
    background-color:#FFFF00;
}
/* Adoption tables */
.pets {
    width:520px;
    table-layout:fixed;
}
.petstd {
    color:#0066FF;
}
.pets h3 {
    color:#FF0000;
    font-weight:bold;
    font-size:100%;
    line-height:1;
}
.pets h4 {
    padding-bottom: 15px;
    font-weight:bold;
    font-size:120%;
    line-height:1;
}
.pets td {
    text-align:right;
    width:265px;
    border:1px solid #267411;
}
.pets td.lefttd {
    text-align:center;
    direction:ltr;
}
.pets img {
    width:260px;
    height:310px;
    margin:5px auto 5px auto;
}
/* Links Table */
.links {
    width:650px;
    table-layout:fixed;
    position:relative;
}
.links td, .links th {
    border:1px solid #267411;
    vertical-align:top;
}
/* Videos page */
[B].outer {
    margin:0 0 15px;
    padding:0;
    list-style:none;
    text-align:center;
    width:100%;
}
.outer li {
 display:-moz-inline-block;
    display:inline-block;
    margin:0 2px 5px 0;
    padding:0;
    list-style:none;
    text-align:center;
}
* html .outer li {display:inline}
*+html .outer li{display:inline;}
.outer li a {
    position:relative;
    text-align:center;
    display:block;
    padding:2px;
    background:#fff;
    border:1px solid #000;
}
* html .outer li a{display:inline-block}
*+html .outer li a{zoom:1.0}
.outer li a img {
    filter:Alpha(Opacity=30);
    -ms-filter:"Alpha(Opacity=30)";
    -moz-opacity:0.3;
    opacity:0.3;
    border:none;
}
.outer li a:hover img {
    -ms-filter: "Alpha(Opacity=100)";
    filter:alpha(opacity=100);
    -moz-opacity:1.0;
    opacity:1.0;
}
.outer li a:hover {
    visibility:visible;
}
#video {
    width:100%;
    position:relative;
    clear:both;
}[/B]
#video ul.controls {
    width:25px;
    top:175px;
    right:120px;
    position:absolute;
    list-style:none;
    margin:0;
}
#video ul.controls li {
    margin:0 0 20px;
    list-style:none;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <div id="nav">
            <ul>
                <li><a href="english.asp">About us</a></li>
                <li><a href="aboutus.asp">&#1506;&#1500; &#1492;&#1506;&#1502;&#1493;&#1514;&#1492;</a></li>
                <li><a href="volunteer.asp">&#1492;&#1514;&#1504;&#1491;&#1489;&#1493;&#1514;</a></li>
                <li><a href="donations.asp">&#1514;&#1512;&#1493;&#1502;&#1493;&#1514;</a></li>
                <li><a href="links.asp">&#1511;&#1497;&#1513;&#1493;&#1512;&#1497;&#1501;</a></li>
                <li><a href="gallery.asp">&#1490;&#1500;&#1512;&#1497;&#1492;</a></li>
                <li><a href="adopted.asp">&#1502;&#1510;&#1488;&#1493; &#1489;&#1497;&#1514;</a></li>
                <li><a href="cats.asp">&#1488;&#1502;&#1509; &#1495;&#1514;&#1493;&#1500;</a></li>
                <li><a href="dogs.asp">&#1488;&#1502;&#1509; &#1499;&#1500;&#1489;</a></li>
                <li><a class="last"  href="index.asp">&#1491;&#1507; &#1492;&#1489;&#1497;&#1514;</a></li>
            </ul>
        </div>
    </div>
    <div class="content center vids">
        <ul class="outer">
            <li><a title="header=[Pomeranians wanna go out!] body=[<b>Video Author:</b> nelliedana] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('cuayz8ueDHE&feature=related', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/defaultcaz9zy0k.jpg" alt="" /></a></li>
            <li><a title="header=[Eight Below Trailer] body=[<b>Video Author:</b> jessica0421] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('NXkoGlxVbLY', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/default[5][1].jpg" alt="" /></a></li>
            <li><a title="header=[Hatchi: A Dog's Tale - HD Trailer] body=[<b>Video Author:</b> SonyPicturesDVD] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('Y6U7mAnPtw4', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/default[9].jpg" alt="" /></a></li>
            <li><a title="header=[&#1492;&#1501; &#1494;&#1511;&#1493;&#1511;&#1497;&#1501; &#1500;&#1506;&#1494;&#1512;&#1514;&#1499;&#1501; &#1499;&#1491;&#1497; &#1500;&#1495;&#1497;&#1493;&#1514;...] body=[<b>Video Author:</b> MegDebora] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('JjjA5JKKG7Q', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/default[5].jpg" alt="" /></a></li>
            <li><a title="header=[&#1499;&#1500;&#1489;&#1497;&#1497;&#1492; &#1506;&#1497;&#1512;&#1493;&#1504;&#1497;&#1514; &#1488;&#1513;&#1511;&#1500;&#1493;&#1503;] body=[<b>Video Author:</b> MegDebora] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('M8A89auTdro', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/default[11].jpg" alt="" /></a></li>
            <li><a title="header=[&#1500;&#1488; &#1504;&#1493;&#1496;&#1513;&#1497;&#1501; &#1489;&#1504;&#1497; &#1502;&#1513;&#1508;&#1495;&#1492;!] body=[<b>Video Author:</b> MegDebora] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('dR6s5ae0634&feature=related', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/default[3][1].jpg" alt="" /></a></li>
            <li><a title="header=[Dazzle's Dazzling Tricks] body=[<b>Video Author:</b> KatsDogs] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('RmcTW_FgL_U', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/dazzle.jpg" alt="" /></a></li>
            <li><a title="header=[Dog Tricks for a Rainy Day] body=[<b>Video Author:</b> KatsDogs] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('A1KKfNQSEqg', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/rainy.jpg" alt="" /></a></li>
            <li><a title="header=[OK Go - White Knuckles - Official Video] body=[<b>Video Author:</b> OkGo] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('nHlJODYBLKs', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/okgo2.jpg" alt="" /></a></li>
            <li><a title="header=[To everyone who loves dogs] body=[<b>Video Author:</b> samoyedbg] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('4xOZmx4nRKU', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/love2.jpg" alt="" /></a></li>
            <li><a title="header=[&#1495;&#1497;&#1493;&#1514; &#1489;&#1491;&#1512;&#1493;&#1501;] body=[<b>Video Author:</b> MegDebora] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('RIFdKOJ7Stw&feature=related', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/south2.jpg" alt="" /></a></li>
            <li><a title="header=[&#1495;&#1497;&#1493;&#1514; &#1492;&#1491;&#1512;&#1493;&#1501; &#1494;&#1511;&#1493;&#1511;&#1493;&#1514; &#1500;&#1506;&#1494;&#1512;&#1514;&#1499;&#1501;] body=[<b>Video Author:</b> MegDebora] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('gxLXGxAweRU&feature=related', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/news2.jpg" alt="" /></a></li>
            <li><a title="header=[Marley and Me] body=[<b>Video Author:</b> HDtrailerHeaven] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('oIaYc3DNNX0', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/marley2.jpg" alt="" /></a></li>
            <li><a title="header=[Water Leak Problem] body=[<b>Video Author:</b> Tiggerific16] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('NIVsZRPx_Dw', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/water2.jpg" alt="" /></a></li>
            <li><a title="header=[An Engineer's Guide to Cats] body=[<b>Video Author:</b> klusmanp] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('mHXBL6bzAR4', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/guide2.jpg" alt="" /></a></li>
            <li><a title="header=[Lets see the Dog Whisperer do this!!] body=[<b>Video Author:</b> bltmic] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('jCnAjel02lM', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/belive2.jpg" alt="" /></a></li>
            <li><a title="header=[&#1489;&#1493;&#1488;&#1493; &#1500;&#1506;&#1513;&#1493;&#1514; &#1488;&#1514; &#1492;&#1492;&#1489;&#1491;&#1500; - Let's make a difference] body=[<b>Video Author:</b> BehindBarsIL] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('S0fCozUMl5g', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/vol2.jpg" alt="" /></a></li>
            <li><a title="header=[&#1502;&#1492; &#1488;&#1514;&#1492; &#1506;&#1493;&#1513;&#1492; &#1506;&#1501; &#1495;&#1502;&#1497;&#1513;&#1492; &#1513;&#1511;&#1500;&#1497;&#1501;?] body=[<b>Video Author:</b> MegDebora] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('18L2p5JdUNo', 0)"><img src="http://sospets.brinkster.net/newsite/photos/vidphotos/five[1].jpg" alt="" /></a></li>
        </ul>
        <div id="video">
            <div id="ytapiplayer"> You need Flash player 8+ and JavaScript enabled to view this video. </div>
            <script type="text/javascript">
// <![CDATA[
                var params = { allowScriptAccess: "always", bgcolor: "#cccccc", allowFullScreen: "true", wmode: "transparent" };
                var atts = { id: "sosPetsPlayer" };
                swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer", "ytapiplayer", "625", "469", "8", null, null, params, atts);
//]]>
</script>
            <ul class="controls">
                <li><a href="javascript:void(0);" onclick="play();"><img src="http://sospets.brinkster.net/newsite/images/play.png" alt="" /></a></li>
                <li> <a href="javascript:void(0);" onclick="pause();"><img src="http://sospets.brinkster.net/newsite/images/pause.png" alt="" /></a></li>
                <li><a href="javascript:void(0);" onclick="stop();"><img src="http://sospets.brinkster.net/newsite/images/stop.png" alt="" /></a></li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
    function onYouTubePlayerReady(playerId) {
        ytplayer = document.getElementById("sosPetsPlayer");
        ytplayer.loadVideoById("cuayz8ueDHE&feature=related", 0);
    }
    function loadNewVideo(id, startSeconds) {
        if (ytplayer) {
            ytplayer.loadVideoById(id, parseInt(startSeconds));
        }
    }
    function play() {
        if (ytplayer) {
            ytplayer.playVideo();
        }
    }
    function pause() {
        if (ytplayer) {
            ytplayer.pauseVideo();
        }
    }
    function stop() {
        if (ytplayer) {
            ytplayer.stopVideo();
            ytplayer.stopVideo();
        }
    }
</script>
<script type="text/javascript" src="http://sospets.brinkster.net/newsite/boxover.js"></script>
<script type="text/javascript">
    _uacct = "UA-1867581-6";
    urchinTracker();
</script>
</body>
</html>


Thanks again for ur help :slight_smile:

there’s still a few more questions:

  1. how do i get the border appear around the image without any space? i mean on chrome for example there’s some white space between the bottom of the image and the border, while on IE it works fine.
  2. on FF 2 the videos are still messed
  3. regarding the boxover.js CSS part, i think that my CSS file overwrite the CSS the JS file has (in chrome and FF at least, rest got the text size required.) is there any way of changing this?

thanks for the help

Set the image to display:block and the 2px padding around it will be consistent.


.outer li a img {
    filter:Alpha(Opacity=30);
    -ms-filter:"Alpha(Opacity=30)";
    -moz-opacity:0.3;
    opacity:0.3;
    border:none;
    [B]display:block[/B]
}


If you don’t want any padding then remove the padding from the anchor and the border from the anchor and then apply the border to the image itself.

  1. on FF 2 the videos are still messed

Sorry there was a typo in my code. The ff2 rules only should be as follows: be:


.outer li {
  [B]display:-moz-inline-box;[/B]
    display:inline-block;
    margin:0 2px 5px 0;
    padding:0;
    list-style:none;
    text-align:center;
}


regarding the boxover.js CSS part, i think that my CSS file overwrite the CSS the JS file has (in chrome and FF at least, rest got the text size required.) is there any way of changing this?

thanks for the help

You’ve missed the px from the units on the dimensions. Units without dimensions are ignored.


function defHdrStyle() {
    dvHdr.innerHTML='';
    dvHdr.style.fontWeight='bold';
    dvHdr.style.width='260px';
    dvHdr.style.fontFamily='arial';
    dvHdr.style.border='2px solid #ffffff';
    dvHdr.style.padding=[B]'6px';[/B]
    dvHdr.style.fontSize[B]='11px';[/B]
    dvHdr.style.color='#911b00';
    dvHdr.style.background='#ffffff';
    dvHdr.style.filter='alpha(opacity=50)';
    dvHdr.style.opacity = '0.50';
}

function defBdyStyle() {
    dvBdy.style.borderBottom='1px solid #ffffff';
    dvBdy.style.borderLeft='1px solid #ffffff';
    dvBdy.style.borderRight='1px solid #ffffff';
    dvBdy.style.width='260px';
    dvBdy.style.fontFamily='arial';
    dvBdy.style.[B]fontSize='11px';[/B]
    dvBdy.style.[B]padding='6px';[/B]
    dvBdy.style.color='#ffffff';
    dvBdy.style.background='#000000';
    dvBdy.style.filter='alpha(opacity=50)';
    dvBdy.style.opacity = '0.50';
}



thank u ! :slight_smile: works great!

now probably the last thing i want to do regarding the video gallery page - Prev / Next buttons to scroll between videos, i want maximum 1 line (7 videos) in each slide (if thats how its called)

i got a nice script that does that on the JS forum on this topic:

i’ve cutted out all the unnessary parts of the CSS / HTML and now i would like some help to change it to fit my video gallery.

here is the CSS / HTML code (with 2 example images):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://separationadvice.net/"></base>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
#leader {
	margin-bottom:20px;
	position:relative;
}

#leader #holder {
	margin:0;
	padding:0;
	list-style:none;
}

#leader #holder li{
	display:none;
}

#leader #holder .active{
	display:block;
}

#leader .img{
	float:left;
	width:335px;
}
#leader .txt{
	float:left;
	width:320px;
	position:relative;
	height:242px;
}

*html #leader .txt{
	width:310px;
}
.prev, .next {
	position:absolute;
	bottom:0;
	right:0;
	
	display:block;
	height:23px;
	width:71px;
	
	background:url('/images/design/buttons.gif') no-repeat -72px 0;

}

.prev{
	right:76px;
	background-position:0;
}

.prev span, .next span{
	display:none;
}
</style>
</head>
<body>
<div id="leader"> 		
<ul id="holder"> 
<!--New Slide--> 
<li class="active" > 
<div class="img"> 
<img 	src="/images/design/hp/hp_mainImage.jpg" class='imgleft' /> 
</div> 
<div class="txt"> 
<div class='movie_buttons'><a href='#' class='prev'><span>Prev</span></a><a href='#' class='next'><span>Next</span></a></div>					
</div> 
</li> 		
<!--New Slide--> 
<li> 
<div class="img"> 
<img 	src="/images/userfiles/images/hp/separation.jpg" class='imgleft' /> 
</div> 
<div class="txt"> 
<div class='movie_buttons'><a href='#' class='prev'><span>Prev</span></a><a href='#' class='next'><span>Next</span></a></div>						
</div>
</li> 
</ul> 
</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="/js/slideshow.js" type="text/javascript"></script>
</body>
</html>

thanks for the help :slight_smile:

Are you talking about this page?

If you mean the images at the top that we’ve been styling all this time then you would have been better to have addressed this at the start because most of those slideshows script have their own coding requirements.

You’d be better off picking a ready made one from here:

I’m out now until tomorrow so will leave you to play around with it.:wink:

oh noes,

i thought about saying that but there were so many problems i had i didn’t want to add more …

don’t feel like changing the whole thing again xD

isn’t there any similar script that goes together with the current page i got now?

on the script i gave above i just thought we might give the class .active to the UL instead of each li tag, then each UL will appear in a seperate page or something like that.

i just looked in the JS file aswell and i think that it could be editable

(function($){
			var showSlide = function(slide){
		        	$(slide).siblings('.active').hide().removeClass('active');
		        	$(slide).fadeIn().addClass('active');	        	
		    };
		        
		     var getSlide = function(){
		        	var nextSlide, i;
		        	for(i=0; i < $('#holder li').length; i++) {
						if($('#holder li').eq(i).attr('class').indexOf('active') > -1){ 
							if( $('#holder li').length ===  i + 1 ){
								nextSlide = 0;
							}else{
								nextSlide = i + 1;
							}
						}
					}
					return $('#holder li').eq(nextSlide);
		        }
		        
		     var getPrevSlide = function(){
					var nextSlide, i;
		        	for(i=0; i < $('#holder li').length; i++) {
						if($('#holder li').eq(i).attr('class').indexOf('active') > -1){ 
							if( $('#holder li').length ===  i - 1 ){
								nextSlide = $('#holder li').length;
							}else{
								nextSlide = i - 1;
							}
						}
					}
					return $('#holder li').eq(nextSlide);
		      }
			
			var slideShow = setInterval(function() {				
				showSlide(getSlide());
            }, 12000);
            $("#leader").hover(function() {
                clearInterval(slideShow);
            }, function() {
            	clearInterval(slideShow);
				slideShow = setInterval(function() {
					showSlide(getSlide());
	            }, 6000);
            });
            
            $('.next').click(function(){
               	clearInterval(slideShow);
            	showSlide(getSlide());
              	return false;          	
            });
            
             $('.prev').click(function(){
            	clearInterval(slideShow);
            	showSlide(getPrevSlide());
            	return false;
            });

	})(jQuery);

however i’ll wait for u to come back and we’ll see how we’ll finish this, for now i’ll try to do some editing and see where that gets me.

Hey,

ok i’ve decided to use the CSS solution given to me in the JS forum,
however its still need alot of fixes and changes for the different browsers.

  1. can i make the scroll bar appear on the right side on all of the browsers?
  2. can i remove the bottom scroll bar (since its not needed.) ?
  3. FF2 always shows the page messed up on first load, only after refreshing it becomes fine, why? on IE browsers it is messed up aswell.

thanks for the help

new updated page is here :
http://sospets.brinkster.net/newsite/vids.asp

Note * on chrome it is currently working perfect.

Hi,

1)You would need to change the direction back to ltr for that element to move the scrollbar back.

2)You can use overflow-x:hidden which will hide it in IE and other modern browsers. Ie6/7 need position:relative on the overflow element also.


.center .circle {
    width:100%;
    height:198px;
    overflow:auto;
   [B] position:relative;
    overflow-x:hidden;[/B]
    margin-bottom:5px;
[B]    direction:ltr;[/B]
}


3)FF2 has a display bug (as have many others) and when you insert replaced content such as images you must also place the width and height attributes in the html otherwise the browser doesn’t know how much space to allocate (which only happens once the image has loaded but the page has already been drawn by then and must adjust or break).

e.g.


<img src="http://sospets.brinkster.net/newsite/photos/vidphotos/defaultcaz9zy0k.jpg" alt=""[B] width="120" height="90" [/B]/>