On 10/19/06, francky <[EMAIL PROTECTED]> wrote:
> Pieter Botha wrote:
>
> >Hello everyone.
> >Please check this site for me: http://kusile.cojjoconnect.co.za
> >
> >I have a little problem in IE...
> >The dark green header bar (h1 with background color applied) should
> >touch the menu bar, there is a small little annoying gap.
> >
> >Seems like padding is applied to the heading although I specified that
> >it should be 0.
> >
> >It works fine in firefox
> >[...]
> >
> Hi Pieter,
> At my IE6 on Win98SE there is no problem seen: all resolutions and all
> clientside font-sizes are doing well. :-)
>
> Then I downloaded the html, added the missing "charset" meta element and
> the missing type="text/javascript" for the script tags (the only 2
> html-errors acording to the w3c html-validator), and looked at the
> result locally and uploaded at my site.
> First in IE there was no good display at all. - Div's where in the right
> position, but no backgrounds and other styles...
>
> The culprits: almost all ID's are starting with a space:
>
>
>
>
> and so on, which is not allowed. The html-validator is not reporting
> that, but Tidy does:
>
> ID and NAME must begin with a letter ([A-Za-z])
> and may be followed by any number of letters,
> digits ([0-9]), hyphens ("-"), underscores ("_"),
> colons (":"), and periods (".").
>
> Then I deleted all these spaces, except the one in the . And... there is the annoying IE gap! (not in FF).
> See testpage-1
> <http://home.tiscali.nl/developerscorner/css-discuss/test-kusile-1.htm>.
>
> Then deleted this last ID-space, and IE is performing as it should. :-)
> See testpage-2
> <http://home.tiscali.nl/developerscorner/css-discuss/test-kusile-2.htm>.
>
> My conclusion: I suspect it is the special combination of your server,
> the visitor's Operating System and the error handling of IE (-version)
> which shows a gap or no gap. Anyway, perfect html is the solution!
>
> Greetings,
> francky
>
> BTW: the page uses a huge amount of javascript: about 150kB (!). If the
> site is supposed to be seen by DSL visitors only, it is no problem; but
> on a fast 56Kbps modem connection it means: 35 sec. before the page is
> completely downloaded and having it's functions...
> See Speed Report-1
> <http://www.websiteoptimization.com/services/analyze/wso.php?url=http://kusile.cojjoconnect.co.za/>.
>
> So I think you should consider to abandon the scripts (for the menu, as
> far as I can see; the Ruby model I did not study, I've to admit), and
> replace it by a simple css-styled link list. As the page is now, I made
> a css hoverable testpage for that.
> See testpage-3
> <http://home.tiscali.nl/developerscorner/css-discuss/test-kusile-3.htm>.
>
> It is giving the same display and the same functionality (and a bit more
> accessibility), but now in 3.5 seconds on screen. :-)
> See Speed Report-2
> <http://www.websiteoptimization.com/services/analyze/wso.php?url=http://home.tiscali.nl/developerscorner/css-discuss/test-kusile-3.htm>.
>
> In case you need a hoverable submenu, a Suckerfish menu (with small IE
> javascript) can be used. And in so far javascripts are really needed on
> other pages, you can call them only over there. Then the general
> stylesheets are already downloaded: less download time for the new
> pages. - But probably I didn't tell something you didn't know already. ;-)
Hi Franky
Thank a lot for this meaningful and well thought-out feedback!!!
I think I solved the Gap I had before you had a look. The proplem was this:
Internet Explorer puts a 3px margin or padding or something weird next
to an inline element that follows a floated element. In my design, the
left column is floated. Originally, I displayed the inline "content"
div inline next to the float with a left-margin set to leave space.
Solved it like this:
#content{
margin: 0 0 0 260px;
background: #d2e4bc;
}
* html div#content {
float: right;
margin: 0 0 0 0px;
}
Disabled the hack quickly and made a screenshot so you can see what my
problem was. Can be seen here:
http://kusile.cojjoconnect.co.za/images/kusile/screenshot_1023.jpg
Firefox in the background, IE in the front. Note the gap between the
boxes in IE. Also as you look down the content, you will see that the
"Vision" section moves 3px left, this is where the box should have
been displayed
Hack above will only be applied by IE, as it believes there is a
'parent' element to html - other browsers will ignore it. So, by
floating the content div for IE I get around the 3px "inline next to
float" bug. Als
