Shifting navigation in IE

8 replies [Last post]

Tue, 2010-08-24 21:16

iammow

Offline

newbie

Timezone: GMT+1

Joined: 2010-08-24

Posts: 5

Points: 8

I've got a problem with IE7 and below were the navigation is shifting to the left on two of the pages on my website. Trying to get this finished for a client and getting really annoyed. I thought maybe the right div could be shifting the navigation along but it's fine on the other three pages using the same stylesheet.

Two problem pages:
http://www.amythornley.co.uk/testfiles/gallery.html
http://www.amythornley.co.uk/testfiles/contactus.html

CSS:

@charset "UTF-8";
/* CSS Document */
 
 
 
body {
	background-color: #0a6c3f;
	margin-bottom: 0;
	margin-top: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000;
	text-align: center; /* for IE */
}
 
#container {
	background-color: #FFF;
	width: 808px;   /* align for good browsers */
	text-align: left; /* counter the body center */
	height: 100%;
	padding-top: 10px;
	padding-right: 19px;
	padding-bottom: 5px;
	padding-left: 19px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
 
#top
{
padding-top: 0px;
	padding-right: 19px;
	padding-bottom: 5px;
	padding-left: 19px;
}
 
#rightnav
{
	float: right;
	background-color: #eaf2dd;
	width: 250px;
	margin-left: 0px;
	margin-right: 22px;
	margin-top: 20px;
	padding-top: 10px;
	padding-right: 19px;
	padding-bottom: 10px;
	padding-left: 19px;
}
 
#right
{
	float: right;
	width: 250px;
	margin-left: 0px;
	margin-right: 19px;
	padding-right: 19px;
	padding-bottom: 10px;
	padding-left: 19px;
	margin-top: 19px;
	padding-top: 0px;
 
}
 
#rightimg
{
	float: right;
	width: 310px;
	margin-left: 0px;
	margin-right: 19px;
	margin-top: 38px;
	padding: 0px;
}
 
 
#rightaboutus
{
	float: right;
	width: 360px;
	margin-left: 0px;
	margin-right: 27px;
	margin-top: 38px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 2px;
}
 
#contentaboutus
{
	width: 360px;
	margin-left: 0px;
	margin-right: 320px;
	padding-top: 0px;
	padding-right: 31px;
	padding-bottom: 10px;
	padding-left: 23px;
}
 
 
#content
{
	width: 415px;
	margin-left: 0px;
	margin-right: 300px;
	padding-top: 0px;
	padding-right: 9px;
	padding-bottom: 10px;
	padding-left: 23px;
}
 
#footer
{
clear: both;
margin: 0;
padding-top: 10px;
padding-left: 19px;
}
 
 
 
 #tabsE {
	 float: left;
      width:600px;
      background:#FFF;
      font-size:12px;
      line-height:normal;
 
      }
    #tabsE ul {
	margin: 0;
	padding:10px 0px 35px 0px;
	list-style:none;
      }
    #tabsE li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsE a {
		float: left;
      background:#FFF;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsE a span {
		float: left;
      display:block;
      background:url("images/tab_02.jpg") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsE a span {float:none;}
    /* End IE5-Mac hack */
    #tabsE a:hover span {
      color:#000;
      }
    #tabsE a:hover {
      background-position:0% -44px;
      }
    #tabsE a:hover span {
      background-position:100% -44px;
      }  
 
 
	  a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #666;
}
a:hover {
	text-decoration: none;
	color: #0a6c3f;
}
a:active {
	text-decoration: none;
	color: #666;
}
h1,h2,h3,h4,h5,h6 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
}
h1 {
	font-size: 20px;
	color: #0a6c3f;
	font-weight: normal;
 
}
h2 {
	font-size: 16px;
	color: #0a6c3f;
	font-weight: normal;
}
h3 {
	font-size: 11px;
	color: #999;
	font-weight: normal;
}
h4 {
	font-size: 11px;
	color: #0a6c3f;
	font-weight: bold;
}

Thanks to anybody who can help, I'm desperate!

Tags:

CSS Layouts

Tue, 2010-08-24 21:53

Tyssen

Offline

Moderator

Timezone: GMT+10

Joined: 2004-05-01

Posts: 8123

Points: 1302

It's because you've floated

It's because you've floated #tabsE but not made it full width. I have some questions:

Why does #tabsE need to be floated at all?
Why all the non-breaking spaces in the main nav?
Why use a span instead of just applying the background image to the anchor instead?

Also don't use title attributes on links when the title says the exact same thing as the anchor text. It's redundant; you should only use the title attribute when you're adding information that isn't in the anchor text.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Tue, 2010-08-24 22:03

iammow

Offline

newbie

Timezone: GMT+1

Joined: 2010-08-24

Posts: 5

Points: 8

You'll have to excuse if my

You'll have to excuse if my code isn't awfully clean I am still learning with CSS.

1. I'm not sure, I think I just floated it as I made it at the time. How else could I position them? bear in mind at this stage I really dont want to redo the whole layout as I need to hand it to the client on thursday.
2. I used them to center the text because all my main text needs to be aligned left, a sort of cheat but it works.
3. What do you mean by the anchor?

And okay, I'd just always been told to give everything attributes or alt tags.

So if I remove the floats and make the navigation the same width as the container it should be ok?

Tue, 2010-08-24 22:09

Tyssen

Offline

Moderator

Timezone: GMT+10

Joined: 2004-05-01

Posts: 8123

Points: 1302

iammow wrote: 2. I used them

iammow wrote:

2. I used them to center the text because all my main text needs to be aligned left, a sort of cheat but it works.

Then just apply text-align: center to the nav anchors in your CSS.

iammow wrote:

3. What do you mean by the anchor?

Link - <a>.

iammow wrote:

So if I remove the floats and make the navigation the same width as the container it should be ok?

Just remove the float from the nav container, not the list items or anchors.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Tue, 2010-08-24 22:21

iammow

Offline

newbie

Timezone: GMT+1

Joined: 2010-08-24

Posts: 5

Points: 8

@charset "UTF-8"; /* CSS

@charset "UTF-8";
/* CSS Document */
 
 
 
body {
	background-color: #0a6c3f;
	margin-bottom: 0;
	margin-top: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000;
	text-align: center; /* for IE */
}
 
#container {
	background-color: #FFF;
	width: 808px;   /* align for good browsers */
	text-align: left; /* counter the body center */
	height: 100%;
	padding-top: 10px;
	padding-right: 19px;
	padding-bottom: 5px;
	padding-left: 19px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
 
#top
{
padding-top: 0px;
	padding-right: 19px;
	padding-bottom: 5px;
	padding-left: 19px;
}
 
#rightnav
{
	float: right;
	background-color: #eaf2dd;
	width: 250px;
	margin-left: 0px;
	margin-right: 22px;
	margin-top: 20px;
	padding-top: 10px;
	padding-right: 19px;
	padding-bottom: 10px;
	padding-left: 19px;
}
 
#right
{
	float: right;
	width: 250px;
	margin-left: 0px;
	margin-right: 19px;
	padding-right: 19px;
	padding-bottom: 10px;
	padding-left: 19px;
	margin-top: 19px;
	padding-top: 0px;
 
}
 
#rightimg
{
	float: right;
	width: 310px;
	margin-left: 0px;
	margin-right: 19px;
	margin-top: 38px;
	padding: 0px;
}
 
 
#rightaboutus
{
	float: right;
	width: 360px;
	margin-left: 0px;
	margin-right: 27px;
	margin-top: 38px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 2px;
}
 
#contentaboutus
{
	width: 360px;
	margin-left: 0px;
	margin-right: 320px;
	margin-top: 38px;
	padding-top: 0px;
	padding-right: 31px;
	padding-bottom: 10px;
	padding-left: 23px;
}
 
 
#content
{
	width: 415px;
	margin-left: 0px;
	margin-right: 300px;
	padding-top: 0px;
	padding-right: 9px;
	padding-bottom: 10px;
	padding-left: 23px;
}
 
#footer
{
clear: both;
margin: 0;
padding-top: 10px;
padding-left: 19px;
}
 
 
 
 #tabsE {
      width:600px;
      background:#FFF;
      font-size:12px;
      line-height:normal;
 
      }
    #tabsE ul {
	margin: 0;
	padding:10px 0px 35px 0px;
	list-style:none;
      }
    #tabsE li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsE a {
 
		float: left;
      background:#FFF;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
	  text-align: center;
      }
  #tabsE a span {
		float: left;
      display:block;
      background:url("images/tab_02.jpg") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
	  text-align:center;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsE a span {float:none;}
    /* End IE5-Mac hack */
    #tabsE a:hover span {
      color:#000;
      }
    #tabsE a:hover {
      background-position:0% -44px;
      }
    #tabsE a:hover span {
      background-position:100% -44px;
      }  
 
 
	  a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #666;
}
a:hover {
	text-decoration: none;
	color: #0a6c3f;
}
a:active {
	text-decoration: none;
	color: #666;
}
h1,h2,h3,h4,h5,h6 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
}
h1 {
	font-size: 20px;
	color: #0a6c3f;
	font-weight: normal;
 
}
h2 {
	font-size: 16px;
	color: #0a6c3f;
	font-weight: normal;
}
h3 {
	font-size: 11px;
	color: #999;
	font-weight: normal;
}
h4 {
	font-size: 11px;
	color: #0a6c3f;
	font-weight: bold;
}

Here's the new code, the navigation still sits in place and I'll test it in IE soon, but the text align doesn't seem to be working for the links where am I going wrong? Also for the span, do you mean simply removing span from my css and putting the background attribute in the tabs a { css then removing the from the links.

thanks for your help

Tue, 2010-08-24 22:44

Tyssen

Offline

Moderator

Timezone: GMT+10

Joined: 2004-05-01

Posts: 8123

Points: 1302

iammow wrote: but the text

iammow wrote:

but the text align doesn't seem to be working for the links where am I going wrong?

Can you update the stylesheet on the live site?

iammow wrote:

Also for the span, do you mean simply removing span from my css and putting the background attribute in the tabs a { css then removing the from the links.

Yes.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Tue, 2010-08-24 22:54

iammow

Offline

newbie

Timezone: GMT+1

Joined: 2010-08-24

Posts: 5

Points: 8

Updated the stylesheet and

Updated the stylesheet and removed the breaks on this page so you can see:

http://www.amythornley.co.uk/testfiles/contactus.html

If I remove the span aspect, I lose the gaps between the buttons so think I'm best to keep the span for now while it works.

ETA: the good news is the main issue is now fixed in IE, so even if I can't get the alignment right I'll be pretty pleased
http://api.browsershots.org/png/original/81/81db34dcf12978d6282a15c0775a7c2d.png

Tue, 2010-08-24 23:21

Tyssen

Offline

Moderator

Timezone: GMT+10

Joined: 2004-05-01

Posts: 8123

Points: 1302

Just put a margin on the

Just put a margin on the anchors and if you want the text centred, rework the padding so that it's equal on both sides.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Wed, 2010-08-25 08:50

iammow

Offline

newbie

Timezone: GMT+1

Joined: 2010-08-24

Posts: 5

Points: 8

http://www.amythornley.co.uk/

http://www.amythornley.co.uk/testfiles/index.html

Thanks so much, it is now completely working in IE and I have made the changes you suggested!

Shifting navigation in IE

It's because you've floated

You'll have to excuse if my

iammow wrote: 2. I used them

@charset "UTF-8"; /* CSS

iammow wrote: but the text

Updated the stylesheet and

Just put a margin on the

http://www.amythornley.co.uk/

New forum topics

User login

Navigation