CSS - !important And Relative Font Sizes

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!

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!

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..

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!

i want to transfer this table to div's but i tried many times and i can not make it...

so please i need help

Code:

<table width="800" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="159" align="left" valign="top"  style="background-color:#F00">first td</td>
    <td  width="460" class="middle" valign="top" style="background-color:#FF0">second td</td>
    <td width="180" rowspan="2" valign="top" style=" background-color:#ff0000"><p>third td which contains rowspan =2 </p>
    <p>&nbsp;</p>
    <p>to let it finish with the footer</p></td>
  </tr>
  <tr>
    <td  height="60" colspan="2" align="left" valign="top" style="background-color:#C60"><br />
new tr that contains colspan = 2
<br />
&copy 2002 -
    2010
      , All Rights Reserved. </td>
  </tr>
</table>

please help me i need to fix my problem quickly

I have 2 css files. One main one that I am using
Code:

 input[type="text"], select 
{ 
    background: #FFF !important; 
} 

I use that mainly for Firefox as without it the form fields are yellow.

but I would like to override that have have one form field on this one page stick out and have it like this.
Code:

.CCfield {
	color: Black;
	background: #FFFF66; 
}

Is this doable? How can I override it for this one field?

Thanks

Hi,

I'm currently designing a Wordpress skin for someone and trying to style the navigation using CSS. Given that Wordpress is so popular, I expect that someone has encountered this before - but I can't find anything about this particular problem.

Basically, I'm having problems achieving the correct precedence in the CSS cascade for certain elements of my page (navigation) design.

In one part of the CSS I've had to use !important to get it to behave appropriately, but then I have another part which I need to be able to denote as "very important" but I don't think this is possible.

I get the feeling that I can probably do this without !important since I'm aware that it is abusing its purpose a bit (i.e. accessibility?) and instead I could do it according to the selector's specificity if I understood it better: http://www.w3.org/TR/REC-CSS2/casca...cascading-order

Here's a HTML snippet of what I have in the navigation:
html4strict Code:
Original - html4strict Code <div id="sidebar"> <ul> <li class="page_item current_page_item"> <a title="Home" href="home.php">Home</a> <ul> <li class="page_item"> <a title="Directors" href="home.php?page_id=12">Directors</a> </li> </ul> </li> <li class="page_item"><a title="News" href="home.php?page_id=3">News</a> </li> </ul> </div>

  

  


 <div id="sidebar">


   <ul>


     <li class="page_item current_page_item">


       <a title="Home" href="home.php">Home</a>


       <ul>


         <li class="page_item">


           <a title="Directors" href="home.php?page_id=12">Directors</a>


         </li>


       </ul>


     </li>


     <li class="page_item"><a title="News" href="home.php?page_id=3">News</a>


     </li>


   </ul>


 </div> 

I'm then using the following CSS to attempt to style this part:
css Code:
Original - css Code #sidebar { float: left; width: 149px; padding: 1em 0; } #sidebar ul { list-style: none; } #sidebar ul li { margin: 0.4em 0.8em; padding: 1px; } #sidebar ul li a { font-size: 1.5em; font-weight: 500; padding: 0.3em; text-decoration: none; color: #000; background: #FFFACD; display: block; border: 1px solid blue; } #sidebar ul li a:hover { color: #bb2a2a; } #sidebar ul li ul li { display: none; } #sidebar ul li.current_page_item ul li, #sidebar ul li.current_page_parent ul li { /* sub-menu item */ display: inline; padding: 0; margin: 0; border: none; } #sidebar ul li.current_page_item, #sidebar ul li.current_page_parent { border: 1px solid green; } #sidebar ul li.current_page_item ul li a, #sidebar ul li.current_page_parent ul li a { /* sub-menu item link */ font-size: 1.2em; padding: 0.1em 0 0.2em 17px; background: #FFFACD url(images/sub-dot.gif) no-repeat left; } #sidebar ul li.current_page_item a, #sidebar ul li.current_page_parent ul li a.current_page_item { color: #bb2a2a !important; border: none !important; } .current_page_item ul li a { color: #000 !important; border: none !important; } #sidebar ul li.current_page_parent ul li a, .current_page_parent a { border: none !important; } #sidebar ul li.current_page_item ul li a:hover, #sidebar ul li.current_page_parent a:hover { color: #bb2a2a; border: none !important; }

  

  


 #sidebar {


     float: left;


     width: 149px;


     padding: 1em 0;


 }


  


 #sidebar ul {


     list-style: none;


 }


  


 #sidebar ul li {


     margin: 0.4em 0.8em;


     padding: 1px;


 }


  


 #sidebar ul li a {


     font-size: 1.5em;


     font-weight: 500;


     padding: 0.3em;


     text-decoration: none;


     color: #000;


     background: #FFFACD;


     display: block;


     border: 1px solid blue;


 }


  


 #sidebar ul li a:hover {


     color: #bb2a2a;


 }


  


 #sidebar ul li ul li {


     display: none;


 }


  


 #sidebar ul li.current_page_item ul li, #sidebar ul li.current_page_parent ul li { /* sub-menu item */


     display: inline;


     padding: 0;


     margin: 0;


     border: none;


 }


  


 #sidebar ul li.current_page_item, #sidebar ul li.current_page_parent {


     border: 1px solid green;


 }


  


 #sidebar ul li.current_page_item ul li a, #sidebar ul li.current_page_parent ul li a { /* sub-menu item link */


     font-size: 1.2em;


     padding: 0.1em 0 0.2em 17px;


     background: #FFFACD url(images/sub-dot.gif) no-repeat left;


 }


  


 #sidebar ul li.current_page_item a, #sidebar ul li.current_page_parent ul li a.current_page_item {


     color: #bb2a2a !important;


     border: none !important;


 }


  


 .current_page_item ul li a {


     color: #000 !important;


     border: none !important;


 }


  


 #sidebar ul li.current_page_parent ul li a, .current_page_parent a {


     border: none !important;


 }


  


 #sidebar ul li.current_page_item ul li a:hover, #sidebar ul li.current_page_parent a:hover {


     color: #bb2a2a;


     border: none !important;


 } 

Using "View Formatted Source" in FF I'm finding that the color defined in ".current_page_item ul li a" is over-ruled by "#sidebar ul li.current_page_item a, #sidebar ul li.current_page_parent ul li a.current_page_item".

As you can perhaps tell, the current_page_item class is set on the list item that matches the current page, and if the current page is within a sub-section (i.e. it has a parent), current_page_parent will be set to the parent list item.

This gives me a navigation such as:

> Home
>> Directors

If we're on the Home page (as in example code above), I want that to have the red colored text, but Directors to be black. If Directors is the current page, I want that to be red, and Home to be black.

Basically anything that isn't the current page should be black...

At the moment (because .current_page_item ul li a doesn't seem to work) I'm getting red text for Home and Directors when on the Home page... I want Directors to be left black in this situation.

N.B. It's more complicated than above because I also want to do some styling with borders on the top level list items (well, the a element within), but if someone can point out where I'm going wrong with the above I think I should be able to sort the rest out...

Thanks in advance - please let me know if you need more details!

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?

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, 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 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.

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'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'm making a blog layout for someone, but I'm having problems with compatibility. I have not put in all the blog code yet, so don't tell me about that. My problem is that my scrolling div elements do not scroll in firefox. They work fine in IE though. I've tried everything I can think of. Firefox only resizes the table to fit the text, but I want scrollbuttons and a 90% high by 90% wide table.I want it to be compatible with as many resolutions as possible, so I am not really interested in going down the route of absolute table sizes, and even that doesn't seem to work either. Any ideas?

If you can tell me what to do, please e-mail me:
My email address

Actually, on second thoughts you can just reply to this post.

The CSS I tried:
Code:

<html>
<head>
<title>JM Beta</title>
<style type="text/css">
body		{
		background-color: #000;
		}
table.main	{
		background-color: #fff; 
		border-style: solid;
		border-width: 2px;
		border-color: #666;
		height: 90%;
		width: 90%;
		padding: 0px;
		}
h3		{
		font-size: 10px;
		font-family: arial;
		font-color: #000;
		}
td		{
		border-style: solid;
		border-width: 2px;
		border-color: #666;
		background-color: #fff;
		padding: 10px;
		}
div.scroll	{
		width: 100%;
		height: 100%;
		background-color: #fff;
		overflow: auto;
		font-size: 10px;
		font-family: arial;
		text-align: justify;
		}
div.norm	{
		width: 100%;
		height: 100%;
		background-color: #fff;
		font-size: 10px;
		font-family: arial;
		text-align: justify;
		}
</head>
</html>