SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: IE7 Problem

  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 Problem

    I am a newbie and I have a problem which I hope someone here can help me with. When I view my pages in IE8 or Firefox the site displays correctly, however when viewed in IE7 the CSS Navigation button move about 10PX to the right except the "about us" button which displays correctly. I have included the IE has layout in my header.

    Any advice most welcome

  2. #2
    SitePoint Evangelist ferrari_chris's Avatar
    Join Date
    Mar 2008
    Location
    NP, New Zealand
    Posts
    576
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any chance of a link to the offending code, or even posting some of it up?

    It'd be a pretty amazing effort to diagnose the problem you've got from the description you've given...

  3. #3
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,259
    Mentioned
    245 Post(s)
    Tagged
    1 Thread(s)
    Post the CSS and HTML... you can use the [code][/code] tags to do it. Simply copy and paste. The code will look different from the regular text.

  4. #4
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Am I allowed to give you a url or is this useless? As I am not sure I know how to do as you request. Ithought I saw someting about have to have 10 post.

  5. #5
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    @charset "utf-8";
    body {
    	font: 100% Arial, Helvetica, sans-serif;
    	background: url(../stob_bahn_images/Spirit-Scot.gif) repeat;
    	text-align: center;
    	margin: 0px;
    	padding: 0px;
    	position: relative;
    }
    #wrapper {
    	background: #ccccff;
    	text-align: left;
    	margin: 0 auto;
    	padding: 0px;
    	width: 780px;
    	border: 1px solid #4c5999;
    	position: relative;
    	font-size: 100%;
    }
    #header {
    	margin: 0px;
    	padding: 0px;
    	height: 100px;
    	width: 780px;
    }
    #LeftCol {
    	margin: 0px;
    	padding: 0px;
    	float: left;
    	height: 450px;
    	width: 180px;
    	position: relative;
    	background-color: #ccccff;
    }
    #nav {
    	background: #9933ff;
    	padding: 0px;
    	height: 300px;
    	width: 120px;
    	left: 30px;
    	top: 36px;
    	right: 29px;
    	color: #D4D0C8;
    	text-align: center;
    	position: absolute;
    	border: 1px solid #666;
    	list-style-type: none;
    }
    #mainContent {
    	background: #ccccff;
    	margin: 0px 0px 0px 180px;
    	padding: 0px;
    	height: auto;
    	width: 500px;
    }
    #footer {
    	background: #ccccff;
    	margin: 0px;
    	padding: 0px;
    	height: 50px;
    	width: 780px;
    	text-align: center;
    	position: relative;
    	clear: both;
    }
    #nav ul {
    	font-size: 85%;
    	text-decoration: none;
    	text-align: center;
    	display: inline;
    	list-style-type: none;
    }
    #li {
    	margin: 0px;
    	padding: 0px;
    	text-decoration: none;
    }
    #nav a {
    	text-align: center;
    	display: block;
    	width: 100%;
    	margin-top: 5px;
    	margin-bottom: 5px;
    	text-decoration: none;
    }
    #nav a:link, #nav a:visited {
    	color: #FFF;
    	text-decoration: none;
    	background: #CCC;
    }
    #nav a:hover, #nav a :active {
    	color: #000;
    	background: #999;
    	text-decoration: none;
    	list-style-type: none;
    }
    .clearfloat {
    	clear: both;
    	font-size: 1px;
    	line-height: 0px;
    }

  6. #6
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,259
    Mentioned
    245 Post(s)
    Tagged
    1 Thread(s)
    I think that your problem may be the positioning .... any chance to have the html too?

  7. #7
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi thanks a for looking at this for me . I keep ppasting my HTML code in but I am always redirected with a warning about keeping down spam.

  8. #8
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,259
    Mentioned
    245 Post(s)
    Tagged
    1 Thread(s)
    you can pm me the url if you want

  9. #9
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can you advise way of posting the HTML in .
    Thanks
    John

  10. #10
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the url is www dot stob-ban dot net seen some else post it in like this as you receive the same error msg:-In an effort to stamp out forum SPAM only members with 10 posts or more can post website links or email addresses.

  11. #11
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,259
    Mentioned
    245 Post(s)
    Tagged
    1 Thread(s)
    I am sorry that you are suffering this annoying anti-spam method... unfortunately, there has been an increasing number of spammers and we are trying to keep them down. I'll guess that we are still trying to get the perfect method

    Thanks for your patience.

    Now, I have been able to visit the page and now that I could concentrate on the code I think that you are using too much code for what you need.

    In your HTML, it is logical and semantic that you have a left-column (althoug, I guess if you want to really be semantically correct, you could name it "navigation" as it is the only content that it has.

    You do not need the divs named ul and li at all.

    On the other hand, the left-column div is floated while the inner elements are positioned. You have to choose, you can't have both. In both cases, you are taking the elements out of their normal flow.

    It would be much simpler if you get rid of the divs and you give a background color to the ul element, in addition to a margin

    Code:
    #LeftColumn ul  {margin-top: 36px; margin-left: 29px; background: #9933FF;
    border:1px solid #666666;}
    As you can see, if you only want to apply a color to the background, you don't need to use all the properties included in the shortcut "background".

    To get the desired effect of a grey background for the links, you can simply specify it to the a element as you have already done.

    I think this should do the job and work in all browsers.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •