#1
  1. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,650
    Rep Power
    171

    CSS not working when used externally!


    Hello;
    Long story short: CSS works only when used in the body and does not work when externally in a seperate css file. When you mouse over each hotelbox the border should glow.

    Below I have provided 2 examples:
    1 that works (when used internally) and
    2 that doesnt work ( when externally placed in a css file ).

    The class is called .build_div

    Thank you
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    first start by fixing your code

    I found this in the head section of your site, even worse it's an SQL query
    Code:
    <span title=""></span>
    
    <span title="SELECT
    			GROUP_CONCAT(allotments_new.status) AS AL,
    			GROUP_CONCAT(allotments_new.number_of_rooms) AS NR,
    			SUM(day_rate) AS TOTAL,
    			day_date,
    			packages.id AS PPIIDD ,
    			hotelname,
    			regionname,
    			places.name AS PLACENAME,
    			destinationname,
    			hotels.property_desc,
    			hotels.hotel_id AS HID,
    			room_rates.high AS ROOM_HIGH,
    			packages.low AS PLOW,
    			hotels.startype,
    			address1,
    			address2,
    			town,
    			postcode
    	FROM
    	allotments_new
    	INNER JOIN packages ON allotments_new.package_id = packages.id AND packages.status='active'
    	INNER JOIN hotels ON hotels.hotel_id=packages.hotel_id AND hotels.status='active'
    	INNER JOIN hotelrooms ON hotelrooms.room_id=packages.room_id AND hotelrooms.status='active'
    	INNER JOIN room_rates ON room_rates.room_id = hotelrooms.room_id
    	INNER JOIN destinations ON destinations.destination_id = hotels.destination_id
    	INNER JOIN regions ON regions.region_id = hotels.region_id
    	
    	LEFT OUTER JOIN places ON places.id = hotels.places_id
    	WHERE
    	maximum_number_of_adults_and_children>='1'
    	AND	 *hotels.destination_id = '43' 
    	AND allotments_new.day_date >= '2013-01-31'
    	AND allotments_new.day_date < '2013-02-01'
    	AND allotments_new.day_rate > 0
    	AND allotments_new.status != 'n'
    	AND allotments_new.minimum_number_of_nights<=1
    	 AND 1 = '1' AND 1 = '1' AND 1 = '1' *AND 1 = '1' AND 1 = '1' AND 1=1 AND 1=1
    	GROUP BY PPIIDD
    	ORDER BY startype DESC, TOTAL
    	"></span>
    you even have multiple syntax errors in your CSS
    Last edited by jack13580; April 2nd, 2013 at 09:48 PM.
  4. #3
  5. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,650
    Rep Power
    171
    I dont use that page. That is the dead page connected to a dead database. That is not the page I need help with.
    Last edited by Kravvitz; April 3rd, 2013 at 09:43 AM. Reason: must we quote the whole post? :p
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    when I get a chance to look at this more I will because right now I am using my iPad and hovering doesn't work so when I get on a computer I will take a look at this
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    can you post a screen shot of this working on the page that does work so i know what your talking about?
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Dec 2004
    Posts
    2,969
    Rep Power
    374
    when i hover over both links, nothing happens (the NAME of the hotel does have a blue background) but the border doesnt "glow"
  12. #7
  13. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,650
    Rep Power
    171
    Originally Posted by jack13580
    can you post a screen shot of this working on the page that does work so i know what your talking about?
    Hello;

    This link shows a list of properties. The first one (with rate $369) has the mouse over it and so the border is glowing. The working page is here but at the moment I have the CSS in the <body> thats why I get this error.
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    You have several HTML-style comments in "nd_style.css". You need to replace them with CSS-style comments (aka C-style comments).

    The first step in debugging should always be making sure that your code (both HTML and CSS) is valid (in order to rule out any errors as the cause for the problem).
    http://jigsaw.w3.org/css-validator/ (Under "more options", make sure the "Profile" is set to "CSS level 3" and set "Vendor Extensions" to "Warnings".)
    Last edited by Kravvitz; April 4th, 2013 at 12:58 PM.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    what browser are you using? google chrome doesn't work for this, IE doesn't work for this, and safari doesn't work for this
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    well i figured out why its not working no matter what browser I use
    Code:
    	.build_div {  
    		-webkit-box-shadow: 1px 0px 4px #4195fc;
        	-moz-box-shadow: 1px 0px 4px #4195fc;
            box-shadow: 1px 0px 4px #4195fc;
    		border-radius:10px;
    		}
    removing that makes it work for me in all browsers except IE
  20. #11
  21. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,650
    Rep Power
    171
    Originally Posted by jack13580
    well i figured out why its not working no matter what browser I use
    Code:
    	.build_div {  
    		-webkit-box-shadow: 1px 0px 4px #4195fc;
        	-moz-box-shadow: 1px 0px 4px #4195fc;
            box-shadow: 1px 0px 4px #4195fc;
    		border-radius:10px;
    		}
    removing that makes it work for me in all browsers except IE
    From CSS or from HTML file? Because it is in both.
  22. #12
  23. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    In the nd_style.css line 1870
    Last edited by jack13580; April 5th, 2013 at 03:58 PM.
  24. #13
  25. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    since your doing the styling of .build_div inline, delete all instances of .build_div in nd_style.css except for any .build_div with a hover reference in that style sheet
  26. #14
  27. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,650
    Rep Power
    171
    Originally Posted by jack13580
    In the nd_style.css line 1870
    Thanks Jack. I removed it. Does it look fine at your end?
    Cheers
  28. #15
  29. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    It works now

IMN logo majestic logo threadwatch logo seochat tools logo