19 replies [Last post]
DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 21 weeks 6 days ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

Hi, The template I have been developing for the re-write of my site displays correctly AFAIK. It vaildates XHTML and CSS and has been tested in IE6, FireFox and Opera 8, but I have had the following comment about how it displays in IE6.

Quote:
At the side of the map there is a ~Page last updated on~ text;
this goes beyond the black border of the map, as does the ~Map
reproduced by........ ~ text. Sad
Looks like the font is to big...

When the page is scrolled strange effects occur with the overall
image that looks like cropping of each image section.
As tho' one image section is overlapping another, this ONLY
occurs with MAP section into the top of the first hotel section...

GRAVESEND is central and in its own ~Window~, this looks fine...

The first six buttons are smaller in height than the lower 5...
I have reduced the font size for the section to the right of the map, but still get the same report.
The page in question is here http://www.lordofchaos.co.uk/sitetests/cssexperiments/chaos-newlayout2-2.php I would like to know if anyone else can reproduce this problem.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I cant see IE problems I have been told about.

Hi

You don't say which version of IE. IE 5.x WILL have a problem because you have committed the cardinal sin of falling foul of an IE bug!

You can't have an element with height or width AND set either/both padding and/or borders without your design going slightly bad.

There is a hack to fix this, but IMHO the best fix is to have an outer div with the width and/or height and have the border/padding on an inner div.

Why?

Coz IE 5.x adds the padding and border to the width/height rather than put them inside. So, if you made a page with a 100% container div, and had a border or padding, the page would have a horizontal scroll (as yours does anyway).

Can't say I like the graphic style/color choices. It's far too cluttered and color clashing.

Trevor

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I cant see IE problems I have been told about.

I don't see the problems you're reporting in FF or IE6.

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

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 21 weeks 6 days ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

I cant see IE problems I have been told about.

ClevaTreva wrote:

You don't say which version of IE.

You can't have an element with height or width AND set either/both padding and/or borders
Trevor

1. I did mention that it was with IE6.

2. Are you talking about the text or the nav buttons?

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 21 weeks 6 days ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

I cant see IE problems I have been told about.

Tyssen wrote:
I don't see the problems you're reporting in FF or IE6.

Thanks for that it is a bit weird. :?:

Mike Cherim
Mike Cherim's picture
Offline
Enthusiast
Nottingham NH
Last seen: 13 years 31 weeks ago
Nottingham NH
Joined: 2005-08-26
Posts: 126
Points: 0

I cant see IE problems I have been told about.

I don't see the reported problem either with FF and IE(6.2).

Mike

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 21 weeks 6 days ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

I cant see IE problems I have been told about.

Thanks for that Mike. I have asked for a screen grab of this and I'll post it here.

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 21 weeks 6 days ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

I cant see IE problems I have been told about.

4 Screen grabs can be found here, http://www.lordofchaos.co.uk/gallery-public/ screen size used to grab was 800 x 600.
I'm wondering if the version of IE used wasn't setup correctly, have been told that it was installed and used 'out of the box' so perhaps thats the problem :?:

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I cant see IE problems I have been told about.

Is that IE6 or IE5? Or is it IE6 on Win98? Maybe it's an OS-specific problem because I'm on WinXP.

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

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 21 weeks 6 days ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

I cant see IE problems I have been told about.

Hi, what I was told is this:

Humbly apologise, I said IE6 it should have been IE5.5 on my old M/C...
(My old M/C is AMD K6 3D II 300MHz, Windows ME...)

I've tried also on my other M/C which does have IE6, and the same
errors exist... (This M/C is 2.66GHz P4, Windows XP SP2...)
This machine has 1024x768 16 bit colour...

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I cant see IE problems I have been told about.

Hi

From those screenshots I would say the user is operating with larger than normal screen fonts, possibly by increasing their text size in the View menu.

But, I tried something. I opened your site in a sized window, then made it narrower, then wider. After a few changes, I got the text to break out too (latest version of IE6). I'm willing to get dirty with your code, but can you post a different version here (paste it into a code section). Put all the css inline (in the head) and make all references to images absolute (ie http://blahblah.com/images/blah.jpg). This means I can paste it straight into Webcoder and play with it.

Trevor

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 21 weeks 6 days ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

I cant see IE problems I have been told about.

Hi, thanks for the offer that would be good of you.

Here's the full code which can also be found here ,
http://www.lordofchaos.co.uk/sitetests/cssexperiments/chaos-newlayout2-2-cssforum.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>
      The Clarendon Royal Hotel, Gravesend
    </title>
    <meta name="generator" content="HTML Tidy for Windows (vers 1 June 2005), see www.w3.org" />
    <meta name="keywords" content="Gravesend, Gravesham, local, local history, history, kent, clarendon hotel, clarendon royal hotel, thames, chaos, chuckles, past and present, photos, jokes, amiga, lord" />
    <meta name="description" content="Clarendon Royal Hotel from Gravesend Past and Present in Pictures, Plus jokes, photographs and other info by John Lord" />
    <meta name="author" content="John E. Lord" />
    <meta name="copyright" content=" John E. Lord" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--    <link rel="stylesheet" href="ccstylesheet.css" type="text/css" media="all" />
-->

<style type="text/css">
/*<![CDATA[*/
html, body {
	margin: 0;
	padding: 7px;
	border: 0px;
	background: #F5DEB3 url("http://www.lordofchaos.co.uk/sitetests/cssexperiments/orangelightning009.jpg");
	background-attachment: fixed;
	font-family: sans-serif;
	color: black;
	text-align: center;
}
h1, h2, h3, h4, h5, h6 {
	text-align: center;
}
h1 {
	text-decoration: underline;
}
h3 {
	background: inherit;
	color: #00008B;
	text-align: center;
}
h4 {
	background: inherit;
	color: blue;
	text-align: center;
}
#nav {
	width: 140px;
	float: left;
	margin-left: -4px;
	margin-top: 5px;
	padding: 5px;
	background: inherit;
	color: inherit;
	text-align: left;
	font-weight: bold;
}
#content {
	padding: 7px;
	margin-left: 165px;
	margin-top: 10px;
	margin-bottom: 10px;
	border: thin solid #006;
	color: #000000;
	background: #FFFEB9 url("http://www.lordofchaos.co.uk/sitetests/cssexperiments/whiteroughtexture003.jpg");
	font-weight: bold;
	text-align: left;
	max-width: 90%;
}
#header {
	padding: 7px;
	background: #C7E9A6 url("http://www.lordofchaos.co.uk/sitetests/cssexperiments/13.jpg");
	color: #006;
	border: 5px solid #006;
	margin-bottom: 0px;
}
#footer {
	padding: 5px;
	background: #C7E9A6 url("http://www.lordofchaos.co.uk/sitetests/cssexperiments/13.jpg");
	color: #000000;
	border: 5px solid #006;
	margin-bottom: 0px;
}
.spacer {
	clear: both;
}
p {
	padding: 0;
	margin-top: 0px;
	font-family: Verdana, Geneva, Lucida, Helvetica, Arial, sans-serif;
}
div>p {margin:0}
dd, dt {
	font-family: "Lucida Grande", Verdana, Geneva, Lucida, Helvetica, Arial, sans-serif;
	font-size: 0.95em;
}
ul#primary-nav, ul#primary-nav ul {
	margin: 0;
	padding: 2px;
	width: 155px;
/* Width of Menu Items */
	border-top: thin solid #FFFFFF;
	border-left: thin solid #FFFFFF;
	border-bottom: thin solid #000000;
	border-right: thin solid #000000;
	background: #ccc;
/* IE6 Bug */
	font-size: 0.9em;
	color: #000;
}
ul#primary-nav li {
	position: relative;
	list-style: none;
}
ul#primary-nav li a {
	display: block;
	background: #F5DEB3 url("http://www.lordofchaos.co.uk/sitetests/cssexperiments/leftcolbg2.jpg");
	text-decoration: none;
	color: #000000;
	padding: 2px;
	border-top: thin solid #FFF;
	border-bottom: thin solid #000;
}
/* fix ie. hide from ie mac \*
/* html ul#primary-nav li {
	float: left;
	height: 1%;
}
* html ul#primary-nav li a {
	height: 1%;
}
/* End */
ul#primary-nav ul {
	background: #FFFEB9 url("http://www.lordofchaos.co.uk/sitetests/cssexperiments/leftcolbg2.jpg");
	position: absolute;
	display: none;
	left: 154px;
/* Set 1px less than menu width */
	top: 0;
}
ul#primary-nav li ul li a {
	padding: 2px 5px;
}
/* Sub Menu Styles */
ul#primary-nav li:hover ul ul, ul#primary-nav li:hover ul ul ul, ul#primary-nav li.over ul ul, ul#primary-nav li.over ul ul ul {
	display: none;
}
/* Hide sub-menus initially */
ul#primary-nav li:hover ul, ul#primary-nav li li:hover ul, ul#primary-nav li li li:hover ul, ul#primary-nav li.over ul, ul#primary-nav li li.over ul, ul#primary-nav li li li.over ul {
	display: block;
}
/* The magic */
ul#primary-nav li.menuparent {
	background: url("http://www.lordofchaos.co.uk/sitetests/cssexperiments/leftcolbg2arrow.jpg") right repeat;
}
ul#primary-nav li.menuparent:hover, ul#primary-nav li.over {
	background-color: #f9f9f9;
	color: #000;
}
ul#primary-nav li a:hover {
	border-top: thin solid #000000;
	border-left: thin solid #000000;
	border-bottom: thin solid #ffffff;
	border-right: thin solid #ffffff;
	background: #E6E6FA url("http://www.lordofchaos.co.uk/sitetests/cssexperiments/leftcolbg2rev.jpg");
	color: #000;
}
.imgright, .imgleft {
	padding: 5px;
}
.imgright {
	float: right;
	text-align: right;
}
.imgleft {
	float: left;
	text-align: left;
}
/* css for shadows */
.wrap1, .wrap2, .wrap3 {
	display: inline-table;
/* \*/
	display: block;
/**/
}
.wrap1 {
	float: left;
	background: url("http://www.lordofchaos.co.uk/sitetests/cssexperiments/shadows/v3/shadow.gif") right bottom no-repeat;
}
.wrap2 {
	background: url("http://www.lordofchaos.co.uk/sitetests/cssexperiments/shadows/v3/corner_bl.gif") left bottom no-repeat;
}
.wrap3 {
	padding: 0 8px 8px 0;
	background: url("http://www.lordofchaos.co.uk/sitetests/cssexperiments/shadows/v3/corner_tr.gif") right top no-repeat;
}
.wrap3 img {
	display: block;
}
/* end of css for shadows */
.captionb, .captionc {
	position: relative;
	clear: both;
	text-align: center;
	background: #000000;
	color: #FFFFFF;
	font-family: "Arial Black", Verdana, Geneva, Helvetica, sans-serif;
	font-size: 1em;
}
.captionc {
	color: #FFD700;
}
/*]]>*/
</style>


  </head>
  <body>
  
  <script type="text/javascript">
//<![CDATA[
function IEHoverPseudo() {

        var navItems = document.getElementById("primary-nav").getElementsByTagName("li");
        
        for (var i=0; i<navItems.length; i++) {
                if(navItems[i].className == "menuparent") {
                        navItems[i].onmouseover=function() { this.className += " over"; }
                        navItems[i].onmouseout=function() { this.className = "menuparent"; }
                }
        }

}
window.onload = IEHoverPseudo;
//]]>
</script>

<!--  <? include("iehoverpseudojs.php"); ?> -->
  
    <div id="header">
    
    <img src="http://www.lordofchaos.co.uk/sitetests/cssexperiments/images/gsendlogo.jpg" width="302" height="78" alt="gravesend logo" /><br />
    
    <!--  <? include("header.php"); ?> -->
    
    </div>
    <div id="nav">
    
          <ul id="primary-nav">
        <li>
          <a href="http://www.lordofchaos.co.uk/index.html" title=" Chaos Corner Home Page">Home</a>
        </li>
        <li>
          <a href="test.html" title="Just a little info on me">Who Am I?</a>
        </li>
        <li>
          <a href="test.html" title="What have I done to this web site?">Update Log</a>
        </li>
        <li>
          <a href="http://www.lordofchaos.co.uk/lazarusgb/" title="Please sign my guestbook powered by \'Lazarus\'">Guestbook</a>
        </li>
        <li class="menuparent">
          <a>Chuckles&gt;</a>
          <ul>
            <li>
              <a href="http://www.lordofchaos.co.uk/chuckles/chuckles1.html" title="Instructions For Giving a Cat a Pill">Giving a Cat a Pill</a>
            </li>
            <li>
              <a href="http://www.lordofchaos.co.uk/chuckles/chuckles2.html" title="Let's face it -- English is a Crazy Language">Crazy English Language</a>
            </li>
            <li>
              <a href="http://www.lordofchaos.co.uk/chuckles/chuckles3.html" title="A Couple of Funny Courtroom Stories">Elderly Lady, And a Young Man</a>
            </li>
            <li>
              <a href="http://www.lordofchaos.co.uk/chuckles/chuckles4.html" title="Funny Snippits From Various Newspapers">From The Papers</a>
            </li>
            <li>
              <a href="http://www.lordofchaos.co.uk/chuckles/chuckles5.html" title="Sayings for Womens T-Shirts">Sayings for Womens T-Shirts</a>
            </li>
            <li>
              <a href="http://www.lordofchaos.co.uk/chuckles/chuckles6.html" title="What ARE Cats And Dogs?">Cats And Dogs</a>
            </li>
            <li>
              <a href="http://www.lordofchaos.co.uk/chuckles/chuckles7.html" title="What Happens When It's Hot In Texas?">Hot In Texas</a>
            </li>
          </ul>
        </li>
        <li class="menuparent">
          <a>Gravesend&gt;</a>
          <ul>
            <li>
              <a href="http://www.lordofchaos.co.uk/gravesend/gravesend.html" title="Information about this part of my web site">Gravesend Info Page</a>
            </li>
            <li>
              <a href="test.html" title="The Clarendon Royal Hotel">Clarendon Royal Hotel</a>
            </li>
            <li>
              <a href="test.html" title="The Clock Tower, Milton Road">Clock Tower</a>
            </li>
            <li>
              <a href="test.html" title="H.M. Cusoms House">Custom House</a>
            </li>
            <li>
              <a href="test.html" title="Gravesend and North Kent Hospital">Gravesend &amp; North Kent Hospital</a>
            </li>
            <li>
              <a href="test.html" title="The Gordon Promenade">Gordon Promenade</a>
            </li>
            <li>
              <a href="test.html" title="Harmer House">Harmer House</a>
            </li>
            <li>
              <a href="test.html" title="Milton Road">Milton Road</a>
            </li>
            <li>
              <a href="test.html" title="New Road">New Road</a>
            </li>
            <li>
              <a href="test.html" title="The New Inn, Milton Road">The New Inn</a>
            </li>
          </ul>
        </li>
        <li class="menuparent">
          <a>UK Mental Health&gt;</a>
          <ul>
            <li>
              <a href="http://www.mind.org.uk/" title="The UK's National Mind website">National Mind</a>
            </li>
            <li>
              <a href="http://www.mentalhealth.org.uk/" title="The UK's Mental Health Foundation">Mental Health Foundation</a>
            </li>
          </ul>
        </li>
        <li class="menuparent">
          <a>Local Mental Health&gt;</a>
          <ul>
            <li>
              <a href="http://www.btinternet.com/~dandgadvocacy/" title="Dartford, Gravesham &amp; Swanley Advocacy Network">Dartford &amp; Gravesham Advocacy Network</a>
            </li>
            <li>
              <a href="http://www.dgsmind.co.uk/" title="Dartford, Gravesham &amp; Swanley Mind">Dartford, Gravesham &amp; Swanley Mind</a>
            </li>
          </ul>
        </li>
        <li class="menuparent">
          <a>Web Site Coding&gt;</a>
          <ul>
            <li>
              <a href="http://www.csscreator.com/" title="CSS Creator forum">CSS Creator</a>
            </li>
          </ul>
        </li>
        <li class="menuparent">
          <a>Useful Software&gt;</a>
          <ul>
            <li>
              <a href="http://www.mozilla.org/products/firefox/" title="Get Firefox browser FREE and forget I.E.">FireFox browser</a>
            </li>
            <li>
              <a href="http://www.opera.com/" title="Top notch Browser.">Opera browser</a>
            </li>
          </ul>
        </li>
        <li class="menuparent">
          <a>Windows Help&gt;</a>
          <ul>
            <li>
              <a href="http://www.updatexp.com/" title="Marc Liron's XP help site">UpdateXP</a>
            </li>
          </ul>
        </li>
      </ul>
      

<!-- <? include("navbar.php"); ?> -->



<br />
      <div class="spacer"></div>
    </div>
    <div id="content">
      <h1>
        The Clarendon Royal Hotel
      </h1><br />
      <div class="imgleft">
        <div class="wrap1">
          <div class="wrap2">
            <div class="wrap3">
              <img src="http://www.lordofchaos.co.uk/sitetests/cssexperiments/maps/maprch.jpg" width="301" height="245" alt="clarendon map" />
            </div>
          </div>
        </div>
        <p><h4>
          Page last updated on<br />
          Sun, 2 October 2005 23:06:03 GMT</p>
         <p>"Map reproduced by permission of Geographers' A-Z Map Co Ltd. &amp; with kind permission of OrdnanceSurvey"
        </p></h4>
      </div><br style="clear:both;" />
      <div class="imgleft">
        <div class="wrap1">
          <div class="wrap2">
            <div class="wrap3">
              <img src="http://www.lordofchaos.co.uk/sitetests/cssexperiments/crests.jpg" width="70" height="70" alt=" small crest" />
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="imgright">
          <div class="wrap1">
            <div class="wrap2">
              <div class="wrap3">
                <img src="http://www.lordofchaos.co.uk/sitetests/cssexperiments/gsendpics/clarendon3-1.jpg" width="500" height="308" alt="Clarendon Hotel old" />
                <div class="captionb">
                  The Clarendon Royal Hotel, c.1910
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <p>
        The Clarendon Royal Hotel, c.1910. The view leads us along the narrow East Street and the Clarendon Shades in the distance.
      </p>
      <p>
        The Clarendon was originally the ordnance storekeeper's house and was opened as an hotel in about 1845.
      </p>
      <p>
        The name arises from the house being built for James II (then Duke of York and High Admiral), who married Anne, daughter of the Earl of Clarendon.
      </p>
      <p>
        Used by the upper classes, it had a guest in 1863, the Prince of Wales, (later King Edward VII).
      </p>
      <hr />
      <div class="imgleft">
        <div class="wrap1">
          <div class="wrap2">
            <div class="wrap3">
              <img src="http://www.lordofchaos.co.uk/sitetests/cssexperiments/crests.jpg" width="70" height="70" alt=" small crest" />
            </div>
          </div>
        </div>
      </div>
      <div>
        <div>
          <div class="imgright">
            <div class="wrap1">
              <div class="wrap2">
                <div class="wrap3">
                  <img src="http://www.lordofchaos.co.uk/sitetests/cssexperiments/gsendpics/clarendon1-c.jpg" width="500" height="333" alt="Clarendon Hotel 2000" />
                  <div class="captionc">
                    The Clarendon Royal Hotel, c.2000
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <p>
        Today, the Clarendon Hotel looks very similar to the picture above in terms of external alterations.
      </p>
      <p>
        The main and most obvious difference is of course the colour. This makes it a much nicer looking building, in my view.
      </p>
      <p>
        On the opposite side of the road, out of view in this picture, are the hotel's own riverside gardens.
      </p><br class="brboth" />
      <p>
        Back to <a href="#header">Top</a>
      </p>
      <div class="spacer"></div>
    </div>
    <div id="footer">
    
    <h5>Site Design and Content &copy; John Lord</h5>
<a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.lordofchaos.co.uk/sitetests/cssexperiments/images/valid-xhtml10.gif" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
<a href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px" src="http://www.lordofchaos.co.uk/sitetests/cssexperiments/images/valid-vcss.png" alt="Valid CSS!" /></a>
<br />

<!--  <? include("footer.php"); ?> -->

    </div>
  </body>
</html>

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I cant see IE problems I have been told about.

Hi

I've taken a little look!

If you take the float:left off the imgleft class, the problem stops happening. Could that be an acceptable solution to you?

OR, wrap the text paragraph in a div and apply a margin-right to it of, say, 10px.

Either seems to stop it happening for me.

Curiously, if you change the padding on the imgleft class to margin, the problem gets worse!

Trevor

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 21 weeks 6 days ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

I cant see IE problems I have been told about.

Thanks for checking, I've changed the class for the map and omitted the float:left.
I've mailed the chap who had the problem and asked if he can check again. Have asked him what the font size is set at in the IE View>Text Size menu, mine is set to Medium to see if that will explain the nav bar problem. I have updated
http://www.lordofchaos.co.uk/sitetests/cssexperiments/chaos-newlayout2-2-cssforum.html if you care to check it now and see if it still breaks.

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 21 weeks 6 days ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

I cant see IE problems I have been told about.

I've now got double spacing in the nav bar in IE6 anyone see what I've done this time?

This is a real pain trying to fine tune it I seem to get one thing right and another breaks. Crying

http://www.lordofchaos.co.uk/sitetests/cssexperiments/chaos-newlayout2-2-cssforum.html

TIA.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I cant see IE problems I have been told about.

Hi

You didn't think IE was bug free did you? :twisted:

You've probably fallen foul of the whitespace in lists bug.

To avoid this problem:

1. Keep the <li> and </li> on the same line.
2. Put a space after the </a> and before the </li>.

MMM. Aren't those lovely folks at MS nice?

Trevor

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 21 weeks 6 days ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

I cant see IE problems I have been told about.

HI again,

Did both but no difference, have uploaded updated page.
:twisted:

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I cant see IE problems I have been told about.

Hi

Would this ruin your code:

Take the width off here (I've zedded it!):

ul#primary-nav, ul#primary-nav ul {
	margin: 0;
	padding: 2px;
	zwidth: 155px;
/* Width of Menu Items */
	border-top: thin solid #FFFFFF;
	border-left: thin solid #FFFFFF;
	border-bottom: thin solid #000000;
	border-right: thin solid #000000;
	background: #ccc;
/* IE6 Bug */
	font-size: 0.9em;
	color: #000;
}

Then, add the width AND 0 margin here:

ul#primary-nav li a {
	width: 155px;
 margin:0;
 display: block;
	background: #F5DEB3 url("../leftcolbg2.jpg");
	text-decoration: none;
	color: #000000;
	padding: 2px;
	border-top: thin solid #FFF;
	border-bottom: thin solid #000;
}

Is the result OK for you?

Trevor

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 21 weeks 6 days ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

I cant see IE problems I have been told about.

HI,

That closes up the link buttons, now when you hover over a sub menu link in main buttons the rest of the button jump down to leave a gap between it and the rest.

I could live with that but would like to get rid of the jump if possible.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I cant see IE problems I have been told about.

Hi

I suspect that is due to the images used. I didn't test with them coz to do so I have to re-create your files on my server, and trawling through css files to find and download them all is a pain.

Try moving the button images out of the way (rename the directory they are in) and then view it. If it is OK without them, then it is their size that is a problem.

Trevor