CSS - Css For A:hover Only Part Executing

hi,

is it possible to have a bg in a cell only to go half way accross the cell?

On my website I've a few CSS files that I call. Occasionally a page will load and some text won't properly format... It will be too big. I'll refresh and it will go back to the size it's supposed to be. It's not all the text, just here or there.

I've tried this on multiple computers and multiple browsers and it still happens only once in a while.

Anyone know what is going on? Is there any way to diagnose this? It SEEMS as if part of the file isn't loading, but that doesn't sound right.

Hi All,

I have my site that uses CSS, however at times I want certain parts of it to not use the CSS. Not whole pages, just a section of a page.

Is there anyway to remove all CSS formating in a section?

So eg:

<div style='none'>
Some HTML
</div>


TIA Charlie

Dear All,

I have a question -

Background : I used the E-book "designing without tables" and created a page with 2 columns. A 200 px column on the left for the links and the rest on the right for the data.

There is also a header column on the top with has main menu.

Question 1 : If there are 5 links on the left column, how can I link the pages such that when I click on a link on the left column..only the right column should refresh. Meaning, I want the left column to be static with the links and only the right column should be refreshed? Is it possible to do so using only CSS and HTML ?

Thanks in advance. Regards.

Hello

I have a small image. What I want to do is use the image as a background image, but only display a small section of that image and repeat that section over and over, depending on how much content is on top of the image. I hope I made that clear enough to understand.

I have the following code:

Code:

<style>
.vote {
background-image: url('images/vote.gif');
background-repeat: repeat-y;
background-position: 0 -45;
height: 50px;
width: 199px;
}
</style>

<div class="vote">
d<br /><br /><Br /><br /><BR /><BR /><br /><br /><br /><br />j
</div>

That code displays only part of the image, as I want it to, however, I do not know if it is possible to now repeat just that section of the image again and again.

I hope someone understands and can help.

Thanks

Hey guys, I missed a day of my XHTML class in college and he went over most of the CSS that day, I was sick with the flu and he said that day was the most important, so I'm lost, I need to "Remove any <b>, <i>, <u> and <font> tags and replace them with inline CSS code."

So i come up with something like this

<Style Type="css/text">
<B style="color:blue> This is my display text </b>
</style>

PLEASE HELP ME WITH THIS INLINE CSS! HELP! I'M LOSTTTT!

www.devwebsites.com

There is a little strip of lightened color on that part and I don't think its from the images at least..I can't for the life of me figure out what is causing it.

Thanks

Quick nagging question that's been bothering me for some time. Fortunately, I have a link to explain the problem.

If you go to our web page (link below), you will see that we have a DIV section on the left side of the page which displays a mini You Tube video, along with a few other buttons:

http://bit.ly/gL9sA8

The problem is that when you shrink the window, that particular div will shy away outside the bounds of the browser window. Is there anyway to not have it disappear, but at the same time, not have the main content overlap it in anyway.

In other words, how would you code the DIV tag so that the following two things happen:

1. It's always in view on the LEFT side of the webpage
2. The main DIV stops against it, and doesn't overlap it if resized

As you can see, if you shrink the size of the window, our main div area (div id: mainWrapper) is always going to be centered which is the most important thing. However, we want to have a left (or right) side area to display buttons like that.

Here is the current code for that left sided DIV column:

Code:

<div style="position:fixed; margin-left: -180px; top: 75px;">
// My html content for mini You Tube video & button is here
</div>

The problem is that if a person has a low resolution monitor, this left hand div is out of view and never seen.....or even worse, it's partially seen and not fully displayed because it's hiding outside the bounds of the window.

My goal: To have it fixed to either the outer LEFT or RIGHT side of the webpage, just along the edge of the mainWrapper as you see it now.

If I can clear anything up as to what I'm trying to explain, please let me know. I hope one of you awesome gurus can point me in the right direction!

I cannot post the site, since I am a new user, but I will try to explain the situation. I have several pictures which have 50% opacity. On hover, the picture becomes fully opaque. Additionally, every picture has a semi-transparent caption as an overlapping div. Chrome displays the situation correctly, however IE just cuts off the part of the picture underneath the div. So I am left with pictures that are cut off at the bottom.

The fading is done by jQuery.

Everything described above only happens to JPEGs, PNG-s don't have this problem.

Everything works fine in Chrome, but IE doesn't want to cooperate on this one.

I will try to select some of the relevant code:
The image:
Code:

<img width="150" height="150" src="xxx" class="portfolio-image" onmouseover="$('td#pitem_1').css('filter', 'alpha(opacity=60)');$('td#pitem_1').fadeTo(300, 1); $('#ptext_1').fadeTo(300, 0.8);" onmouseout="$('td#pitem_1').fadeTo(500, 0.5);$('#ptext_1').fadeTo(500, 0 );">

First css attribute is to address an IE bug where first fade doesn't happen.

#pitem_1 is the whole td containing the image and the caption div.
#ptext_1 is the caption.

Here's the CSS. Identifiers should be obvious.
Code:

  table.portfolio td{
    opacity: 0.5;
    filter: alpha(opacity = 50);
    -moz-opacity:0.5;
    background: #FFF;
  }
  img.portfolio-image{
  }
  div.portfolio-caption{
    margin-top: -23px;
    height: 10px;
    background: #000000;
    font-family: Verdana;
    font-size: 10px;
    padding: 5px;
    color: #FFF;
    z-index: 999999;
    opacity: 0;
    filter: alpha(opacity = 0);
    -moz-opacity:0;
  }

I'd appreciate all suggestions and tips.

Hi and thanks for the help so far Kravvitz. I checked my menu out on IE and got the following results (see screen captures below).

You can probably see the element doesn't seem to go to the edge of the dropdown. Because of this the next ul level is appearing right beside the highlighted area (as it would normally), but since it isn't going to the end of the 'row' it is resulting in overlapping!

Is there a way to make this work out in IE as well that you could recommend? Thanks.

hi,

I am fairly new to css and working on a website with a complete css layout for the first time, one I got from dreamweaver. I thought things were going great because I did all my testing in Firefox (like a good boy) but then I tried to test it in Internet Explorer 6 and alot if not all of my webpages have the text positioned at the bottom instead of the top of a page.

Here is a link:
http://www.jcstrategies.com/jeff/featured_listings.php


CSS CODE
-----------------------------------------------------------
/***********************************************/
/* emx_nav_left.css */
/* Use with template Halo_leftNav.html */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
background: #cccccc url(./images/bg_grad.jpg) fixed;
}

/******* hyperlink and anchor tag styles *******/

a:link, a:visited{
color: #005FA9;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

/************** header tag styles **************/

h1{
font: bold 120% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

h2{
font: bold 114% Arial,sans-serif;
color: #006699;
margin: 0px;
padding: 0px;
}

h3{
font: bold 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

h4{
font: 100% Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font: 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}


/*************** list tag styles ***************/

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

/********* form and related tag styles *********/

form {
margin: 0;
padding: 0;
}

label{
font: bold 1em Arial,sans-serif;
color: #334d55;
}

input{
font-family: Arial,sans-serif;
}

/***********************************************/
/* Layout Divs */
/***********************************************/
#pagecell1{
position:absolute;
top: 112px;
left: 2%;
right: 2%;
width:95.6%;
background-color: #ffffff;
}

#tl {
position:absolute;
top: -1px;
left: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}

#tr {
position:absolute;
top: -1px;
right: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}

#masthead{
position: absolute;
top: 0px;
left: 2%;
right: 2%;
width:95.6%;

}

#pageNav{
float: left;
width:178px;
padding: 0px;
background-color: #F5f7f7;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font: small Verdana,sans-serif;
}

#content{
padding: 5px 10px 5px 5px;
margin:0px 0px 0px 179px;
border-left: 1px solid #ccd2d2;
}

/***********************************************/
/* Component Divs */
/***********************************************/
#siteName{
margin: 0px;
padding: 16px 0px 8px 0px;
color: #ffffff;
font-weight: normal;
}

/************** utility styles *****************/

#utility{
font: 75% Verdana,sans-serif;
position: absolute;
top: 16px;
right: 0px;
color: #919999;
}

#utility a{
color: #ffffff;
}

#utility a:hover{
text-decoration: underline;
}

/************** pageName styles ****************/

#pageName{
padding: 0px 0px 14px 10px;
margin: 0px;
border-bottom:1px solid #ccd2d2;
}

#pageName h2{
font: bold 175% Arial,sans-serif;
color: #000000;
margin:0px;
padding: 0px;
}

#pageName img{
position: absolute;
top: 0px;
right: 6px;
padding: 0px;
margin: 0px;
}

/************* globalNav styles ****************/

#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image: url(./images/glbnav_background.gif);
}

#globalNav img{
margin-bottom: -4px;

}

#gnl {
position: absolute;
top: 0px;
left:0px;
}

#gnr {
position: absolute;
top: 0px;
right:0px;
}

#globalLink{
position: absolute;
top: 6px;
height: 22px;
min-width: 640px;
padding: 0px;
margin: 0px;
left: 10px;
z-index: 100;
}


a.glink, a.glink:visited{
font-size: small;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 2px 5px 4px 5px;
border-right: 1px solid #8FB8BC;
}

a.glink:hover{
background-image: url(./images/glblnav_selected.gif);
text-decoration: none;
}

.skipLinks {display: none;}

/************ subglobalNav styles **************/

.subglobalNav{
position: absolute;
top: 84px;
left: 0px;
/*width: 100%;*/
min-width: 640px;
height: 20px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #ffffff;
}

.subglobalNav a:link, .subglobalNav a:visited {
font-size: 80%;
color: #ffffff;
}

.subglobalNav a:hover{
color: #cccccc;
}

/*************** search styles *****************/

#search{
position: absolute;
top: 5px;
right: 10px;
z-index: 101;
}

#search input{
font-size: 70%;
margin: 0px 0px 0px 10px;
}

#search a:link, #search a:visited {
font-size: 80%;
font-weight: bold;

}

#search a:hover{
margin: 0px;
}


/************* breadCrumb styles ***************/

#breadCrumb{
padding: 5px 0px 5px 10px;
font: small Verdana,sans-serif;
color: #AAAAAA;
}

#breadCrumb a{
color: #AAAAAA;
}

#breadCrumb a:hover{
color: #005FA9;
text-decoration: underline;
}


/************** feature styles *****************/

.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
min-height: 200px;
height: 200px;
}
html>body .feature {height: auto;}

.feature h3{
font: bold 175% Arial,sans-serif;
color: #000000;
padding: 30px 0px 5px 0px;
}

.feature img{
float: left;
padding: 0px 10px 0px 0px;
}


/*************** story styles ******************/

.story {
padding: 10px 0px 0px 10px;
font-size: 80%;
}

.story h3{
font: bold 125% Arial,sans-serif;
color: #000000;
}

.story p {
padding: 0px 0px 10px 0px;
}

.story a.capsule{
font: bold 1em Arial,sans-serif;
color: #005FA9;
display:block;
padding-bottom: 5px;
}

.story a.capsule:hover{
text-decoration: underline;
}

td.storyLeft{
padding-right: 12px;
}


/************** siteInfo styles ****************/

#siteInfo{
clear: both;
border-top: 1px solid #cccccc;
font-size: small;
color: #cccccc;
padding: 10px 10px 10px 10px;
margin-top: 0px;
}

#siteInfo img{
padding: 4px 4px 4px 0px;
vertical-align: middle;
}


/************ sectionLinks styles **************/

#sectionLinks{
margin: 0px;
padding: 0px;

}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
border-bottom: 1px solid #cccccc;
}

#sectionLinks a:link, #sectionLinks a:visited {
display: block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
background-image: url(./images/bg_nav.jpg);
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #21536A;
}

#sectionLinks a:hover{
border-top: 1px solid #cccccc;
background-color: #DDEEFF;
background-image: none;
font-weight: bold;
text-decoration: none;
}


/************* relatedLinks styles **************/

.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
border-bottom: 1px solid #cccccc;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a{
display: block;
}


/************* relatedLinks2 styles **************/

.relatedLinks2{
margin: 0px;
padding: 10px 0px 10px 1px;
border-bottom: 1px solid #cccccc;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a{
display: block;
}


/**************** advert styles *****************/

#advert{
padding: 10px;
}

#advert img{
display: block;
}

/********************* end **********************/




ANY IDEAS????

Hi, i have a styling problem. The page looks well in normal view in IE and firefox but when you zoom in the page (Ctrl++) the menu bar part of the page gets displaced from its position (right and left corner). your help and guidance wil be much appreciated. The page is at dev.cddimensions. com . Plz try to zoom in and notice the menu bar.

I have tried firefox and IE, lastest versions and all works ok, but in Safari the top left and top right of the rounded purple border is not rounded like the other radius borders on the page which show correctly.

The attached image is what the left and right rounded purple border looks like, but can not figure out why it shows ok in Firefox but not Safari.

Can anyone see where I might be going wrong in trying to get this to work like other browsers show it ?


Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
body { border: 0em solid #000; background-color: #ddd; height: 100%; }
div { padding: 0em; margin: 0em; }
div.bodyContainer, div.header, div.footer { width: 60em; }
div.header { text-align: center; }
div.bodyContainer { text-align: center;	margin: 0 auto; }
div.left, div.right { width: 10em; border-bottom: 0.0625em dashed #CF8DEB;}
div.middle { width: 40em; margin: 0 auto; padding-left: 0.41em; border-bottom: 0.0625em dashed #CF8DEB;}
div.footer { text-align: center; }
div.bodyContainer, div.outer, div.left, div.right { background-color: #56D1AC; /* green */ }
div.bodyContainer, div.header, div.middle { border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
div.outer { display: block; }
div.left, div.middle, div.right { display: table-cell; }
div.middle { border-top: 0.3em solid purple;	border-right: 0.6em solid purple;	border-left: 0.6em solid purple; }
div.bodyContainer { /*background-color: pink;*/ }
div.middle {		background-color: lightblue; }
div.footer {		background-color: #ddd;  }
.clearfloat {			clear: both; }
.menu {	background: #6384DE; margin: 0em; text-align: center; font-size: 0.965em; font-family: Broadway; border: 0em solid #EDB6B6; padding: 0.5em 0em 0.313em 0em; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; } /*	3F65CC	*/
--></style>
</head>
<body onload="disableUpdateSubmit();">

<div class="bodyContainer">
	<div class="header">
		<!-- menu start -->
		<div class="menu"></div>
		<div class="clearfloat"></div>
		<!-- menu end -->
	</div>

			<div class="outer">

					<div class="left"><br></div>

					<div class="middle"><br>middle</div>
					<!-- middle end -->

					<div class="right">
						<!-- start of specials -->
						<div class="specials">SPECIAL OFFERS</div>
						<!-- end of specials -->
					<br class="clearfloat">
					</div>

			</div>

	<div class="footer"></div>

</div>

</body>
</html>

I am an art student, and I'm trying to construct my own portfolio site. I am, however, new to CSS, so I dont really know what I'm doing. I'm using Dreamweaver CS3.

I'm using a fixed 2 column template, with header and footer, and the left column as the side bar. Within the right column, I'm trying to make a scrollbar hovering near the top of the div, with clickable thumbnails of my work. Once the thumbnails are clicked on, a larger version of the image takes up the rest of the column.

Does anyone have any idea how to accomplsh this? Even my web design teacher's stumped with this one. I thought about using frames, but thats html...

Thanks for taking the time to read my question.

This works in FF but not IE6. What do I need to change to make it work

I have borders around my images which are links and I want the border color to change on hover

HTML
Code:

<a href="LisaClarkDesigns_About.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the About Lisa Clark Designs page." /></a>

CSS for container
Code:

img.ImgNav {
border: 1px solid #999999;
padding: 0px;
margin: 0px 10px 0px 10px;
width: 52px;
}

CSS for hover
Code:

<a href="LisaClarkDesigns_About.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the About Lisa Clark Designs page." /></a>
<a href="LisaClarkDesigns_Portfolio.htm"><img class="ImgNav" src="images/PortfolioNav.gif" alt="Click here to navigate to the Lisa Clark Designs Portfolio page." /></a>
<a href="LisaClarkDesigns_Fees.htm"><img class="ImgNav" src="images/FeesNav.gif" alt="Click here to navigate to the Lisa Clark Designs Fees page." /></a>
<a href="LisaClarkDesigns_Contact.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the Lisa Clark Designs Contact page." /></a>

Thanks,

Brad