CSS - Css Affecting Elements Of My Page

I'm working on a site with a div element with a fixed position, some 800 pixels from the left. The site is optimized for 1024x768. However, if a user with a resolution of 800x600 views the page, this div element will be missing, and the user won't be able to scroll over to see it. Is there some way I can get around this?

One idea would be to align the div on the right instead of the left, but I don't want a lot of whitespace between my content (on the left) and my div (on the right). I was hoping that I could specify a parent element with a relative position, and that position: fixed would reference the position of the parent element, but that only seems to work when the child div element is position:absolute, not position:fixed.

Thanks for any insight.

A thousand apologies -- this is a very poorly worded and general question, because I've learned through scavenging and don't know the jargon, and the answer might not even lie in CSS... but the problem is really driving me to distraction.

Is it possible in CSS to define a hover effect such that upon hovering over one element, a different element is affected? For example, I know you can add something like this:

#example a:hover{
color: #000000;
}

in order to change the color of any links in the example div upon hovering. But can you change properties of links in any other divs? If so, then how? And if not, then is there a different language which can effect this change?

Again, a thousand apologies for the amateurishness and outsider-wording of this question. I will be happy to clarify on request to the extent of my ability.

Hello,

Here's a link to a very short video (MOV format) showing the issue that I'm having. I'm guessing that it's CSS related. It seems like the screen update shouldn't be so obvious. The graphics involved are very small, as well.

What could be causing this?

Thanks for any help!

blendernewbies dot com slash tmp slash screen_update_issue dot mov

EDIT: well, it seems I can't post links! How am I supposed to accurately convey the issue without wasting people's time trying to describe it? Sigh. I will try to post the link in a written out format. I hope it doesn't violate anything doing it that way. The video is hosted on my own server and is about 800KB. Thanks.

i have two p tags one after the other..

<p>text</p>
<p>text</p>

and I did:
Code:

#head p {
        float:left;
        margin-top:2%;
        font-style:oblique;
        font-size:150%;
        color:green;
    }
  #head p+p {
        float:right;
        font-size:75%;
        color:red;
   }

the problem is that if i do margin-top:4% to the first p; this also changes that in the adjacent p? is this correct?

I have a demo page setup. It renders exactly how I want it in Firefox, in regards to position, same for Chrome.

With IE, if the page has a .html extension, it also renders correctly. But when I switch it to the .cfm extension, it shifts over to the left.

Correct

http://66.201.102.200/design/demo.html

Incorrect

http://66.201.102.200/design/demo.cfm

I've looked around, and I'm just not sure what could be breaking it.

Any ideas?

Nevermind! I figured it out. With Coldfusion, I didn't have it setup to suppress white space. The application.cfm file had all kinds of white space, and when it was included dumped about 100 lines of white space in the rendered file. Once I cleaned that up, it worked.

I currently making a website to learn about web design and I have made a javascript selection menu which displays perfectly when the code is on a page on its own:

http://www.ukhomefurniture.co.uk/test/mouseovertest.php

However, when I implant the same code on the full page on which I want it to appear it goes haywire with large gaps all over place, I have managed to get it down to a small gap between the top menu and splash image. A colleague I work with suggests it may be down to the PHP affecting. Can anyone advise how I can fix it so the gap is removed:

http://www.ukhomefurniture.co.uk/test/indextest.php

After months of scrutinizing different layouts for http://what-is-what.com, I've pretty much settled on modifying a layout that I found at this address:
http://www.positioniseverything.net...example/borders

I'm having a problem with arranging the header without using tables. The site logo should be on the far left side, and to the right of it a search form. When I float the logo left, the content of the page left aligns itself with the right edge of the logo. My test code (displaying this problem) can be found he
http://what-is-what.com/tests/june2007-leftalign.html

How can I have the float not affect the rest of the page?

I'm currently going through these tutorials to learn more about floats:
http://www.brainjar.com/css/positioning/
http://www.westciv.com/style_master...yout/index.html

I'm led to believe that I must use "clear", but I'm not sure where.

Here is some code I've started for a project. It is for IE 5+ and uses filters.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body id="bodyid" bgcolor="f3f3f7" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" scroll="no">

<script language="JavaScript1.1">
function resizePage(){
windowHeight = (document.getElementById('bodyid').clientHeight - 60);
document.getElementById("bottomTable").style.height = windowHeight ;
}
</script>

<style type="text/css">
.tddrop {
filter: progid:DXImageTransform.Microsoft.dropShadow(Color=DDDDDD,offX=3,offY=3,positive=true);
border: solid #c0c0c0 1px;
background-color: #ffffff;
}

.spacer{width:15px}
</style>




<table border="0" bgcolor="#34487E" style="width=100%" cellpadding="0" cellspacing="0" >
<tr valign="top">
<td style="height:50" valign="middle" >
<!--- Top bar including left image --->
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;height:100%" >
<tr>
<td>
&nbsp; <!---- image here... ---->
</td>
<td style="width:100%;filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=1, StartColorStr='#34487E', EndColorStr='#C5D1E1')"></td>
</tr>
</table>
</td>
</tr>
<tr><td style="height:1" bgcolor="#7c7c94"></td></tr>
<tr>
<td style="height:10;filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=0, StartColorStr='#f3f4fa', EndColorStr='#9997b5')">
</td>
</tr>
<tr><td style="height:1" bgcolor="#7c7c94"></td></tr>
</table>

<table id="bottomTable" border="0" style="width:100%;height:300" cellpadding="0" cellspacing="12" >
<tr>
<td class="tddrop" style="width:180;">&nbsp;</td>

<td class="tddrop">&nbsp;</td>
</tr>


<script>resizePage();</script>

</body>
</html>


Notice that between the two colums, the <td>'s are not lining up at the bottom. If you remove the shadow filter they line up fine. Anyone have an idea why this might be so?

Thanks

I have an index.php page which has a <link> to style.css. The style is applied just fine to content in index.php, but if index.php includes content from other php files using include(); statements, this included output ignores the stylesheet.

I have tried putting a <link> to the stylesheet in the included php files, but this does nothing. Can anyone help? Thanks!

Code:

<link rel="stylesheet" type="text/css" href="style.css" />

Hi everyone,

So I've been coding for years and had drawn away for the design/css part, so I need some refreshing. I've tried the greater than / less than "operators" between selectors in my css declaration but to no avail. Basically what I want to do is example:

Code:

<form><!-- really doing this basic just to show the point -->
<fieldset>
   <!-- inputs here -->
</fieldset>
<fieldset>
   <fieldset><!-- ### nested fieldset inside fieldset, don't want to affect these child selectors -->
      <!-- input bla -->
   </fieldset>
</fieldset>
</form>

So as you can see in my brief exampl above, there's two parent selectors and one child inside the second one. I only want to change the properties of the parent ones, so that a fieldset INSIDE a fieldset doesn't get affected, and I was hoping anyone here might be able to shed some light on how to achieve this.

Many thanks

I used a script from Dynamic Drive that allows the user to change font on demand (They can size up/down the font on the website). But I ran into problems in that this spilled over to increasing the fontsize of the links (only A but not not rollover). I would prefer that the links are not affected by this script. I would rather the links stay with the sizes I specified in the CSS.

Please see the website here to understand what my problem is: nudipu.org.ug/nsites. My intension was to make it as perfect as it is on their sister site add.org.uk

Can somebody advise me please? The script I used is located on http://www.dynamicdrive.com/dynamicindex9/textsizer.htm

Thank you folks.

Hi Folks,

I've implemented a custom underline for all text links using background properties, but have found that my linked transparent PNG images are now affected with the underline as well.

I've tried correcting this by applying background-image:none; to the affected PNGs -- I even used !important;. No luck. I also saw some mention of using the display:block; property to correct a similar problem. No luck.

Suggestions?

Thanks in advance!

P.S. I was all set to post a link to a live example, but it seems new users can't post links? Hopefully the above description will suffice.

please please somebody help me with this...
i have given my links some effects with this code:

Code:

<style type="text/css">
<!--
a img {border: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; border-bottom:3px double; color: #000000;}

a.head,
a.head:link { text-decoration: none; }
a.head:hover { text-decoration: none; }
//-->
</style>

it works fine on my links, but the class "head" doesn't seem to be effecting the link with that class....it still has the same hover effect as the other links. I have class="head" in the link tag of the element, but it still doesn't work. I want no effect on this link since it is an image and I don't want a double-underline on it. The only thing I can think of is that maybe the head image isnt being effected correctly because it is an include file, but I don't think that really matters.

Thanks!

Hello all,

I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly.

The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements.

Code:

		#wrapper-body ul.staff-list{
			list-style-type:none;
			padding-top:10px;
			position:relative;
		}
	
		#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
	
			#wrapper-body ul.staff-list li{
				float:left;
				width:230px;
				position:relative;
				padding:8px 0 8px 15px;
				z-index:1;
			}
			#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
			#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
			#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
			#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
				#wrapper-body ul.staff-list li p{
					padding:0 0 9px 0;
					margin-left:91px;
				}
	
				#wrapper-body ul.staff-list li small{
					padding:0 0 5px 0;
					margin-left:91px;
				}
		
				#wrapper-body ul.staff-list-clerks li span{
					color:#A6302B;
					display:block;
					float:left;
				}
		
				#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
				#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
				#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
		
		
				#wrapper-body ul.staff-list li div.staff-list-detail{
					display:none;
					background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
					padding-bottom:3px;
					margin-top:-15px;
					left:4px;
					z-index:10;
					top:15px;
					position:absolute;
				}

				#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }

				#wrapper-body ul.staff-list li:hover div.staff-list-detail{
					display:block;
}

An image of what is happening below:


Thanks for reading!

I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks!