Thread: How to make your site look right in all browsers?

Hi :)

My headlines look a little jumbled in web browsers other than IE. My headlines are separate from the rest of the text.

To fix this I've tried leaving 'more room' after each headline (dragging the text box handles so that it's bigger than what the headline actually is.
But still the headlines are moving about, or breaking up into two lines.

Is there a way around this?

Thanks for any advice.

What is your web site?

Typical display issue when using a non-universal font/not web-friendly font, and endemic to FireFox vs. IE-based browsers.

Two choices: revert to using a web-friendly font that is not automatically substituted computer to computer or browser to browser; convert the text into an image to "fix" it, either manually or by using the LogoMaker in BV.
Keep in mind, however, that if using LogoMaker to convert text "Headings" into images, they will no longer be usable as H-Meta elements, nor will they have the ability to be ALT TAGGED as a normal image would....

Thanks for replies :)

My website is here
and I'm using the web-friendly arial font

Thanks

Hi, I believe you are talking about your <h1> tag moving around, which is not uncommon. (Like you have below)
<h1><font style="font-size:21px" color="#6B8ACE" face="Arial"><b>Copywriting &amp; Content optimisation</b></font></h1>


Try this.
Place this 1st part of the code in the “Between the head” area of your page properties.

HTML Code:

<STYLE type="text/css">
h1 {font-size:21px;color:#C0C0C0;font-family:Arial MS;font-style:normal;margin:0px;}
</STYLE>

Place this second part in a html box on the front of the page. (Preview)

HTML Code:

<h1>Copy writing and Content Optomization</h1>

Hi Chris

That sounds like a good strategy to fix the h1 tags.

Unfortunately the h2 & h3 tags are also not exactly where I put them, so the spacing between heading and paragraph is out all down the page.

It would be really time intensive trying to fix all those headings in html.

I looked at my site in all the different browsers. For example, this is it in mozilla firefox : http://png.browsershots.org/81b885ed...62cff3f3d2.png

(not sure if that link is going to work)

Is there some special way you can set everything out so that this doesn't happen? It's fine if you don't have the h tags headings separate from the rest of the text - but I don't know how to do these tags in BV if the headings are not separate.

Thanks

Hi, sometimes you have to do a little playing around with tags.
But! You can try placing your text in a table (lets say) 1 column & 4-5 rows. You can then place text in one cell & html in another via cell properties. Worth a try!
The css can be extended for the other h2/h3 tags

<STYLE type="text/css">
h1 {font-size:24px;color:#000000;font-family:Comic Sans MS;font-style:normal;margin:0px;}
h2 {font-size:20px;color:#00ff00;font-family:times;font-style:normal;margin:0px;}
h3 {font-size:16px;color:#00ff00;font-family:times;font-style:normal;margin:0px;}
</STYLE>

Wow, does everyone have to do this with their headings?

Thanks for the info Chris - appreciated :)