CSS - Relative Font Sizes / Best Practice

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!

Good Day,

Trying to setup the font sizes for my site. In higher resolutions, everything seems to look acceptable. When I view the page on a low resolution screen, everything seems ridiculously large. Is there anyway to set the styles up to relieve this problem?

Best,
Colin

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,

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!

I'm creating a blog for someone, and my issue resides in <h2>.

Using Wordpress, <h2> is typically the blog entry title.

As you know, blog entry titles vary, because people put in different titles for different entries.

I have <h2> formatted to my friend's likings, but an issue has arisen.

If a blog entry title is particularly longer than the average, <h2> breaks into another line of text. This results in corrupting the layout entirely.

So my question: How do I go about formatting <h2> so that the blog entry title text fills up the entire width of <h2> without breaking into a new line?
Clarification (if needed): I want the font size to be dependent upon the physical length of text in the blog title

Here's my code for <h2>. It resides in two containers of sorts.

Code:

h2 
{
        float:left;
        font-family:"Franklin Gothic Medium";
	font-size:55px;letter-spacing:-2px;
	width:728px;
        padding: 0;
        margin: 0;
}

This is my first post/topic. Be gentle! 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!

http://m-i-x.net/beta

basicly i want the 2 sides heights to be the same as the height of the content...how can i do it?

What do you guys think....just a template I made for practice

http://csstest.dmsbdesign.com/templates/templates%201/

heres the color scheme I used too incase you guys have any suggestions

http://colorschemedesigner.com/export/

Hi, I'm new to CSS and am trying to deign a navigation bar for a website. The problem that i face is trying to size the headings a little larger than the sub catagories.
The code is as follows for the style sheet i have tried this:
body{
font-family: Arial,sans-serif;
color: #FFFFFF;
line-height: 1.1;
margin: 0px;
padding: 0px;
}

a{
color: #FFFFFF;
text-decoration: none;
}

a:link{
color: #FFFFFF;
text-decoration: none;
}

a:visited{
color: #FFFFFF;
text-decoration: none;
}

a:hover{
color: #FFFFFF;
text-decoration: underline;
}
b{
color: #FFFFFF;
text-decoration: none;
}
b:link{
color: #FFFFFF;
text-decoration: none;
}

b:visited{
color: #FFFFFF;
text-decoration: none;
}

b:hover{
color: #FFFFFF;
text-decoration: underline;
}
#navBar ul b:link, #navBar ul b:visited {display: block;}
#navBar ul a:link, #navBar ul a:visited {display: block;}

#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}




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

#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #0033CC;
font-size: 70%;
background-color: #112059;
}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
}

#sectionLinks a {
display: block;
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;

}

#sectionLinks a:hover{
background-color: #0033CC;
}

#sectionLinks2{
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #0033CC;
font-size: 130%;
background-color: #112059;
}


#sectionLinks b {
display: block;
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;
/*font-size: 130%;*/
}

#sectionLinks b:hover{
background-color: #0033CC;

}

and i have the following code in the htm page:


<STYLE>
BODY {
scrollbar-arrow-color:094588;
scrollbar-shadow-color:f0f0f0;
scrollbar-face-color:f0f0f0;
scrollbar-highlight-color:094588;
scrollbar-darkshadow-color:094588;
.style1 {font-size: 16px; background-color: #112059;
background-color: #FFFFFF;
}
a:hover {
color: #FFFFFF;
}
.style1 {color: #FFFFFF}
b:hover {
color: #FFFFFF;
}.style1 {color: #FFFFFF}
</STYLE>

<div id="navBar">
<div id="sectionLinks">
<div id="sectionLinks2">

<h3 class="style1">Menu</h3>
<ul>
<li><b href="index.htm">Home</b></li>
<li><b href="product.htm">Products</b></li>
<li><a href="index.htm">Computer Systems</a></li>
<li><a href="products.htm">Components/Peripherals</a></li>
<li><a href="#">Laptops</a></li>
<li><a href="#">Refurbished</a></li>
<li><b href="services.htm">Services</b></li>
<li><a href="#">PC Repairs</a></li>
<li><a href="#">Upgrades</a></li>
<li><a href="#">Home Networking</a></li>
<li><a href="#">In-home training</a></li>
</ul>
</div>
</div>
</div>

However this only allows hyper links to work that are defined under a href not the larger b href as I so want,
I know this is complicated and long winded but can anyone lend some usefull solution to my problem?
Yours greatfully.

I have an absolutely positioned login form that I am having some troubles with...

On IE7 and the latest version of Fx it looks great.

In some older versions of Fx (1.04 is what I have to test with...), the input size is off compared to the width of the div... And in IE6, the email input is actually wider than the password input (which is really weird since the inputs are set to a size of 25)

Is there a better way to do this... What I want is to have the input fields the same width, with the submit button aligned along the right edge and to have the labels of the input fields aligned left. Or, if I am doing it the right way, what's the deal with IE6?

I'm not too worried about the older Fx versions since it doesn't look all that bad, but on some computers with IE6, the box actually starts to push too far to the right for some reason...

Hi Everyone,

I'm currently building a site for a client that has a 3 column layout and horizontal footer at the bottom of the page.

The client has requested the navigation column (which is running down as the far left column, (I have attached an image for clarification) has a background-color that runs down the full length of the page, from the top of the browser window until it meets the footer at the bottom of the page.

The footer needs to do the same, but expand horizontally so it stretches from the left of the browser window to the right. Additionally, if the user is on a larger screen size that creates more vertical space at the bottom of the browser window, the background-color of the footer needs to stretch down to meet the bottom of the browser window.

Currently, the website is set up so the 3 columns (including the navigation) is housed in a div tag with relative positioning, auto margins for centering and 960px width.

The site is currently in offline development so I unfortunately won't be able to share it with you at this stage. However, please see the attached image for clarification.

What I'm after is opinions on a best practice to achieve this. I have tried setting the navigation height to 100% and footer width to 100%, however it's producing undesirable results.

Any help would be greatly appreciated! Please let me know if you would like further descriptions.

The image can be found he

www . harrycourt . com /temp-images/layoutimage01.png

Edit: I forgot to mention an important point. I would prefer if this can be achieved while keeping the height of the main wrap container as auto, as opposed to a pixel value.

Thanks,

Harry

Hi team,

Ok, so I'm biting the web2.0* buzzword bullet, and decided I want a tag cloud & I'm wondering what's the best (standards compliant, portable, etc ) way to handle this in css?

The main issue I'm having is how to handle the random positioning of the tags in the cloud? Any ideas on the semantics of these tags - are disconnected href's ok, or should I be wrapping them in p's or something?

Another question - is there a more elegant way of handling different sizes without having one style for each size?

Cheers all,
Simon
(* )

I've recoded my previous version which fixes a span problem, but end up with the rows not being able to use different widths & the image spanning the column width from the first row...

div.bg_tp_lt = row 1 @ 105px
div.bg_ct_lt = row 2 @ 53px
div.bg_bt_lt = row 3 @ 68px

So if you can either see what I'm doing wrong or provide a more reliable method it would be greatly appreciated.

Thanks in advance.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 	<head>
  		<title>$var</title>
  		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  		<link rel="stylesheet" type="text/css"  href="styles/styles2.css" media="screen" />
 	</head>
 	<body scroll="no">
<div class="table">
  <div class="tbody">
    <div class="tr">
      <div class="td bg_tp_lt"></div>
      <div class="td bg_tp_ct"></div>
      <div class="td bg_tp_rt"></div>
    </div>
    <div class="tr">
      <div class="td bg_ct_lt"></div>
      <div class="td bg_ct_ct"><div class="content">$content</div></div>
      <div class="td bg_ct_rt"></div>
    </div>
    <div class="tr">
      <div class="td bg_bt_lt"></div>
      <div class="td bg_bt_ct"></div>
      <div class="td bg_bt_rt"></div>
    </div>
  </div>
</div>
 	</body>
</html>

Code:

div.table {
  display: table;
  border: 1px solid #DDDDDD;
  padding: 0px;
  width: 404px;
}
div.thead {
  display: table-header-group;
}
div.tbody {
  display: table-row-group;
}
div.tr {
  display: table-row;
}
div.td {
  display: table-cell;
  border: 0px solid #DDDDDD;
  padding: 0px;
}

div.bg_tp_lt {
  width: 105px;
  height: 60px;
  background-image:url(images/stl.jpg); no-repeat;
  background-color: #000000;
}
div.bg_tp_ct {
  width: auto;
  height: 60px;
  background-image: url(images/st.jpg); repeat-x;
  background-color: #000000;
}

div.bg_tp_rt {
  width: 105px;
  height: 60px;
  background-image: url(images/str.jpg); no-repeat;
  background-color: #000000;
}

div.bg_ct_lt {
  width: 53px;
  height: 150px;
  background-image: url(images/sl.jpg); repeat-y;
  background-color: #000000;
}
div.bg_ct_ct {
  width: auto;
  height: auto;
  background-color: #000000;
}

div.bg_ct_rt {
  width: 53px;
  height: 150px;
  background-image: url(images/sr.jpg); repeat-y;
  background-color: #000000;
}

div.bg_bt_lt {
  width: 68px;
  height: 64px;
  background-image:url(images/sbl.jpg); no-repeat;
  background-color: #000000;
}
div.bg_bt_ct {
  width: auto;
  height: 64px;
  background-image: url(images/sb.jpg); repeat-x;
  background-color: #000000;
}

div.bg_bt_rt {
  width: 68px;
  height: 64px;
  background-image: url(images/sbr.jpg); no-repeat;
  background-color: #000000;
}

/* Little hack for IE */
* html div.td { display: inline; }

I have been doing this joomla site for someone here

The problem is he says when its viewed on a 22" screen with a screen resolution of 1200x800 it does not view right in IE, check images on this post.

I have not seen any of the problems on a 15, 17 , 19 and 42 " screens

Can anyone else see any problems could you also check load times he said it was slow.

An help would be great as i can't see the problem

I have used this in my CSS:

p { margin-top: 0.5em;}

But it renders differently in IE6 and Netscape 7.

Is there a method to get this equal in both ?

Thanks.