CSS conflict?!

Status
Not open for further replies.
S

sticker

New Member
Hey all,

I'm a bit of a novice when it comes to CSS, I'm manipulating a template for a friends site, and I'm adding a Visual lightbox gallery, I have all the relative files where they shoudl be...

I have used this gallery software many many times without issue,

I think there may be a CSS Style conflict between the embedded style in the template and the added code for the gallery:

Would someone mind looking at it and let me know any suggestions!

As I said, I'm fairly poor at CSS!

Thanks in advance!

Code: 
<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Student Accomadation</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="css/IE6.css" media="screen" />
    <![endif]-->
    <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.1.1.js"></script>
    <script type="text/javascript" src="js/smooth.pack.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#sliding').cycle({ 
                fx:     'scrollDown', 
                easing: 'bounceout', 
                delay:  -2000 
            });
        });
    </script>
    <script src="engine/js/prototype.js" type="text/javascript"></script>
        <script src="engine/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
        <script src="engine/js/lightbox.js" type="text/javascript"></script>

        <style>
            .gallery {
                zoom:1;
                width:auto;                
            }
            .gallery a {
                display:block;
                float:left;
                margin:5px;
                opacity:0.87;
                text-align:center;
            }
            .gallery a:hover {
                opacity:1;
            }
            .gallery a img {
                border:none;
                display:block;
            }
            .gallery a#vlightbox{display:none}
        </style>
    <style type="text/css">
<!--
.style1 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 16px;
}
.style2 {font-size: 12px}
.style4 {font-size: 24px}
.style5 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; }
.style6 {font-family: Georgia, "Times New Roman", Times, serif}
-->
    </style>
</head>

<body>
<!-- featured_bloc -->
<div id="featured_bloc">
    <div class="content">

    <div id="featured"><p><span class="inv">Featured</span></p></div>
    
    <a name="top" id="top"></a>
    
    </div>
</div>
<!-- /featured_bloc -->
        
<!-- top_nav -->
<div id="top_nav">
    <div class="content">
    
        <ul>
            <li><a href="index.html" title="Home">Home</a></li>
            <li><a href="facilities.html" title="Facilities">Facilities</a></li>
            <li><a href="rooms.html" title="Rooms">Rooms</a></li>
            <li><a href="form.html" title="Book Now" class="current">Book Now!</a></li>
            <li><a href="contact.html" title="Contact">Contact</a></li>
            <li><a href="map.html" title="Map">Map</a></li>
      </ul>
  </div>
</div>
<!-- /top_nav -->

<!-- name_part -->
<div id="name_part">
    <div class="content">
        
        <h1 id="logo"><a href="#" title="Dark Company"><span class="inv">Dark Company</span></a></h1>
        
        <div class="slogan">
            <p><br />
               Now taking bookings for the 2009-2010 Academic year </p>
      </div>
      
        
    </div>
</div>
<!-- /name_part -->

<!-- slider -->
<div id="slider">
  <div class="content">
      
    <!-- slider_content -->  
    
    <div id="sliding">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="840" height="260">
        <param name="movie" value="flash%20banner.swf" />
        <param name="quality" value="high" />
        <embed src="flash%20banner.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="840" height="260"></embed>
      </object>
</div>
    
    <!-- /slider_content -->
      
  </div>
</div>
<!-- /slider -->

<!-- main -->
<div id="main">
    <div class="content">
        
        <!-- contents of dynamic pages -->
        <div id="pages">
        
                <!-- Home -->
                <div id="home">
            <div>              
              <p class="style5"> Rooms Gallery</p>
                 <div class="gallery">
        <a href="./data/images/ViewfromPenthouse.jpg" rel="lightbox[sample]" title="View from Penthouse"><img src="./data/thumbnails/ViewfromPenthouse.png" /></a>
    <a href="./data/images/DSCF0174.jpg" rel="lightbox[sample]" title="DSCF0174"><img src="./data/thumbnails/DSCF0174.png" /></a>
    <a href="./data/images/DSCF0182.jpg" rel="lightbox[sample]" title="DSCF0182"><img src="./data/thumbnails/DSCF0182.png" /></a>
    <a href="./data/images/DSCF0183.jpg" rel="lightbox[sample]" title="DSCF0183"><img src="./data/thumbnails/DSCF0183.png" /></a>
    <a href="./data/images/DSCF0185.jpg" rel="lightbox[sample]" title="DSCF0185"><img src="./data/thumbnails/DSCF0185.png" /></a>
    <a href="./data/images/DSCF0186.jpg" rel="lightbox[sample]" title="DSCF0186"><img src="./data/thumbnails/DSCF0186.png" /></a>
    <a href="./data/images/DSCF0187.jpg" rel="lightbox[sample]" title="DSCF0187"><img src="./data/thumbnails/DSCF0187.png" /></a>
    <a href="./data/images/DSCF0188.jpg" rel="lightbox[sample]" title="DSCF0188"><img src="./data/thumbnails/DSCF0188.png" /></a>
    <a href="./data/images/DSCF0191.jpg" rel="lightbox[sample]" title="DSCF0191"><img src="./data/thumbnails/DSCF0191.png" /></a>
    <a href="./data/images/LaundryFacilities.jpg" rel="lightbox[sample]" title="Laundry Facilities"><img src="./data/thumbnails/LaundryFacilities.png" /></a>
    <a href="./data/images/PenthouseBalcony.jpg" rel="lightbox[sample]" title="Penthouse Balcony"><img src="./data/thumbnails/PenthouseBalcony.png" /></a>
    <a href="./data/images/ShortWalktoRCSI.jpg" rel="lightbox[sample]" title="Short Walk to  RCSI"><img src="./data/thumbnails/ShortWalktoRCSI.png" /></a>
    <a id="vlightbox" href="http://visuallightbox.com/">Online Photo Album Sharing by VisualLightbox.com</a>
    </div>
              
                 <p>&nbsp;</p>
                 <p>&nbsp;</p>
                 <p><br />
                 </p>
                 <p>&nbsp;</p>
                 </div>
            <div class="blue_line_big"></div>
            
            
            <div id="tri_bloc">
              <div class="tri_bloc_one">
                <h4>Available Facilities...</h4>
                <img src="images/tri_bloc_one.png" width="236" height="64" alt=" " />
                <p>Aungier Street residence is an apartment style complex. There are four floors within the residence. Each floor can accommodate between three and six students. All the rooms are ensuite. Each floor has a separate state of the art kitchen/living/dining area with sun terrace. <br />
                    <a href="facilities.html">Click here for more</a> </p>
              </div>
              <div class="tri_bloc_two">
                <h4>Book Now!</h4>
                <img src="images/tri_bloc_two.png" width="236" height="64" alt=" " />
                <p>We are currently taking bookings for the 2009 / 2010 academic year. The Aungier Street Student Residence is in high demaind, so book early to avoid dissapointment. You can call, email or book via our online form.<br />
                    <br />
                    <strong><a href="form.html">Click here for more </a> </strong> </p>
              </div>
              <div class="tri_bloc_tri">
                <h4>Where Are We?</h4>
                <img src="images/tri_bloc_tri.png" width="236" height="64" alt=" " />
                <p>Our residence is only 5 minutes away from Dublins premier shopping district. (Grafton Street) For anyone [url=http://www.homestaypenang.net/]travel[/url]ling to Dublin it is the perfect location only minutes away from Dublin 's central shopping district. Everything offered by Dublin 's historical culture can also be reached with ease. <br />
                    <strong><a href="map.html">Click here for more</a></strong> </p>
              </div>
              <br class="clear" />
            </div>
        </div>
        <!-- /Home -->
        </div>
        <!-- /contents of dynamic pages -->
        
        <div id="go_top">
            <a href="#top" title="Go to the top"><span>Go to the top</span></a>
        </div>
        
    </div>
</div>
<!-- /main -->


<!-- footer -->
<div id="footer">
    <div class="content">
        
        <div class="copyright">
             <p><br />
            </p>
      </div>
        
      <div class="footer_slogan">
            <h1 class="style4"><br />
               <em>The perfect place for the city student...</em> </h1>
      </div>
        
        <br class="clear" />
        
    </div>
</div>
<!-- /footer -->
</body>
</html>
 
php.allstar

php.allstar

New Member
Hi,

Any chance you can upload the script to a location on the web so we can debug it when the html is compiled?

There doesn't seem to be a selector present in the code to initiate the lighbox unless you have it stored in one of your javascript files themselves.

You know...

Code: 
$("#gallery").lightbox({... etc...

Thats how its done in jQuery but I see you have the scriptaculous library installed aswell but I have absolutely no experience in that so for all I know, it could be causing a conflict alright.

Which gallery plugin are you using? They should have some documentation on how to initiate it...
 
S

sticker

New Member
BIG EDIT: For whatever reason, I turned on the PC this mornng, the the ruddy thing works! I can'yt explain it... very wierd!

Thanks for your help all the same - much appreciated!

Disregard the post below.

____________________________________________________________


Apologies - you're quite right re: seperating the code:

In terms of the scriptaculous library - I didn't know I had that installed!! I egnerally work with Dreamweaver, minipulating the design and let the code look after itself! (sorry!)

In terms of the gallery script, it's Visual lightbox.

See amended code below with Lightbox code marked:

Code: 
<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Aungier Street</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="css/IE6.css" media="screen" />
    <![endif]-->
    <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.1.1.js"></script>
    <script type="text/javascript" src="js/smooth.pack.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#sliding').cycle({ 
                fx:     'scrollDown', 
                easing: 'bounceout', 
                delay:  -2000 
            });
        });
    </script>
    <style type="text/css">
<!--
.style2 {font-size: 12px}
.style4 {font-size: 24px}
.style5 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; }
-->
    </style>
    
    <!-- Start VisualLightBox.com HEAD section -->
                <link rel="stylesheet" href="engine/css/lightbox.css" type="text/css" media="screen" />
        <script src="engine/js/prototype.js" type="text/javascript"></script>
        <script src="engine/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
        <script src="engine/js/lightbox.js" type="text/javascript"></script>

        <style>
            .gallery {
                zoom:1;
                width:auto;                
            }
            .gallery a {
                display:block;
                float:left;
                margin:5px;
                opacity:0.87;
                text-align:center;
            }
            .gallery a:hover {
                opacity:1;
            }
            .gallery a img {
                border:none;
                display:block;
            }
            .gallery a#vlightbox{display:none}
        </style>
        <!-- End VisualLightBox.com HEAD section -->
    
    
</head>

<body>
<!-- featured_bloc -->
<div id="featured_bloc">
    <div class="content">

    <div id="featured"><p><span class="inv">Featured</span></p></div>
    
    <a name="top" id="top"></a>
    
    </div>
</div>
<!-- /featured_bloc -->
        
<!-- top_nav -->
<div id="top_nav">
    <div class="content">
    
        <ul>
          <li><a href="index.html" title="Home">Home</a></li>
            <li><a href="facilities.html" title="Facilities" >Facilities</a></li>
            <li><a href="rooms.html" title="Rooms">Rooms</a></li>
            <li><a href="form.html" title="Book Now" >Book Now!</a></li>
            <li><a href="contact.html" title="Contact" >Contact</a></li>
            <li><a href="map.html" title="Map" class="current">Map</a></li>
      </ul>
  </div>
</div>
<!-- /top_nav -->

<!-- name_part -->
<div id="name_part">
    <div class="content">
        
        <h1 id="logo"><a href="#" title="Dark Company"><span class="inv">Dark Company</span></a></h1>
        
        <div class="slogan">
            <p><br />
               Now taking bookings for the 2009-2010 Academic year </p>
      </div>
      
        
    </div>
</div>
<!-- /name_part -->

<!-- slider -->
<div id="slider">
  <div class="content">
      
    <!-- slider_content -->  
    
    <div id="sliding">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="840" height="260">
        <param name="movie" value="flash%20banner.swf" />
        <param name="quality" value="high" />
        <embed src="flash%20banner.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="840" height="260"></embed>
      </object>
</div>
    
    <!-- /slider_content -->
      
  </div>
</div>
<!-- /slider -->

<!-- main -->
<div id="main">
    <div class="content">
        
        <!-- contents of dynamic pages -->
        <div id="pages">
        
                <!-- Home -->
        <div id="home">
             <div>              
              <p class="style5">Rooms
                <!-- Start VisualLightBox.com BODY section -->    
    </p>
              <div class="gallery">
        <a href="./data/images/ViewfromPenthouse.jpg" rel="lightbox[sample]" title="View from Penthouse"><img src="./data/thumbnails/ViewfromPenthouse.png" /></a>
    <a href="./data/images/DSCF0174.jpg" rel="lightbox[sample]" title="DSCF0174"><img src="./data/thumbnails/DSCF0174.png" /></a>
    <a href="./data/images/DSCF0182.jpg" rel="lightbox[sample]" title="DSCF0182"><img src="./data/thumbnails/DSCF0182.png" /></a>
    <a href="./data/images/DSCF0183.jpg" rel="lightbox[sample]" title="DSCF0183"><img src="./data/thumbnails/DSCF0183.png" /></a>
    <a href="./data/images/DSCF0185.jpg" rel="lightbox[sample]" title="DSCF0185"><img src="./data/thumbnails/DSCF0185.png" /></a>
    <a href="./data/images/DSCF0186.jpg" rel="lightbox[sample]" title="DSCF0186"><img src="./data/thumbnails/DSCF0186.png" /></a>
    <a href="./data/images/DSCF0187.jpg" rel="lightbox[sample]" title="DSCF0187"><img src="./data/thumbnails/DSCF0187.png" /></a>
    <a href="./data/images/DSCF0188.jpg" rel="lightbox[sample]" title="DSCF0188"><img src="./data/thumbnails/DSCF0188.png" /></a>
    <a href="./data/images/DSCF0191.jpg" rel="lightbox[sample]" title="DSCF0191"><img src="./data/thumbnails/DSCF0191.png" /></a>
    <a href="./data/images/LaundryFacilities.jpg" rel="lightbox[sample]" title="Laundry Facilities"><img src="./data/thumbnails/LaundryFacilities.png" /></a>
    <a href="./data/images/PenthouseBalcony.jpg" rel="lightbox[sample]" title="Penthouse Balcony"><img src="./data/thumbnails/PenthouseBalcony.png" /></a>
    <a href="./data/images/ShortWalktoRCSI.jpg" rel="lightbox[sample]" title="Short Walk to  RCSI"><img src="./data/thumbnails/ShortWalktoRCSI.png" /></a>

    <!--[if lte IE 6]><script src="engine/js/pngfix_vlb.js" type="text/javascript"></script><![endif]-->
    <a id="vlightbox" href="http://visuallightbox.com/">Online Photo Album Sharing by VisualLightbox.com</a>
    </div>
    <!-- End VisualLightBox.com BODY section -->
              <p align="center" class="style2">&nbsp;</p>
             </div>
             <div class="blue_line_big"></div>
            
            
            <div id="tri_bloc">
            
                <div class="tri_bloc_one">
                    <h4>Available Facilities...</h4>
                    <img src="http://www.irishwebmasterforum.com/images/tri_bloc_one.png" width="236" height="64" alt=" " />
                    <p>Aungier Street residence is an apartment style complex. There are four floors within the residence. Each floor can accommodate between three and six students. All the rooms are ensuite. Each floor has a separate state of the art kitchen/living/dining area with sun terrace. <br />
                    <a href="facilities.html">Click here for more</a>                    </p>
                </div>
            
                <div class="tri_bloc_two">
                    <h4>Book Now!</h4>
                    <img src="http://www.irishwebmasterforum.com/images/tri_bloc_two.png" width="236" height="64" alt=" " />
                    <p>We are currently taking bookings for the 2009 / 2010 academic year. The Aungier Street Student Residence is in high demaind, so book early to avoid dissapointment. You can call, email or book via our online form.<br />
                      <br />
                      <strong><a href="form.html">Click here for more
                    </a> </strong> </p>
              </div>
                 <div class="tri_bloc_tri">
                    <h4>Where Are We?</h4>
                <img src="http://www.irishwebmasterforum.com/images/tri_bloc_tri.png" width="236" height="64" alt=" " />
                    <p>Our residence is only 5 minutes away from Dublins premier shopping district. (Grafton Street) For anyone [url=http://www.homestaypenang.net/]travel[/url]ling to Dublin it is the perfect location only minutes away from Dublin 's central shopping district. Everything offered by Dublin 's historical culture can also be reached with ease. <br />
                    <strong><a href="map.html">Click here for more</a></strong>                    </p>
              </div>
                
                
            <br class="clear" />
            </div>
            
        </div>
        <!-- /Home -->
        </div>
        <!-- /contents of dynamic pages -->
        
        <div id="go_top">
            <a href="#top" title="Go to the top"><span>Go to the top</span></a>
        </div>
        
    </div>
</div>
<!-- /main -->


<!-- footer -->
<div id="footer">
    <div class="content">
        
        <div class="copyright">
            <p>&nbsp; </p>
      </div>
        
      <div class="footer_slogan">
            <h1 class="style4"><br />
               <em>The perfect place for the city student...</em> </h1>
      </div>
        
        <br class="clear" />
        
    </div>
</div>
<!-- /footer -->
</body>
</html>
Thanks!!
 
Status
Not open for further replies.
Top