ClioSport.net

Register a free account today to become a member!
Once signed in, you'll be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

  • When you purchase through links on our site, we may earn an affiliate commission. Read more here.

Css Problemo



  A4 Avant
I've got the start of a site i'm working on to look how I want in IE7 and Firefox on the PC. Problem is viewing it on any browser on a mac and in IE6 on the PC. The links don't pad properly! It's really frustrating me now.

Hopefully someone on here can give me a hand?

Link:

http://www.footprintcreative.com/Aspects Temp/New Site/nigel testing new menu.html

HTML:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="nigeltestingnewmenu.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_changeProp(objName,x,theProp,theValue) { //v6.0
  var obj = MM_findObj(objName);
  if (obj && (theProp.indexOf("style.")==-1 || obj.style)){
    if (theValue == true || theValue == false)
      eval("obj."+theProp+"="+theValue);
    else eval("obj."+theProp+"='"+theValue+"'");
  }
}
//-->
</script>
</head>
<body>
<div id="wrapper">
 <div id="leftcolumn">
  <div id="aspectslogo"></div><!--Aspects logo image-->
  <div id="leftmenu">
   <ul>
    <li><a href="#" onclick="MM_changeProp('extensionmenu','','style.visibility','hidden','LAYER');MM_changeProp('newbuildmenu','','style.visibility','hidden','LAYER')">About Us</a></li>
    <li><a href="#" onclick="MM_changeProp('extensionmenu','','style.visibility','visible','LAYER');MM_changeProp('newbuildmenu','','style.visibility','hidden','LAYER')">Extensions</a></li>
    <li><a href="#" onclick="MM_changeProp('extensionmenu','','style.visibility','hidden','LAYER');MM_changeProp('newbuildmenu','','style.visibility','visible','LAYER')">New Builds</a></li>
    <li><a href="#" onclick="MM_changeProp('extensionmenu','','style.visibility','hidden','LAYER');MM_changeProp('newbuildmenu','','style.visibility','hidden','LAYER')">Services</a></li>
    <li><a href="#" onclick="MM_changeProp('extensionmenu','','style.visibility','hidden','LAYER');MM_changeProp('newbuildmenu','','style.visibility','hidden','LAYER')">Contact Us</a></li>
   </ul>
  </div>
  <!--leftmenu-->
  <div id="extensionmenu">
   <ul>
    <li><a href="#">Extension 1</a></li>
    <li><a href="#">Extension 2</a></li>
    <li><a href="#">Extension 3</a></li>
    <li><a href="#">Extension 4</a></li>
    <li><a href="#">Extension 5</a></li>
    <li><a href="#">Extension 6</a></li>
   </ul>
   </div><!--extension menu-->
   <div id="newbuildmenu">
   <ul>
    <li><a href="#">New Build 1</a></li>
    <li><a href="#">New Build 2</a></li>
    <li><a href="#">New Build 3</a></li>
   </ul>
   </div><!--newbuild menu-->
  <div id="address">
   <ul>
    <li>Aspects Building</li>
    <li>Company Limited.</li>
    <li>Barry Smith,</li>
    <li>Fairview,</li>
    <li>Madeley Road,</li>
    <li>Belbroughton.</li>
    <li>DY9 9XL</li>
    <li>Office: 01562 711289</li>
    <li>Mobile: 07786 998089</li>
   </ul>
  </div><!--address-->
  <div id="leftredcolumn"></div><!--left red strip below menu-->
  <div class="style2" id="aspectslogotext">Building Company Ltd.</div><!--Aspects logo image-->
 </div><!--left column-->
 <div id="content"></div><!--<content-->
 <div id="rightcolumn">
  <div id="webaddress">www.aspectsbuilding.co.uk</div><!--web address-->
  <div id="nhbc"></div><!--Aspects logo image-->
  <div id="rightredcolumn"></div><!--left red strip below menu-->
   </div><!--right column-->
</div><!--wrapper-->
</body>
</html>

CSS:

Code:
/* CSS Document */
.style1 {
 color:#999999;
 }
.style2 {
 font-family:"Times New Roman", Times, serif;
 font-style:italic;
 font-size:18px;
 color:#000000;
 }
body {
    margin: 0 auto 0 auto;
    padding: 0px;
    background-color:#FFFFFF;
    background-position: top;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: center;
    }
 
#wrapper {
    width: 680px;
 height: 800px;
 background-color:#FFFFFF;
    text-align: center;
    margin: 0px auto 0px auto;
    padding: 0 0 0 0;
    position: relative;
    }
#leftcolumn {
  background-image: url(Images/Common/TL-Background.gif);
  background-position: Top Left;
    width: 315px;
 height: 359px;
    text-align: left;
    margin: 0px;
    padding: 0px;
        position: relative;
        float: left;
    }
#aspectslogo {
  background-image: url(Images/Common/Aspects-Man-Logo-New.gif);
  background-position: Top Left;
    width: 169px;
 height: 87px;
    text-align: left;
    margin: 0px;
    padding: 0px;
    position: relative;
 left: 11px;
 top: 11px;
        float: left;
  }
#aspectslogotext {
 text-align: left;
 margin: 0px;
 padding: 0px;
 top: 95px;
 left: 11px;
 position: absolute;
 float: left;
  } 
#leftmenu {
 width:200;
 height: auto;
 margin: 0;
 padding: 0;
 top: 134px;
 left: -158px;
 position: relative;
 float: left;
    } 
#leftmenu ul {
 list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    }
#leftmenu ul li {
 font-size: 150%;
    margin: 0 0 11px 0;
 padding: 0;
}
#leftmenu ul li a {
    padding: 5px;
 margin: 0;
 display:block;
    text-decoration: none;
}
#leftmenu ul li a:link {color: #000000}
#leftmenu ul li a:visited {color: #000000}
#leftmenu ul li a:hover {color: #FFFFFF}
#leftmenu ul li a:active {color: #000000}
#extensionmenu {
 background-image:url(Images/Common/lightpink1x1.gif);
 background-repeat:repeat;
 visibility: hidden;
 position: absolute;
 top: 174px;
 left: 175px;
    }
#extensionmenu ul {
 list-style-type: none;
    padding: 0px;
    margin: 0;
    text-align: left;
    }
#extensionmenu ul li a {
    padding: 5px;
 display:block;
    margin: 0;
    text-decoration: none;
}
#extensionmenu ul li a:link {color: #000000}
#extensionmenu ul li a:visited {color: #000000}
#extensionmenu ul li a:hover {color: #FFFFFF}
#extensionmenu ul li a:active {color: #000000}
#newbuildmenu {
 background-image:url(Images/Common/lightpink1x1.gif);
 background-repeat:repeat;
 visibility: hidden;
 position: absolute;
 top: 213px;
 left: 163px;
    }
#newbuildmenu ul {
 list-style-type: none;
    padding: 0px;
    margin: 0;
    text-align: left;
    }
#newbuildmenu ul li a {
 padding: 5px;
 display:block;
    margin: 0;
    text-decoration: none;
}
#newbuildmenu ul li a:link {color: #000000}
#newbuildmenu ul li a:visited {color: #000000}
#newbuildmenu ul li a:hover {color: #FFFFFF}
#newbuildmenu ul li a:active {color: #000000}
#address {
 background-image:url(Images/Common/pink1x1.gif);
 z-index: 10;
 width:auto;
 background-repeat:repeat;
 padding:5px 20px 5px 8px;
 margin:0px;
 position: absolute;
 left: 11px;
 bottom: -416px;
  }
#address ul {
 list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: left;
    }
#leftredcolumn {
 background-color:#CC0000;
 padding:0px 0px 0px 0px;
 margin:0px;
 position: absolute;
 width: 144px;
 height: 441px;
 left: 0px;
 bottom: -441px;
   }
 
#rightcolumn {
 background-image: url(Images/Common/BR-Background.gif);
  bottom: 0px;
 right: 0px;
    width: 200px;
 height: 351px;
    text-align: right;
    margin: 0px;
    padding: 0px;
        position: absolute;
        float: right;
    }
#webaddress {
 text-align: right;
 margin: 0px;
 padding: 0px;
 bottom: 3px;
 right: 3px;
 position: absolute;
 float: right;
    } 
#rightredcolumn {
 background-color:#CC0000;
 padding:0px 0px 0px 0px;
 margin:0px;
 position: absolute;
 width: 29px;
 height: 449px;
 right: 0px;
 bottom: 351px;
 }
#nhbc {
  background-image: url(Images/Common/NHBC-Logo.gif);
  background-position: Bottom right;
    width: 69px;
 height: 24px;
    text-align: right;
    margin: 0px;
    padding: 0px;
    position: absolute;
 right: 25px;
 bottom: 25px;
    float: right;
  }
 
  A4 Avant
On IE7 the text links all line up with the coloured box behind it. If you view it on a Mac or IE6 then the links don't fall into the right place. It's as if the padding or margin part of CSS is interpreted differently in various browsers.
 
Looks fine in Safari.

Does look crap in IE6 tho.. but that's IE for ya ;)
 

Attachments

  • Picture 2.png
    Picture 2.png
    49.4 KB · Views: 32
  A4 Avant
Daz, is that IE6 on the mac? IE6 on the PC makes it look completely different again!

Your image shows the main problem but I have no clue how to get around it!!
 
I'm lost.
That's Safari on Mac. Looks identical to Firefox on Windows? Heh.

IE5 is the last IE on Mac, and that's discontinued due to being shite. ;)
 
  RB 182
Any chance of a screenshot of the problems in IE6, I can't get it to happen on mine as I've got FireFox and Opera.
 
Safari on left, IE5 on right.

IE really sucks, haha.
 

Attachments

  • Picture 3.png
    Picture 3.png
    125 KB · Views: 47
Last edited:
  A4 Avant
I've only got IE6 on one of the older work PC's in the office. I'll get a screen shot 2mo and post it here.

Why won't the damned thing look the same on all browsers! Grrrr!

Daz, that looks even more screwed on your version of IE!!
 
  A4 Avant
Thats the problem Daz! It's frustrating me now!

I don't wanna carry on adding content now because it only works on PC's with latest versions of the broswer.

I can't see why the spacing between links is changing!
 
Ok, screenshot me of how you think it should look, cus' to me, if I saw that in Safari, I wouldn't think - WTF, that's wrong :rasp:
 
  A4 Avant
If you look at the safari screen shot you've posted, the space between each link gets larger. You can see it most with the 'contact us' link. It doesn't line up with the middle of the box in the background.

In IE7 the links all line up vertically with the box's behind them.

I've just installed Firefox on my laptop and it looks fine correct on that.
 

Attachments

  • problemo.jpg
    problemo.jpg
    64.8 KB · Views: 40
  A4 Avant
I don't mind changing what I'm doing but I don't see why this isn't working!

Daz, I ran it thtough a validator before and whilst not perfect I couldn't see anything that would cause this to happen!
 
  A4 Avant
Ok so I've editted some bits regarding the background-position in the css file. Rather than specifying top left I've changed it to 0% 0%.

It now fully complies with both css and xhtml on the w3 site. Yet in IE6 on the PC it still displays the links with too much spacing between them!!!

So it works on FF and IE7 on the PC but not on IE6 on PC or FF or IE on the Mac.

I'm pulling my hair out and I have hardly any to start with!!:mad:
 
Forget IE on the Mac.. it's stopped being developed for months now.. That only leaves you with a bit of a problem.
 
  A4 Avant
It's mostly the fact of it not working on IE6 that i'm worried about as people with dodgy copies of XP may not have upgraded to IE7! I'm sure that is quite an audience I'd be ignoring!
 
It's mostly the fact of it not working on IE6 that i'm worried about as people with dodgy copies of XP may not have upgraded to IE7! I'm sure that is quite an audience I'd be ignoring!

You're right to ignore them, tho. ;) *RUNS*

IE and stuff does interpret things odd.. I've spent ages getting things working before.. I've not looked at your code yet - too busy! Heh.
 
  A4 Avant
This is my latest code that works in IE7 and FF on PC.

CSS:

Code:
/* CSS Document */
.style1 {
 color:#999999;
 }
.style2 {
 font-family:"Times New Roman", Times, serif;
 font-style:italic;
 font-size:18px;
 color:#000000;
 }
body {
    margin: 0 auto 0 auto;
    padding: 0px;
    background-color:#FFFFFF;
    background-position: top;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: center;
    }
 
#wrapper {
    width: 680px;
 height: 800px;
 background-color:#FFFFFF;
    text-align: center;
    margin: 0px auto 0px auto;
    padding: 0 0 0 0;
    position: relative;
    }
#leftcolumn {
  background-image: url(Images/Common/TL-Background.gif);
  background-position: 0% 0%;
    width: 315px;
 height: 359px;
    text-align: left;
    margin: 0px;
    padding: 0px;
        position: relative;
        float: left;
    }
#aspectslogo {
  background-image: url(Images/Common/Aspects-Man-Logo-New.gif);
  background-position: 0% 0%;
    width: 169px;
 height: 87px;
    text-align: left;
    margin: 0px;
    padding: 0px;
    position: relative;
 left: 11px;
 top: 11px;
        float: left;
  }
#aspectslogotext {
 text-align: left;
 margin: 0px;
 padding: 0px;
 top: 95px;
 left: 11px;
 position: absolute;
 float: left;
  } 
#leftmenu {
 width:200px;
 height: auto;
 margin: 0;
 padding: 0;
 top: 48px;
 left: 15px;
 position: relative;
 float: left;
    } 
#leftmenu ul {
 list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    }
#leftmenu ul li {
 font-size: 150%;
    margin: 0 0 11px 0;
 padding: 0;
}
#leftmenu ul li a {
    padding: 5px;
 margin: 0;
 display:block;
    text-decoration: none;
}
#leftmenu ul li a:link {color: #000000}
#leftmenu ul li a:visited {color: #000000}
#leftmenu ul li a:hover {color: #FFFFFF}
#leftmenu ul li a:active {color: #000000}
#extensionmenu {
 background-image:url(Images/Common/lightpink1x1.gif);
 background-repeat:repeat;
 visibility: hidden;
 position: absolute;
 top: 174px;
 left: 175px;
    }
#extensionmenu ul {
 list-style-type: none;
    padding: 0px;
    margin: 0;
    text-align: left;
    }
#extensionmenu ul li a {
    padding: 5px;
 display:block;
    margin: 0;
    text-decoration: none;
}
#extensionmenu ul li a:link {color: #000000}
#extensionmenu ul li a:visited {color: #000000}
#extensionmenu ul li a:hover {color: #FFFFFF}
#extensionmenu ul li a:active {color: #000000}
#newbuildmenu {
 background-image:url(Images/Common/lightpink1x1.gif);
 background-repeat:repeat;
 visibility: hidden;
 position: absolute;
 top: 213px;
 left: 163px;
    }
#newbuildmenu ul {
 list-style-type: none;
    padding: 0px;
    margin: 0;
    text-align: left;
    }
#newbuildmenu ul li a {
 padding: 5px;
 display:block;
    margin: 0;
    text-decoration: none;
}
#newbuildmenu ul li a:link {color: #000000}
#newbuildmenu ul li a:visited {color: #000000}
#newbuildmenu ul li a:hover {color: #FFFFFF}
#newbuildmenu ul li a:active {color: #000000}
#address {
 background-image:url(Images/Common/pink1x1.gif);
 z-index: 10;
 width:auto;
 background-repeat:repeat;
 padding:5px 20px 5px 8px;
 margin:0px;
 position: absolute;
 left: 11px;
 bottom: -416px;
  }
#address ul {
 list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: left;
    }
#leftredcolumn {
 background-color:#CC0000;
 padding:0px 0px 0px 0px;
 margin:0px;
 position: absolute;
 width: 144px;
 height: 441px;
 left: 0px;
 bottom: -441px;
   }
 
#rightcolumn {
 background-image: url(Images/Common/BR-Background.gif);
  bottom: 0px;
 right: 0px;
    width: 200px;
 height: 351px;
    text-align: right;
    margin: 0px;
    padding: 0px;
        position: absolute;
        float: right;
    }
#webaddress {
 text-align: right;
 margin: 0px;
 padding: 0px;
 bottom: 3px;
 right: 3px;
 position: absolute;
 float: right;
    } 
#rightredcolumn {
 background-color:#CC0000;
 padding:0px 0px 0px 0px;
 margin:0px;
 position: absolute;
 width: 29px;
 height: 449px;
 right: 0px;
 bottom: 351px;
 }
#nhbc {
  background-image: url(Images/Common/NHBC-Logo.gif);
  background-position: 100% 100%;
    width: 69px;
 height: 24px;
    text-align: right;
    margin: 0px;
    padding: 0px;
    position: absolute;
 right: 25px;
 bottom: 25px;
    float: right;
  }

HTML:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="nigeltestingnewmenu.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_changeProp(objName,x,theProp,theValue) { //v6.0
  var obj = MM_findObj(objName);
  if (obj && (theProp.indexOf("style.")==-1 || obj.style)){
    if (theValue == true || theValue == false)
      eval("obj."+theProp+"="+theValue);
    else eval("obj."+theProp+"='"+theValue+"'");
  }
}
//-->
</script>
</head>
<body>
<div id="wrapper">
 <div id="leftcolumn">
  <div id="aspectslogo"></div><!--Aspects logo image-->
  <div id="leftmenu">
   <ul>
    <li><a href="#" onclick="MM_changeProp('extensionmenu','','style.visibility','hidden','LAYER');MM_changeProp('newbuildmenu','','style.visibility','hidden','LAYER')">About Us</a></li>
    <li><a href="#" onclick="MM_changeProp('extensionmenu','','style.visibility','visible','LAYER');MM_changeProp('newbuildmenu','','style.visibility','hidden','LAYER')">Extensions</a></li>
    <li><a href="#" onclick="MM_changeProp('extensionmenu','','style.visibility','hidden','LAYER');MM_changeProp('newbuildmenu','','style.visibility','visible','LAYER')">New Builds</a></li>
    <li><a href="#" onclick="MM_changeProp('extensionmenu','','style.visibility','hidden','LAYER');MM_changeProp('newbuildmenu','','style.visibility','hidden','LAYER')">Services</a></li>
    <li><a href="#" onclick="MM_changeProp('extensionmenu','','style.visibility','hidden','LAYER');MM_changeProp('newbuildmenu','','style.visibility','hidden','LAYER')">Contact Us</a></li>
   </ul>
  </div>
  <!--leftmenu-->
  <div id="extensionmenu">
   <ul>
    <li><a href="#">Extension 1</a></li>
    <li><a href="#">Extension 2</a></li>
    <li><a href="#">Extension 3</a></li>
    <li><a href="#">Extension 4</a></li>
    <li><a href="#">Extension 5</a></li>
    <li><a href="#">Extension 6</a></li>
   </ul>
   </div><!--extension menu-->
   <div id="newbuildmenu">
   <ul>
    <li><a href="#">New Build 1</a></li>
    <li><a href="#">New Build 2</a></li>
    <li><a href="#">New Build 3</a></li>
   </ul>
   </div><!--newbuild menu-->
  <div id="address">
   <ul>
    <li>Aspects Building</li>
    <li>Company Limited.</li>
    <li>Barry Smith,</li>
    <li>Fairview,</li>
    <li>Madeley Road,</li>
    <li>Belbroughton.</li>
    <li>DY9 9XL</li>
    <li>Office: 01562 711289</li>
    <li>Mobile: 07786 998089</li>
   </ul>
  </div><!--address-->
  <div id="leftredcolumn"></div><!--left red strip below menu-->
  <div class="style2" id="aspectslogotext">Building Company Ltd.</div><!--Aspects logo image-->
 </div><!--left column-->
 <div id="content"></div><!--<content-->
 <div id="rightcolumn">
  <div id="webaddress">www.aspectsbuilding.co.uk</div><!--web address-->
  <div id="nhbc"></div><!--Aspects logo image-->
  <div id="rightredcolumn"></div><!--left red strip below menu-->
   </div><!--right column-->
</div><!--wrapper-->
</body>
</html>

Both HTML and CSS validated fine on the W3 website!
 
  A4 Avant
LOL. It's the 'display:block' command, for some reson IE6 interprets it differently. I've tried it on three different PC's with IE6 and it displayed correctly each time. I've even resorted to running a virtual PC with IE6 on it!

Bit highlighted below needed removing:

#leftmenu ul li a {
padding: 5px;
margin: 0;
display:block;
text-decoration: none;
}

At least I can sleep again now...........until my next problem! LOL.
 
Nigel, have you tried removing the display: block; part?
I've seen it happen before where it displays different in IE6 etc..?

Let me know if it works.
 


Top