?
Solved

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

Posted on 2006-11-07
14
Medium Priority
?
258 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 1200 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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are two main kinds of selectors in CSS: One is base selector like h1, h2, body, table or any existing HTML tags.  For instance, the following rule sets all paragraphs (<p> elements) to red: (CODE) CSS also allows us to define our own custom …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

770 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