Learn VBA & Macros in 1 Week!

CSS - Problem With Font Size In Nested Selectors

Full Excel VBA Course - Beginner to Expert

Problem With Font Size In Nested Selectors	View Content

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?

Full Excel VBA Course - Beginner to Expert

Em Font Size Ie Problem. Need Help

Similar Tutorials

View Content

Hello all. THis is my first post here .
I use em to define font-size at my site.

At main css file...
body { font-size: 76%; }
tr, p, div, td, div { font-size: 1em; }

at secondary css file...
div#content_area .contentpaneopen {
font-size: 1.1em ;
line-height: 1.3em;
}

The problem is that the text (content_area) displays correctly on firefox and Opera and wrong on IE. I need em because i use a auto font resize javascript file.I am trying to find what is wrong for days...!

please check at this link...

I am sorry about the greek encoding
Thank you

Box Size Problem With Nested <div> Tags

Similar Tutorials

View Content

I have set up a couple vertical boxes and filled them with 'column' boxes all nested within the parent vertical boxes.
My problem is when, say, box #3 from the left has more content than the furthest left box, instead of stretching the parent to accommodate the content and push down the other parent horizontal box below, the content just flows behind the lower horizontal box.
If the content in the furthest left box is the longest, this problem doesnt occur. The parent box is stretched to fit.

Thx
Joe

#######################
html
#########################
<html>
<head>
<meta http-equiv="Content-Type" charset=windows-1252>
<link rel="stylesheet" href="test.css" type="text/css" media="screen,projection,print" title="Default" />
</head>

<body id="savor-home">

<div id="main">

<div id="abovefold">

<div id="column-a">
<div id="type2">
blah<br>
blah<br>
blah<br>
blah<br>
</div>
</div>

<div id="column-b">
<div id="type1">
blah<br>
blah<br>
blah<br>
blah<br>
</div>
</div>

<div id="column-c">
<div id="type2">
blah<br>
blah<br>
blah<br>
blah<br>
</div>
</div>

<div id="column-d">
<div id="type1">
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
</div>
</div>

</div>

<div id="maincontent">

<div id="column-a">
<div id="type1">
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
</div>

<div id="column-b">
<div id="type1">
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
</div>
</div>

<div id="column-c">
<div id="type2">
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
</div>
</div>

</div>

</div>

</body>
</html>

#######################################
css
#######################################
body {
margin: 0px;
background: #fff;
}

#main {
width: 780px;
min-height: 1500px;
}

#savor-home #abovefold {
position: relative; top:0px; left:0px;
width: 100%;
width: 780px;
clear: both;
}

#savor-home #abovefold #column-a {
background: #eee;
width: 185px;
position: relative; top:10px; left:10px;
display: inline;
}

#savor-home #abovefold #column-b {
background: #ddd;
width: 185px;
position: absolute; top:10px; left: 205px;
display: inline;
}

#savor-home #abovefold #column-c {
background: #ccc;
width: 185px;
position: absolute; top:10px; left: 400px;
display: inline;
}

#savor-home #abovefold #column-d {
background: #bbb;
width: 185px;
position: absolute; top:10px; left: 595px;
display: inline;
}

#savor-home #abovefold #type1 {
background: url("/img/savor/featcontent1.jpg") no-repeat;
width: 100%;
/* hide from IEMac\*/
width: 185px;
\width: 185px;
w\idth: 165px;
*width: 185px;
/* end hiding */
padding: 10px;
font: 12px verdana,arial,helvetica,sans-serif;
color: #000;
}

#savor-home #abovefold #type1 h2 {
color: #000;
}
#savor-home #abovefold #type1 h4 {
color: #B5390F;
padding: 1px;
}
#savor-home #abovefold #type1 a:link, #savor-home #abovefold #type1 a:visited {
color: #000;
font: bold 10px verdana,arial,helvetica,sans-serif;
}
#savor-home #abovefold #type1 a:hover {
text-decoration: underline;
color: #B5390F;
font: bold 10px verdana,arial,helvetica,sans-serif;
}

#savor-home #abovefold #type2 {
background: url("/img/savor/featcontent2.jpg") no-repeat;
width: 100%;
/* hide from IEMac\*/
width: 185px;
\width: 185px;
w\idth: 165px;
*width: 185px;
/* end hiding */
padding: 10px;
font: 12px verdana,arial,helvetica,sans-serif;
color: #000;
}

#savor-home #abovefold #type2 h2 {
color: #000;
}
#savor-home #abovefold #type2 h4 {
color: #B5390F;
padding: 1px;
}
#savor-home #abovefold #type2 a:link, #savor-home #abovefold #type2 a:visited {
color: #000;
font: bold 10px verdana,arial,helvetica,sans-serif;
}
#savor-home #abovefold #type2 a:hover {
text-decoration: underline;
color: #B5390F;
font: bold 10px verdana,arial,helvetica,sans-serif;
}

#savor-home #maincontent {
position: relative; top:0px; left:10px;
background: #0f0 url("/img/savor/maincontent.jpg") no-repeat;
width: 770px;
}

#savor-home #maincontent #column-a {
width: 256px;
position: relative; top:10px; left:0px;
}

#savor-home #maincontent #column-b {
width: 256px;
position: absolute; top:0px; left: 256px;
}

#savor-home #maincontent #column-c {
width: 256px;
position: absolute; top:0px; left: 512px;
}

#savor-home #maincontent #type1 {
width: 100%;
/* hide from IEMac\*/
width: 256px;
\width: 256px;
w\idth: 236px;
*width: 256px;
/* end hiding */
padding: 0 10px 0 10px;
font: 12px verdana,arial,helvetica,sans-serif;
color: #000;
border-right: 1px dotted;
}

#savor-home #maincontent #type1 h2 {
color: #000;
}
#savor-home #maincontent #type1 h4 {
color: #B5390F;
padding: 1px;
}
#savor-home #maincontent #type1 a:link, #maincontent #type1 a:visited {
color: #000;
font: bold 10px verdana,arial,helvetica,sans-serif;
}
#savor-home #maincontent #type1 a:hover {
text-decoration: underline;
color: #B5390F;
font: bold 10px verdana,arial,helvetica,sans-serif;
}

#savor-home #maincontent #type2 {
width: 100%;
/* hide from IEMac\*/
width: 256px;
\width: 256px;
w\idth: 236px;
*width: 256px;
/* end hiding */
padding: 0 10px 0 10px;
font: 12px verdana,arial,helvetica,sans-serif;
color: #000;
}

#savor-home #maincontent #type2 h2 {
color: #000;
}
#savor-home #maincontent #type2 h4 {
color: #B5390F;
padding: 1px;
}
#savor-home #maincontent #type2 a:link, #savor-home #maincontent #type2 a:visited {
color: #000;
font: bold 10px verdana,arial,helvetica,sans-serif;
}
#savor-home #maincontent #type2 a:hover {
text-decoration: underline;
color: #B5390F;
font: bold 10px verdana,arial,helvetica,sans-serif;
}

Font-size Problem But There Is No Text...

Similar Tutorials

View Content

Hi,
This is only happens in IE, in firefox (the only 2 browsers I tested) works fine.

http://nazgulled.no.sapo.pt/test.html

There's only one image inside the <div> tag, and I have set that div tag style to have a 10px height. But that doesn't work on IE... it's like there were some spaces wich because of the font-size it makes the height be more than 10px.... I wanted to fix that but how can I do it?

One solution is to make the div tag like this:
Code:

<div id="test"><img src="spect.gif" width="300" height="10" /></div>

instead of this:
Code:

<div id="test">
  <img src="spect.gif" width="300" height="10" />
</div>

But I don't want to fix it that way...

Any help would be hot, thanks.

Odd Textarea Font Size Problem In Firefox

Similar Tutorials

View Content

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.

Font Size Problem In Opera - Fonts Are Huge For No Reason! Halp!

Similar Tutorials

View Content

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!

Can't Convert <font Size='1' Face=verdana Size=1> To Css

Similar Tutorials

View Content

Hi there,

I'm completely new to CSS. I'm trying to do this more than one hour but can't get it right.

Code:

<font color='white'><font size='1' face=verdana size=1>

I couldn't find the equivalent of this in CSS

This is my last experiment but it doesn't seem to work either

Code:

fontstyle { color : #FFFFFF; font-family : verdana ; font-size :1;}

Thanks

Font-size: Have It Appear The Same Size Cross Browser, How?

Similar Tutorials

View Content

So when using Netscape 7.2 & Opera 7.5 and MSIE 6.0,

How do you get a simple tag like

body {
font-size:small;
}

to be equal in all browsers?

Setting IE Text Size to Medium, and Opera's Zoom to 100% (both defaults) and Netscape 7.2 to 120% (not the default) is one way, but is there a CSS way?

By the way, the child element hack "body>div {property}" wasn't working no matter what I tried, by not working I mean to say Netscape never would read it or apply it.

It appeared to be that Opera & IE need to read the same value while Netscape needs to apply a larger size to be equal to IE's and Opera's rendering.

B

The Difference Between Id Selectors And Class Selectors, Please?

Similar Tutorials

View Content

Hi all,

could someone please explain to me the difference between ID selectors - #idselector {ksjdfkjd} and class selectors - .classselector {askdjfak} ?

I am just becoming more familiar with CSS and I'm not sure when I should use which.

Thanks

Nested Divs And Rendering Font Different For Same Style.

Similar Tutorials

View Content

Hi!

I have a problem at andreaspohlmann.com with an (on win7) IE8 Problem, same problem on XP for FF and IE.

The text underneath the start images should be the same format as the text underneath any of the gallery pics: see http://www.andreaspohlmann.com/wirtschaft/daimler/

difference between the two is first is nested 2 divs further, due to the slideshow and has a class instead of the id

the style that should be applied is: (i used everything I could think of to disable inheritance)

#bu h1, .bu h1, .caption {
font-family:"Arial", Helvetica, sans-serif;
background-color:none;
color: #000;
text-decoration: none;
word-spacing: normal;
text-align: right;
letter-spacing: 0;
text-indent: 0;
line-height: 10px;
font-size: 10px;
font-weight: bolder ;
font-style: normal;
text-transform: lowercase;
display:block;

}

Still IE8 makes it look smaller, adding 1px makes it too large.

the styles seem to be exactly the same in the IE developer thingy.

I'm at a loss, any help apreciated.

Cheers,
Chris.

[css3] Selectors Problem

Similar Tutorials

View Content

Hi all,

I'm having an issue using CSS3 selectors. I'm not quite sure if this is even possible but here it goes. Imagine the HTML below:
html4strict Code:
Original - html4strict Code <tr> <th><input type="checkbox" name="cb" /></th> <td>Something here</td> <td>Someting here also</td> </tr>

  

  


 <tr>


     <th><input type="checkbox" name="cb" /></th>


     <td>Something here</td>


     <td>Someting here also</td>


 </tr>

Is it possible with CSS to utilize the :checked selector on "tr th input:checked" and somehow set the background color for the td-s? I've tried several combinations but to no avail. And as far as I know there's no parent selector or anything that lets you traverse backwards and I'm trying to avoid JavaScript as much as possible.

I'm using Firefox 2.0.0.12.

Fix Font Size

Similar Tutorials

View Content

Whats the best way to fix font size?

I use CSS. The font size seems to stay fix on IE but not on Mozilla and Netscape.

Also I notice when I use adgui font it stay fix no matter in what browser and no matter at what text view. Why is that. Are there more of this kinda fonts?

Bottom line, whats the best way to fix the size of fonts regardless of browser and at what text view.

Thanks for you help
Liz

Font Size Help! :'(

Similar Tutorials

View Content

hi, someone using foxfire keeps saying the my font is really really tiny, I have my css file like: Code:

body { background: #FFFFFF;
/* for internet explorer */
scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-3dlight-color: #494969; scrollbar-arrow-color: #494969; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #494969; 
margin: 0px; padding: 0px; border: 0px; border-top: 1px solid #8E9397; border-left: 1px solid #8E9397; font-color: #494969; font-family: Verdana,Arial,Helvetica; font-size: 8pt; text-align: left; }

a:link,a:active,a:visited { color: #494969; text-decoration: none }
a:hover { text-decoration: underline; color: #494969; position: relative; top: -1px; left: -1px; }
hr { background: transparent; color: #494969; height: 1px; border-width: 0px; }
fieldset { margin: 0; padding: 1px; border: 1px solid #494969; }
legend { margin: 0; padding: 7px; color: #494969; background: transparent; font-weight: bold; }
img { border: 0px; }
table { background: transparent; }
tr { background: transparent; }
td { background: transparent; color: #494969; font-family: Verdana,Arial,Helvetica; font-size: 70%; }
input, textarea, select { color: #494969; font: normal 11px Verdana, Arial, Helvetica, sans-serif; background: transparent; border: 1px solid #494969; border-style: inset; text-align: center; text-indent: 2px; }

form { margin: 0px; padding: 0px; }

any idea on whats wrong? and I would of changed the % to an actual value but I wanted to make it so people can control the size of the font to lager or smaller

here is a preview with that css file in use : http://www.dbznetwork.net/

120 Dpi Font Size Vs. 96 Dpi Font Size

Similar Tutorials

View Content

People viewing my site at 120 dpi are seeing misaligned text and layout, whereas people viewing the site at 96dpi can see it properly.
I'm using "em" instead of pixels when setting font sizes in CSS.
The site has fixed length and width, do I HAVE to allow it to resize itself?

Font-size: Em Or Px

Similar Tutorials

View Content

Well, the title might be a little oversimplified, but I guess it caught your attention

In the past, I always set my font sizes using px. I know that this is not the appropriate standard (since it doesn't allow a user to re-size the font on their end), but I usually did it because it was easiest and most predictable.

Now, I finally want to make the step towards more accessibility and I would like to learn a little bit more about using em's appropriately.

Does anyone have any good advise on how to get started with the following questions: How/where do I set the initial font-size, from which I can use em's? What are the dangers of using em's instead of px? Where could this change impact my usual styling? Are there any good resources/tutorials about this?
Any help/suggestions/ideas are appreciated...

Random Font Size

Similar Tutorials

View Content

How can I randomize text size on a website? Like the ones done with the "tags" found on many wordpress blogs? Nothing too crazy, I just want to display words randomly and have some of the text bigger than others.

Changing Font Size

Similar Tutorials

View Content

Default Font Size

Similar Tutorials

View Content

Hi

I'm using a css file for the layout of my website. But I'd like to define the default font size but I can't! I mean the size of the font that's under no special style. I think it's something like:

Code:

.body
{ font-size: 10px; }

Or similar (instead of 10px, small)... anybody knows exactly hoy can I do it?

Font Size Working In Ff But Not Ie

Similar Tutorials

View Content

Hi

I have applied this style to a drop down. However, the font size only appears at 10px in FF and not IE. Any ideas why?

<option style="font-family: Verdana;
background: #E0EAF8;
font-size: 10px;" value="link">link text</option>

Is There A Bug In Ie Regarding Font Size Handling?

Similar Tutorials

View Content

I have set up a test for several basic CSS-layouts, like 3-column layout, frame-like layout/behaviour etc. and I noticed some strange behaviour in IE.

Here is a number of layouts that I have created:
http://www.duwgati.nl/csstest

In layout samples 1 - 4 the fonts show up smaller than in the samples 5 -7, even though the font-size declaration is identical in all 7 samples. This only happens in IE, in Mozilla/Firefox, the fontsizes are correct in all 7 samples.

Anybody got a clue why this is happening?