I have been working on a website, I took Lisa's CSS template, and have changed it to how I want, I have the design down but I still need to add content.

Ive been opening it in Mozilla Firefox to see how it looks, but just now I tried Internet Explorer and it looks like.. ahem, Terrible! When you mouse over links they move, the content box is under the navigation and not to the right of it.

What did I do wrong?

Thanks for your help in advance

You did nothing wrong. Changing the css files depending on the user's browser is a everyday job for a professional web designer. There are certain elements that display differently depending on the browser. Also you may notice some differences in font sizes, colors and so on...All that is corrected by simply creating another css file and adding a "if IE" statement in your template(that is how i would do it).

__________________
Websites:
http://www.learnweb4u.com

Okay, What elements could be different for IE that work in Firefox and Chrome?

Many. Check W3Schools and Google

__________________
Websites:
http://www.learnweb4u.com

What would I be searching for exactly?

"Elements that work for IE"?

Thanks.

http://www.netmechanic.com/products/...Tutorial.shtml

Try that

__________________
Websites:
http://www.learnweb4u.com

Once you fix the problems the best thing to do (I know it's annoying) is download the main browsers and check your website in them after every layout/design change. I must check my website in the main browsers at least 5 times a day. Its annoying but worth it.

The first step to making your website browser friendly is to validate it and fix any errors. A validator allows you to see what code may be causing problems. Here is the link:

http://validator.w3.org/

The above link allows you to validate your HTML

http://jigsaw.w3.org/css-validator/

The above link allows you to validate your CSS

By doing this you are likely to fix some of the problems. Just type the URL to your html and CSS and the tool will scan your code and display the errors/warnings and say how they can be fixed.

If your having problems PM me your URL and I will be happy to take a look for you.

__________________

The only problem with validating it Is I don't have my website online. I'm just viewing it in Firefox, chrome and IE locally on my computer.

First Step Complete,

I uploaded my css and index page to a free host really quick and had no errors on the css and 9 errors on my html, because I had "/>" ending things instead of just ">"

But, IE still screws up my page.. when you scan over a link it shrinks, the content is still being put under the left navigation..

--vlad, thanks for the link to the tutorial, gives me a better concept on what browsers do, how they do it and what could cause issues.

--sequencehosting, The free web host I googled and got is really weird so im setting up with another one and ill pm you the url later.

Thanks for the links to the validation websites, At least I fixed 9 errors that could of been a problem down the road..

Anyone else have an idea of what could be wrong?

Thank you!

Another thing to do is check out http://browsershots.org/. It's a good way to test the appearance of your website in MANY different browsers, but it doesn't capture picture rollovers or anything like that.

__________________
Video tutorials on Microsoft website development - http://www.jaressloo.com
Make a little extra money - http://jaress.ambitenergy.biz
Click on "Our Opportunity" - Bottom right
Click on "Texas"

Awesome. I fixed the problem in IE where my content went below my navigation, but my links still shrink when hovered over.. which I can deal with better than my entire website completely screwing up.

One thing the validation thing did not see is that I didnt have a opening html tag, just an ending one.. lol. And that fixed part of the issue.. I assume my link shrinking has to do with my css.

Do you have the same font-size, font-weight for the a hover: style?

The only thing I have involving font color in the css for nav link and nav hovering is font color.

Oh wow.. fixed it..

Apparently in IE, your a:link and a:hover affect your special nav link and nav hover div.

in the a:hover is just randomly said font-size: 15.5px;

Woot, now it looks kind of normal in IE!

Thanks for making me think to look there!

I see, does this problem only happen in Internet Explorer?

You could always post your CSS here.