CSS - An Image With Errors?

I need someone to look at my site and see why it doesnt work right in internet explorer, and looks fine in mozilla and google chrome. I am sure it has something to do with a .css file somewhere.

glockpartsrus.com/products.php?cat=46 for an example.

Am putting the finishing touches to my site but in firefox 8 the top of the side menu there is a space and login part is to low as well.

My site is www.carswapped.co.uk

Hi, I am hoping that someone can help me out. My css validates but my professor still wants me to find what I am missing.

I know that the colored scrollbars and pngfix won't validate but my prof said it's ok to leave that without being valid. He said what he doesn't like is elsewhere.

Can anyone tell me what he may be talking about since he won't help me figure it out? I have spent hours trying to figure this out and my book is no help.

I'd really appreciate it.


html,body{margin: 0; padding:0;}

body{font: 76% Verdana, Arial, Helvetica, sans-serif;
background: Black;
background-image: url(../images/back.png);
background-repeat: repeat-x;}

html {scrollbar-face-color: #22222F;
scrollbar-shadow-color: #CC2204;
scrollbar-highlight-color: #CC2204;
scrollbar-3dlight-color: #CC2204;
scrollbar-darkshadow-color: #22222F;
scrollbar-track-color: #CC2204;
scrollbar-arrow-color: #CC2204;}

p{margin:0 10px 10px}
a{display:block;color: Yellow;padding:10px}
div#content p{line-height:1.4}

#logo {
display:block;
width: 100%;
text-align: right;
height: 130px;
position: relative;
top: 21px;

}

div#left{float:left;width:260px; background: transparent url(../images/menuback.png) no-repeat; behavior: url(iepngfix.htc)}
div#extra{float:left;}


.menu{
float:left;
text-align: center;
margin: 40px 0px 0px 0px;
padding-left: 28px;

}

.menu ul{
list-style-type: none;
margin: 0;
padding: 0;
border-bottom: 2px ridge #8c8100;
}

.menu li a{
font: bolder 16px Verdana, Arial, Helvetica, sans-serif;
display: block;
background: transparent url(../images/menb.png) no-repeat 0 100%;
width:188px;
height: 41px;
padding: 2px 0 4px 0px;
line-height: 41px;
text-decoration: none;
}

.menu li a:link, .menu li a:visited {
color: #CCBB04;
}

.menu li a:hover{
color: #286736;
background-position: -190px 100%;
}

.menu li a.selected{
color: #E7E800;
background-position: 0px 100%;
}



div#footer p{margin:0;padding: 5px 10px 0px 100px; font-weight: bold; }
div#header{height:307px;margin: 0px 0px 0px 0px; background: transparent url(../images/henk.png) no-repeat; text-align: right;}
div#wrapper{float:right;width:100%;margin-left:-260px}
div#content{margin-left:260px; background: url(../images/sk.png) no-repeat center; background-position: top; behavior: url(iepngfix.htc)}
div#extra{float:left;clear:left;padding-left: 34px; }
div#footer{clear:both;width:100%; background: transparent; text-align: center;}

edit:figured out

na

http://www.gr2b.com

All my browsers load the full website perfect. However, when I try to load the website in IE 4.0 - 6+, I get an error with the navigation where it double lines the navigation rather than a single line AND it adds additional padding.

Is there anyone with some experience that can aid me?


UPDATE: Another major problem I am noticing with Internet Explorer below 7, is that when you pass your mouse over the "Product Title" the entire page flashes white.

Please offer assistance!

Hi,
I'm just diving in to CSS layout and gradually working through CSS IE bugs. I'm having so much trouble sorting this one out though!

I've got a fairly standard menu using UL and LI in a left hand container. Everything displays nicely in Firefox 1.5 and looks ok - initially in IE6 until you hover over the menus. In Firefox they change background colour and font colour as I want, however in ie6 when you hover the background doesn't change colour and the menu all squishes up together!

Where am I going wrong??

Here's the CSS for the elements:

Code:

#leftcol{
	float:left;
	padding: 0;
	width: 170px;
	background-color: #FFFFFF;
	
}

#SectionNav {
	background-image:url(../assets/images/sectionNavBack.png);
	background-repeat: no-repeat;
	background-color: transparent;
	width:150px;
	height: 323px;
	left: 0px;
	top: 0px;
	padding-left: 0px;
	display: block;
	
}

#SectionNav ul{
	margin-top: 0px;
	padding-top: 25px;
	
	background-color: transparent;
	list-style-type: none;
	font-size: 80%;
	list-style-image: url(../assets/images/ballBullet.png);
	display: block;
}

#SectionNav ul li a{
	color: #FFFFFF;
	display: block;
	margin-top: -5px;
	padding-botton: 10px;
	margin-bottom: 10px;
	text-decoration: none;
	height: 21px;
	background-image: url(../assets/images/SectionBtnBack.png);
	font-weight: 200;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

#SectionNav ul li a:hover, #SectionNav ul li a:focus { 
	background-color: #0000FF;
	color: #FFCC00;

}

Here's the HTML:
Code:

<div id="leftcol">
<div id="SectionNav">
  	<ul>
		<li><a href="index.php">Home</a></li
		>
		<li><a href="#">News</a></li
		>
		<li><a href="#">Handicaps</a></li
		>
		<li><a href="#">Leaderboard</a></li
		>
		<li><a href="#">Competions</a></li
		>
		<li><a href="#">Media</a></li
		>
		<li><a href="#">Courses</a></li
		>
		<li><a href="#">Links</a></li
		>
	</ul>
  </div>
<!--End of SectionNav-->
</div>

I've played around with the various margins etc but no joy.

The page can be found at:

http://beta.sussexeast-gs.org.uk/index.php

Excuse the colours they're there to help me with layout for now.

Thanks

for some reason, i cant seem to use a:visted... here, i'll show ya.. the red text below is where i am having the issue... all the other a attributes that are applied the same way work perfect...
Code:

  A:link { text-decoration: none; color:#FFFFFF}
  A:visited { text-decoration: none; color:#FFFFFF}
  A:hover { text-decoration: underline; color:#FFFFFF}  
   
  .coversystems {
  text-align:center;
  font-weight:bold;
  font-family:"Times New Roman", Times, serif;
  font-size:16px;
  color:#FFF;
  margin:20px 0px 0px 0px;
  }
  	.coversystems a:link{font-weight:bold;}
  	.coversystems a:hover{font-weight:bold;}
  	 .coversystems a:visted{font-weight:bold;}  
  

Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!)

Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text.

What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at:
www.markmcm.co.uk/test/test.html

The CSS is as as follows:

Code:

/*
 *  Page Stylesheet 
 */
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #eaeaea;
  border:0; margin:0; padding:0;
  height: 100%;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#container {
	margin-left: auto;
	margin-right: auto;
   	min-height: 100%;
	width: 936px;
}
* html #container {
	height: 100%;
}
#content {
	float:left;
	position: relative;
	height: 528px;
	width: 936px;
	z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
	position: absolute;
	float: left;
	display: block;
	width: 312px;
	height: 176px;
}
.miniscreen1 {
	top: 0;
	left: 0;
}
.miniscreen2 {
	top:0;
	left: 312px;
}
.miniscreen3 {
	top: 0;
	left: 624px;
}
.miniscreen4 {
	left: 0;
	top:176px;
}
.miniscreen5 {
	left: 312px;
	top:176px;
}
.miniscreen6 {
	left: 624px;
	top:176px;
}
.miniscreen7 {
	left: 0;
	top:352px;
}
.miniscreen8 {
	left: 312px;
	top:352px;
}
.miniscreen9 {
	left: 624px;
	top:352px;
}
.info {
	height: 30px;
	top:3px;
	left: 40px;
	width: 265px;
	float: left;
	position: absolute;
}
.infobar  {
	left:0px;
	position: absolute;
	top: 140px;
	width: 312px;
	height: 36px;
	outline: none;
	color:#000;
	background: url("data/infobar.png") no-repeat 0 0;
	z-index: 650;
}
.infobar:hover  { 
	background-position: 0 -36px;
	outline: none;
	color:#fff;
}
#infobar span {
	display: none;
	outline: none;
}
.clip_title {
	outline: none;
	font-size: 85%;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}
.clip_sub {
	outline: none;
	height: 13px;
	font-size: 80%;
	line-height: 13px;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}

And the HTML is:

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">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Test Page</title>
		<meta name="description" content=" " />
		<meta name="keywords" content=" " />
		<meta name="generator" content=" " />
		<link rel="stylesheet" type="text/css" href="page.css" media="screen" />
	</head>
<body>

<div id="container">

	<div id="content">
		<span class="miniscreen1">			
		<a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
					
		<span class="miniscreen2">
		<a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
		
		<span class="miniscreen3">
		<a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
			
		<span class="miniscreen4">
		<a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen5">
		<a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen6">
		<a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen7">
		<a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen8">
		<a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen9">
		<a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
				
	</div>
</div>
	
</body>
</html>

There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!)

Hi,

I have a question about setting up the Body background-image via a linked external stylesheet.

I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG.

When I embed the following in my index.html, I see the background show up:

** inside index.html file **
<BODY STYLE="background-image: url(test.JPG);"> blah </BODY>

BUT, when I define my background in the externally linked myStyle.css file, the background does not load:

** inside myStyle.css file **
BODY { background-image: url(test.JPG); }

** inside index.html file **
<LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css">
<BODY>
blah
</BODY>
</LINK>

Please help.

thanks!

Can someone please help me?

I am trying to get my left side column to meet my footer image... just like on this website:

newcastlegateshead.com

See how they side bar goes all the way down and meets the footer?

Mine has a one inch gap between the bottom of the column and the footer.

Does anyone know what they did to make it meet perfectly?Or the proper css code & where to put it? I've been trying to get this solved for dayyyssss

Thank you so much...

Trying to delete my post but no option to delete so just removing content.

On button on my website store on CSS but when user turn off "load image automatically" then images don't display.

Please show me how to fix it.
Thanks a lot.

I am using a single gif file as an image sprite and want to link the file name in another style sheet so i can reuse this sheet without having to have many copys of the style sheet with a different file names example:

Currently like this
Code:

#store{left:-200px;width:158px;}
#store{background:url('mred.gif') -150px -161px;}
#store a:hover{background: url('mred.gif') -150px 0;}
#fourms{left:0px;width:158px;}
#fourms{background:url('mred.gif') -304px -161px;}
#fourms a:hover{background: url('mred.gif') -304px 0;}

want like this
#home{left:-200px ;width:150px;}
#home{background:inherit;background-position: 0 -161px;}
#home a:hover{background-position: 0 0;}

with the background:url('mred.gif') specified in another style sheet once insted of repeating over the entire sheet.

effectively so i can just change the other external style sheet to change the gif file and keep this one the same.

HOW? possible?

Hi,

Instead of organising an image sprite as follows:

image image image
image image image

i'm wondering if there are any negative effects to organising the images in a linear fashion as follows

image image image image image image

I know that Flash will only render images that are a certain width or height but is there any such limitations when using css sprites?



Thanks