CSS - How To Center Text Vertically - Two Font Sizes

Hi All

I have been contacted by a visitor to one of my sites to let me know that the fonts on a menu are too large but only on Chrome and Safari.

I'm struggling to figure out why the web-kit browsers are enlarging the fonts so much any help that I can get from you guys would be gratefully received.

Font size is fine FF3.5 and IE8

Site is http://www.pwfs.co.uk and its the horizontal navigation menu that the issue occurs.

Hoping someone can help

John

I was in a meeting today talking about relative font sizes and how they can be problematic, because nesting elements may increase or decrease their font size.

A co-worker said that I could use !important in my CSS to override/ignore the font-sizes of any nested elements. He seems to be way off. The W3C says that !important is really just about user versus author stylesheets, and apparently declaring !important in an author stylesheet doesn't do anything.

So first question -- am I right about !important? It's only about user and author stylesheets, yes?

Second question -- When dealing with relative fonts and nested elements, you have to start writing pretty complex rules, right?

Is there any easy way in CSS without writing multiple rules to say "regardless of what element I place you in, always be x% font size..."?

I heard people complaining about "accessibility", so i finally designed a site with relative font sizes. my default font sizes are 90% of whatever the browser default would be. to my horror, i see that indented lists that contain indented lists get progressively smaller.... can someone suggest how to prevent this while still letting allowing variable font sizes?

many thanks.

dan

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!

Hi I'm new so please bear with me...
My client wants his website (fixed height of 400px with scrolling text) in the center of the page. This is the site: wanteddesign.co.za/caffeverdi/index.html
As you can see it's centered in a large resolution but in 1024x768 it's not... how do I edit the CSS so it's displayed in the middle of the page?
another thing: the Facebook icon shows in the right place in my resolution but in the smaller resolution of 1024x768 it's in the middle of the page.

help help help pleaseeeeee, thanks!!!

Is there any way to align an element vertically? I have, for instance, some <a>'s in some <td>'s which are styled thusly:
css Code:
Original - css Code td a { display: block; width: 100%; height: 100%; }

  

  


 td a {


     display: block;


     width: 100%;


     height: 100%;


 } 

so that they fill the entire <td>. The problem is that if the table row expands due to word wrap, the links stick to the tops of the cells instead of centering vertically as is the default behavior of inline elements in a table. I've tried padding: auto; on the links, that didn't do anything. How can I fix this?

I have a horizontal nav menu I've created using <ul> and <li> inside a <div>

The problem is I can't get it to vertically center. I tried using padding and/or margin and it didn't work for all browsers.

Here is the html:
Code:

<div class="top_nav">
<ul>
<li><a href='/'>HOME</a></li>
<li><a href='menu'>MENU</a></li>
<li><a href='catering'>CATERING</a></li><li>DETAILS</li>
<li><a href='photos'>PHOTOS</a></li>
</ul>
</div>

and the CSS:
Code:

.top_nav {
	margin: 0 auto 15px auto;
    height: 25px;
    padding: 10px;
	clear: both;
}

.top_nav ul {
	list-style: none;
    text-align: center;
}

.top_nav li {
    padding: 0 25px;
    font-family: "Palatino Linotype", "Times New Roman", Times, serif;
    font-size: 16px;
    font-weight: bold;
    display: inline;
    letter-spacing: 2px;
}

.top_nav li a {
    color: #FFF;
    text-decoration: none;
}
.top_nav li a:hover {
 	text-decoration: underline;
    border-bottom: 3px solid #660000;
}

It stays vertically positioned at the top

How would I center an image vertically in a div that has varying height? Normally I would set a line-height and then a vertical-align but the container is of varying size dependent on content . The only way I can think of is to make the image a background and do background-position: center center;

Is that the only workaround?

Hi. I've the following and I couldn't have the right div to vertically align when the left div have multiple lines. I tried vertical-align:middle on the right div and doesn't work. And this is driving me crazy. I hope anyone can help me. Thank you.

<div style="width:800px">

<div style="width:730px;border:solid 1px red;float:left;">
LOTS OF CONTENT... MORE THAN 1 LINES
</div>

<div style="width:50px;float:right;border:solid 1px red;">
CLOSE LINK SHOULD BE HERE LATER
</div>

<div style="clear:both;"></div>

</div>

Hi all,

I know there are certain tricks to vertically center texts or images in a div area.

And I have read somewhere there are plans to avoid current complexity compared with tables.

For example, provided I use same CSS...

Code:

div,table{
  width: 250px;
  height: 100px;
  border: 1px solid red;
  text-align: center;
}

...we optain well vertically centered text in this table...

Code:

<table>
  <tr><td>this IS vertically centered</td></tr>
</table>

...but not in this div based one...

Code:

<div>this IS NOT vertically centered</div>

I ask, do you know an easy way to acomplish the same we get with tables?

Thanks!

I'm trying to position the image below vertically center and horizontally left to no avail. Its horizontally left but centers the top of the image in the center of the page. What am I doing wrong?

<DIV style="position: absolute; top: 50%; left: 0px; border: none"><img src="images/right.jpg"></img></DIV>

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

Is there any way to make the View-Text Size work in CSS - or more specifically, is there any way to limit how large or small the text becomes?

I know you can use 0.8em font sizes, but I don't want the font to them become too large or small when adjusted, so is there any way to limit this?

Thanks.