Click to See Complete Forum and Search --> : Win IE CSS alignment issue
spitfire72
04-17-2007, 06:59 PM
Any thoughts on how to resolve my menu mushing into the content in IE 5.0 and 6.0 Windows (works fine in everything else). Here's the link
http://www.hannahhenry.org/archer/index.html
and the stylesheet:
http://www.hannahhenry.org/archer/ar-styles.css
Really don't want to resort to tables ever again.
Thank you!!!
spitfire.:o
sticks464
04-18-2007, 12:11 AM
I had to work tour css around a bit but it should work fine in all browers now. I changed the path to the images for my testing purposes and you'll have to change them back to your own.
body {
background-color: #FFFFCC;
margin: 0;
padding:0;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:11px;
font-weight:100;
color:#663300;
letter-spacing: 0.12em;
line-height: 16px;
}
a:hover {
color:#fff;
text-decoration:none;
}
a:visited {
color:#333;
text-decoration:none;
}
a {
color:#660000;
text-decoration:none;}
a:active {
color:#333;
text-decoration:none;
}
a:hover {
color:#fff;
}
a:visited {
color:#333;
text-decoration:none;
}
h1 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:13px;
letter-spacing:.2em;
font-style:italic;
font-weight:normal;
text-align:center;
color:#660000;
}
em {
font-style:inherit;
font-weight:500;
font-size:11px;
color:#660000;
}
#content {
width: 777px;
height: 566px;
margin:20px auto;
background-image:url(background-logo2.gif);
}
#navbar-vert {
float:left;
text-align: right;
width: 150px;
margin-top:70px;
line-height: 24px;
font-size:14px;
padding-top:8px;
padding-right:10px;
font-style:italic;
letter-spacing:.2em;
height: auto;
}
#text-box {
float:right;
text-align:left;
width: 600px;
margin-top:70px;
}
Some of the css was duplicated and I removed most of it. Some of it may have been for other pages but the links are not working to other pages so I deleted it. Just add the appropiate pieces back in.
spitfire72
04-23-2007, 05:26 PM
Feeling a little like I cheated on my homework with this generous help, can you tell me a couple principles I over-looked that caused my problem? Or is trial and error your guide as well? Thank you again.
:o
sticks464
04-23-2007, 05:40 PM
I don't remember exactly what I did, but I saw a lot of unneeded css. You were using a lot of new classes that were identical and some that did nothing. Remember to try to use classes whenever possible as they can be used over and over again on each page. It really is a lot of trial and error until you get used to what works and how it works. The greatest asset for myself is continuously designing and redesigning and alot of reading of postings from the experts here.
WebJoel
04-23-2007, 08:00 PM
Maybe I'm just getting old & miserable, but nothin' frosts my pop-tart faster than visiting a web page with the browser of my choice and having that web page not deliver the content as the designer/writer intended...
See Screenshot:
This is how the page looks in Firefox, and probably Mozilla, Opera, SeaMonkey (etc. "the compliant browsers") :) Looks GREAT in IE, though... :o
I went through and in about 5-minutes of tweaking, came up with this, which display virtually the same in Firefox as IE6. -Don't know about IE7, -don't have it / don't want it. :o
Parts I added, are bolded. (May/may not actually be needed)
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="http://www.hannahhenry.org/archer/ar-styles.css" type="text/css" media="screen"/>
<title>Archer's Pilates & Massage</title>
<style type="text/css">
body {font-size: 90%; line-height:1.3em; margin:14px 0 2px 0; padding-bottom:20px;}
#footer {padding-top:25px; text-align:center;}
#footer p {text-align:center; height:25px;}
#footer a {color:black; font-weight:bold; line-height:1.2em;}
#footer a:hover {color:red; border-bottom:2px solid blue;}
</style>
</head>
<body>
<div id="pagecontainer" style="position:relative; height:100%;">
<div id="content">
<div id="navbar-vert" style="position:relative; top:35px; float:left;">home<br/><a href="private.html">private pilates</a><br/>
<a href="massage.html">massage</a><br/>
<a href="classes.html">classes</a><br/>
<a href="aboutpilates.html">about Pilates</a><br/>
<a href="testimonials.html"></a><br/>
</div>
<div id="text-box" style="width:535px; margin-top:15px;">
<img src="http://www.hannahhenry.org/archer/archer_images/toephoto-bw.jpg" alt="pilates instruction" style="width:222px; height:241px; margin:6px 0 6px 15px; float:right;" />
<p>Whether in small classes or private sessions, Archer's Pilates and Massage studio maintains a sincere emphasis on individual attention. </p>
<p> The primary focus of the Pilates exercises is on the abdominal "core" as the fulcrum of all the body's movement. By first establishing alignment of the body using the breath, visualization and other tools, the exercises flow from a place of practicality and ease.
</p>
<p>Some of the results you can expect to attain with the strengthening of the core:</p>
<ul style="list-style-type:none;">
<li title="Freedom from chronic pain">- Freedom from chronic pain</li>
<li title="Height gain">- Height gain</li>
<li title="Improved coordination">- Improved coordination</li>
<li title="Greater appreciation and results from other physical activities">- Greater appreciation and results from other physical activities</li>
<li title="An increased sense of mental focus">- An increased sense of mental focus</li>
</ul>
</div>
</div>
</div>
<div title="497 Walnut St. Suite E, Napa, CA 94558 p: 707.253.9512" id="footer" style="position:relative; width:730px; margin:0 auto;">
<p>497 Walnut St. Suite E, Napa, CA 94558 p: 707.253.9512 <a title="Sends E-mail to: archer@pilatesinnapa.com" href="mailto:payon01@sbcglobal.net">archer@pilatesinnapa.com</a></p>
</div>
</body>
</html> Note that I changed that bottom thing into an <ul>. I would recommend doing the same for the navigation list ("lists" of items, belong in an "unordered list"..) :)
I also fixed your e-mail, which on-hover, became invisible against the background.
There is alot of code in there that is un-necessary (like that two hundred and twenty-two by something "spacer.gif"... -although *I* have T1, maybe-75% of the USA still uses dial-up at 56K, and removing this alone saves them 5 or 6-seconds of download-wait).
I suspect that your 'background image' is exactly that... a 700-something px by 700-something px image? -I'd slice it up and use the pertinant parts (the wheat grains), and 'background-color:x' the rest, with 'curvy-corner images' positioned in the four cardinal corners. Knock-off another 8-10 seconds of download-wait for dial-up users right there again...:)
spitfire72
04-25-2007, 05:15 PM
Thanks for the suggestions. Both of the replies I received gave good advice (some of which I ignored for the sake of resolving the key issue first), but neither fixed horizontal alignment issue in IE 5.1 and 5.5. Wondering if there is some commonly understood glitch with these Win browsers that I can be made aware of. Of course the client in this case (probono, don't worry) has an older browser. Here's one of the browser shots that concerns me and the code from the most recent suggestion from WebJoel. I may just have to go back to tables on this one as the whole site was supposed to take me an afternoon to do. It's so simple though!
http://browsershots.org/screenshots/238f172a6982965eec7eb228263220b3/
http://www.hannahhenry.org/archer/index-3.html
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="http://www.hannahhenry.org/archer/ar-styles.css" type="text/css" media="screen"/>
<title>Archer's Pilates & Massage</title>
<style type="text/css">
body {font-size: 90%; line-height:1.3em; margin:14px 0 2px 0; padding-bottom:20px;}
#footer {padding-top:25px; text-align:center;}
#footer p {text-align:center; height:25px;}
#footer a {color:black; font-weight:bold; line-height:1.2em;}
#footer a:hover {color:red; border-bottom:2px solid blue;}
</style>
</head>
<body>
<div id="pagecontainer" style="position:relative; height:100%;">
<div id="content">
<div id="navbar-vert" style="position:relative; top:35px; float:left;">home<br/><a href="private.html">private pilates</a><br/>
<a href="massage.html">massage</a><br/>
<a href="classes.html">classes</a><br/>
<a href="aboutpilates.html">about Pilates</a><br/>
<a href="testimonials.html"></a><br/>
</div>
<div id="text-box" style="width:535px; margin-top:15px;">
<img src="http://www.hannahhenry.org/archer/archer_images/toephoto-bw.jpg" alt="pilates instruction" style="width:222px; height:241px; margin:6px 0 6px 15px; float:right;" />
<p>Whether in small classes or private sessions, Archer's Pilates and Massage studio maintains a sincere emphasis on individual attention. </p>
<p> The primary focus of the Pilates exercises is on the abdominal "core" as the fulcrum of all the body's movement. By first establishing alignment of the body using the breath, visualization and other tools, the exercises flow from a place of practicality and ease.
</p>
<p>Some of the results you can expect to attain with the strengthening of the core:</p>
<ul style="list-style-type:none;">
<li title="Freedom from chronic pain">- Freedom from chronic pain</li>
<li title="Height gain">- Height gain</li>
<li title="Improved coordination">- Improved coordination</li>
<li title="Greater appreciation and results from other physical activities">- Greater appreciation and results from other physical activities</li>
<li title="An increased sense of mental focus">- An increased sense of mental focus</li>
</ul>
</div>
</div>
</div>
<div title="497 Walnut St. Suite E, Napa, CA 94558 p: 707.253.9512" id="footer" style="position:relative; width:730px; margin:0 auto;">
<p>497 Walnut St. Suite E, Napa, CA 94558 p: 707.253.9512 <a title="Sends E-mail to: archer@pilatesinnapa.com" href="mailtoayon01@sbcglobal.net">archer@pilatesinnapa.com</a></p>
</div>
</body>
</html>
WebJoel
04-26-2007, 05:45 PM
My bad attitude aside ( :) ), your external CSS file might have errors in it. I just checked quickly and found this:
#pagecontainer {
position: relative;
text-align:center;
margin-top: 2%;
padding-top:10px;
padding-bottom:5px;
width: 750px;
height: 480px;
margin-left: auto;
margin-right: auto;
margin-bottom:0px; ;
}
This alone *might be* a serious enough flaw ( ; ; ) to make the DIV "pagecontainer" not render correctly on a user-agent... I'd suspect that older versions (>5.x, etc.) would be most suseptible...
-And here is a little gift (See Screenshot) from the msn.com (videos) site, -as seen in FIREFOX, Mozilla, Seamonkey and probably Opera as well... (yet another blaring example of a news-site that fails to deliver it's content upon the modern, compliant user-agent of my choice..) -How many problems does my wounded heart see here. ...sigh.
spitfire72
04-26-2007, 06:51 PM
Thanks for the sharp eyes. That (;;) is probably what did it...This is why I never got a good grade in Algebra. Everything falls apart when there are errors in the details.