PDA

Click to See Complete Forum and Search --> : Line up issues with IE and Mozilla

cherman25
01-29-2007, 01:19 PM
I am having trouble lining up the text and buttons at the bottom of a website I'm working on. When it lines up in IE it's not the same in Mozilla and vice versa. What code can I use to make the content line up the same in both? Is there something I can include in the header to tell the page to treat the browser like IE eventhough the browser may be different? Thanks for your help.

Sincerely,
Cheryl
toicontien
01-29-2007, 01:22 PM
Can you post the full HTML and CSS? We can't help you until we see the code, or a link to the page in question.
cherman25
01-29-2007, 01:36 PM
Sure, you can view the pages here:
http://testsite.camwebsitedesign.com/franchising.html
Your help is greatly appreciated!
Cheryl
Centauri
01-29-2007, 06:47 PM
Incomplete doctype throwing IE into quirks mode, coupled with table layout, is your main problem.

The comment "to tell the page to treat the browser like IE" makes me cringe ..... an entry on a page that could force IE to display like any decent browser would be a Godsend, though :D

By the way, nice graphic design - bold colours and clean lines I like.

Cheers
Graeme
cherman25
01-30-2007, 06:55 AM
Thanks for taking a look at my problem.
" Incomplete doctype throwing IE into quirks mode". What does this mean and how do I fix it?

Cheryl
Centauri
01-30-2007, 07:15 AM
At the top of your page is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> the correct version of this should be <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

The line <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> is probably better replaced with <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Fix up those first, then see what difference it makes.

Cheers
Graeme
cherman25
01-30-2007, 07:19 AM
Thank you for your help. I will try these changes and let you know how it goes. Also, thanks for the compliment of my design!

Sincerely,
Cheryl
cherman25
01-30-2007, 09:32 AM
I changed my doctype and charset to what you sent me. I did notice a change on the business analysis page with the color of the text within the form tag. It was black but now it changes to the blue I wanted. As for the other pages, I still couldn't get the fineprint statement, buttons and copyright to line up the same in both browsers. My solution was to recreate the background image and add more blue at the bottom of the image. That gave me more area to fiddle around with. I hope my client will be pleased with new look. If you want to take a look at the site here is the link:

http://testsite.camwebsitedesign.com/franchising.html

You had also mentioned before that there is a problem with the table layout; can you explain the problem to me and possibly a way to fix it?

Thanks for all of your help, I do appreciate it!
Sincerely,
Cheryl
Centauri
01-31-2007, 01:03 AM
Whilst the graphic design of the site is quite good, there is a lot of behind-the-scenes stuff which doesn't come up to scratch. These are:
1. Using tables for layout - an outdated method of page layout which produces semantically garbled code.
2. Slow page load due to large background graphic, which is unique for each page.
3. Unnecessary javascript just to do rollovers and preloads - these are best left to css.
4. Positioning using a stack of empty paragraph tags - different browsers will render this in entirely different default sizes. Impossible to position things this way.
5. Due to virtually all visual text being graphics, there is no information to allow screen readers (for the visually impared), search engines, etc to read the site - effectively the "content" of the site is nearly zero.

However, all is not lost! With a rework approaching from a different perspective, this page (and site) can be made quicker loading, more accessible, semantically logical and informative, browser independant, and display width fluid without destroying the look. There doesn't need to be any javascript or image preloads, this all being accomplished with css.

The "different perspective" involves treating the page as having "content" first, then style that content to get the visual look. To produce content from what you have, the three graphic texts at the top of the page can be headings (<h1>, <h2>, and <h3> tags), and the various menus, links and buttons can be unordered lists of links. The text that is written out in the flash animation can also be utilised as content.

So, just concentrating on content and nothing else, the page can look like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Express Mart Franchising Division Homepage</title>
</head>

<body>
<h1>ExpressMart</h1>
<h3>Convenience Stores</h3>
<h2>Franchising</h2>
<ul>
<li><a href="franchising.html">Home</a></li>
<li><a href="locations.html">Locations</a></li>
<li><a href="why_expressmart.html">Why Express Mart?</a></li>
<li><a href="opportunities.html">Opportunities</a></li>
<li><a href="programs.html">Programs</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
<p>Sleepy?<br>
Hungry?<br>
Thirsty?<br>
Express Mart<br>
Express Yourself</p>
<ul>
<li><a href="business_analysis.html">Free Business Analysis</a></li>
<li><a href="why_expressmart.html">Why choose Express Mart?</a></li>
<li><a href="#">Need Wholesale Fuel?</a></li>
</ul>
<p>This information does not constitute an offering. An offering can be made by prospectus filed with the Department of Law of the State of New York. Such filing does not constitute approval by the Department of Law.</p>
<ul>
<li><a href="http://www.expressmart.com/">Corporate</a></li>
<li><a href="http://www.washnsave.com/index.html">Car Wash</a></li>
<li><a href="#">Wholesale Fuel</a></li>
</ul>
<p>© Copyright 2007 All Rights Reserved Express Mart Petr-All Corporation</p>
<p>Web site design by <a href="http://www.camwebsitedesign.com/">CAM Web Design</a>. If there are any problems with this site please contact the <a href="mailto:Cheryl@camwebsitedesign.com">designer</a>.</p>
</body>
</html>


Not very interesting to look at yet, but a littel css can fix that.

Continued next post...
Centauri
01-31-2007, 01:25 AM
Now that we have a basic "content" page, we can look at it and decide on logical groupings, keeping in mind the final layout. The top headings can be grouped into a "header" div, the side navigation list into a "side_nav" div, the bottom info and links into a "footer" div, and the remaining content into a "content" div. In keeping with this layout and that of other pages, the content div can have a "right_col" column grouping as well. With a few other sub-groupings to suit our required look, and a reference to the css file (express_mart.css in this case), the html file can look like <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Express Mart Franchising Division Homepage</title>
<link href="express_mart.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="header">
<div>
<h1>ExpressMart</h1>
<h3>Convenience Stores</h3>
<h2 class="h2_franch">Franchising</h2>
</div>
</div>
<div id="side_nav">
<ul>
<li><a href="franchising.html" class="current">Home</a></li>
<li><a href="locations.html">Locations</a></li>
<li><a href="why_expressmart.html">Why Express Mart?</a></li>
<li><a href="opportunities.html">Opportunities</a></li>
<li><a href="programs.html">Programs</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
<i></i></div>

<div id="content">
<div class="right_col_01">
<ul>
<li><a href="business_analysis.html" style="background-image:url(images/freeanalysis_buttonshorter.jpg)">Free Business Analysis</a></li>
<li><a href="why_expressmart.html" style="background-image:url(images/whyexpressmart_buttonshorte.jpg)">Why choose Express Mart?</a></li>
<li><a href="#" style="background-image:url(images/wholesalefuel_buttonshorter.jpg)">Need Wholesale Fuel?</a></li>
</ul>
</div>
<div class="flash_banner">
<p>Sleepy?<br>
Hungry?<br>
Thirsty?<br>
Express Mart<br>
Express Yourself</p>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="400" height="132">
<param name="movie" value="expressmart_homepageflash.swf">
<param name="quality" value="high">
<embed src="expressmart_homepageflash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="132"></embed>
</object></div>
</div>

<div id="footer">
<span>This information does not constitute an offering. An offering can be made by prospectus filed with the Department of Law of the State of New York. Such filing does not constitute approval by the Department of Law.</span>
<ul>
<li><a href="http://www.expressmart.com/" style="background-image:url(images/corp_button.gif)">Corporate</a></li>
<li><a href="http://www.washnsave.com/index.html" style="background-image:url(images/carwash_button.gif)">Car Wash</a></li>
<li><a href="#" style="background-image:url(images/fuel_button.gif)">Wholesale Fuel</a></li>
</ul>
<p>© Copyright 2007 All Rights Reserved<br>Express Mart<br>Petr-All Corporation</p>
<i>Web site design by <a href="http://www.camwebsitedesign.com/">CAM Web Design</a>. If there are any problems with this site please contact the <a href="mailto:Cheryl@camwebsitedesign.com">designer</a>.</i>
</div>
</body>
</html>

If you look at this in a browser, there is little difference to the last coding. The whole visual appearance of this can now be styled with css.

But first, the graphics. Separate huge background graphics require tricky lining-up, and doom the site to inflexibility besides taking ages to load (especially for dial-up users). I did a sice-up of the main graphic into components (NOT A GRID, such as produced by Imageready). The lightened logo in the centre of the screen can be a separate body background, the left top logo section a background of the header div (the rest being a 1 pixel wide graphic repeated across), the left navigation area can be handled by a 1 pixel high graphic repeated vertically with a corner graphic at the bottom, and the footer can also be a 1 pixel wide graphic repeated horizontally. To increase flexibility and reusability of the graphics, the site name, description, and page name graphics are separated as transparent gifs. The rollover buttons have also been changed, incorporating both normal and rollover graphic in one - this avoids swapping graphics for the rollovers, and eliminates the need for preloading. Attached to this post are the changed graphics (including page description header graphics for some of the other pages).

In the next post, we look at styling.
Centauri
01-31-2007, 01:28 AM
Mmm. maximum of 5 files at a time - so heres more of the modified graphics.
Centauri
01-31-2007, 01:29 AM
More graphics
Centauri
01-31-2007, 01:32 AM
And the last couple of graphics - note that all graphics are reasonably small, much smaller than the large whole background.

Styling next
Centauri
01-31-2007, 01:54 AM
To style this we need the css file. Save this as express_mart.css (to work with the previous code) : * {
border: 0;
margin: 0;
padding: 0;
}
body {
background-image: url(images/logo_lite.jpg);
background-repeat: no-repeat;
background-position: 70% 80%;
background-attachment: fixed;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
p {
margin: 10px 0;
}
#header {
display: block;
height: 310px;
background-image: url(images/logo_lt_back.jpg);
background-repeat: no-repeat;
}
#header div {
display: block;
margin-left: 210px;
background-image: url(images/top_back.jpg);
background-repeat: repeat-x;
height: 197px;
padding-top: 30px;
}
#header h1 {
display: block;
width: 476px;
height: 86px;
margin: 0 auto 0;
background-image: url(images/express_mart.gif);
font-size: 1px;
text-indent: -1000px;
}
#header h3 {
display: block;
width: 305px;
height: 30px;
margin: 5px auto 0;
background-image: url(images/convenience_stores.gif);
font-size: 1px;
text-indent: -1000px;
}
#header h2 {
display: block;
height: 40px;
margin: 25px auto 0;
font-size: 1px;
text-indent: -1000px;
}
#header .h2_franch {
width: 214px;
background-image: url(images/franchising.gif);
}
#header .h2_loc {
width: 180px;
background-image: url(images/locations.gif);
}
#header .h2_why {
width: 352px;
background-image: url(images/why.gif);
}
#header .h2_oppor {
width: 254px;
background-image: url(images/opportunities.gif);
}
#header .h2_progs {
width: 178px;
background-image: url(images/programs.gif);
}
#header .h2_contact {
width: 206px;
background-image: url(images/contact.gif);
}
#side_nav {
float: left;
width: 210px;
background-image: url(images/side_back.jpg);
background-repeat: repeat-y;
z-index: 10;
}
#side_nav ul {
list-style: none;
display: block;
position: relative;
top: -50px;
width: 124px;
}
#side_nav li {
padding: 0 10px 15px;
}
#side_nav a {
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
display: block;
}
#side_nav a:visited {
color: #FFD400;
}
#side_nav a:hover {
color: #E41F1F;
}
#side_nav a.current {
color: #000000;
cursor: default;
}
#side_nav i {
height: 87px;
background-image: url(images/bot_corner_back.jpg);
display: block;
width: 210px;
margin-top: 220px;
}
#content {
margin-left: 130px;
top: -60px;
padding: 0 20px;
position: relative;
left: -60px;
}
#content .right_col_01 {
width: 200px;
float: right;
position: relative;
}
#content .right_col_01 ul {
list-style: none;
}
#content .right_col_01 a {
display: block;
width: 200px;
height: 58px;
font-size: 1px;
text-indent: -2000px;
margin-bottom: 20px;
background-repeat: no-repeat;
}
#content .flash_banner {
margin: 10px 0 0 10%;
display: block;
width: 400px;
height: 132px;
}
#content .flash_banner p {
font-size: 1px;
float: left;
color: #FFFFFF;
}
#footer {
clear: left;
display: block;
background-image: url(images/bottom_back.jpg);
color: #FFD400;
font-size: 9px;
text-align: center;
}
#footer span {
display: block;
width: 45em;
text-align: center;
margin: 0 auto;
padding: 3px;
}
#footer ul {
display: block;
width: 444px;
margin: 0 auto;
overflow: hidden;
list-style: none;
}
#footer li {
float: left;
}
#footer ul a {
display: block;
width: 148px;
height: 61px;
font-size: 1px;
text-indent: -1000px;
background-position: left top;
}
#footer ul a:hover {
background-position: left bottom;
}
#footer i {
color: #000000;
padding: 5px;
display: block;
}
#footer i a {
color: #FF0000;
text-decoration: none;
}


Now we look at what makes this tick.

As different browsers have different default margins and paddings for various elements, the first css entry zeros these differences for a level playing field.

The body tag style defines the base text type and size, as well as sets the background to the lightened logo (which is positioned with percentages and fixed so that it doesn't scroll with the window - a cool effect).

As default margins etc have been zeroed, it is necessary to define everything, and the most common paragraph margins are defined next.

The #header div is styled as a block the same height as the left-top logo graphic, and it has this graphic assigned to its background. Another div is located inside #header, and the next style targets this, setting it as a block 210px from the left, with the narrow repaeting background filling the top horizontally. A padding of 30px spaces anything inside down from the top.

The heading texts are all treated the same way - the font size is reduced to 1px and is indented way off the left of the page. They are then styled as blocks, with the size set to suit the appropriate graphic applied as a background. The side margins are set to auto to centre the heading on the page (between the left logo and rh edge of the screen), and top margin sets spacing. The <h2> tag, used for the page heading, hasa number of different classes defined to cater for different names on differenet pages.

Style discussion continues next post
Centauri
01-31-2007, 02:41 AM
The #side_nav div is floated left (taking it out of the document flow), and given a 1px high graphic repeated vertically as the background. This div is made wide enough to allow for the bottom blue corner. The navigation list ul is given the correct width and displayed as block. A relative positioning allow us to pull the ul up with the negative top setting, so that it sits closer to the top logo. The list li's just have padding set to correctly space the links. The link <a> tags text is styled next, followed by the various link states colours. A .current class styles the current page link.

At the bottom of the #side_nav div is an italic <i> tag cotaining nothing - this is a dummy tag to hold another background graphic, in this case the bottom blue corner. A top margin spaces this down from the navigation list, and this determines the height of the #side_nav div, and ultimately, the overall height of the site - if there is not enough room for content, increase the margin here to move everything down further.

The #content div is allowed to slip under the edge of the #side_nav div, and its relative positioning and negative top and left settings pull it into the #header and #side_nav white spaces.

The right content column (.right_col_01 class) is floated right and given a width appropriate to the contents - different classes can be defined here to suit different widths etc.

The right column links tags are styled as blocks of the correct size, with the individual backgrounds defines inline in the html. The link text is reduced in size and indented off the page just like the header texts.

The paragraph of text within the .flash_banner div is reduced in size and floated to hide it behind the flash graphic - devices that cannot access the flash will read the paragraph.

The #footer div is set to clear the #side_nav div so it always appears under it, and the general text size and colour is defined. The span holding the legal notice has its width set (in ems to allow text resize) and auto side margins centre it. A 3px padding gives the text a little space.

The footer links, like the right content links, are styled as blocks of appropriate size, and the appropriate background graphic is applied via inline style. As the set height of the block is half that of the graphic, onlt the top half of the graphic shows. On hover, the background position is set to bottom, so the bottom half of the graphic shows for the rollover.

The links li tags are floated left so that the buttons sit beside each other. The ul is given a width, and auto side margins centre the group of buttons.

The last line of text in the footer is rendered in italics with the <i> tag, and further styled to change text and link colour.

Thats it, no tables, no javascript, flexible, easily modified, semantically understandable, renders correctly cross-browser. Hope that wets the appetite for more css layouts.

Cheers
Graeme
cherman25
01-31-2007, 12:56 PM
WOW!!! That sure is alot of information for me to digest. I appreciate all of the time and effort you put into this. I'm glad there is someone out there that is passionate about having web sites be effective.
I feel so inadequate as a web site designer now. I know that wasn't your intent; I thought I was doing good work.
I will work on the site and get it in better shape. It is going to take some time for me to do that. I'll work on it little by little. I did go to school (2001-2003) for web site design and management. At the time there weren't enough good teachers available to go into details about CSS and to teach us the tricks. As you can guess, I don't have much experience with CSS and my layout is prehistoric. I am currently using Dreamweaver MX for my work. I have purchased Dreamweaver 8 but haven't had the time to install it on my computer yet. I'd better get cracking on that. I guess it is also time for me to upgrade my knowledge of CSS and to learn all of the tricks I can. Thank you for enlightening me with your knowledge and yes you have given me an appetite for learning more and doing better work. I will close for now, and I promise to implement your lessons in my work.
Thanks again for all of your time and help.
Sincerely,
Cheryl