Solved

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

Posted on 2006-11-07
14
251 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?
0
Comment
Question by:kevp75
14 Comments
 
LVL 12

Expert Comment

by:sandip132
ID: 17894981
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/
0
 
LVL 25

Author Comment

by:kevp75
ID: 17895023
I use it for every site I do...DW 8 to be precise...
0
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 300 total points
ID: 17895043
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
0
 
LVL 25

Author Comment

by:kevp75
ID: 17895083
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
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 100 total points
ID: 17896643
removing the float:right from the content div moved the welcome back up in FF
0
 
LVL 25

Author Comment

by:kevp75
ID: 17898325
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?
0
 
LVL 25

Author Comment

by:kevp75
ID: 17898652
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%;?
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 25

Author Comment

by:kevp75
ID: 17898669
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  :)
0
 
LVL 25

Author Comment

by:kevp75
ID: 17898726
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;
      }
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17899730
> 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
0
 
LVL 7

Assisted Solution

by:mpn_1983
mpn_1983 earned 100 total points
ID: 17900040
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>
0
 
LVL 25

Author Comment

by:kevp75
ID: 17934101
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
0
 
LVL 25

Author Comment

by:kevp75
ID: 17934318
got it
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17934353
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
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Most of the sites are being standardized with W3C Web Standards. W3C provides lot of web standard services to the web. They have the web specification, process and documentation for all the web standards. You can apply HTML, CSS and Accessibility st…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now