|
|
Ed_Millis Inner circle Yuma, AZ 2292 Posts |
I have a page loaded on my site, and the text displays different in IE7 than it does in FireFox and Chrome.
The page is: http://www.familyfunmagic.com/Welcome.htm I have screen shoots of the differences here: http://www.familyfunmagic.com/Screenshot_IE.jpg http://www.familyfunmagic.com/Screenshot_FF.jpg Honesty in coding: I borrowed this layout from someone else and entered my text. I've tried to implement some CSS, but I'm just learning about all of this had probably have quite a mash-up. A drop-kick in a good direction is greatly appreciated! Ed |
Scott O. Inner circle Midwest 1143 Posts |
Ed, if you want your fonts to stay the same size across browsers, you need to specify a font size. For example, the following tag specifies the font to be a Times New Roman with a size of 4 and the color will be black.
<font face="Times New Roman" size="4" color="Black">sample text</font>
Do not become weary in doing good, for at the proper time you will reap a harvest, if you do not give up. Galatians 6:9
|
Ed_Millis Inner circle Yuma, AZ 2292 Posts |
Does the ' size="4" ' stay consistent? I read somewhere about setting text sizes as either a percentage (set body text = 100%, and reference everything else off that), or using either ems or pxs.
Also, does it matter if it's in a table as opposed to a div block? Ed |
leapinglizards Inner circle 1263 Posts |
Size will not be the same accross browsers on different monitors. Ideally, if using CSS a way (Not THE way, but A way) is to declare the size of the page font overall as Normal, and then every other element as a percentage of normal (keeping in mind that certain items will cascade so, an item marked at 90% normal that is INSIDE another element that is ALSO 90% normal, will end up being 90% OF 90%.... or, probably smaller than you intend it.
I just looked at the code and it is kind of a jumble of inline CSS and tabular design. Might want to pick one or the other. BUT bottom line is, it will never look exactly identical on every browser, even on the same computer AND certainly not or different computers, even in the same brower. You will get close, but not exactly the same. http://browsershots.org/ will let you see your site on multiple platforms at multiple resolutions, in various operating systems....
Leaping Lizards!!! Who knew it was possible.
<BR> <BR>www.LeapingLizardsMagic.com |
sherifmayika New user Cochin, Kerala 96 Posts |
Ed,
I tested your site on Firefox, Opera and IE. I used Developer tool for IE and Opera and on FF I used Firebug. Try this: div#tblTopText { font-size:12pt; line-height:150%; } Though you have'nt asked it I raise my eyebrows seeing your site. I don't understand wy do you use a table based layout in the 21st century? Why use basic typography? |
Ed_Millis Inner circle Yuma, AZ 2292 Posts |
Quote:
Though you have'nt asked it I raise my eyebrows seeing your site. Because my HTML and CSS skills are sadly lacking!! My first web pages were simply MS Word table-based layouts saved as .htm files. Years ago I attempted to Use FrontPage, but got frustrated. Today I'm using PageBreeze (free), and reading everything I can find on HTML and CSS. Good thing I don't need this tomorrow!! Ed |
Ed_Millis Inner circle Yuma, AZ 2292 Posts |
Quote:
I just looked at the code and it is kind of a jumble of inline CSS and tabular design. Might want to pick one or the other. Yah - I was afraid of that! Copy from another source, add in a copy from an instructions page, stir in a bit of what I know - wahlah!! It's a mess!! Quote:
BUT bottom line is, it will never look exactly identical on every browser, even on the same computer AND certainly not or different computers, even in the same brower. You will get close, but not exactly the same. At this point, I will settle for close! I can deal with the headline breaking in the wrong place. But the selling points dropping from 16pt to 6 pt?? (Boy, things are sure simple when all you want to do is magic!) Ed |
sherifmayika New user Cochin, Kerala 96 Posts |
Why not use Dreamwaver 30 days trial? Dreamweaver has bruit-in css standard templates.
I suggest you to redesign the present one |
Ed_Millis Inner circle Yuma, AZ 2292 Posts |
I didn't know DW had a trial version - thanks for that tip, Sherif. I might do that at a later date. But right now I don't have a full 30 days to devote to building all of what I want. What's up on the site now is horrible and badly in need of replacing. But I'm working a full-time-plus job, and not open for magic business yet, so I have time to make a rough draft and learn some stuff before I throw myself up against a 30-day time limit.
Ed |
MikeClay Special user Atlanta GA 761 Posts |
Ok I havnt been around in a few weeks (life has gotten hectic) but I was just runnin through so to not lose touch
Ed, in you CSS your font code should be like this (edit this to what you WANT it to be, this is the FONT rewrite from one of my sites) by using this layout you rewrite the BASE HTML for the site so that the code is clean and FAST (Google now uses load time as a variant on ranking.. which is a NEW NIGHTMARE) Using EM instead of PT gives more consistency across platforms and browsers.. still some variants but not as noticeable Also this will let you properly use HEADER tags and let them look nice MORE INFO BELOW CSS CODE /********************************************* Default font settings and typography. The font-size percentage is of 16px. (0.75 * 16px = 12px) *********************************************/ html { font-size: 100.01%; } body { font-size: 75%; line-height: 1.4em; color: #333; font-family: Georgia, Times, 'Times New Roman', serif; } input, select, textarea { font-family: Georgia, Times, 'Times New Roman', serif; } h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, ul, ol, dl, label { margin-top: 1.5em; margin-bottom: 1.5em; } a img { margin: 0; } /********************************************* Main Background *********************************************/ body { background: #385C7D; } /********************************************* Universal Link Styles *********************************************/ a { color: #335C7C; text-decoration: none; } a:hover { color: #333; text-decoration: underline; } /********************************************* Headings *********************************************/ h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #335C7C; font-family: "Trebuchet MS", Helvetica, sans-serif; } h1 { font-size: 1.75em; line-height: 1.5em; margin-top: 0.75em; margin-bottom: 0.75em; } h2 { font-size: 1.5em; line-height: 1.75em; margin-top: 0.9em; margin-bottom: 0.9em; } h3 { font-size: 1.25em; line-height: 1; margin-top: 1em; margin-bottom: 1em; } h4 { font-size: 2em; line-height: 1.15em; margin-top: 1.15em; margin-bottom: .5em !important; color: #FFF; } h5, h6 { font-size: 1em; } h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0em; } /**************************************************** End of Base Code for site ****************************************************/ to build out a custom CLASS that you use randomly use this type of code then in your site use something like <p class="classname"> your content</p> /****************** inside yout style.css file *******************/ .classname h3 { clear: both; color: #D0ECF3; font-weight: bold; text-shadow: 2px 2px 2px #333; font-size: 3.4em; line-height: 1em; }
its ok.. balloon dogs don't bite
|
ScottRSullivan Special user 874 Posts |
Great example of expert help! Thanks for sharing that, Mike.
Just as an FYI, if you make the jump to HTML5, it supports the "font-face" tag and, generally, makes things much more consistent. Also, since most many main browsers and most mobile browsers (iPhone/Blackberry/Android/Palm/etc) are switching or have switched to the Webkit engine (the under the hood rendering engine), this sort of problem is slowly vanishing. As far as using Dreamweaver.... I wouldn't. It adds too much junk into the code. Imagine you spent the last year writing a wonderful book. You spent much time and energy to get the wording just right. Then you decide to publish it in France. Using dreamweaver to write your code is like using Google Translate to translate your book to French. It will mostly work, but it won't look as pretty as if you hired a native speaker to translate it and capture the essence of what you wrote. |
MikeClay Special user Atlanta GA 761 Posts |
ALSO if your going to be using HTML5 is the way to go..
I am looking for a easy way to do this right now
its ok.. balloon dogs don't bite
|
Ed_Millis Inner circle Yuma, AZ 2292 Posts |
Mike:
You just condensed the last hundred web sites I've gone blind reading into something that made sense to me! A thousand thanks!!! One more quick question: does the DOCTYPE declaration make much difference if I have this? Scott: You make DW sound almost as much fun as FrontPage! I did find that the PageBreeze editor I'm using now automatically adds a "MSHTML" tag in the meta ssection - not sure if that's screwing things up too! Ed |
ScottRSullivan Special user 874 Posts |
Mike, here's a GREAT solution for ya:
http://books.alistapart.com/ It's from the awesome guys over at A List Apart. Ed, too funny! Cheers! |
The Magic Cafe Forum Index » » Tricky business » » I need the secret! IE vs FF display text different (0 Likes) |
[ Top of Page ] |
All content & postings Copyright © 2001-2024 Steve Brooks. All Rights Reserved. This page was created in 0.05 seconds requiring 5 database queries. |
The views and comments expressed on The Magic Café are not necessarily those of The Magic Café, Steve Brooks, or Steve Brooks Magic. > Privacy Statement < |