hi everyone
I recently designed my webpage via notepad++
I am very basic at this, right now some pages of my site doesn't show up in other browsers than firefox. (like the contact form in contact page doesn't show in IE)
please help me what to do. Also it seems that my site doesn't fit in different screens. I tried to fix this in different ways but it didn't work.
the page is
www.sarairannejad.com
thanks
sara
As much as we like to say after all these years we have finally agreed on browser wide standards for everything in <html> & CSS but sadly we haven't. Although it has gotten better each browser has certian little querks. For instance internet Explorer is known to accept the least. In the past not allowing rounded borders, shadowing on on borders ect. ( that could of changed on IE 9 I dont know and will never try to find out, i've learned to hate IE). You will have to look up each little problem your seeing and see if there is a alternate code you can try to make it work. Otherwise post on website best viewed in firefox.
It's the one good reason to have something like dreamweaver which will allow you to see how each browser will display your site. But do your best to look up alternatives for each major browser (IE,Safari,Oprah,Firefox,Chrome)
I'm no expert on this stuff but it seems that you are not declaring a doctype at the top of your page, you might start with that to see if it makes any difference. IE will go into quirks mode if no doctype is declared at the top of the html so perhaps that is affecting things.
I would agree with spowel4. I looked at your source and you are definately missing some key elements. If you want for the majority of browsers to provide the same look and feel, you'll need to stick with standards that they all support.
Definatley start with a doctype declaration.
thanks every one
I used this doctype before the html tag, but it actually made no difference.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Is there any specific code that might work?
www.sarairannejad.com
WHICH version of IE is giving you problems? Looks the same to me in FF, Chrome, and IE9
PS Hiding your navigation and requiring a click to reveal it is not user friendly. You're asking the user to think and many can't do that.
To make it compatible in the major browsers, one of the tricks used is to "reset" the website and then giving styles to EVERYTHING again!
http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/ is a good source to get yourself a reset code...
One thing you should be careful is if you use this, you'll have to format everything yourself! Even <h1>, <h2> tags will be reset and look no different than <p> tag text!
Also, while you're making changes, open all the browsers you want your site to look good in. Check if the changes you made makes it look bad in one and what not.
The first thing to to when you're having display or behaviour problems on a site it to validate your code.
I usually put a link like the one below at the bottom of every page on my site. The middot part means that all that will show on your site is a little dot. Click on the link and you'll see whether there are any structural errors in the way the XHTML of your page is put together.
I've found that 3 out of 4 problems or more disappear when I've eliminated these errors.
I put it in the footer so that it appears on every page on the site and I can quickly check any page at any time.
<a href="http://validator.w3.org/check?uri=referer">·</a>
There may be a few errors that for one reason or another can't be fixed or you determine that they should be left in for some good reason, but absent a good reason, errors should be eliminated.
By the way, I've found that problems such as you describe usually mean that a <div> or other container element has not been closed, or is improperly nested. For instance the following:
<!-- Good - the <p> is closed before the <div> is closed -->
<div>
<p>This is my information</p>
</div>
<!-- Bad - the containers are improperly nested - the <div> is closed before the <p> -->
<div>
<p>This is my information
</div>
</p>
Hope that helps,
Rob
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.