HTML - Issues Viewing Site With Mozilla Fire Fox

Hey,

I've downloaded a template to use for my webpage and i changed up the width of the middle section (in grey) within the css, it views perfectly in mozilla, but when viewed in IE it's as if i didn't widen the width of the middle section at all and as a result the text and images i have put in the area are compacted.

Does anyone have any ideas of how i can get IE to view my site the same as mozilla is? Mozilla is displaying the site as i want it too look. The text is more spread out wthin the grey area.

http://www.revolutionct.com.au/boot_camp_canberra.html

Appreciate any help! Thanks.

Hi there I'm new to this site but think I'll be sticking around for the wealth of information here.
So...I recently designed a website for a friend working off a nice little template to save time. Everything looks great and operates exactly how they requested on a desktop browser. However, the images become vertically stretched when viewing on a mobile device pretty severely. I'm confused because it's only the photos, other graphics (also jpegs) do not become distorted. Is it because I used width="x%" and height="x%" in the image tags

www.rideums.com is the website if you'd like to take a look at the source. Thanks guys for helping out.

Alright. Hpefully you all will be able to give me a helping hand. My site is located at http://www.eternalhogwarts.com If you have an older version of I.E look at it. It looks fine. However when you view it with Firefox and IE 7.0 it looks really strange and I really don't know what to do.

Please help!!!

Hi: I'm having problems with IE viewing my site. Unfortunately a lot of my viewers still use IE, but the way the design was made (Open Source design), the right side is in the first part of the file (<div id="content">) and the left side is afterwards (<div id="left">). It was working fine in IE for a while but then just suddenly stopped working after I was editing. Not sure what I did.

Site demo: www.neptuneware.com
Username: gametest
Password: penguins
When prompted.

Could anyone please look at it in IE and tell me why it's not working. All HTML is in the source code (nothing's hidden), but here is the CSS file:

Code:

/* 

** BLUE:SKY - main stylesheet

** This CSS file makes the webpage look pretty ;-)

** 

** March 5, 2006 - (version 1.0)

** 

** this is a part of the open source layout by 

** Jonas John (www.jonasjohn.de) ~ made for gameindicator.com
** GAMEINDICATOR.COM using OPEN SOURCE WEB DESIGN (OSWD.ORG)
** GameIndicator thanks OSWD and Jonas John for our website design.

*/



/* page overall: bg used to be a5ddf8 */



html * { 

    margin: 0; 

    padding: 0; 

    border: 0;

}

 

body {

    margin: 0.5em 0em 2em 0em;



    font-size: 100%;

    font-family: "Lucida Grande", Verdana, Arial, sans-serif;

    line-height: 1.1em;

    text-align: center;

    

    background-color: #fff;

    background-image: url(../images/background.png);

    background-repeat: repeat-x;

}

 

#page { 

    width: 1000px; 

    text-align: left;  

    margin-left: auto; 

    margin-right: auto;  

} 





/* header: */



#header {

    position: relative; 

    width: 100%;

    height: 2.8em;

    color: #fff;

    vertical-align: middle;

    text-align: left;

} 



#header a:link, #header a:visited {

    color: #FFFFFF;

    text-decoration: none;

    font-family: "Trebuchet MS", Arial, Tahoma, sans-serif;

    font-weight: bold;

    font-size: 1.9em;

    letter-spacing: -0.1em !important;

    letter-spacing: -0.2em;

    line-height: 1.2em;

}





/* left column: */



#left {

    width: 24%; 

    float: left; 

    position: relative; 

    font-size: 0.8em;

}


/* DIV NAV EXTRA
**  border-right: 0.18em solid #4284B5;

**  border-bottom: 0.16em solid #4284B5;
*/


div#nav {

    background-color: #fff;

    width: 90%;
    border: 1px solid #555555;

}

    

#nav ul {

    list-style-type: none;

    padding: 0.5em 0em 0.9em 0em;

}



#nav ul li {

    padding: 0.03em 0em 0.03em 0.9em;

    margin-right: 0.3em;

}



#nav a:link, #nav a:visited {

    color: #2E668B;

}

 

#nav a:hover, #nav a:active {

    color: #000;

}


/* LEFT BOX EXTRA
**  border-right: 0.18em solid #4284B5;

**  border-bottom: 0.16em solid #4284B5;
*/


div.left_box {

    background-color: #fff;

    width: 90%;

    margin-top: 1em;
    border: 1px solid #555555;

}


/* LEFT BOX AND NAV H3 EXTRA
** border-top: 0.1em solid #65B6E3;   

** border-left: 0.1em solid #65B6E3; 
*/


div.left_box h3, div#nav h3 {

    margin: 0em;

    padding: 0.2em 0em 0.2em 1em;

    font-size: 0.8em;

    color: #fff;  

    background-color: #4284B5;

    text-transform: uppercase;

    font-family: Verdana, Arial, sans-serif;
    border-bottom: 1px solid #555555;

}



div.left_box p {

    margin: 0em;

    padding: 1em 1em 1em 1em;

}



div.left_box a:link {

    color: #2E668B;

}

    

div.left_box a:visited {

    color: #254A65; 

}

 

div.left_box a:hover, div.left_box a:active {

    color: #000;

}


/* innerbox
** border-right: 0.15em solid #7BA5C6;

** border-bottom: 0.15em solid #7BA5C6;
*/


div.inner_box {

}







/* content column: */


/* CONTENT EXTRA
**  border-right: 0.2em solid #4284B5;

** border-bottom: 0.2em solid #4284B5;
*/


#content {

    float: right; 

    display: inline; 

    position: relative; 

    width: 75%; 

    font-size: 0.75em;

    border: 1px solid #555555;

    background-color: #fff;

}



#content h1 {

    clear: both;

    margin: 0em 0em 0em 0em;

    padding: 0.5em 0em 0em 0.1em;

    font-size: 1.7em;

    font-family: "Trebuchet MS", Arial, sans-serif;

    color: #FF6300;

    border-bottom: 0.05em solid #FF9853;

    line-height: 1em;

}



#content p {

    margin: 0em 0em 0.5em 0em;

    padding: 0.35em;

}


/* PATH EXTRA | border-right: 0.23em solid #7BA5C6; */


#path {

    font-family: Verdana, Arial, sans-serif;

    margin: 0em 0em 0em 0em;

    padding: 0.4em 0.6em 0.4em 0.6em;

    font-size: 0.9em;

    color: #2F5E80;

    background-color: #D0E7F4;
    border-bottom: 1px solid #555555;

}



#content a:link {

    color: #2E668B;

}

    

#content a:visited {

    color: #255270; 

}

 

#content a:hover, #content a:active {

    color: #000;

}



#content acronym {

    border-bottom: 1px dotted #4284B5;

    cursor: help;

    margin: 0;

    padding: 0;

}


/* MAIN EXTRA
**  border-bottom: 0.2em solid #7BA5C6;

**  border-right: 0.2em solid #7BA5C6;
*/


#main {

    padding: 0.5em 1.5em 1.5em 0.7em;

}



div.img_left, div.img_right {

    border-bottom: 0.09em solid #4284B5;

    border-right: 0.1em solid #4284B5;

}



div.img_left {

    float: left; 

    margin: 0.5em 0.8em 0em 0em;

}



div.img_right {

    float: right; 

    margin: 0.5em 0em 0em 0.8em;

}



div.img_left img, div.img_right img {

    display: block;

    border: 0.35em solid #7BA5C6;

    margin: 0;

    padding: 0;

}



/* this clears floating (e.g images) */

br.clear {

    clear: both;

    display: none;

}





/* footer: Margin (no spec side) used to be 0em, EXTRA padding: 0em; */



#footer {

    font-size: 0.6em;

    clear: both;

    color: #027BC1;

    text-align: right;

} 



#footer p {

    margin: 0em;

    padding: 0.1em;

}



#footer a:link, #footer a:visited { 

    color: #027BC1;

} 



#footer a:hover, #footer a:active { 

    color: #000000;

}

The following site was created with WordPress 2.8.4, using the WP Slider theme. It looks perfectly fine in Firefox but has some issues in IE7. (I'm a front end designer and have only a working knowledge of coding, so any help would be appreciated.)

http://amcreativestudio.com/

Basically, the errors are with image alignment on the 'home' and 'services' page, and with no text showing up on the 'portfolio' page. I've used align="right" for the images - added this code in WP, in my theme's admin panel. I'm also using a variety of plugins, which may or may not be affected how my pages view. Help!

I used the html validator add on for Firefox, and it produced the following errors on the above referenced page.

line 18 column 43 - Error: document type does not allow element "span" here

line 127 column 53 - Error: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

line 268 column 53 - Error: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

line 296 column 3 - Error: document type does not allow element "h2" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

line 297 column 3 - Error: document type does not allow element "h2" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

line 298 column 13 - Error: end tag for "p" omitted, but OMITTAG NO was specified

line 267 - Info: start tag was here

line 322 column 38 - Error: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

line 375 column 58 - Error: there is no attribute "role"