We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

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

Medium Priority
275 Views
Last Modified: 2013-12-03
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?
Comment
Watch Question

Hello, I recommend you to use macromedia dreamweaver to design your web page. you can create standard code based on your target browsers....
www.adobe.com/products/dreamweaver/

Author

Commented:
I use it for every site I do...DW 8 to be precise...
IT Manager
CERTIFIED EXPERT
Commented:
kevp75,

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.

b0lsc0tt

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

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.   http://www.getmysupport.com.  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 PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009
Commented:
removing the float:right from the content div moved the welcome back up in FF

Author

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?

Author

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%;?

Author

Commented:
DOH!

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  :)

Author

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 {
      color:#6ACA13;
      font-size:medium;
      font-weight:bold;
      border-bottom:1px solid #89919B;
      margin:0 0 5px 0;
      padding:2px 0 3px 5px;
      width:100%;
      }
#content {
      padding:0 5px 0 4px;/*t, r, b, l*/
      border-left:1px solid #F5F5F5;
      margin:0 0 10px 0px;/*t, r, b, l*/
      vertical-align:top;
      }
b0lsc0ttIT Manager
CERTIFIED EXPERT

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

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

hth
Matt

in fact here's the relevant code section:

you'll need this bit of css:

#lefty_container  
{
      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">
                                    <tr>
                                          <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>
                                    </tr>
                              </table>
                        </div>
                        <div class="lefty">
                              <h2><a href="/testimonials/">Testimonials</a></h2>
                        </div>
                  </div>
                  <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>
                  </div>

Author

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

Author

Commented:
got it
b0lsc0ttIT Manager
CERTIFIED EXPERT

Commented:
Great!  I'm glad that I could be one of those that helped.  Thank you for the grade, the points and the fun question.

bol
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.