 |
05-11-2008, 03:47 PM
|
Controlling alignment
|
Posts: 69
|
I am trying to figure out how to control alignment in all browsers while being strict compliant.
It is my understanding that IE doesn't credit "align="center"" in the HTML.
However I am problems here I do not understand.
HTML
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Divinity</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../Divinity/style/divinity.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<div id="content">
<div id="topshad">
</div>
<div id="logo">
</div>
<div id="toppline">
</div>
<div id="topimage">
</div>
<div id="topgline">
</div>
<div id="topmenu">
<a href="/about.html"><img src="images/menu.jpg" class="menu_item"></a>
<a href="/contact.html"><img src="images/wine.jpg" class="menu_item"></a>
<a href="/directions.html"><img src="images/about.jpg" class="menu_item"></a>
<a href="/sitemap.html"><img src="images/contact.jpg" class="menu_item"></a><br>
</div>
<div id="leftside">
<div id="midline"> </div>
<div class="text">
Welcome to Divinity Fine Catering
and Magical Desserts. We are fully
staffed to deliver the best service
in the catering industry.
</div>
<div id="midline"></div>
<div class="text">
Welcome to Divinity Fine Catering
and Magical Desserts. We are fully
staffed to deliver the best service
in the catering industry.
</div>
<div id="midline"></div>
</div>
<div id="rightside">
<div id="righttopimage"></div>
<div class="redtext">Breakfast Catering...</div>
<div class="right-text">
Prices begginning at
$10.00 a person
</div>
<div id="rightbotimage"></div>
<div class="redtext">Dinner Catering...</div>
<div class="right-text">
Prices begginning at
$15.00 a person
</div>
</div>
<div id="botgline"></div>
</div>
<div id="botshad"></div>
<div id="fruit">
</div>
</div>
</body>
</html>
CSS
Code:
body {
background-color:#D6FDDF;
text-align: center;
}
#main {
margin-left: auto;
margin-right: auto;
width: 50em;
width:623px;
height:755px;
}
#content {
background-image:url(../images/mid-shad.png);
background-repeat:repeat-y;
background-position:top;
width:623px;
height:755px;
}
#topshad {
background-image:url(../images/top-shad.png);
background-repeat:no-repeat;
height:18px;
}
#logo {
background-image:url(../images/logo.png);
background-repeat:no-repeat;
background-position:top;
height:128px;
}
#toppline {
background-image:url(../images/top-p-line.png);
background-repeat:no-repeat;
background-position:top;
height:1px;
padding:0px 0px 5px 0px;
}
#topimage {
background-image:url(../images/top-image-560.png);
background-repeat:no-repeat;
background-position:top;
height:107px;
padding-bottom:5px;
}
#topgline {
background-image:url(../images/top-g-line.png);
background-repeat:no-repeat;
background-position:top;
height:1px;
padding:10px 0px 5px 0px;
}
#leftside {
width:250px;
float:left;
padding:10px 10px 10px 20px;
margin-left:20px;
margin-top:10px;
}
#midline {
background-image:url(../images/mid-g-line.png);
background-repeat:no-repeat;
background-position:top;
height:1px;
padding: 0px 0px 0px 20px;
margin-left:10px;
}
#rightside {
background-image:url(../images/right-box.png);
background-repeat:no-repeat;
background-position:right;
float:right;
width:184px;
height:409px;
margin-right:30px;
margin-top:10px;
}
#righttopimage {
background-image:url(../images/r-top-box.png);
background-repeat:no-repeat;
background-position:right;
height:98px;
padding:10px 10px 0px 0px;
margin-top:10px;
margin-right:10px;
}
#botgline {
background-image:url(../images/bot-gray-line.png);
background-repeat:no-repeat;
background-position:top;
height:2px;
width:560px;
margin-top:10px;
margin-bottom:8px;
}
#botshad {
background-image:url(../images/bot-shad.png);
background-repeat:no-repeat;
height:18px;
}
#rightbotimage {
background-image:url(../images/r-bot-box.png);
background-repeat:no-repeat;
background-position:right;
height:98px;
padding:10px 10px 0px 0px;
margin-top:10px;
margin-right:10px;
}
#fruit {
background-image:url(../images/fruits.png);
background-repeat:no-repeat;
background-position:right;
height:113px;
width:623px;
padding:-30px 0px 0px 0px;
margin-top:-50px;
}
/*----------Menu---------*/
#topmenu {
margin-bottom:10px;
}
.menu_item {
border:none;
}
/*----------Font---------*/
.text {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
text-align:left;
padding: 20px 10px 20px 10px;
}
.right-text {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
text-align:left;
padding: 0px 10px 0px 10px;
margin-left:10px;
}
div.redtext {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
text-align:left;
color:#CC3300;
padding: 0px 10px 0px 10px;
margin-left:10px;
margin-bottom:5px;
}
Last edited by IG88 : 05-11-2008 at 04:35 PM.
|
|
|
|
|
05-11-2008, 04:33 PM
|
Re: Controlling alignment
|
Posts: 69
|
BTW
I have read the sticky, and I already knew that info.
Please view the site and you will see. It actually looks some what ok in IE but the top and lower shadow images are off.
Also you'll notice that the lower cherry stem is going behind the green box. Also the Grey line is not lining up at the bottom like it is supposed to.
Please help, it is driving me nuts.
<link removed per request>
Last edited by LadynRed : 07-31-2008 at 02:57 PM.
|
|
|
|
|
05-12-2008, 03:20 PM
|
Re: Controlling alignment
|
Posts: 6,553
Location: Tennessee
|
Quote:
|
It is my understanding that IE doesn't credit "align="center"" in the HTML.
|
Well, your understanding is incorrect. However IE 5.5 and below do need that to center as those versions don't understand margin: 0 auto.
Ok, you have this twice on that page:
<div id="midline"></div>
You cannot do that. ID's MUST be unique. If you need to re-use styles, make it a CLASS instead.
On your menu - you'd be better off using an unordered list there.
Your transparent PNG of the fruit at the bottom won't work w/o some javascript to force the transparency in IE6, all I see is a gray box.
Other than that, it doesn't look out of whack in IE6.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
|
|
|
|
|
05-12-2008, 11:13 PM
|
Re: Controlling alignment
|
Posts: 69
|
Quote:
Originally Posted by LadynRed
Well, your understanding is incorrect. However IE 5.5 and below do need that to center as those versions don't understand margin: 0 auto.
Ok, you have this twice on that page:
<div id="midline"></div>
You cannot do that. ID's MUST be unique. If you need to re-use styles, make it a CLASS instead.
On your menu - you'd be better off using an unordered list there.
Your transparent PNG of the fruit at the bottom won't work w/o some javascript to force the transparency in IE6, all I see is a gray box.
Other than that, it doesn't look out of whack in IE6. |
LadynRed,
Thank you for the post..
I can not believe I missed the class/ID in the midline. Amazingly enough though, they were both showing up in my browsers, so I never caught it.
I think I am going to make the whole bottom 1 image so it will work right with the fruit.
However,
When I do the W3C validation service it tells me that Strict does not validate "Align=center" or <Li>.
Can you help me with this? |
|
|
|
|
05-12-2008, 11:31 PM
|
Re: Controlling alignment
|
Posts: 1,811
Name: carl
Location: UK
|
I belive that is the text align is in the div its fine
.div {text-align: centre;}
<div>img src=yourpic</div>
or
.div {width: 100px;
margin: 0 auto;}
<div>img src=yourpic</div>
will automatically equalise the margines to the left and right and centre the div (I believe you need to set a width for this to work, use em or px or whatever you use for widths)
as for the list items, I thought li was ok.
Last edited by bakerc : 05-12-2008 at 11:46 PM.
Reason: late post
|
|
|
|
|
05-13-2008, 12:10 PM
|
Re: Controlling alignment
|
Posts: 6,553
Location: Tennessee
|
Quote:
|
When I do the W3C validation service it tells me that Strict does not validate "Align=center" or <Li>.
|
Correct, STRICT doctype will NOT validate align="center" because that is presentational and should be in your CSS, NOT in your HTML.
As for your <Li> - all tags must be LOWER CASE in STRICT.
Oh.. and put your text into proper paragraphs.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
|
|
|
|
|
05-14-2008, 09:52 AM
|
Re: Controlling alignment
|
Posts: 69
|
Quote:
Originally Posted by LadynRed
Correct, STRICT doctype will NOT validate align="center" because that is presentational and should be in your CSS, NOT in your HTML.
As for your <Li> - all tags must be LOWER CASE in STRICT.
Oh.. and put your text into proper paragraphs.
|
Ok I can figure out the ailment part in the CSS, however it just means that older version of browsers will not view it correctly. And that is the downside to going Strict, right? If you validate strict then it means that older browser may not see your site the way you want.
I was told by you on another thread to go "at least Strict", but it seems that when you do you shut out older browsers.
If I can not use <li> in the code for Strict then how do I use it in the CSS. I have not seen anything that shows it is possible.
Paragraphs is easy enough. Just use<p></p> right? Thats what you mean? |
|
|
|
|
05-14-2008, 10:05 AM
|
Re: Controlling alignment
|
Posts: 6,553
Location: Tennessee
|
Quote:
|
And that is the downside to going Strict, right?
|
There is no down side to going strict, IMO. You can use text-align:center in the CSS on the <body> for older browsers and the content will center as you want it. There is no need to put the align="center" in line at all.
Quote:
|
If you validate strict then it means that older browser may not see your site the way you want.
|
Incorrect, they most certainly will. I code XHTML Strict, all my sites work in older browsers, they degrade gracefully. It's a matter of sometimes having to use a separate CSS file for IE (which is THE major problem) and using Conditional Comments to reference that IE-only css file.
Quote:
|
If I can not use <li> in the code for Strict then how do I use it in the CSS.
|
I didn't say you can't use <li> - you SHOULD, what I said was you cannot use <Li> - the mixed case is what you should avoid - not the tag itself.
Quote:
|
Paragraphs is easy enough. Just use<p></p> right? Thats what you mean?
|
That is what I meant. You want your site to be SEMANTICALLY correct too. You can't write a Word document w/o paragraphs, so why write text in a web page w/o them ??
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
|
|
|
|
|
05-14-2008, 10:19 AM
|
Re: Controlling alignment
|
Posts: 69
|
Wonderfull. Thank you. I am going to work on this.
However, I have used <li> before on this page and Strict says that it will not validate it and that you can not use it in Strict.
|
|
|
|
|
05-14-2008, 10:23 AM
|
Re: Controlling alignment
|
Posts: 6,553
Location: Tennessee
|
There has to be something else wrong. The <li> tag is perfectly valid in ALL doctypes. Lets see the code where you are getting a validation error on a simple <li>.
Quote:
|
Strict says that it will not validate it and that you can not use it in Strict
|
That's just not true. I have over 85 live sites, all of them use a list in one fashion or another, all have lists for navigation - ALL VALIDATE XHTML STRICT.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
|
|
|
|
|
05-14-2008, 12:03 PM
|
Re: Controlling alignment
|
Posts: 69
|
I guess you are right. I set it up again and it did not give the error. However I have had numerous issue with trying to align my menus using <ul>
Here is the link for the validation.
http://validator.w3.org/check?uri=ht...Inline&group=0
Here is the site; Notice the menu is now too much to the left.
<link removed per request>
Here is the HTML
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Divinity</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../Divinity/style/divinity.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<div id="content">
<div id="topshad">
</div>
<div>
<a href="/Divinity/index.html"><img src="/images/logo.png" alt="" id="logo"></a>
</div>
<div id="toppline">
</div>
<div id="topimage">
</div>
<div id="topgline">
</div>
<div id="topmenu">
<ul>
<li><a href="/Divinity/menu.html"><img src="/images/menu.jpg" class="menu_item" alt=""></a>
<a href="/Divinity/services.html"><img src="/images/services.jpg" class="menu_item" alt=""></a>
<a href="/Divinity/about.html"><img src="/images/about.jpg" class="menu_item" alt=""></a>
<a href="/Divinity/contact.html"><img src="/images/contact.jpg" class="menu_item" alt=""></a> </li> </ul>
</div>
<div id="leftside">
<div class="midline"> </div>
<div class="text">
<p>Divinity Fine Catering is a
full-service catering facility.
We are available for breakfast,
brunch, lunch, cocktail buffet,
dinner parties (seated and buffet)
and receptions. We cater parties
formal to informal with an unlimited
number of guests. Divinity also
provides an array of magical
desserts. Our desirable desserts
from assorted pick-up sweets to
whole desserts, including wedding
cakes.</p>
</div>
<div class="midline"></div>
</div>
<div id="rightside">
<div id="righttopimage"></div>
<div class="redtext">Breakfast Catering...</div>
<div class="right-text">
Prices begginning at
$10.00 a person
</div>
<div id="rightbotimage"></div>
<div class="redtext">Dinner Catering...</div>
<div class="right-text">
Prices begginning at
$15.00 a person
</div>
</div> </div>
<div id="botshad"></div>
</div>
</body>
<!-- Start of StatCounter Code -->
<script type="text/javascript">
var sc_project=3460728;
var sc_invisible=1;
var sc_partition=38;
var sc_security="cb9e5b07";
</script>
<script type="text/javascript" src="http://www.statcounter.com/counter/counter_xhtml.js"></script><noscript><div class="statcounter"><a href="http://www.statcounter.com/free_invisible_web_tracker.html" target="_blank"><img class="statcounter" src="http://c39.statcounter.com/3460728/0/cb9e5b07/1/" alt="web tracker" ></a></div></noscript>
<!-- End of StatCounter Code -->
</html>
CSS
Code:
body {
background-color:#F3F5D9;
text-align: center;
}
.div {
width: 100px;
margin: 0 auto;
text-align:center;
}
#main {
margin-left: auto;
margin-right: auto;
width: 50em;
width:623px;
height:820px;
}
#content {
background-image:url(../images/mid-shad.png);
background-repeat:repeat-y;
background-position:top;
width:623px;
height:708px;
}
#topshad {
background-image:url(../images/top-shad.png);
background-repeat:no-repeat;
height:18px;
}
#logo {
border:none;
}
#toppline {
background-image:url(../images/top-p-line.png);
background-repeat:no-repeat;
background-position:top;
height:1px;
padding:0px 0px 5px 0px;
}
#topimage {
background-image:url(../images/top-image-560.png);
background-repeat:no-repeat;
background-position:top;
height:107px;
padding-bottom:5px;
}
#topimageb {
background-image:url(../images/top-image-560-2.png);
background-repeat:no-repeat;
background-position:top;
height:107px;
padding-bottom:5px;
}
#topimagec {
background-image:url(../images/top-image-560-3.png);
background-repeat:no-repeat;
background-position:top;
height:107px;
padding-bottom:5px;
}
#topimaged {
background-image:url(../images/top-image-560-4.png);
background-repeat:no-repeat;
background-position:top;
height:107px;
padding-bottom:5px;
}
#topimagee {
background-image:url(../images/top-image-560-5.png);
background-repeat:no-repeat;
background-position:top;
height:107px;
padding-bottom:5px;
}
#topgline {
background-image:url(../images/top-g-line.png);
background-repeat:no-repeat;
background-position:top;
height:1px;
padding:10px 0px 5px 0px;
}
#leftside {
width:250px;
float:left;
padding:10px 10px 10px 20px;
margin-left:20px;
margin-top:10px;
}
#midtext {
width: 560px;
float:left;
padding:10px 10px 10px 30px;
margin-top:10px;
}
.midline {
background-image:url(../images/mid-g-line.png);
background-repeat:no-repeat;
background-position:top;
height:1px;
padding: 0px 0px 0px 20px;
margin-left:10px;
}
.longline {
background-image:url(../images/long-g-line.png);
background-repeat:no-repeat;
background-position:top;
height:1px;
padding: 0px 0px 0px 20px;
margin-left:10px;
}
#rightside {
background-image:url(../images/right-box.png);
background-repeat:no-repeat;
background-position:right;
float:right;
width:184px;
height:386px;
margin-right:30px;
margin-top:10px;
}
#righttopimage {
background-image:url(../images/r-top-box.png);
background-repeat:no-repeat;
background-position:right;
height:98px;
padding:10px 10px 0px 0px;
margin-top:10px;
margin-right:10px;
}
#botgline {
background-image:url(../images/bot-gray-line.png);
background-repeat:no-repeat;
background-position:top;
height:2px;
width:560px;
margin-top:10px;
margin-bottom:8px;
}
#botshad {
background-image:url(../images/bot-shad.png);
background-repeat:no-repeat;
height:122px;
}
#rightbotimage {
background-image:url(../images/r-bot-box.png);
background-repeat:no-repeat;
background-position:right;
height:98px;
padding:10px 10px 0px 0px;
margin-top:10px;
margin-right:10px;
}
#fruit {
background-image:url(../images/fruits.png);
background-repeat:no-repeat;
background-position:right;
height:113px;
width:623px;
padding:-30px 0px 0px 0px;
margin-top:-50px;
}
/*----------Menu---------*/
#topmenu {
margin-bottom:10px;
}
#topmenu ul li{
display:inline;
margin: 0 2px 0 2px;
}
.menu_item {
border:none;
}
/*----------Font---------*/
.text {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
line-height: 1.5;
text-align:left;
padding: 10px 10px 10px 20px;
}
#list {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
text-align:left;
}
ul {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
text-align:left;
}
.right-text {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
text-align:left;
padding: 0px 10px 0px 10px;
margin-left:10px;
}
div.redtext {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
text-align:left;
color:#CC3300;
padding: 0px 10px 0px 10px;
margin-left:10px;
margin-bottom:5px;
}
The worst part of all of this is that for some odd reason I can not get my top and bottom images to center align with the content. If you look at it in IE it all aligns, but if you look at it in FF the top and lower images are off. I can not figure it out.
Last edited by LadynRed : 07-31-2008 at 02:58 PM.
|
|
|
|
|
05-14-2008, 02:17 PM
|
Re: Controlling alignment
|
Posts: 6,553
Location: Tennessee
|
Your list is not properly defined, it needs to be like this:
Quote:
<div id="topmenu">
<ul>
<li><a href="/about.html"><img src="images/menu.jpg" class="menu_item"></a></li>
<li><a href="/contact.html"><img src="images/wine.jpg" class="menu_item"></a></li>
<li><a href="/directions.html"><img src="images/about.jpg" class="menu_item"></a></li>
<li><a href="/sitemap.html"><img src="images/contact.jpg" class="menu_item"></a></li>
</ul>
</div>
|
You're going to have to turn off the bullets with #topmenu ul {list-style: none;}
Control the alignment with margins and/or padding on the <a> inside the <li>.
The validator is choking on the script that you have OUTSIDE the <body> tag.
The "target" attribute is deprecated and shouldn't be used with the Strict DOCTYPE.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
|
|
|
|
|
05-14-2008, 02:47 PM
|
Re: Controlling alignment
|
Posts: 69
|
Corrected!
It looks much better thank you. I am glad you cleared those misconceptions that I had.
3 things though...
1. Is there anything I can do about the script outside that is messing it all up? It is just StatCounter code.
2. Why are my top and bottom images not aligning in Firefox. I have looked it over and over and i just do not get it.
3. What is this lower part about from the Markup Validator?
Quote:
 Character Encoding mismatch!
The character encoding specified in the HTTP header (utf-8) is different from the value in the <meta> element (iso-8859-1). I will use the value from the HTTP header (utf-8) for this validation.
|
Last edited by IG88 : 05-14-2008 at 02:49 PM.
|
|
|
|
|
05-15-2008, 10:52 AM
|
Re: Controlling alignment
|
Posts: 6,553
Location: Tennessee
|
1 - put the stat counter INSIDE the body tag and enclose the scripting inside CDATA tags - like this:
Quote:
<script type="text/javascript" language="JavaScript">
//<![CDATA[
<!--
code in here.....
// -->
//]]>
</script>
|
2 - I'm not seeing any misalignment in Firefox 2.0.0.14, what version are you using ?
3 - Not sure, may be that your server is using UTF-8, change your meta tag to utf-8 and that error will go away.
One other thing, minor in IE but fixable - in IE6 there is a big space below your #topline and the image. The reason for this is that IE leaves space for text even when there is none. To combat this, add font-size: 1px; to the properties for #topline.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
|
|
|
|
|
05-15-2008, 11:17 AM
|
Re: Controlling alignment
|
Posts: 69
|
The miss alignment only happens when you minimize your window in FF. (I jsut figured that out)
So if you look at the site in Maximized mode, it aligns and looks fine. If you minimize the window the top and bottom images get skewed to the right.
I am using the most up to date Fire Fox version...
Quote:
|
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.14) Gecko/20080404 Firefox/2.0.0.14
|
|
|
|
|
|
05-15-2008, 04:28 PM
|
Re: Controlling alignment
| |
