CSS - Font Sizing On Demand Affecting Links: Problem; Please Help

I have the following CSS styles:

Code:

#content p { font-size: 24px; }
.smalltext p { font-size: 12px; }

Then, I create a #content div in my HTML with three paragraphs in it. I want the middle paragraph to have the .smalltext class, like this:

http://www.toprival.com/temp/css_question.gif

With the CSS the way I have it, the font size (12px) of the .smalltext paragraph is ignored. But if I change the CSS so both selectors are IDs, or so both are classes (and update the HTML accordintly), it works. Why is that?

Having a strange problem with textarea font sizes in Firefox (1.06)

See here - http://www.4L.ie/contact.php

Text entered in the text fields is appearing correctly, but when entering text into the "Your Query" textarea, the font-size is noticeably smaller and less legible.

It appears fine in IE6.

My CSS relating to fonts is as follows:

Code:

body	{
	font: 76% verdana, arial, helvetica, sans-serif;
}

input, select, textarea	{
	font-size: 1em;
}

If I use pixels (ie font-size: 12px) there is no problem. Ems and % seems to mess things up.

Anybody able to shed some light on this? A possible bug in Firefox 1.06?

Thanks in advance.

when the colour is changed by a function, using the above, can it be changed later in the same function if a different option is picked? this is really bugging me as when it changes to one colour, it will not change to another!

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.

Below is a sample of my CSS page, I'm having an issue with the floats that are commented out, they are affecting my th even though I haven't actually classed anything in my html... Any ideas?

<code>
/* CSS Document */

body {
margin: 0;
padding: 0;
background-color: #000;
color: white;
font-family: "Lucida Grande";
font-size: x-small;
}
table.outer {
border:1px solid #fff;
width: 178px;
}
/*.left {
float: left;
}
.right {
float: right;
}*/
table {
clear: right;
width: 700px;
line-height: 1.4em;
border-collapse: collapse;
border: 1px solid #000;
color: white;
background: #000;
font-family: "Lucida Grande";
font-size: x-small;
}</code>

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.

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

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 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" />

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

Hi guys,

I'm working on a layout for a client, and I've run into a problem I've never seen before. My code is fully valid CSS (except for the *html IE fixes) and fully valid transitional XHTML, and it works fine in FF, IE and even Safari - but as soon as I load it up in Opera, it breaks completely. The font size is absolutely HUGE for some reason (like 400% of normal!), and it is completely breaking my layout.

I have no idea why this would be happening, and it's immensely annoying. I'm setting all of the font sizes throughout the page in ems, and at the start of the css I declare the following:

Code:

html, body {
	height: 100%;
	margin: 0px;
	padding: 0px;
	text-align: center;
	font: 62.5% Tahoma, Verdana, Arial, Sans-Serif; /* Resets 1em to 10px */
	background-color: #000000;
	}

Now this should be fine, and indeed it works in every other browser.. but Opera is wigging the hell out, and I don't know what's wrong. Has anybody ever experienced anything like this? If so, please let me know!

I'm hesitant to post the full code because it's covered by a hefty NDA, but I can strip out confidential bits if needed.

Thanks everyone!

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!