Help - Search - Members - Calendar
Full Version: Rendering between browsers
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
Rigit
I'm still a bit new at this web page stuff. I actually no little html but I can hold my own...sometimes. I use Kompozer. My issues is the way pages appear between browsers. I've found that Firefox and Chrome view things very similar and IE and Safari view the same. How do I get them all to show the same? I put an image on a page. Then I put one below that. Firefox shows a small gap between them which I want. IE nope. I have a Google map below that. Firefox does fine as well as Chrome but IE and Safari put the map to the side because the way they see it the map is too high and intrudes on the space for the graphic above it. So I add a space between the graphic and the map. Now IE and Safari are doing fine but Firefox and Chrome now see a large gap between the graphic and the map. How do I get these browsers to play nice?
pandy
Hi! smile.gif

Can you post a link to the page in question?
Darin McGrew
In the meantime, please see the FAQ entry Why does my page display fine in one browser but incorrectly or not at all in another?
Rigit
QUOTE(pandy @ Feb 3 2011, 10:30 AM) *

Hi! smile.gif

Can you post a link to the page in question?


My Webpage
It's something I do for my church. I tend to rely on graphics quite a bit but I prefer them to just plain old text.
pandy
Change text size in FF and you'll see misalgnment there too. sad.gif

I'm afraid it isn't a good idea to use BR and non-breaking spaces to create margins. It's better to use real margins (CSS).

About the images - it's fine to use images, but you shouldn't use images of text. You could use the same images (w/o the text) as backgrounds for real text. There are several problems with images of text. The text can't be selected and copied. Search engines can't index the text, to them it isn't there. Same goes for the visually impaired, maybe using some kind of screen reader. They get nothing. The last could be a big issue for a church site, me thinks.

I don't now if this helps you, but you need to rethink the way you create the design.
Rigit
QUOTE(pandy @ Feb 3 2011, 03:54 PM) *

Change text size in FF and you'll see misalgnment there too. sad.gif

I'm afraid it isn't a good idea to use BR and non-breaking spaces to create margins. It's better to use real margins (CSS).

About the images - it's fine to use images, but you shouldn't use images of text. You could use the same images (w/o the text) as backgrounds for real text. There are several problems with images of text. The text can't be selected and copied. Search engines can't index the text, to them it isn't there. Same goes for the visually impaired, maybe using some kind of screen reader. They get nothing. The last could be a big issue for a church site, me thinks.

I don't now if this helps you, but you need to rethink the way you create the design.


Yes this helps a lot thank you. I'm afraid I don't know css. So using it for margins is unlikely. I rely quite a bit on Kompozer for basic layout. Although I can go in and add or subtract<br> and adjust image or player sizes manually as well. I certainly understand the image of text issue and I'll be rethinking that a little bit. I tinkered with text size and found all browsers have difficulty depending on text size. I could find out the default text size for all browsers hoping they're the same and design a page to fit that. Most people have things on the default settings. A better idea is to simply make the p[age more accessable as you suggest. dry.gif
pandy
You need some block level elements in there. You can't use only inline elements (text level element) and break them up with BR and &nbsp;. It won't work.
http://htmlhelp.com/reference/html40/block.html

You don't need to know CSS in and out to use it a little. We can help you with that. But you do need some structure to the page for anything to work.
Rigit
QUOTE(pandy @ Feb 3 2011, 07:48 PM) *

You need some block level elements in there. You can't use only inline elements (text level element) and break them up with BR and  . It won't work.
http://htmlhelp.com/reference/html40/block.html

You don't need to know CSS in and out to use it a little. We can help you with that. But you do need some structure to the page for anything to work.


Yes I understand this but I'm so very new at this that trying to learn everything in a day is impracticle. I'm self taught through research and reading on the net. In the mean time my church needs this up there. I'm working on a new page based on suggestions here. I've removed the large graphic and replaced it with a css background. I'm finding that you can only do that once though. If I align a background to the right cneter, I can't go and put another one at left center because it cancels out the first background. angry.gif I thought about putting a table cell there as to isolate and define that spot, but I can't figure out how to put a background image in a table or cell. All I can do is add color to it. You can't see it, but I'm banging my head on my desk as we speak.
pandy
No one did it in a day. Give it some time.

Don't focus so much on centering images and such. Get what you need in there first, that is headings, paragraphs, real text. Don't bother with that it looks boring. When you have the structure it's time to pimp it with images, colors, alignment and so on. wink.gif
Darin McGrew
QUOTE
I've removed the large graphic and replaced it with a css background. I'm finding that you can only do that once though. If I align a background to the right cneter, I can't go and put another one at left center because it cancels out the first background.
While it's true that each element can have only one background, you can use multiple elements, each with its own background. For example, you could have two div elements, one inside the other. You could position one background image in the top left of one div, and the other background image in the top right of the other div.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.