CSS - Best Way To Set Font Sizes - Headings All Seem Too Big In Lower Resolutions

PHP Code:
#searchBox {
    float:right;
    margin:0em;
    padding:0em;
    margin-right:0.2em;
    clear:right;
    background-image:url(/images/site/backgrounds/searchBox.jpg);    
    /*border:black solid 1px;*/
}
#searchBox input {
    margin:0em;
    padding:0em;
    background-color:#d2c5a2;
    
}
.submit {
    background-color:#6F5F42;;
    color:#483e2b;
    font-size:smaller;
    font-weight:bold;
    margin:0em;
    padding:0em;
} 





and html

PHP Code:
<div id="searchBox">
            <form action="search.php" method="post" style="margin:0em; padding:0em;">
                <fieldset style="border:1px solid #a29383; margin:0em; padding:0.1em;">
                    <label>What are you shopping for?</label><input type="text" name="search" size="14"/>
                    <input class="submit" type="submit" name="submit" value="Search" />
                </fieldset>
            </form>        
        </div> 





i dont know but for some reason in firefox the three elements of form (label, input & submit) are on the same line but in IE they are in two lines.. I have just tried width:55%; but the submit box goes outside the top box.. but in FF the searchbox goes haywire and take the whole box!!

also is there anyway to make sure that the font sizes are same/similar in both IE and FF?

http://www.zahra-zahra.com/fullpage.html


EDIT: to say i have tweaked it and firefox problem is solved but IE still puts the form OUTSIDE The box..

Hi there,

I have two font sizes: 22px and 12px. However, If I use the 2 sizes next to each other, the large pushes the smaller on down. I tried to use vertical-align: middle to center them vertically, but it didn't work.

How can I center them vertically?

Thanks!

Hi,

If you set a font-size: 7pt and font-family:Verdana in your stylesheet, does the text in your webpage look slightly bigger in Firefox than in IE 6?

I'm using Windows by the way ... this is just a general question as some of my menu links are lined up well on IE (which displays text a bit smaller) but overlapping to multiple lines on Firefox (because the text size is slightly bigger)

Many thanks!

on my page http://tampabay-online.org/cetr/news/

the left side :

Code:

.content {
	position:relative;
	width:300px;
	margin-left: 155px;
	margin-top: 20px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:3;
}

and the two on the right are :

Code:

#right {

	position:absolute;
	width:200px;
	top:20px;
	left:500px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:1;

}

#sidebar {

	position:absolute;
	width:200px;
	top:400px;
	left:500px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:1;

}

If someone has a their font bigger on the artists section then the div will grow and go under the sidebar div.

Any way to make these relative or fix that problem?

Thanks!

Hi

I'm putting together help documentation for an application and I would like the structure of the document to have all headings and sub headings to be dynamically numbered, for example:

1. Main
1.1. Sub1
1.2. Sub2
2. Main
2.1 Sub1
etc

I've read about the pseudo class :before, but understand that this isn't supported by Explorer, or else I could use:

BODY {
counter-reset: chapter; /* Create a chapter counter scope */
font-family:Arial, Helvetica, sans-serif;
}
H1:before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter; /* Add 1 to chapter */
}
H1 {
counter-reset: section; /* Set section to 0 */
}
H2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}

Could anyone help with any suggestions as to how I could do this please?


Thanks
Sophie

I'm having trouble aligning headings in CSS.

I've tried creating a class like this -

Code:

.rightalign {
   text-align:right;
}

and applying it like this -

Code:

<h1> <span class="rightalign" /> Heading </span> </h1>

but it doesn't work, any help?

Thank you.

Hi

I am making a website where i have a main heading on all pages' start.

I want to control its looks with CSS, i have an external CSS that controls links and body text etc.

i have tried in external CSS

Code:

H2 {

	font-family: Arial;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #FFCC99;

}

and on pages i use

<h2> heading is here </h2>

but it doesnt make any difference and the main heading is also shown as the normal text of page body according to stylesheet.

Please shed some light on this...

thanks

Is this a display glitch or is it meant to be like this...

for example, let's say you have a picture in a div that had text floating to one side. If the text beside the picture doesn't fill the space the heading will be displayed inline beside the floating picture, even if it's in it's own containing div...

EDIT: I've found a general fix for this using <div style="clear:both;"> but it's a PITA, and I think I'm doing something improperly. Maybe I'm misunderstanding the use of a floating frame... but, I can't help but think it's a possible display error with the different browsers

The site in question... http://cbo4edu.org/newSite/index.html

I know this is probably a very simple fix but I've tried everything I could think of so I now have to rely on the Dev Shed community.

Can someone please tell me why theh3 tag in the center column is underlined? I only want this heading to be underlined when someone hovers over it. C

Is it possible to set link styles that are defined inside of a heading tag...

for example,

h1 a:link{bleh}
h1 a:visited{bleh}
h1 a:hover{bleh}

I tried it... but it doesn't want to go, I'm thinking I might have to think of another solution

Hello,

I have been writing a web page as a project for a course using XHTML. I have tested it with several browsers, including IE, Netscape, and Opera and validated its source code and CSS Style sheet.

The site works at 1024 X 768 resolution. My problem is that if I minimize the window or change the screen resolution size every div element gets switched around and the display is destroyed. The page is currently located at http://student.flvs.net/html/millety/mod8/index2.htm . Please tell me how to fix this. The links on the page do not work as they should, so only look at the oage I have linked to.

I would like the color behing the navigation to run in a vertical band all the way to the bottom of the page. The footer is supposed to be all the way at the bottom and the main text's background color should not appear under it, which is part of my current problem. Thank you in advance for your help.

Hi, I have a realy strange problem that I'm hoping someone can shed some light on.

I've been building a new site, nice html and css, but seemingly randomly the layout completely breaks in Firefox 3, IE7/8 is always fine. This only occurs in page sections where there is a block level element (heading, div, para etc) inside of an anchor.

<a href=""><h2>Some text</h2></a>

Using firebug I saw that the html gets duplicated like so:

<a href=""></a>

<h2><a href="">Some text</a></h2> - notice that in this one the h2 and <a> have switched places!

<a href=""></a>

and after a bit of experimenting I found that removing the h2 made it work, and that everything's fine as long as a block level element isn't inside the <a>.

In the stylesheet the anchor has display:block;

Does anyone have any idea why this is happening, and why in FF only? I've been building sites for 3+ years and have never seen this before!

Thanks.

I have a tab bar that sits on top of two div columns. The bar is supposed to sit in the center of the top of the left column. I can achieve this perfectly via

Code:

position: absolute;
top: 16%;
left: 30%;

The problem here lays in the fact that anyone NOT running my screen resolution is telling me that it's not where it's supposed to be. How can I put this where it needs to be, regardless of who is viewing it, and how crappy their PC might be?

If I set a height for my LIs, then IE does not increment the list item. It shows a. a. a. a. instead of a. b. c. d.

Actually it's the same for any list-style-type. It never increments the list-type, even when it's just the default style.

I couldn't find any other mention of this anywhere.

Does anybody know what causes this bug, or if there's a way to fix it?

Here is some code to reproduce:
Code:

/* CSS */
#qform ol {
            list-style-type:lower-alpha;
            }

#qform ol li {
               color:#333;
               height:25px;
               margin:10px 0;
               padding:0 0 0 20px;
               }

#qform ol li input {
                     margin:3px 5px 0 0;
                     }

#qform ol li label {
                     margin:0;
                     }

<!-- HTML -->
   <form id="qform" action="index.php" method="post">
    <fieldset>
     <ol>
      <li>
       <input type="radio" id="rada" name="answer" value="a" /><label for="rada">Once</label>
      </li>
      <li>
       <input type="radio" id="radb" name="answer" value="b" /><label for="radb">Twice</label>
      </li>
      <li>
       <input type="radio" id="radc" name="answer" value="c" /><label for="radc">Three Times</label>
      </li>
      <li>
       <input type="radio" id="radd" name="answer" value="d" /><label for="radd">A Lady</label>
      </li>
     </ol>

     <input type="submit" value="OK" />
    </fieldset>
   </form>

In IE6, that will display a list with a, a, a, a. Remove the height from #qform ol li and it works as it should.

Thanks,

When I use a the page title as a link, to go to a category or external page, in WordPress (most recent version) the page title with a link rather than just text in the title, gets moved about 3px down in stead of staying in line with the rest.

I am using the Graphpaper Press Gridline Lite theme.
the Website is gregdelima.com
and the relevant CSS is: gregdelima.com/wp-content/themes/gridline_lite/gridline_lite/style.css