5 replies [Last post]
korky
korky's picture
Offline
newbie
Londonderry
Last seen: 7 years 9 weeks ago
Londonderry
Timezone: GMT+1
Joined: 2013-07-24
Posts: 3
Points: 4

Hi, this is my first time on here, as I've only recently been learning CSS.

I'm creating a website for a friend and for posting a YouTube video, I decided to create a TV screen style surround for the video itself (much like the styling of Apple's YouTube app icon for iPhone/iPad/etc). In doing this I used Photoshop and created 6 different slices. The video is positioned in the 5th slice.

The problem I'm having is that when I'm looking at the image in Dreamweaver, the TV screen appears. When I view the webpage itself, it disappears. I cannot figure out what is going wrong.

I have included two images so maybe anyone who looks at it will understand better.

This is how the images appear in Dreamweaver. As you can see, the images are set in different DIV tags. They fit perfectly and are visible. The grey part in the middle is the frame from YouTube where the video will appear.

However when I view the site, the TV parts around the video disappear and I am only able to view the video itself from YouTube.

My CSS is like this (below) incremented for each of the 6 parts that make up the whole image (obviously the height for images 4, 5 & 6 change).

#1 {
background-image:url(images/video/images/images/videoscreen_01.png);
width:49px;
height:37px;
float:left;
}

I have absolutely no idea what's going wrong, as everything seems to be fine. My CSS document is linked correctly as it also contains the other styling data for the rest of the page. Can anyone offer any type of advice?

Thank you!! Smile

surajnaikin
surajnaikin's picture
Offline
Enthusiast
india
Last seen: 5 years 31 weeks ago
india
Timezone: GMT+5.5
Joined: 2007-06-09
Posts: 111
Points: 72

IDs can not start with a number

hello korky,

The ID can not start with a number, if that is the way you've done. Dreamweaver may interpret that but Browser may not. Try creating the ID with a name. [updated - I mean characters not integers]

korky
korky's picture
Offline
newbie
Londonderry
Last seen: 7 years 9 weeks ago
Londonderry
Timezone: GMT+1
Joined: 2013-07-24
Posts: 3
Points: 4

Thanks man, that worked

Thanks man, that worked great. I do have another slight problem, if you or anyone else can help...

The images ALMOST line up. There's a slight gap of about 1px. I've had to edit the images slightly as they weren't lining up, but now they will, except for that 1px gap.

The code for images 1, 2 & 3 (the top parts) are (where 01 is incremented)

#tv1 {
background-image:url(../../images/video/images/images/videoscreen_01.png);
width:50px;
height:40px;
float:left;
}

and the bottom images 4, 5, & 6 (where 04 is incremented)

#tv4 {
background-image:url(../../images/video/images/images/videoscreen_04.png);
width:50px;
height:230px;
float:left;
clear:inherit;
}

Should these line up correctly? The heights and widths here are to match the size of the images.

surajnaikin
surajnaikin's picture
Offline
Enthusiast
india
Last seen: 5 years 31 weeks ago
india
Timezone: GMT+5.5
Joined: 2007-06-09
Posts: 111
Points: 72

can be various reasons

There can be various reasons

1. The image may have transparent pixels in the bottom.
2. The height of the div element & the background may not match - background image may be smaller by 1px
3. Try overflow:hidden to the div - 1px may be pushed down due to some content inside
4. The following or next div may be pushed 1px down due to iframe.
5. Or Its background image has transparent pixels up-top.

If you could post an URL or the code can help to resolve this issue.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 32 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

One other possibility

It may be the img element's default vertical alignment of baseline. See That mysterious gap under images. Simple fix? Set img {vertical-align: top;} /*or bottom*/

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

korky
korky's picture
Offline
newbie
Londonderry
Last seen: 7 years 9 weeks ago
Londonderry
Timezone: GMT+1
Joined: 2013-07-24
Posts: 3
Points: 4

Thanks for your help again

Thanks for your help again surajnaikin
I started editing the image and then reverted back to the original image and I must have made mistakes in the CSS code. I really can't find what I had done wrong originally, most likely one of the things you listed above, but it's fixed now.

Thanks again for all your help, it is very much appreciated Smile