Width/Height Displaying Weird

**Deadweight** · 09-11-2014, 03:43 PM

So i updated my page but i am having a weird problem in http://cgs.thebcelements.com/

First i have an id

Code:

#gallery1 { border:1px solid black; height:250px; width:300px; background-color:black;}

When i use jquery to get the width and/or height it displays at as w:1333 and h:0. (It is show at the bottom). I do not know why that is happening. Any ideas would be great.

**Deadweight** · 09-11-2014, 05:21 PM

Update. If you click on the link (EG HOME) again and reload the page it works. I dont know why....

**molendijk** · 09-11-2014, 06:27 PM

Your comment declarations are incorrect. Remove the commented lines and see what happens.

**Deadweight** · 09-11-2014, 06:35 PM

Comments are fine. It how i load in my js and css. I can delete all code but the box itself and it still says the width of the page. Somehow i need to delay this:

Code:

$(function(){
	
	create_slide_gallery({
		id:'gallery1',
		images: ['images/physical/adapters.jpg','images/physical/ethernetcable.jpg','images/physical/keyboard.jpg','images/physical/mouse.gif'],
		info: ['Adapter','Ethernet Cable','Keyboards','Mouse'],
		first: 0,
		arrows: ['images/back.png','images/forward.png'] // Left, Right (for images use the html code)
	})
	
})

I think i need to change it from $(function(){}) to something else

**molendijk** · 09-11-2014, 08:39 PM

The WC3 Validation Service gives 11 html errors, among which invalid comment declaration: found character "<" outside comment but inside comment declaration. So that may spoil things.
If the errors are not the source of the problem, you might try to put your scripts immediately before the closing body tag. The reason I think this might help is that the problem disappears after a page refresh.

**Deadweight** · 09-11-2014, 09:20 PM

Yeah but i dont want to do that xD its soooo ugly xD
So i am trying to think of another way to delay the function from happening

**molendijk** · 09-11-2014, 09:40 PM

Did you try to move the functions to the end of the body section?
You could also try defer.

**molendijk** · 09-11-2014, 10:41 PM

Your problem is caused by incorrect comment declarations, as I already mentioned. This works for me, and it validates too:

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bits &amp; Bytes</title>

<script type="text/javascript" src="http://cgs.thebcelements.com/js/jquery.js"></script>
<script type="text/javascript" src="http://cgs.thebcelements.com/js/headappend.js"></script>

<link href="http://cgs.thebcelements.com/css/main.css" rel="stylesheet"/>
<link href="http://cgs.thebcelements.com/css/slide.css" rel="stylesheet"/>
<script type="text/javascript" src="http://cgs.thebcelements.com/js/navbar.js"></script>
<script type="text/javascript" src="http://cgs.thebcelements.com/js/timebar.js"></script>
<script type="text/javascript" src="http://cgs.thebcelements.com/js/imgslider.js"></script>
<script type="text/javascript" src="http://cgs.thebcelements.com/js/slide.js"></script>

</head>
<body>

<!-- Creates the Nav bar with jquery/js -->
<div id="nav_main"></div>

<div id="header_data" class="outer_body">
<div class="top">Bits &amp; Bytes</div>
<img src="http://cgs.thebcelements.com/images/background.jpg" alt="bla" class="wait"  />
<div class="bottom" id="DateAndTime"></div>
</div>

<div class="outer_body" id="index_info">
<div id="miniabout">
<strong>Bits &amp; Bytes</strong> has been around for since 1980. We have the best customer service for many years! If you are not happy then we will not be happy! Bits &amp; Bytes offers excellent pricing for Windows and Mac computers. We will also repair your computer or install your software for you.
</div>

<div id="gallery2"></div>
    	
</div>
<div id="gallery1"></div>
</body>
</html>

**Deadweight** · 09-11-2014, 10:53 PM

I deleted all the comments. Same thing occurs. Like i said. The css file isnt being read before the JavaScript file collects the data.

**Deadweight** · 09-11-2014, 11:01 PM

Umm i think this is incorrect but to make it work i had to do something like this:

Code:

$(function(){
	create_slide_gallery({
		id:'gallery1',
		images: ['images/physical/adapters.jpg','images/physical/ethernetcable.jpg','images/physical/keyboard.jpg','images/physical/mouse.gif'],
		info: ['Adapter','Ethernet Cable','Keyboards','Mouse'],
		first: 0,
		arrows: ['images/back.png','images/forward.png'] // Left, Right (for images use the html code)
	})
})

$(window).load(function() {
	create_slide_gallery({
		id:'gallery1',
		images: ['images/physical/adapters.jpg','images/physical/ethernetcable.jpg','images/physical/keyboard.jpg','images/physical/mouse.gif'],
		info: ['Adapter','Ethernet Cable','Keyboards','Mouse'],
		first: 0,
		arrows: ['images/back.png','images/forward.png'] // Left, Right (for images use the html code)
	})	
})

However, it only works chrome and firefox. Not IE (unless i refresh the page)