Header text moving positions in IE & FF

Pickle · #1 Jan 17th, 2006, 21:39

Hello

Sorry not sure if this is the right forum... having problems with header text in so much that it moves up or down quite significantly depending on whether I'm viewing in IE & FF. Is there an easy way round this?

Plse bear in mind that I'm new to webdesign!

Many thanks

Corey Bryant · #2 Jan 17th, 2006, 23:00

Usually there is but are you using CSS, tables, etc? What is the URL? What is the source code? It is easier when we are able to see it. Thanks!

benbramz · #3 Jan 18th, 2006, 01:35

Quote:

Originally Posted by Corey Bryant

Usually there is but are you using CSS, tables, etc? What is the URL? What is the source code? It is easier when we are able to see it. Thanks!

dito the above. also, if its not on line, you could attach the files (in a zip archive) to this thread...

Pickle · #4 Jan 18th, 2006, 07:09

Hi

It's www.mugginsmugs.com - I haven't changed it to header text yet though, because of the problems. The main text at the top of the page (in the pink bit) is an image rather than header text but I want to change it so it optimises better.

As far as I'm aware I'm not using CSS or tables but this is my first site and I'm still learning the technical terms for stuff - I designed a lot of it without knowing javascript, CSS, tables etc.

Sorry, that's not much help is it? At work at the moment so can't access my site...

Corey Bryant · #5 Jan 18th, 2006, 11:48

Actually you are using quite a bit of inline CSS

Code: Select all

<div id="Layer1" style="position:absolute; left:5px; top:5px; width:790px; height:555px; z-index:1">

Using the WYSIWYG editor can sometimes cause a few problems creating the code.

On a cursory glance, I did not see any differences in Firefox and Internet Explorer. I also did not see many problrms with the code. I would consider though changing the DOCTYPE to

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

Pickle · #6 Jan 19th, 2006, 07:36

Hi

Thanks for the replies.

The live site does not contain header tags at the minute for the simple reason that they shift down in FF and up in IE (quite significantly). This is the HTML code that I have tried and this happens with:

<div id="Layer10" style="position:absolute; left:58px; top:39px; width:467px; height:46px; z-index:18">
<h1><font color="#FFFFFF" size="3" face="Franklin Gothic Medium">ALTERNATIVE
WORDING SUGGESTIONS for your Personalised Mug</font></h1>

Am I doing something wrong here? The only way I know to insert text is to draw a layer and then insert it in the layer.

I am not technically minded and am new to web design so would appreciate a response in simple terms...

Corey Bryant · #7 Jan 19th, 2006, 13:36

Well using the above - you are limiting the layer to a specific width / height. And in you text

HTML: Select all

ALTERNATIVE WORDING SUGGESTIONS for your Personalised Mug

is larger than 467 pixels this would cause some problems.

Do you need a width on it? You could consider doing something more like:

HTML: Select all

<h1 style="position:absolute; left:58px; top:39px;  z-index:18"; font: #fff 'Franklin Gothic Medium';>ALTERNATIVE
WORDING SUGGESTIONS for your Personalised Mug</h1>

I really cannot remember for the life of me right now how to enter Franklin Gothic Medium into CSS. I usually use the basic fonts for fear that someone might not have the font that I want. You would need to embed the font to help ensure they see it. And you might need the WEFT program. Also do not use the font tag, snice it is deprecated.

PX is properly used for setting dimensions and positions. Do not use it for font-size, unless you have some ego thing about control. PT is for print, it has no place on a web page except for specifying alternate print styling. EM is a relative size that specifies the font size base on the size of the letter M in the current font. 1em is the same as saying 100% and 1.5em is about 150%. I am not a big fan of named sizes, because they are not implemented consistently cross-browser.

But honestly, I would use tables for your layout even though they were not meant to lay out your web site. The reason I am telling you this is simply because it is a lot easier if you are new to HTML and especially CSS.

Pickle · #8 Jan 19th, 2006, 15:50

Hi

Thanks for that. I've just been reading up on CSS and all manner of things and I think it's time to go back to the drawing board. I didn't design any of the site with CSS (well, not knowingly) and I now realise that I've used font tags EVERYWHERE.. which obviously I'll need to convert to CSS.

Yeah, I've just realised that funny font is not universally recognised so I'll be scrapping that as well. Ditto the pixel sizing.......

It's gonna be a long night I think.........

Thanks again for all your help & advice (that goes out to everyone on this forum). I'm sure all this work will be worth it in the long run!

Corey Bryant · #9 Jan 19th, 2006, 15:59

Start slow - use tables. Use CSS to apply font to your webpage. And then "graduate" up to layers, etc. It took me a long time to actually make the switch from tables to layers (just because)

The WYSIWYG editors can be great but they are not up to date yet with everything.

benbramz · #10 Jan 19th, 2006, 23:11

jump right in if you feel confident to do so, otherwise do it slow, as suggested

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Div Positions	KBOOM	Web Page Design	0	May 15th, 2008 00:56
moving text	new bee	Starting Out	6	Sep 19th, 2007 22:06
Moving Text	jaypabla	Starting Out	4	May 13th, 2007 13:56

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Header text moving positions in IE & FF