My pages look different in different browsers

Get Started
1

I have a situation I need help with. I had made an index page with tables that worked fine in all 3 browsers. I decided that I wanted to learn CSS. I them
made the same page using CSS.

Now when I look at the page using IE everything is the way it is suppose to, I have white text, size medium and a header that is centered.

Now when I look at the page with either chrome or firefox the text is not white but green, the size is small instead of medium and the header is not centered
but sits over to the left of the page.

Does anyone know how or what to do in a situation like this, not everyone that is going to see your page is going to be using IE. I am just stumped on this one.
At least with CSS you can look up stuff and find some help but with this I just don’t know how to fix it. I would appreciate any help if you have any ideas.

2

Do you have a link to the page that we can look at? If not, please can you post your HTML and CSS. Without seeing your code, we can’t really help. The only thing I can suggest at the moment is that you run your code through the W3C Validators, to eliminate any errors or typos that could be causing your problems. See http://validator.w3.org/ for your HTML and http://jigsaw.w3.org/css-validator/ for your CSS.

3

Yes I do I have it uploaded. The image part is the only part of the page that is going to be permanant the text is just to see how things are going to work.

kerneysplace.info

This does not show as a link here but that is what I use to get in to the site.

4

Hi carlynn.

You are missing a } after the #frame6 declaration so aren’t ‘closing’ it.

:slight_smile:

5

None of your divs have a width applied, so the layout was broken when I first viewed it - my browser is almost never set to display full-screen, unlike yours.

So it will look bad for everyone who doesn’t have a screen the same size as yours and their browser the same width as yours.
To see this yourself, drag your browser down to a smaller size and watch what happens to the borders you have created, to the image and to the text. Never design and test with your browser set to full screen, as that will hide many potential problems.

6

Thank you for your help with my post. I see what you mean when I look at it in different sizes.

What is the best way for me to fix this problem. This is so confusing learning all this with all the different layouts I
never realized CSS was that hard to learn.

Here is the address if you want to look at the site again.

kerneysplace.info

7

Hi there,

Can I ask what’s a good way to check my website shown on Mac Browsers, without actually owning a Mac? Currently, I’m using Windows 7, and my website is misaligned in Mac Browsers…

Thanks in advanced.

8

Using a live browser is always the best way, but if that’s not possible, there are services such as BrowserCam you can use. Better still, find a friend with a Mac. :slight_smile:

Which browsers have you tested on in Windows, and which are not working on Mac? If you provide a link and some more information, we can help you track down the problem. It’s probably best if you start a new thread for that.

9

This question has been asked a number of times so a forum search would yield suitable results.:slight_smile: (You should also start your own thread rather than tack on to someone else’s ;))

10

I checked out BrowerCam recently and it ain’t cheap…

Sure, thanks for your advice, I found a thread mentioning stuff about the problem I encountered. Thankyou

11

Thanks Paul. I found some information about it in another thread.

12

A simple fix could be to change this:


#allcontent {
  margin-left: auto;
  margin-right: auto;
  [COLOR="#FF0000"]width: 1200px;[/COLOR]
}

to something like this:


#allcontent {
  margin-left: auto;
  margin-right: auto;
[COLOR="#FF0000"]  width: 90%;
  min-width: 1048px;[/COLOR]
}