Site rendering in Chrome is off
Jan Karel Pieterse
My website does not render properly in Google Chrome, see:
http://www.jkp-ads.com/Articles/CorruptFiles.asp
The body text appears below the left-hand navigation pane, which all other
browsers I tested do not do.
Any idea's how to fix this?
Regards,
Jan Karel Pieterse
Excel MVP
http://www.jkp-ads.com
Member of:
Professional Office Developer Association
www.proofficedev.com
senn
"Jan Karel Pieterse" <jkpie...@netscape.net> skrev i meddelelsen
news:VA.0000060...@netscape.net...
Do you mean the text in the content.
If so, then try in id="content"
to increase margin-left: 190px by a small amount (200px for instance).
You should put a margin-top: 0px; (or XXXpx) in same. Enthough not the
cause.
I have not installed crome.
/senn
Cheryl D Wise
http://validator.w3.org/check?verbose=1&uri=http%3a%2f%2fwww.jkp-ads.com%2fArticles%2fCorruptFiles.asp
there au nesting errors in your html. Once those are fixed if it still
doesn't display properly post back.
--
Cheryl D Wise
http://by-expression.com
"Jan Karel Pieterse" <jkpie...@netscape.net> wrote in message
news:VA.0000060...@netscape.net...
senn
or clear:both;
If you also need a float in what comes next. Then you can
put a clear:both; in the last end-tag of the content div.
Or add a </ br style="clear:both;"> after it.
senn
I just installed Chrome.
The culprit in your page originate from this style
#crumbs {
margin-left: 35px;
margin-right: 225px;
font-size: small;
float: left;
}
The content div following the div having this style is trying
to lay itself up on the right side of it. The lack of container width
do this impossible of course.
There's more than one way to solve this problem.
I suggest this:
Change the div having the id crumbs to a <p id="crumbs">....</p>
where #crumbs {margin-left:XXXpx; font-size:small;}
Just make the XXX margin-left a suitable value to have it placed in the
right side of the container. You can also use margin-right instead.
Then include the <p id="crumbs">......</p> in the content div
as being the first element in it.
That should correct the error. Though, I did not try it.
Let me know if this works right.
/senn
Jan Karel Pieterse
> First they to do is fix the validation errors. according to
> http://validator.w3.org/check?verbose=1&uri=http%3a%2f%2fwww.jkp-ads.com%2fArticles%2fCorruptFiles.asp
> there au nesting errors in your html. Once those are fixed if it still
> doesn't display properly post back.
Good suggestion, my left nav tree had errors and there was some other stuff.
This page now validates:
http://www.jkp-ads.com/Articles/ExcelArticles.asp
But still shows the problem in Chrome.
senn
You'll also have to float the content right and set
the width. The reason is; google reads the margin-left in the content style
differently than the other browsers. Google meassure this margin
beginning from the right side of the navigation div. The others meassure it
beginning from the containers left side.
Have
#content {
float:right;
width:70%;
}
remove margin-left that was in it.
Jan Karel Pieterse
> Have
> #content {
> float:right;
> width:70%;
> }
> remove margin-left that was in it.
Thanks for the suggestion.
Just to make sure...
I currently have:
#content {
margin-left: 190px;
padding-left: 5px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
text-align: left;
vertical-align: top;
}
What are you saying it should become?
senn
Try this. It also works with margin-left
in content. You can regulate the 20px in #vertmenu as you like
You should have the width in the content around 70%.
If you give it more, then when textsizing takes place, the content dumps
down again. I tried it, but with both the divs having the styles of
crumbs and smtxt being inside the content div. And converted to <p>'s.
Perhaps this is never mind. But it works fine.
N.B. I did these post's for my own learning - as a main purpose.
Generally, I'm not helping people here whom advertices themself with
this MVP-tittle. As I find this advertising rediculous. Through the 6 years
I've been on newsgroups, I've seen most of those people conduct themself
as someone who needs self-confidence.
/senn
#vertmenu {
font-family : Trebuchet, Tahoma, Helvetica, Arial, sans-serif;
width : 160px;
padding : 0;
margin : 0 20px 0 0;
float : left;
}
#content {
float:left;
padding-left: 5px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
text-align: left;
vertical-align: top;
width:70%;
margin-top:0px;
senn
A crossing took place. I was about thinking of getting no
feed-back.
Jan, just try my last two styles posted.
It works, I tried it. If not for you, then convert the two divs as
I suggested. And put them inside the content div. Wait and see
if necessary. The problem with google is as I described in the last
post. Therefore, the margin-left in content shall be much lesser.
I now set it to "0px". You could set it to around 10-20px. Instead,
you'll see I set margin-right:20px in the navigation-style.
Regards
/senn
Jan Karel Pieterse
> And even a better way to do it !
> Try this. It also works with margin-left
> in content. You can regulate the 20px in #vertmenu as you like
> You should have the width in the content around 70%.
> If you give it more, then when textsizing takes place, the content dumps
> down again. I tried it, but with both the divs having the styles of
> crumbs and smtxt being inside the content div. And converted to <p>'s.
> Perhaps this is never mind. But it works fine.
I'll have a go, many thanks!
> N.B. I did these post's for my own learning - as a main purpose.
> Generally, I'm not helping people here whom advertices themself with
> this MVP-tittle. As I find this advertising rediculous. Through the 6 years
> I've been on newsgroups, I've seen most of those people conduct themself
> as someone who needs self-confidence.
So I got lucky, did I <grin>?
In my experience, MVP's just do what you do too: help other people.
My signature shows "Excel MVP" because that is the default signature I set up
for MSFT newsgroups. I agree it may be taken as advertising, I just show it so
people in the Excel community know they can trust me for my answers. Of course
there was little point in leaving that in my sig in this particular Newsgroup.
Just remember, if you ever have an Excel question, feel free to use my site to
contact me.
senn
"Jan Karel Pieterse" <jkpie...@netscape.net> skrev i meddelelsen
news:VA.0000060...@netscape.net...
>
> site to
> contact me.
>
> Regards,
>
> Jan Karel Pieterse
> Excel MVP
> http://www.jkp-ads.com
> Member of:
> Professional Office Developer Association
> www.proofficedev.com
>
Thanks
/senn
Cheryl D Wise
Jan,
I used Adobe Browserlab to see how your page renders in Chrome and Safari
(OSX since I don't have my Mac booted right now) and it appears to
displaying okay but when I looked at the CSS I can see where you might have
display issues.
In your #vertmenu nested lists and hyperlinks there are widths specified
that won't fit in the width you specified for #vertmenu. That I set at 160px
but by the time you are in the second level list you have specified margins
and padding down to where the available width is 145px but you have set it
to 151px. That is going to cause display issues in some browsers.
I simplified some of the CSS and also set a min-width on the page so that
the top menu won't wrap if the page is too narrow. You can see how I did it
at http://wizerways.net/jkp/index.html
Note: senn was correct in his reply that any time you use a float you must
specify a width for whatever you are floating. It can be specified in the
css or in the html but it must be there.
--
Cheryl D Wise
http://by-expression.com
"Jan Karel Pieterse" <jkpie...@netscape.net> wrote in message
news:VA.0000060...@netscape.net...
senn
The lady's still not work correct. As soon as one zooms
the page, the content moves in place. That's like the existing page
behaviour.
The suggestion I sent you works.
Here they are again. Merely replacing your own with these two
will do it. But I found a lot other errors. Someone among which
the lady is talking about. But these do not cause the error.
The corrected sample I have of your site fully validates now with
respect to both css and html.
If you like, I can send it to you, using your email. But that will
include both the css file and the html code.
Just let me know.
Jan Karel Pieterse
> Here they are again. Merely replacing your own with these two
> will do it. But I found a lot other errors. Someone among which
> the lady is talking about. But these do not cause the error.
> The corrected sample I have of your site fully validates now with
> respect to both css and html.
I tried that suggestion, thanks. It worked on Chrome, but it caused the
background color of another page of my site to turn to green in IE 8.
I restored the original css after that (After all, I do want the site to show
properly in IE FIRST), so I can't show you the effect unfortunately.
Will continue experimenting.
Jan Karel Pieterse
> I used Adobe Browserlab to see how your page renders in Chrome and Safari
> (OSX since I don't have my Mac booted right now) and it appears to
> displaying okay but when I looked at the CSS I can see where you might have
> display issues.
I tried yours in Chrome. Funnily, at first it loads with the content pushed
down, but as soon as I resize the Chrome window a tidbit, it turns out OK.
Better, but not good enough yet.
> In your #vertmenu nested lists and hyperlinks there are widths specified
> that won't fit in the width you specified for #vertmenu. That I set at 160px
> but by the time you are in the second level list you have specified margins
> and padding down to where the available width is 145px but you have set it
> to 151px. That is going to cause display issues in some browsers.
Good point, I'll correct them.
> I simplified some of the CSS and also set a min-width on the page so that
> the top menu won't wrap if the page is too narrow. You can see how I did it
> at http://wizerways.net/jkp/index.html
I'll have a look and compare both CSS's.
Thanks so far.
senn
The reason of the error on another page is more likely
to be related to the manny errors you still have in your
html code. But of which I corrected in a copy of your code.
read my suggestion of sending your a copy of the code too.
The css belonging copy is matching this corrected html code.
For example, your mvp-logo-image is 1193px x 724px. And
the image tag has not even been given a width and a height.
Your sidebox does not match in the vertical navigation div
of 160px. And the width of it included the border and paddings
does not flush with the mvp-logo.
I also found an error in your horizontal menu.
Your page does not display correct in IE7. The search-box
crawls outside the container. There's more than this.
I realize there's a bug in the google browser.
Yet, now in my correction everything displays right in:
IE7, FF, SF,GOOGLE and OPERA. I did not try it in IE8.
Because IE8 is installed on in other machine of mine, which
does not have any webdeveloper-package installed. Indeed,
I have a test site. Did not dare to put it there without
your permission.
You can still choose have me to send you a copy. Or put it out
on a test site having:
<meta name="robots" content="noindex">
<meta name="googlebot" content="noindex">
I came back to it because of Cheryls post. I think you like
best doing things yourself - like I do. And of course you can
if given the time to it.
Regards
/senn
Jan Karel Pieterse
> For example, your mvp-logo-image is 1193px x 724px. And
> the image tag has not even been given a width and a height.
For my understanding: do images need width and height tags?
senn
Read this.
http://www.highdots.com/forums/cascading-style-sheets/img-tag-width-height-attributes-2619.html
The answer to the question is coming a little down
on the page. You can look up on google several alike notes
on this matter. And in effect, you get the same answers.
In your actual case. I'll strong recommend you to put your
image in a paint-program, and reduced it to the actual size.
If you are gona have a border in the div surounding it, then
make the width less than 160px.
The oversized width of this image is likely being the cause to
the problem.
Nevertheless, the corrected copies of your page I did, does still
use this oversized image, but I gave the image tag a width and a
height. But as you read about the problems envolved on this subject,
you'll think it's best to resize this image to the actual size.
Write this or alike on google:
images and width and height
regards
/senn
senn
Your logo-image meassure 154px x 62px
In paint the Attributes shows as 1193px x 724px.
But when double clicking it in the image folder in EW2
Paint shows it as 154px x 62px.
So does Expression Design. And all other Paint-programs I have.
I never noticed this strange behavior before.
/senn
Jan Karel Pieterse
> In your actual case. I'll strong recommend you to put your
> image in a paint-program, and reduced it to the actual size.
> If you are gona have a border in the div surounding it, then
> make the width less than 160px.
The image file already is 154 x 62 pixels, so no need to reduce it. I do see
your point in specifying the size of the image and will do so.
Thanks.
Jan Karel Pieterse
> Your logo-image meassure 154px x 62px
> In paint the Attributes shows as 1193px x 724px.
Odd indeed, doesn't show like that for me though, not in EW, neither in Paint.
Oh well, just one of those things I guess.
senn
Putting an image directly into Paint it meassures the width
and height attributes of the canvas -not the image itself.
Anyway, in my Paint. When looking at it in Paint through
EW2 the attributes show 154px x 62px.
Happy I didn't do like Van Gogh did - cut off his ear in a
moment of confusion.
/senn
Jan Karel Pieterse
Solved the problem, the issue was indeed that my left navigation tree was wider
than the space reserved for it in the css file.
I changed the width in the css and all is well now:
#vertmenu ul ul ul li a {
font-size: 80%;
display: block; /*border-bottom: 1px dashed #825252;*/;
padding: 2px 0px 0px 20px;
text-decoration: none;
color: #1A4D4D;
width: 129px;
}
(old setting was width: 145px;)
Thanks for your help.
senn
>
> Solved the problem, the issue was indeed that my left navigation tree was
> wider
> than the space reserved for it in the css file.
>
> I changed the width in the css and all is well now:
>
> #vertmenu ul ul ul li a {
> font-size: 80%;
> display: block; /*border-bottom: 1px dashed #825252;*/;
> padding: 2px 0px 0px 20px;
> text-decoration: none;
> color: #1A4D4D;
> width: 129px;
> }
>
> (old setting was width: 145px;)
>
> Thanks for your help.
>
> Regards,
>
The error pertain in my google browser.
The same as before. When the page loads, the content dumps
down to the bottom of the left column. If then zooming the page, it moves
up in the right place. But, if then reload the page (found on the right
mouse)
it dumps down again.
Please; don't cut off your ear, Jan. Like Van Gogh he did in a moment
of confusion !.
Regards
/senn
Jan Karel Pieterse
> The error pertain in my google browser.
> The same as before. When the page loads, the content dumps
> down to the bottom of the left column. If then zooming the page, it moves
> up in the right place. But, if then reload the page (found on the right
> mouse)
> it dumps down again.
Yes, I have just spotted nothing has changed <g>.
Well, at least now my navigation fits inside the box.
Must be other stuff wrong too.
Is there any tool I could use to see whether stuff is moving outside its
boxes/margins/whatever-those-are-called?
Regards,
senn
units on the width and height. You dont.
Otherwise, your page does not validate.
I did not find the page:
http://www.jkp-ads.com/Articles/CorruptFiles.asp
on your site.
I wander which page you're talking about.
But I see, that you changed the width to 129px on the above page.
Like I said; *the above page* still displays the error in my browser.
IE7, screen solution in 1680px x 1050px
/senn
John Fraser
Not sure if this is a problem, but Firefox keeps flagging this as a
warning in the jkp-ads.css file:
margin: 10;
padding: 0;
I believe the margin value should be stated in pixels, unless browser make
that assumption autonomously. Otherwise, it looks pretty good in
Firefox.Cheers,John"Jan Karel Pieterse" <jkpie...@netscape.net> wrote in
message news:VA.0000061...@netscape.net...
senn
or someone other knowing this. I don't know.
Didn't she tell of using such a tool. Or did I miss-read her post.
Otherwise try my solution. Some of the errors I corrected in the html
code belongs to the none editable regions of the DWT. So most likely
every page of your site will display right if you go my way.
Of course, no promises !.
Regards
/senn
ANONYMOUS
questions here:
http://www.css-discuss.org/mailman/listinfo/css-d
You need to create an account using any email address such as free web
based hotmail/yahoo or anything.
You get the replies to that email account including other
questions/answers relevant to CSS. There is nothing about EW or DW in
that forum.
hth
Jan Karel Pieterse wrote:
>Hi,
>
>My website does not render properly in Google Chrome, see:
>
>http://www.jkp-ads.com/Articles/CorruptFiles.asp
>
>The body text appears below the left-hand navigation pane, which all other
>browsers I tested do not do.
>
>Any idea's how to fix this?
>
Cheryl D Wise
provide them since it allows the page to continue to layout while the images
are loading while reserving the correct amount of space for the images when
they finish loading.
I don't have Chrome installed and due to reports I've seen from people who
have installed it I won't unless it gains enough market share to be worth
dealing spending time dealing with, so I can only rely on something like
Browserlab. Frankly, if Chrome is the only one rendering off then I would
consider it to be a problem with Chrome not the code.
I did put a min-width in the page so that the top menu would not wrap. You
could try making that width wider since my guess would be that the display
issue is related to a box model issue.
--
Cheryl D Wise
http://by-expression.com
"Jan Karel Pieterse" <jkpie...@netscape.net> wrote in message
news:VA.0000061...@netscape.net...
Cheryl D Wise
size other than 0 in a stylesheet you MUST include the unit of measurement
since there is no default. So the margin: 10 should be flagged but not the
padding: 0.
"John Fraser" <jfr...@ns.sympatico.ca> wrote in message
news:4af83d90$0$5363$9a56...@news.aliant.net...
Cheryl D Wise
display issues.
--
Cheryl D Wise
http://by-expression.com
"Jan Karel Pieterse" <jkpie...@netscape.net> wrote in message
news:VA.0000061...@netscape.net...
Cheryl D Wise
list were outlined with dots when I selected it in design view.
--
Cheryl D Wise
http://by-expression.com
"senn" <senn@homeplace&.fix> wrote in message
news:OKlvMbVY...@TK2MSFTNGP04.phx.gbl...
Cheryl D Wise
for practical - not theoretical css discussion on the web.
NOTE: that mail list is kept strictly on topic and going into non-css issues
will quickly get you in trouble or kicked off the list if it persists.
--
Cheryl D Wise
http://by-expression.com
"ANONYMOUS" <ANON...@EXAMPLE.COM> wrote in message
news:eF$xIaYYK...@TK2MSFTNGP02.phx.gbl...
Jan Karel Pieterse
> I don't have Chrome installed and due to reports I've seen from people who
> have installed it I won't unless it gains enough market share to be worth
> dealing spending time dealing with, so I can only rely on something like
> Browserlab. Frankly, if Chrome is the only one rendering off then I would
> consider it to be a problem with Chrome not the code.
My web stats show Chrome between 2 and 5 percent, so it seems to be gaining.
I'm bot too worried about it though, most pages show up fine in Chrome, just a
couple do not.
I installed Chrome in a Virtual Machine to ensure it doesn't wreak havoc
anywhere else.
> I did put a min-width in the page so that the top menu would not wrap. You
> could try making that width wider since my guess would be that the display
> issue is related to a box model issue.
I'll try that too.
Thanks.
Jan Karel Pieterse
> Just looked at your image html-code. It's required to have the pixel
> units on the width and height. You dont.
> Otherwise, your page does not validate.
Added them (I assume you mean the mvp logo, correct?)
> I did not find the page:
> http://www.jkp-ads.com/Articles/CorruptFiles.asp
> on your site.
Maybe I was updating the site, it shows up now.
Jan Karel Pieterse
> Not sure if this is a problem, but Firefox keeps flagging this as a
> warning in the jkp-ads.css file:
> margin: 10;
> padding: 0;
> I believe the margin value should be stated in pixels, unless browser make
> that assumption autonomously.
Thanks, will ensure the pixel units get added.
Jan Karel Pieterse
> I suggest you should also try to post your pure standards compliant CSS
> questions here:
I'll certainly consider that, thanks.
Jan Karel Pieterse
> I saw the size being wrong using Expression Web where the elements in the
> list were outlined with dots when I selected it in design view.
Ah yes, I tried this yesterday by loading the source of a web page of my site
into EW and removing the link to the dwt so I could edit (and hence check) the
non-editable regions.
Looks much better now.
John Fraser
My thoughts as well. Thank you for confirming it.
Cheers,
John
"Cheryl D Wise" <wise...@newsgroup.nospam> wrote in message
news:%23MmJTvY...@TK2MSFTNGP02.phx.gbl...
John Fraser
You're welcome. I haven't tried Chrome as it is still somewhat
experimental, but the page in question renders similarly in IE, Firefox, and
Safari.
Cheers,
John
"Jan Karel Pieterse" <jkpie...@netscape.net> wrote in message
news:VA.0000061...@netscape.net...
senn
>
>> Just looked at your image html-code. It's required to have the pixel
>> units on the width and height. You dont.
>> Otherwise, your page does not validate.
>
> Added them (I assume you mean the mvp logo, correct?)
>
I noticed. Yes.
In the #topmenu
you have this: border-width: 1px 0;
This is definite an error. Also the "10" in the body-css without the px
as mentioned by J.F.
Still, I do not think any of these error are the culprit.
Google is very fast. Google themself say it. They don't lie.
Just as fast as safari.
Regards
/senn
Jan Karel Pieterse
> the page in question renders similarly in IE, Firefox, and
> Safari.
Thanks for trying. I tested the page in Browsershots and that confirms the
same.
Jan Karel Pieterse
> In the #topmenu
> you have this: border-width: 1px 0;
> This is definite an error.
Then what would be correct?
senn
>
>> In the #topmenu
>> you have this: border-width: 1px 0;
>> This is definite an error.
>
> Then what would be correct?
>
> Regards,
I'm accustomed to border: 1px 0 0 0;
A trial shows it's unnecessary. I was just not that smart.
Thank you for letting me know, Jan !
/senn
Cheryl D Wise
I gave you I assigned it a custom class with hover that will prevent the
shifting.
--
Cheryl D Wise
http://by-expression.com
"Jan Karel Pieterse" <jkpie...@netscape.net> wrote in message
news:VA.0000061...@netscape.net...
Jan Karel Pieterse
> Speaking about the MVP logo it shifts on the page you posted. In the version
> I gave you I assigned it a custom class with hover that will prevent the
> shifting.
Didn't notice that, I'll have a look.
There is other stuff wrong too, I still haven't gotten the hang of this css
stuff and boxing and all <g>.
Look at:
http://www.jkp-ads.com/Articles/AutoSizeListBox02NL.asp
I have a link next to my crumbs to toggle the language to English if a Dutch
page has an English counterpart.
If you drag the IE window so it becomes narrower, the link "This page in
English" is pushed down on top of the <h1> title of the page.
Also, near the bottom of this page, just above the comments form, there are two
arrows to go to the previous/next page of the article. If you drag the IE
window so it becomes narrower, the buttons are pushed to the end of the page at
a certain moment.
senn
Found the error:
You have this just before the vertmenu div. Like this:
<br style="clear: both" />
<div id="vertmenu">
If you alter this to:
<br style="clear: right" />
then your page will not jumpt anymore in the google browser.
/senn