Newbie web designer: viewing issues in IE and Firefox

lyssie05 · Jan 3, 2012

The webpage I am working on right now is http://www.suecraftphogoraphy.com/FromAlyssa and I can't get Lightbox 2 from this website to view correctly in Firefox. It looks fine in Chrome and IE. In Firefox, there are lines/small boxes where the thumbnails should be, and when I click the lightbox feature loads, but the pictures are missing.

Also if you care to help me further, I'm having a number of issues in IE (but the lightbox works!):
- The CSS is not working to position the menu DIV correctly. To see correct positioning, view in Firefox or Chrome.
- My image borders on the first set of links on the menu do not appear.
- On the home page, instead of seeing the slideshow, I get an error message stating "Your page is in Quirks mode, Galleria may not render correctly. Please validate your HTML."

I am a Chrome user but unfortunately most other people aren't. I am in dire need of help on this webpage! Thanks in advance!

mjnc · Jan 3, 2012

lyssie05 said: ↑

- On the home page, instead of seeing the slideshow, I get an error message stating "Your page is in Quirks mode, Galleria
may not render correctly. Please validate your HTML."

I am a Chrome user but unfortunately most other people aren't. I am in dire need of help on this webpage! Thanks in advance!
Click to expand...

Hi Lyssie05.

I think you can get rid of the Quirks Mode message by adding a proper DOCTYPE declaration. You also need to add a
character encoding statement and fix a few minor coding errors.
Since you are already using CSS, you should remove the few HTML attributes that I saw and instead use CSS styles.
Once you get the required elements in place and the document form is correct, the browser will render your document(s) in
Standards Mode, which may fix some other problems.
Standards Recap
For the "real stuff", also see W3C: The global structure of an HTML document

You probably should use either 4.01 Transitional or 4.01 Strict.
Strict is not difficult at all and from briefly looking at your source code, you are nearly there anyway.

Your tags are already in lower case and except for a few typos and missing angle brackets, etc., the code seems to be well formed.
In addition to the Doctype statement and character encoding, you need to add a title element in the head section.

Here is some info on Doctypes:
Fix Your Site With the Right DOCTYPE!
W3C: Recommended Doctype Declarations to use in your Web document

Here is a sample of what the top of the document should look like:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
  <title>Document Title</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
Here are some code validation links. You can validate the HTML and the CSS.
Usually, you can either Upload the code directly from your computer or enter the address of the page to be validated.
W3C Markup Validation Service
W3C CSS Validation Service
W3C Quality Assurance Tools

Page Valet Markup Validation

mjnc · Jan 3, 2012

lyssie05 said: ↑

Also if you care to help me further, I'm having a number of issues in IE (but the lightbox works!):
- The CSS is not working to position the menu DIV correctly. To see correct positioning, view in Firefox or Chrome.
Click to expand...

I looked at the page with Opera 11.60 and it looks fine.

Regarding the menu positioning problem, I noticed the following in your CSS:
Code:
ul {
    line-height: 1.5em;
    list-style-type: none;
    text-indent: -40px;
    }
I suggest using a descendant selector to properly target the menu ul.
Then remove the negative text-indent and start with zero left padding and margin.
As you know, the default rendering of an unordered list is with a left indent.
Some browsers use left padding and some use left margin.

Example: use this to start and then adjust as necessary.
Code:
#menu ul {
    line-height: 1.5em;
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
    }
You could also try removing All padding and margins on that ul and add it where needed.
In IE, as the error message indicates, the problems may be due to Quirks Mode rendering.

Log in or Sign up

Newbie web designer: viewing issues in IE and Firefox

lyssie05 Private E-2

mjnc MajorGeek

mjnc MajorGeek