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:
>
> <div id =" wrapper">
> <div id =" header">
>
> 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 <div id="
> content">. 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. Also exploiting an IE box-model bug here, as it handles
floats a little weird. Basically by specifying no margin the two boxes
touch, which is what I wanted...
So, to summarize, exploiting two IE bugs to fix one, amazing.... All
browsers except IE will display the content box inline while IE will
float it.
I test sites in firefox and IE6, Think that must hit above 90% of
browsers out there. Cannot test for Mac, unfortunately I do not own
one....
Your other comments.
Tx, forgot about charset, will add that now.
Regarding spaces in div ID's. Cannot explain that one, just had a look
at the source, it certainlay ain there... Bust have been somthing in
the download process....
Then the javascript:
I am trying to get a development framework down here with a CMS ,
decent design principles etc. The javascript is the defaults included
with 'ruby on rails' - which allows you to do funky user interface
things. That menu can support submenus etc. I did reduce the
javascript and enabled gzip compression on lighttpd to help here
though....
The invalid "text/javascript" thingys are caused by the way ruby on
rails renders these calls in the template. Will take that up with them
;-)
To Summarize - I think I am happy with it now.... ;-)
Tx again for the feedback!
Kindest regards
Pieter.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
