Vertical alignment issues in IE6. IE7 Won't center my page!

Itsumishi · #1 Mar 5th, 2008, 02:06

Hello!

I've been working on this Design for a while (I know some of my problems have been brought up in another thread, for that I apologise!

) but I'm still having a few problems with IE 6 & IE 7, as well as some minor alignment issues with all browsers.

I've searched all over the forums and google for solutions to my issues with little luck (I'm sure the answers are out there, but I can't find them!)

First the IE 6 problems!

The 2 small menus are showing on top of my banner (cutting off part of the image) rather than above the top menu.
The main background image does not center, making the background of the SSV logo stand out.
Because of how my top banner is styled in CSS I had to put a large top margin in for my Content Div. In all other browsers this pushes the heading to just a bit below the banner, however in IE 6 it pushes it a fair way down the content page.
My drop down menus don't work, despite the javascript I copied from the Son of Suckerfish pages.

Next the IE 7 Problems

My page won't center!
My drop down menus don't clear when you move the mouse away.

The cross browser issues.

There are minor alignment problems with the banner and the main content box in relation to the menus.

The site can be viewed here -
http://www.tourismaccreditationvic.c...ainLayout.html

My CSS files can be viewed here -
http://www.tourismaccreditationvic.c...css/Styles.css
http://www.tourismaccreditationvic.c...sv/css/ie6.css

And finally my java can be viewed here -
http://www.tourismaccreditationvic.c.../hovermenus.js

Thanks in advance for all the help. The last few weeks using this forum have really helped me learn a lot and I hope soon I will be able to start contributing answers rather than questions!

spinal007 · #2 Mar 6th, 2008, 17:33

The script for the menu is being ignored by IE7 because you are using this conditional comment:
<!--[if IE 6]>

The page isn't centered "probably* because you have this:
html,body{ margin:auto; }

Try:
html,body{ width:960px; margin:auto; }

Itsumishi · #3 Mar 7th, 2008, 02:40

Hrmm...
The centering thing didn't seem to work.
I already had the width in the code, it was just the order that I've changed.

Before it was

html, body {
margin:auto;
padding:0;
width:960px;
}

Now it's

html, body {
width:960px;
margin:auto;
padding:0;
}

But it doesn't seem to fix it.

However the Menu's are now working in IE7.
Thanks.

vishwebdesign · #4 Mar 21st, 2008, 11:22

What you need to do to align your container on the viewport FOR I.E is put text-align:center; for body. Then put a text-align:left; in your main container to align its contents to left

capture · #5 Mar 23rd, 2008, 01:25

I have been teaching (X)HTML and CSS online for almost 3 years now. One thing I teach all my students is not to create websites with content areas any wider than 786px. Why? If you have visitors to your site who are using an 800 X 600 screen resolution, anything wider than 800px will create a horizontal scroll bar at the bottom of the browser window, but it still leaves a few pixels of margin on either side of the content area in the browser window.

People do not mind scrolling down a page, but scrolling across to read every line on the page ticks them off.

Here is how I lay out my CSS Stylesheets:

HTML: Select all

<style type="text/css">
/*basics*/
html, body 
{
margin:0;
padding:0;
border:0;
}

body
{
background:#fff; 
font-family:verdana, tahoma, arial, sans-serif;
font-size:86%; 
font-weight:normal;
text-align:left;
margin:5px 0;/*leaves a slight gap at the top and bottom of content in the browser window*/
color:#000;
}

p
{
margin:5px 25px;
padding-bottom:6px;
}

p.center
{text-align:center;}

h1, h2, h3, h4, h5, h6
{
margin:5px 30px;
font-family:times new roman, times, serif;
text-align:center;
font-weight:bold;
text-transform:capitalize;/*because I'm lazy and don't want to use the shift key*/
}

a, a:visited
{
color:#49557f;
text-decoration:underline;
font-weight:bold;
}

a:hover
{
color:#c20808;
text-decoration:underline overline;
}

img
{border:0;}

img.left
{
float:left;
margin:0 15px;
}

img.right
{
float:right;
margin:0 15px;
}

.clear
{clear:both;}

/*layout ids*/

#wrapper
{
margin:0 auto;/*centers content area on the page*/
width:750px;
background:#fff;
border-top:10px solid #000; /*or border:0; for no border*/
border-right:1px dashed #eee;
border-bottom:10px solid #000;
border-left:1px dashed #eee;
}

#header
{
display:block; 
height:100px; 
background:url(images/header.png) #fff;
background-position:top center;
background-repeat:no-repeat;
margin:0 auto;
margin-bottom:6px;
}

#footer
{
display:block;
width:750px; 
height:50px; 
background:#000; 
border-top:1px dashed #eee;
}

#footer p
{
margin:5px;
padding-top:15px;
text-align:center;
color:#fff;
font-size:12px;
}

#footer a, #footer a:visited
{color:#fff;}

#footer a:hover
{
color:#000;
background:#eee;
text-decoration:none;
}
</style>
</head>
<!-- The (X)HTML: -->
<body>
<div id="wrapper">
<div id="header"></div>
<h1>title of page</h1>
<p>some paragraph</p>
<div id="footer">
<p>Web design by <a href="http://somefakedomain-name.com" title="my fake domain">My Fake Domain</a></p>
</div>
</div><!-- closes wrapper id div -->
</body>
</html>

This is actually a very simple idea of a basic layout which I use for splash, squeeze, lead capture and sales pages which only need one column.

Here's a single column website using basically the above CSS, but with more classes for presentation etc.
http://militaryarts.kr

I hope you found this basic information helpful towards getting your website up and running.

To your Health, Wealth, and Success.
ClaireP

headcoat · #6 Mar 24th, 2008, 20:28

Two things - firstly not all browsers read vertical centreing, can't remember which one it is (Safari?) but one will mess your page up with vertical centreing. Horizontal is cool however.

As pointed out above you need the text-align : left in the wrapper/container and text-align : center for the body. You'll need a wrapper div to act as a container something like below -

/*wrapper centres page*/
#wrapper {
margin : 3px auto 0 auto;
padding : 0 0 0 0;
width : 876px;
height : 570px;
background-color : #cccccc;
text-align : left;
}

Here's a good link

http://www.bluerobot.com/web/css/center1.html

Good luck

Hi Claire -

Still working to 800*600!!!! Even the BBC and my useability/accessibility obsessed tutors last year (and I mean completely obsessed) have moved to 1024*768 now...my site logs show under 0.5% of users in 800*600 - time they moved on? Or learnt to increase text size or bought glasses ;-0

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
<form> tag in <table> is causing alignment issues - HELP!	Love2Java	Web Page Design	5	Sep 4th, 2007 15:27
How to center a page without use of a table	pdk	Web Page Design	23	Jan 31st, 2007 11:28
:: Dreamweaver :: Vertical Alignment	LittleDoug	Web Page Design	4	May 22nd, 2006 16:40
Vertical Table Alignment	Amphersand	Web Page Design	6	Mar 13th, 2006 01:34
Alignment Issues	everlonggg	Web Page Design	10	Mar 9th, 2006 21:16

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Vertical alignment issues in IE6. IE7 Won't center my page!