Couple issues on IE

HTML & CSS
1

Hi guys,

OK I checked the site in IE7 and Firefox and it looks great.

But then pulled it up on someones laptop most likely in IE6 I’m assuming and everything after the flash stuff was shifted for some reason, please if you can check it out and let me know what I need to fix, need this asap…

http://scholarscanada.com/wordpress/education/

Also in IE7 everything seems to be over jsut by 1px to the left, any idea why this is and how to fix it.

Thanks

Mike

2

I don’t see IE7 shifting everything over but I notice you are suffering from a 1px jog shift in the body background image and that’s because you set an image on the <body> element. See the FAQ for details on this.

Also the flash is not shifting over for me either in IE6/7/FF. All 3 are the same.

ALso, I see the top menu screwing up in IE6. It is being stretched out due to the anchors having too much height. You can fix this by lowering the line height to decrease the gap :). But then the background image won’t line up in IE6 and that’s because on #top_menu ul, you set 100% width but you put margin/padding on it to further stretch it out. Set it to 0 :slight_smile:

#top_menu ul
{
	padding:0;
	margin:0;
}
#top_menu ul li a
{
	height:auto;/*height removed*/
	line-height:34px;/*Adjust the line height to remove gap*/
}
3

Thanks I did this and now my navigation text moved up a bit, i would like the center of the text to line up where the colour change on the navigation bar happened so just down a bit by like ten pixels.

I noticed it is when you make the window smaller the footer does not stay aligned with the rest of the image is this fixable?

Also if you can check out this page, I have them as lists, how can I get those lists to lineup with everything when putting in paragrahs they do nicely but right when I make a list it shifts the content to the right.

http://scholarscanada.com/wordpress/employment/?page_id=86

Thanks alot!

4

Hi, you can move the text down by increasing the top padding on the anchor, so from 5px lets make it 8px. That’s 3 extra vertical pixels, so lets lower the line-height 3px. From 34 to 31 :slight_smile:

#top_menu ul li a{padding-top:8px;line-height:31px;}

The footer is screwed up because you center it via auto margins and you don’t on the #wrapperbg. Give the #wrapperbg the same width as the footer (and margin:0 auto;)

#wrapperbg{width:1050px;margin:-157px auto 0;}

The -157px is from teh sticky footer technique. Use the marign value I just gave :slight_smile:

I’ll check out hte other page now

5

Hi, if I understand you right about the other page, the red headers aren’t matchin up with the content below? That’s because on the <h1> and <h2> and <p> inside the “div#contentInside” div you set margins/paddings which is moving the text over

You can remove all the padding/margins on all 3 of those elements and just set left padding on the “div#contentInside” to space all the content over :slight_smile:

Of course, remember with that, if you add left padding of … like 7px or something, that will add to the width.

So if your width is 707px (as it is now) and you add left padding of 7px, lower the width on that element to 700px to accomodate it :slight_smile:

6

Perfect now the footer is right now if I wish to give more padding to the menu cause 3px more isnt enough, can I give it like 7 more pixels and then minus 7 more pixels from the line height?

7

Yes :slight_smile:

8

Perfect, if you could do me a huge favor and take a look at it in IE6 and just let me know that everything looks good now, I’m checking it in IE7 and looks perfect, there should be no spacing after the Flash and the block titles if you know what I mean I had that issue before

http://scholarscanada.com/wordpress/education/

9

Besides you STILL not removing the margin and padding on “#top_menu ul” yes everything is perfect :slight_smile:

10

Ok removed it, hows it looks now, is there an easy way to center my navigation in the bar? I’m guessing its just position center or something like that right?

11

IE6 is fine now, and you could use the display:inline-block technique shown here to center the dropdown, it would require you setup your menu differently :slight_smile:

Also IE6/7 would require a conditioanl comment (or a hack) to have them set to display:inline; first :slight_smile:

http://www.css-lab.com/demos/navbar/inline-block.html
http://www.css-lab.com/demos/navbar/inline-block-2.html