4 replies [Last post]
bwadley
bwadley's picture
Offline
newbie
Bryant, AR
Last seen: 12 years 12 weeks ago
Bryant, AR
Timezone: GMT-6
Joined: 2010-02-28
Posts: 4
Points: 5

I just made a website for my niece and it looks GREAT in Firefox and Safari. With I.E., it's a whole other story! All of the text is shifted to the right and doesn't look the way I intended. I know I.E. is quirky, but I'm not really a programmer so I don't even know where to start to figure this one out Puzzled . Any help would be greatly appreciated.

Website: www.CharityVance.net

CSS:
@charset "UTF-8";
/* CSS Document */

body {
background-color:#f0d72b;
margin: 0 auto;
text-align:center;
width: 1200px;
color: #600
}

#container {
background-image:url(images/Body.gif);
background-repeat:no-repeat;
height: 358px;
width: 1200px;
margin: 0 auto;
text-align: center
}

#container2 {
background-image:url(images/Body2.gif);
background-repeat:no-repeat;
height: 358px;
width: 1200px;
margin: 0 auto;
}

#header {
background-image:url(images/Header.gif);
background-repeat: no-repeat;
height: 277px;
width: 1200px;
margin: 0 auto;
}

a img {
border: none;
}

a:link {
color: #C00;
}

#menu {
list-style: none;
padding: 0;
margin-top: 210px;
margin-left: 400px;
margin-bottom: 0px;
margin-right: 480px;
width: 320px;
height: 30px;
display: block;
float: left;
text-align: center;
}

#navmenu {
width: 330px;
height: 30px;
padding: 0px;
margin: 0 auto;
}

#navmenu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: center;
}

#navmenu ul li {
width: 80px;
height: 30px;
float: left;
margin: 0px;
}

#navmenu ul li a {
font-family: Tahoma, Geneva, sans-serif;
text-decoration: none;
display: block;
width: 80px;
height: 30px;
color: #FFF
}

a.buttonbio {
background: url(images/button_bio.gif) no-repeat 0 0;
width: 80px;
height: 30px;
display: block;
text-indent: -9999px;
}

a.buttonbio:hover {
background-position: 0 -30px;
}

a.buttonbio:active {
background-position: 0 -60px;
}

a.buttonhome {
background: url(images/button_home.gif) no-repeat 0 0;
width: 80px;
height: 30px;
display: block;
text-indent: -9999px;
}

a.buttonhome:hover {
background-position: 0 -30px;
}

a.buttonhome:active {
background-position: 0 -60px;
}

a.buttonnews {
background: url(images/button_news.gif) no-repeat 0 0;
width: 80px;
height: 30px;
display: block;
text-indent: -9999px;
}

a.buttonnews:hover {
background-position: 0 -30px;
}

a.buttonnews:active {
background-position: 0 -60px;
}

a.buttoncontact {
background: url(images/button_contact.gif) no-repeat 0 0;
width: 80px;
height: 30px;
display: block;
text-indent: -9999px;
}

a.buttoncontact:hover {
background-position: 0 -30px;
}

a.buttoncontact:active {
background-position: 0 -60px;
}

#right {
padding: 5px 35px;
text-align:center
}

#content {
height: 358px;
width: 800px;
margin-left: 200px;
margin-top: 0px;
text-align:left;
}

.scrollArea {
width: 715px;
height: 344px;
padding-left: 10px;
padding-right: 5px;
border-color: #600;
border-width: 1px;
border-style: solid;
overflow: auto;
}

#bottom {
background-image:url(images/Footer.gif);
background-repeat:no-repeat;
height: 265px;
width: 1200px;
margin: 0 auto;
text-align: center;
}

#footer {
clear: both;
margin-top: 65px;
margin-bottom: 0px;
width: 1200px;
height: 58px;
text-align:center
}

h1, h2, h3 {
font-family:Georgia, "Times New Roman", Times, serif;
color #000
}

p {
font-family:Georgia, "Times New Roman", Times, serif;
}

Thanks!

bwadley
bwadley's picture
Offline
newbie
Bryant, AR
Last seen: 12 years 12 weeks ago
Bryant, AR
Timezone: GMT-6
Joined: 2010-02-28
Posts: 4
Points: 5

HTML for bio page: <!DOCTYPE

HTML for bio page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Charity Vance</title>
<link href="template_css.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div id="header">
	<div id="menu">
    	<div id="navmenu">
        	<ul>
        		<li><a class="buttonhome" href="index.html">home</a></li>
				<li><a class="buttonbio" href="bio.htm">bio</a></li>
            	<li><a class="buttonnews" href="news.htm">news</a></li>
            	<li><a class="buttoncontact" href="contact.htm">contact</a></li>
            </ul>
      </div>
    </div>
</div>
 
<div id="container2">
	<div id="content">
   	  <div id="right">
      	<div class="scrollArea" align="left"><p>To have the most delightful day possible, all I need is a pen, my right hand, and my beaten-up notebook I am trying to keep alive. I crave paper. I indulge in the aisle with the writing supplies. No really…, "back to school" shopping is better than my birthday. All to say, I have a thing for paper, pens, and poems. I have been writing since the seventh grade. Most of the rhymes from back then are a slight mess, with a side of wondering what my wanna be cursive is striving to convey. Sad. Over the years, vocabularies grow, and writing becomes more than a hobby. It is now a part of me. It owns a room in my heart. I love visiting that room. So now that I have drawn out the process of stating, "I like to write.", I will start to explain my love for piano. I promise, I won't take fifteen days to tell you how much I adore it. It is an escape from a rainy day, comfort after a confusing break- up, and safe when I'm home alone and scared (yes, scared as a seventeen year old). Those minor chords are pure satisfaction when life hits hard, but on the easy days, I dwell with the happy chords. There is a time for every chord, and I can't wait to be able to run to the piano when I don't know what to say or do. She's a pretty good translator.</p>
 
        <p>As I trick myself out of describing my every thought of everything, let me explain the genre I have gracefully fallen into! Hello, Indie/Pop. This is my living room, Indie/Pop lives in the living room of my heart! This is where the energy of Pop and the hip intrigue of Indie shake hands. Ever so quirky and joyfully explosive, I love finding out what this genre means to me. The lyrics smile ever so brightly and are dangerously addictive.The background vocals sway like the 70's and you become unable to press pause. In other words, the sugar coated trees that grow in this musical land are calling your name-Do not ignore! Something about writing what I feel and adding piano chords, just really makes me smile. I  hope all who listen to these bubbly songs, whether mine or another, are hearing what I hear. I want my music to be the choice of the group of girls driving to the park. I hope it streams through the open windows to meet the wind on its way out. I hope my music gets the chance to live.</p>
 
    <p>I have gotten the chance to begin the journey of playing my music to any ears that will listen. Even the acapella ones in the ladies restroom. I want to set up my keyboard and mic stand everywhere, even in the countries that simply clap because they don't exactly know what I am saying. Thank you for reading the metaphors and adjectives I gathered to communicate my love for music. I hope your day is bright, and smiles flourish like flowers in the spring. There we go again with the similes.</p>
 
A hopeful girl,<br />
<h3>Charity</h3></div>
      </div>
    </div>
</div>
 
<div id="bottom">
	<img src="images/radio.gif" width="169" height="116" border="0" alt="Radio"/><br />
    <embed src="MP3/IcingSample.mp3" width="140" height="20" border="0" autostart=false></embed>
    	<div id="footer">
			<a href="http://www.facebook.com/CharityVanceMusic" target="_blank"><img src="images/fb.gif" width="118" height="23" border="0" alt="Facebook"/></a>
    		<a href="http://twitter.com/CharityVance" target="_blank"><img src="images/twitter.gif" width="118" height="23" border="0" alt="Twitter"/></a>
    		<a href="#"><img src="images/myspc.gif" width="111" height="28" border="0" alt="MySpace"/></a><br />
            <font size="-2">Special thanks to <a href="http://www.lancejohnston.com/" target="_blank">Lance Johnston Photographers</a> | Website design by <a href="mailto:[email protected]">Becky Wadley</a></font>
        </div>
</div>
 
</body>
</html>

bwadley
bwadley's picture
Offline
newbie
Bryant, AR
Last seen: 12 years 12 weeks ago
Bryant, AR
Timezone: GMT-6
Joined: 2010-02-28
Posts: 4
Points: 5

Fixed

Well, I decided to get in there and try to fix it myself again...and I did it. I thought I'd post the solution in case anyone else out there has a similar issue. I was reading somewhere else (not this website, but don't remember which one) and they suggested simplifying the CSS to make I.E. comply better. I gave it a try.

The CSS went from this:

#container2 {
	background-image:url(images/Body2.gif);
	background-repeat:no-repeat;
	height: 358px;
	width: 1200px;
	margin: 0 auto;
}
 
#right {
	paddding: 5px 35px;
	text-align: center;
}
 
#content {
	height: 358px;
	width: 800px;
	margin-left: 200px;
	padding-top: 5px;
	text-align:center;
}

To this:

#container2 {
	background-image:url(images/Body2.gif);
	background-repeat:no-repeat;
	height: 358px;
	width: 1200px;
	margin: 0 auto;
}
 
#content {
	margin: 0px 235px;
	padding-top: 5px;
	text-align:center;
}

and the HTML went from this:

<div id="container2">
	<div id="content">
		<div id="right">
   		 	<div class="scrollArea" align="left"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
</div>

to this:

<div id="container2">
	<div id="content">
   	  <div class="scrollArea" align="left"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
      </div>
    </div>
</div>

Basically, I took out the defining size for my content box as the container div already stated that. I also took out the right div because it served no purpose. I changed the margin in the content div to center it up in the window and added a bit of padding (that was previously in the right div). Viola!

Hope this helps someone else in the future!

bwadley
bwadley's picture
Offline
newbie
Bryant, AR
Last seen: 12 years 12 weeks ago
Bryant, AR
Timezone: GMT-6
Joined: 2010-02-28
Posts: 4
Points: 5

Fixed

Well, I decided to get in there and try to fix it myself again...and I did it. I thought I'd post the solution in case anyone else out there has a similar issue. I was reading somewhere else (not this website, but don't remember which one) and they suggested simplifying the CSS to make I.E. comply better. I gave it a try.

The CSS went from this:

#container2 {
	background-image:url(images/Body2.gif);
	background-repeat:no-repeat;
	height: 358px;
	width: 1200px;
	margin: 0 auto;
}
 
#right {
	paddding: 5px 35px;
	text-align: center;
}
 
#content {
	height: 358px;
	width: 800px;
	margin-left: 200px;
	padding-top: 5px;
	text-align:center;
}

To this:

#container2 {
	background-image:url(images/Body2.gif);
	background-repeat:no-repeat;
	height: 358px;
	width: 1200px;
	margin: 0 auto;
}
 
#content {
	margin: 0px 235px;
	padding-top: 5px;
	text-align:center;
}

and the HTML went from this:

<div id="container2">
	<div id="content">
		<div id="right">
   		 	<div class="scrollArea" align="left"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
</div>

to this:

<div id="container2">
	<div id="content">
   	  <div class="scrollArea" align="left"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
      </div>
    </div>
</div>

Basically, I took out the defining size for my content box as the container div already stated that. I also took out the right div because it served no purpose. I changed the margin in the content div to center it up in the window and added a bit of padding (that was previously in the right div). Viola!

Hope this helps someone else in the future!

YasminTiara
YasminTiara's picture
Offline
newbie
singapore
Last seen: 12 years 8 weeks ago
singapore
Timezone: GMT+5.5
Joined: 2010-03-17
Posts: 5
Points: 5

How to reinstall or repair

How to reinstall or repair Internet Explorer