Font Sizes, and those Silly Div's.....

I've noticed that my font sizes are fine in IE, but shrink way down in FF, Netscrap, and Opera.

I've also noticed that something gets screwy with my divs.  They display fine in IE, but not in the rest...

any thoughts?
LVL 25
Who is Participating?
b0lsc0ttConnect With a Mentor IT ManagerCommented:

What is the unit you are using (i.e. px, em, etc)?

Regarding the "screwy" divs have you checked to make sure the html validates?  What are some of the symptoms?

Let me know if you have any questions or need more information.

Hello, I recommend you to use macromedia dreamweaver to design your web page. you can create standard code based on your target browsers....
kevp75Author Commented:
I use it for every site I do...DW 8 to be precise...
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to and use offer code ‘EXPERTS’ to get 10% off your first purchase.

kevp75Author Commented:
validates XHTML Transitional...except for a few pages where I have onclick events in an <a> tag

I use px for sizing purposes....

have a look.  on the home page there is the one H1 tag  (Welcom to....)  In IE it stays where it should be, but in FF it moves down the page.....also....the links in the blue area get smaller in FF
Michel PlungjanConnect With a Mentor IT ExpertCommented:
removing the float:right from the content div moved the welcome back up in FF
kevp75Author Commented:
ok, but now the h1 seems screwy.....

also, part of the question was the font-size in those links in that blue area.....  Why's it shrink in one, but not the other?
kevp75Author Commented:
i'm actually wondering if I should start using fixed font sizes.  I've been using small,medium, smaller, etc..because I've found that the text gets bigger if I make them bigger in my browsers settings  (accessibility)

Would a percentage work the same way?  Say something like font-size:75%;?
kevp75Author Commented:

i just figured out that text size issue.  Those links in that blue area are h5's, and I don't have any styling in my stylesheet to specify what hey should be...

thanks for dealing with me  :)
kevp75Author Commented:
although, that h1 still seems messed up.... if you have a look at it in IE, and then FF, you'll see what I mean.  In IE it's displayed right, in FF it's not:

here's my CSS for content and the H1:
h1 {
      border-bottom:1px solid #89919B;
      margin:0 0 5px 0;
      padding:2px 0 3px 5px;
#content {
      padding:0 5px 0 4px;/*t, r, b, l*/
      border-left:1px solid #F5F5F5;
      margin:0 0 10px 0px;/*t, r, b, l*/
b0lsc0ttIT ManagerCommented:
> i'm actually wondering if I should start using fixed font sizes.  I've
> been using small,medium, smaller, etc
Yes.  I thought you answered me that you use px.  I have found that either px or em is better at consistent font sizing than using other types of values.  Relative values like small, medium, and large are especially bad because they are relative.  Most browsers will still let people adjust font size, even if it's in px, but at least it starts at the right place and is usually not ever too small.

I'm glad you figured out one of the problems but I do hope this general suggestion will help.

mpn_1983Connect With a Mentor Commented:
here's what happening to your content div - in order for your second .lefty div to go beneath the first you used clear:both; but this is causing #content to sit below the level of the first lefty div.

to cure this you could place the content div immediatley after the first .lefty - but this is a bit unseemly so the better solution in to make a larger .lefty div containing any and all of the content you want on the left then you'll find that #content will move up to where you want it to.


in fact here's the relevant code section:

you'll need this bit of css:

      width: 205px;
      float:  left;
      clear:  both

<div id="lefty_container">
                        <div class="lefty">
                              <h2><a href="/news/">Latest Updates</a></h2>
                              <table width="100%" cellspacing="0" cellpadding="0">
                                          <td style="padding-left:2px;font-size:85%;"><img src="/images/fButton.gif" alt="hmm" /><a title="Read More..." href="/news/?nID=1">Site Development</a></td>
                        <div class="lefty">
                              <h2><a href="/testimonials/">Testimonials</a></h2>
                  <div id="content">
                        <div class="msg">
                                    Please register or login to view/start tickets.</div>
                        <!--Content Starts Here-->
                        <h1>Welcome To Our Support Site</h1>
kevp75Author Commented:
I appreciate it Matt, however your CSS snippet reduces the entire page size to be 205px wide.

i've got the div thing corrected, now the only problem is with the h1.  It seems that the border-bottom does not stretch the entire width of the page
kevp75Author Commented:
got it
b0lsc0ttIT ManagerCommented:
Great!  I'm glad that I could be one of those that helped.  Thank you for the grade, the points and the fun question.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.