Member Avatar for saraartist

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

  • 7 Contributors
  • 7 Replies
  • 824 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by scaiferw

Dani AI

Generated

A short, practical summary that ties the replies together and gives a quick, repeatable checklist.

Missing or legacy DOCTYPE and broken HTML are the most common reasons pages look different across browsers — browsers switch into a compatibility (quirks) mode when the DOCTYPE is absent or malformed, and that changes box model and layout behavior. and were right to call this out; start there. (developer.mozilla.org)

A minimal, modern head helps fix both rendering and mobile-fitting issues. Including a simple HTML5 doctype, a UTF-8 charset, and a viewport meta tag is a good baseline:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>...</title>
</head>

The viewport line is what lets responsive CSS and media queries behave predictably on phones and tablets. The charset declaration should appear early in the head. (developer.mozilla.org)

For debugging: validate the markup (unclosed tags or bad nesting often break layouts), then use the browser devtools (Elements/Inspector and Console) to see whether the form or nav actually exists in the DOM, and whether a script error or a CSS rule (e.g., display:none, z-index) is hiding it. ’s validator suggestion and ’s note about hidden navigation are both practical — use the inspector to confirm presence and computed styles, and check IE’s document mode if testing old IE. (developer.chrome.com)

Small responsive fixes: make images and media fluid (img { max-width: 100%; height: auto; display:block; }) and avoid fixed-width containers where possible; consider a lightweight normalize/reset and media queries for breakpoints as suggested. These patterns are standard for responsive design. (web.nodejs.cn)

Quick checklist

  • Confirm a single HTML5 DOCTYPE at the very top.
  • Add charset + viewport in the head.
  • Validate and fix unclosed/badly nested tags.
  • Open devtools, check Console for JS errors and Elements for hidden nodes.
  • Make images and layout fluid with max-width and media queries.

This covers the practical next steps to make the contact form and overall layout consistent across browsers.

Recommended Answers

All 7 Replies

Member Avatar for soapyillusion

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)

Edited by soapyillusion
Member Avatar for spowel4

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.

Member Avatar for JorgeM

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.

Member Avatar for saraartist

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?

Member Avatar for drjohn

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.

Edited by drjohn
Member Avatar for JameB

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.

Member Avatar for scaiferw

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">&middot;</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

Edited by scaiferw
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.