[css-d] IE layout blues
Hi, I am having trouble with several things in IE with a site I'm working on and seek some advice. I'm still grappling with a few areas of css so the issues may be simple, but I just can't see them! Please look at http://www.webanz.com/webanz_new/index3.php. Stylesheets: http://www.webanz.com/webanz_new/styles/layout.css http://www.webanz.com/webanz_new/styles/layout_ie.css http://www.webanz.com/webanz_new/CSSMenuWriter/cssmw/menu.css http://www.webanz.com/webanz_new/CSSMenuWriter/cssmw/menu_ie.css I'm working on a Mac and also have a PC running XP and IE 6. I have run the site through browsershots.org and looks like I'm getting various results particularly in IE 7+ . The issues I see are: 1. IE 6 and down to 5.0: The layout renders basically the same as in Safari and FF (Mac) but the top horizontal (brown) navigation bar is supposed to have sub- menu dropdown items which aren't working. Any ideas what is causing this? I've had several attempts at fixing it, as you will see in the menu_ie.css stylesheet. 2. IE 7 on XP and FF on Win 2000 Have layout issues and drops the left hand background panel down the page. And renders the text in the top horizontal navigation bar in a dark colour! 3. IE 8 Has a few issues with not centering items in the left hand side panel, and also renders the text in the upper hor navbar in a dark colour. Is there some obvious issues I'm not aware of here that can easily be addressed? I take it that it has something to do with hasLayout? Any guidance, pointers, solutions would save me what's left of my hair! Regards, David __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE layout blues
Hi Kevin, On 22/05/2009, at 12:51 AM, Kevin Doyle wrote: - IE Tester download: http://www.my-debugbar.com/wiki/IETester/ HomePage (it's in beta, so there are a couple bugs -- still ~totally~ worth downloading) I've downloaded this and it looks quite good. This and probably Quiller's suggestion is very helpful. I only have one PC and not able to check the different browsers as I make adjustments, and I was envisaging having to check in the screenshots of browsershots.org every change I make!. I guess the quality and bugs will be sorted out over time in this program. It didn't like the javascript error that is apparently part of the navbar (from Web Assist's CSS Menu Writer), so I'll have to sort that out first before I can use it properly. - Firebug plugin for FF: http://getfirebug.com/ I have used this plugin on my Mac, and have just downloaded the pc version. Great tool. - Conditional comment CSS IE hacks: http://www.quirksmode.org/css/ condcom.html I am aware of the value of these conditional comments and, as the header of the page shows, I have used them on this site. But my real issue is as mentioned above, how do I start testing for each of these browsers. Also, I'm relatively new to css, or, at least somewhat out of touch with it for a while and things have moved along quite rapidly it appears! Thanks for your suggestions and advice. Regards, David __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE layout blues
On 22/05/2009, at 3:30 AM, Quiller wrote: I'd like to add my two cents to Kevin's suggestions. Instead, I prefer to use the Virtual PC images made available by Microsoft. The whole setup is free and provides an exact replication of different environments from IE6/XP to IE8/Vista. Virtual PC 2007 (free): http://www.microsoft.com/downloads/details.aspx? FamilyId=04D26402-3199-48A3-AFA2-2DC0B40A73B6displaylang=en Images for IE6, IE7 and IE8: http://www.microsoft.com/downloads/details.aspx? FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EFdisplaylang=en Thanks, Quiller. Looks great, and downloading now. Should be a great help. David __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE layout blues [correction to url]
On 22/05/2009, at 5:30 AM, David Laakso wrote:
This line above the doctype puts IE/6 in quirksmode.
!-- HEADER INCLUDE Goes here --
Okay, that does change things dramatically. Obviously, I need to
learn more about quirksmode. It now acts more like IE 7 in dropping
the content of the left-hand panel, and aligning the content to the
left. It appears I've been making adjustments to the IE style sheet
to suit quirksmode, because it now works better using the
If it is deleted and the width of this selector is reduced, you may
avoid the float drop:
#left-panel { border: 1px solid fuchsia;
float: left;
width: /*16%*/15%;
padding-top: 10px;
padding-left: 2%;
padding-right: 2%;
}
Okay, I've made a couple of other adjustments now to the other floats
and they all sit together better (along the lines of the main style
sheet), so the above adjustment wasn't necessary. I've now got to try
and solve the right alignment problem.
It is difficult to bring your page up at all in the IE browsers
because of the js errors.
Yes, I only became aware of this later for something but it seemed to
point to the javascript in the menu (produced by Web Assist's CSS
Menu Writer). But I have another page (http://www.webanz.com/
webanz_new/int-tmpl-3col-3.php ) which for some reason, while it was
affected by eliminating quirksmode, didn't show the same changes as
did the index page. Also, the javascript error doesn't show up on
this page, so I'm thinking that the javascript error has something to
do with the image rollover sequence on the home page (produced by
Dreamweaver 8, as I don't know javascript well enough). I'm sure I've
seen that this sort of thing can be done using CSS, so I'll look into
that.
It would probably be a good idea to validate the markup, too.
http://validator.w3.org/check?verbose=1uri=http%3A%2F%
2Fwww.webanz.com%2Fwebanz_new%2Findex3.php
That's weird! I did this before posting my question! I validated both
the html and the css and all validated fine!
Okay, I've just realised my mistake. I gave you an incorrect url!
Nevertheless, the issues are the same and it is the same style sheet.
The correct URL is:
http://www.webanz.com/webanz_new/index4.php
...which validates fine: http://validator.w3.org/check?uri=http%3A%2F%
2Fwww.webanz.com%2Fwebanz_new%2Findex4.phpcharset=%28detect
+automatically%29doctype=Inlinegroup=0verbose=1user-
agent=W3C_Validator%2F1.654
My apologies!
I think your chances of getting that site functional in IE/5 is
slim to none.
Are you meaning, the structure of the site won't suit IE/5, or that
IE/5 is beyond working with?
Thanks for your efforts to help!
Regards,
David
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 6 layout issues
On 08/05/2009, at 3:51 AM, Alan Gresley wrote:
David Laakso wrote:
Alan,
I wonder if he is referring to the white space beneath Tobias in
compliant browsers in an 800 window, or in any width window when the
fonts are scaled; and that this white space also appears beneath
Tobias
in IE/8 and down, regardless of the widow width? In other words, is
Tobias supposed to resting at the bottom bar regardless of window
size
or user font preference?
Oh I see now (not a IE6 bug). Thank you David.
It's collapsing margins from the list at the bottom of the content.
They
collapse through to div##rightColumn_hp since the image of Tobias is a
float. The fix is to zero out that bottom margin.
#rightColumn_hp ul {
margin-bottom:0;
}
Thanks for this. I used this to fix the gap between the image and the
stripe at the bottom in IE. Can you explain what has happened here?
There was obviously some inheritance issue that I'm not seeing; but
I'd like to understand.
In the meantime, as suggested by a few others, I have used absolute
positioning as others have suggested to solve the problem.
Thanks again for looking into this; I greatly appreciate not only the
opportunity to solve the issues, but also to learn!
Regards,
David
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 6 layout issues
On 15/05/2009, at 3:51 AM, Gunlaug Sørtun wrote: David Bailey wrote: Something I was unaware of was that you can float a div as well as position it relatively! Relative positioning adds a few factors to the mix... That all makes sense. Thanks for the explanation. Also included min-width fix for IE6, in case you want that. Is there anywhere I can find out an explanation of what you have done here? See: http://www.gunlaug.no/contents/wd_additions_14.html That's excellent. I've looked through and also bookmarked it. It certainly helps to make IE work as it does in FF and Safari. I guess the very fact we have to make special style sheets for IE in the first place shows we are having to take special steps to incorporate this ubiquitous but recalcitrant browser in its various versions, so I can see an argument for using MS's proprietary expressions when needed. The real problem I have with the menu bar in IE and the fact that I have to stipulate a width for each menu item in pixels rather than auto... this creates the problem of the menu bar dropping a line when the window is narrowed or viewed at 800x600. In the 'menu_ie.css' stylesheet add/change to... ...and things will improve a bit at normal font size in IE6. The above works in IE6 because that browser has no respect for declared dimensions and will expand the li until the content fits inside. Usually that buggy behavior causes problems, bet here we're turning that bug to our advantage. That's excellent--almost the same as it appears in Safari! I can see what you have done using that IE bug. This is most helpful in seeing how to think in terms of what cards we've been dealt and turn it to good! resizing will cause drop at narrow width in all browsers, and there's no use trying to avoid/prevent that. Yes, I was aware and happy with that. I'm personally happy with allowing menus to collapse, as ugly as that may at times look, but it does allow for resizing of text for readability. The site owner, however, didn't want the menu bar to collapse, hence the min-width, for which your work-around has suited well. I am very grateful for the help I've received, and have learned a lot from this. Regards, David __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 6 layout issues
David Bailey wrote: Hi, I've got a couple of problems with IE 6 (and probably other versions, I don't have other IE browsers in order to check) which all work fine in Safari and FF. I've struggled with this for a few hours now, and looked for answers, but to no avail. Tim, Georg, Alan, and David, I've been away, hence no resonse to your comments! Thanks for all your answers and suggestions and the effort you've put into working out suggested solutions. I'm most grateful. A couple of the problems have been solved through Tim's earlier reply, but I've still got to work through the rest. Obviously, I've got to get to grips with this haslayout issue, and there's a few things to come to grips with along the way. To those who mentioned the tobias image, yes, Tim's earlier reply provided the answer to why it sat above the content in IE. Nevertheless, as you have pointed out, I also had noticed that the image was separating from the maroon line at the bottom of the content area. It appears that absolute positioning should solve that, so I'll give that a go. I'll come back and let you know how I've got on. A big THANKS. Regards, David __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 6 layout issues
Hi Tim and others,
Sorry I have not responded sooner, but have been away.
Thanks for the reply and helpful advice.
On 07/05/2009, at 10:49 AM, Tim Snadden wrote:
1. Text content:
The text drops down below the image on the right instead of being
parallel to it. I'm sure I've seen something about this problem
before in one of my books, but I can't find it for the life of me.
The IE web developer toolbar is pale imitation of firebug but can
be used to find out what is happening in IE. If you look you will
see that the div class=hp_img is taking up with full width. You
could set a width on it, or do away with it altogether and just
position the image. I would absolutely position that image bottom
right so that even if the content grows he still looks right.
Thanks for that; that makes sense and works. I've downloaded the IE
Web Developer toolbar too; that's great.
You're probably right about the absolute positioning. I see it moves
when the window is narrowed. I'll give that a go.
2. Stripes:
The gray stripes under the navigation bar at the top and the bottom
redish band at the bottom drops too low (the bottom one gets tangled
with the footer text.
.stripes {
background:transparent url(/images/hor-stripes_bgtop.gif) repeat-x
left bottom;
clear:both;
height:26px;
}
This has fixed it.
You don't need the image inside that div.
That's true, if I make the image longer than the widest screen. I'll
look at that. I take it that this is better practice?
Give the footer layout (google hasLayout) and the stripes will
position correctly. One way is using the proprietary 'zoom: 1; '
Hmm. I'll have to do a bit of study here and see how all that works.
I've heard about it, but this is the first time I've really had a
problem of this sort. Will check it out. Thanks.
By the way - It would look much nicer to anti-alias the violin on
the left. It looks quite jaggy against the menu bar. You could do
it as an alpha transparent PNG and it would look better to everyone
but IE6 users, and to them it would look no worse than it does
currently.
I did use a PNG image at first, but Fireworks gave it a black edge
which only emphasised the problem. I've done the same in Photoshop,
which doesn't give it the edge, but still gets the halo. I may just
start again with the original image and see if I can improve it. Thanks.
Cheers, Tim
Much appreciated,
David
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE 6 layout issues
Hi, I've got a couple of problems with IE 6 (and probably other versions, I don't have other IE browsers in order to check) which all work fine in Safari and FF. I've struggled with this for a few hours now, and looked for answers, but to no avail. http://www.widemannviolins.com/index.php 1. Text content: The text drops down below the image on the right instead of being parallel to it. I'm sure I've seen something about this problem before in one of my books, but I can't find it for the life of me. 2. Stripes: The gray stripes under the navigation bar at the top and the bottom redish band at the bottom drops too low (the bottom one gets tangled with the footer text. 3. The Main Nav bar text: I have used WebAssist's CSS MenuWriter for this (I thought it would save time!). I am having trouble getting this to work well. Apparently IE requires width and height to be declared rather than auto. Is there any way to get this looking like it does in Safari and FF? It's got it's own its own stylesheet: http://www.widemannviolins.com/ CSSMenuWriter/cssmw/menu_ie.css The main style sheet is: http://www.widemannviolins.com/styles/ layout.css Any help is much appreciated, David __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] footer float dl misbehaving
Hi, I am having trouble with a footer that's not behaving the same in Safari and FireFox (Mac). I haven't been able to check it out in IE Win as my pc is not working at present. http://www.dab-hand.co.nz/NZCFBS/3col.html http://www.dab-hand.co.nz/NZCFBS/styles/main.css The problem I'm having is with the footer and particularly with the left and right panels divided by a vertical stripe (border). The right-hand-column of text is a definition list. 1. If I float the right hand panel right and put a 20% right margin in order to move the text to the center of the right column: Safari looks fine, and it behaves as I want it to FF sends the text right over to the right, and the margin is very small—nothing like the margin on the left-hand-column, which I think is 15%. 2. If I float the right-hand-panel left and put a 20% margin on the left-hand-column in order to move the right-hand-column text to the center: FF looks great Safari drops the whole right-hand-column down under the left-hand-column 3. If I leave the right-hand-column to default (no float) Both FF and Safari the text is sitting in the right place, but it looses the structure of the definition list. I am at a loss as to what is happening here, and all my experimenting is to no avail. Clearly, I am missing some vital point about css, but the fact that FF and Safari behave so differently is confusing me, and why I loose the dl structure when both browsers are consistent also baffles me. I'd hate to think what it does in IE 5, 6 and 7! Help, guidance, advice—much appreciated. David __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] missing image(s)
Hi, At my client's request, I have added a javascript fade-in revolving image in the center column of the home page, but the image won't appear. I'm not sure for the reason for this, but I suspect is something I've done in the style sheet somewhere. Can anyone see what I've done wrong? Page: http://www.eurovisionltd.co.nz/index_3.php CSS: http://www.eurovisionltd.co.nz/styles/layout.css The page is supposed to look like (although the images are different): http://www.eurovisionltd.co.nz/index.php Any suggestions would be appreciated! David __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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/
Re: [css-d] missing image(s)
At my client's request, I have added a javascript fade-in revolving image in the center column of the home page, but the image won't appear. I'm not sure for the reason for this, but I suspect is something I've done in the style sheet somewhere. Can anyone see what I've done wrong? Page: http://www.eurovisionltd.co.nz/index_3.php CSS: http://www.eurovisionltd.co.nz/styles/layout.css The page is supposed to look like (although the images are different): http://www.eurovisionltd.co.nz/index.php Any suggestions would be appreciated! Hi Ian, This may be a silly suggestion, but have you tested the code without the javascript first and placing the image in where the revolving fade- in should go? No, that's not a silly question! Well, perhaps it is if you were asking someone with more experience :-). I have done what you have said, and dropped out the javascript, and yes, the image appears (http://www.eurovisionltd.co.nz/index_4.php). That clearly indicates, as you have said, the problem lies with what I've done with the javascript. Okay, back to the drawing board—I'm not that up on js. I have a feeling that this is a Javascript issue. Hope the finished article will have all the JS off page. Yes, although, the original script is all done in the php. I guess this makes this question now off-topic! Thanks for your help! David __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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/
Re: [css-d] missing image(s)
Page: http://www.eurovisionltd.co.nz/index_3.php CSS: http://www.eurovisionltd.co.nz/styles/layout.css The page is supposed to look like (although the images are different): http://www.eurovisionltd.co.nz/index.php Any suggestions would be appreciated! This may be a silly suggestion, but have you tested the code without the javascript first and placing the image in where the revolving fade- in should go? I have a feeling that this is a Javascript issue. Hope the finished article will have all the JS off page. Whole bunch of CSS errors, and some Javascript errors, show up in FF Javascript console. You might check them out and see about fixing them. HTML Validater also reports 26 errors: http://validator.w3.org/check?verbose=1uri=http%3A%2F% 2Fwww.eurovisionltd.co.nz%2Findex_3.php -- David Thanks David and Devon. I should have checked all this out first; I didn't think to because the page did validated before adding the script from a third party (Dynamic Drive), which foolishly I just assumed that it would be valid —silly I know, and good lesson learnt. I don't know enough about javascript to get this effect, so I'm reliant upon third party scripts. I'm a bit caught now, but then, this is not really a matter for this list, I guess. If anyone has got any suggestions off-list, I'd really appreciate it. David __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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/
[css-d] cascading problem with tables
Hi, I'm having a problem with text size in a series of tables on one page. The text on each page seems to get smaller on each table, especially with the list texts, and heightened with nested lists. I have tried all sorts of things to try and remedy this, but something is escaping me. I'm not sure if it is something inherited or what. http://www.eurovisionltd.co.nz/library_test_results.php stylesheet: http://www.eurovisionltd.co.nz/styles/layout.css David __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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/
Re: [css-d] cascading problem with tables
Hi Philippe,
Thanks for your comments.
However, I'm not sure why you have made this comment (unless I'm
missing something, which is quite possible), as the .resultTable li,
li li selector is actually commented out (it was just an experiment,
which I should delete). I am aware that the li li affects the
nested li.
What amazes me is that each table in the series decreases in font size.
Regards
David
I'm having a problem with text size in a series of tables on one
page.
The text on each page seems to get smaller on each table, especially
with the list texts, and heightened with nested lists.
I have tried all sorts of things to try and remedy this, but
something is escaping me. I'm not sure if it is something inherited
or what.
http://www.eurovisionltd.co.nz/library_test_results.php
stylesheet:
http://www.eurovisionltd.co.nz/styles/layout.css
From your stylesheet:
.resultTable td,{
padding: 5px;
font-size: .85em;
line-height: 1.5em;
color: #666;
}
/*
.resultTable li, li li {
margin: 0;
font-size: .85em;
}
The td has .85em, then the li, **descendant** of the td, is again .
85em, or .85em from .85em.
BTW, I presume that, in the second selector above, your 'li li'
applies to a li that is descendant of .resultTable. But yiu have
the selector wrong. The way it is written now, that 'li li' means any
li that is a descendant of a li. You have have various selectors like
that.
(and that also results in that progressively smaller font-size)
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/
[css-d] background image problem in Firefox
Hi I would appreciate help in finding out why I can't get the background image to display properly in Firefox (both Mac and Win). It renders fine in Safari and Opera (Mac) and in IE 6 (Win). If anyone is able to check it in IE 7 I'd appreciate that? page: http://www.dab-hand.co.nz/testbay/eurovision/index.php css: http://www.dab-hand.co.nz/testbay/eurovision/styles/layout.css The css validates okay, but must be a FF quirk? David __ 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/
Re: [css-d] background image problem in Firefox
Hi Chris, On 19/09/2006, at 12:08 PM, Chris Williams wrote: Hard to tell what image you are referring to. The site looks the same to me in Safari and FireFox on the Mac. It is the pg_bkg_grfk.jpg (a door frame and handle that should angle down to the bottom of the page on the left hand side of the content area and finish just above the footer. Except of course the word architect is misspelled in both menus, top and bottom :) Thanks. I've been concentrating on layout, and not so much on the actual content. David I would appreciate help in finding out why I can't get the background image to display properly in Firefox (both Mac and Win). It renders fine in Safari and Opera (Mac) and in IE 6 (Win). If anyone is able to check it in IE 7 I'd appreciate that? __ 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/
Re: [css-d] background image problem in Firefox
Thanks David... I would appreciate help in finding out why I can't get the background image to display properly in Firefox (both Mac and Win). It renders fine in Safari and Opera (Mac) and in IE 6 (Win). If anyone is able to check it in IE 7 I'd appreciate that? page: http://www.dab-hand.co.nz/testbay/eurovision/index.php css: http://www.dab-hand.co.nz/testbay/eurovision/styles/layout.css XP This image *pg_bkg_grfk.jpg* is clipped in mozilla (only the top 36px of the image shows): Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.12) Gecko/ 20050915 I do not know what is causing this. Yes, I hadn't tried Mozilla, but you are right. Thanks for the other checks, too. This is the problem I'm asking the group as to what it could be. I'm really only a learner in CSS, and stumped as to what it could be. There seems to be no problem in these browsers (the page appears identical) ie/6.0 opera/9.01 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.4) Gecko/20060516 SeaMonkey/1.0.2 aside: how come the 185px horizontal scroll bar at 1280 in all browsers? You are right. I hadn't even noticed that as I've always just worked within the window which which stretches to whatever size. I've been testing for users that may increase their font size. I'll have to have a look, but if anyone can see what the issue is, you are most welcome to let me know! :-) David __ 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/
Re: [css-d] background image problem in Firefox
Hi
I would appreciate help in finding out why I can't get the
background
image to display properly in Firefox (both Mac and Win). It renders
fine in Safari and Opera (Mac) and in IE 6 (Win). If anyone is able
to check it in IE 7 I'd appreciate that?
page:
http://www.dab-hand.co.nz/testbay/eurovision/index.php
css:
http://www.dab-hand.co.nz/testbay/eurovision/styles/layout.css
XP
This image *pg_bkg_grfk.jpg* is clipped in mozilla (only the top
36px of
the image shows):
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.12) Gecko/
20050915
I do not know what is causing this.
There seems to be no problem in these browsers (the page appears
identical)
ie/6.0
opera/9.01
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.7)
Gecko/20060909 Firefox/1.5.0.7
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.4)
Gecko/20060516 SeaMonkey/1.0.2
aside: how come the 185px horizontal scroll bar at 1280 in all
browsers?
Regards,
~dL
Hi David's,
The horizontal scrollbar is due to the padding-left in the #content,
which has also a {width: 100%;}.
This is clipping the bg-img too, I think. A margin-left for the
#content-left can solve it.
The .separatorInvisible is not working in FF and others, because of
the
{ height: 0; }, then it is not present. You can give it a height of
1px
and a negative margin-bottom of -1px, then the visual result is the
same: no space is eaten.
IMO it's not a FF quirk: with proper css FF is fine, and IE needs a
correction. ;-)
All together: see testpage
http://home.tiscali.nl/developerscorner/css-discuss/test-
eurovision.htm.
The results in some main browsers are savesound here in
browsershots.org
http://browsershots.org/screenshots/
56a099e7c1e1881f3c2dc81b5bfc48e7/.
:-)
Greetings,
francky
Hi Franky,
Thanks for all your effort! That is most helpful. I'll get to and
apply your recommendations, which obviously work from your testpage.
I also need to think about why these do what they do. For instance,
why 100% width can't have padding, which I thought was possible as I
understood padding to be internal content. I'll have to do a bit more
reading!
You are no doubt right about FF. I shouldn't have assumed!
Thanks again for all your help!
David
__
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/
Re: [css-d] background image problem in Firefox
I would appreciate help in finding out why I can't get the background image to display properly in Firefox (both Mac and Win). It renders fine in Safari and Opera (Mac) and in IE 6 (Win). If anyone is able to check it in IE 7 I'd appreciate that? page: http://www.dab-hand.co.nz/testbay/eurovision/index.php Works fine in recent browsers: Safari 2.0, Firefox 1.5 and newer, Opera 9. Older version(s) of Gecko (Firefox 1.0, Mozilla 1.7.13) have a problem with clearing your floated blocks. Your div class=separatorInvisible isn't really clearing, because it is empty, sort of. Add a non-breaking character in there, and it will work correctly div class=separatorInvisible#160;!-- x --/div (Or use another technique to contain your floats.) Thanks, Philippe. I have used this technique from a book i've been using (Web Designer's Reference, by Craig Grannell). He doesn't seem to us the non-breaking character in his sample. What other techniques are there to contain floats? Can you point me in the right direction? David __ 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/
[css-d] Center alignment problem
I am having trouble with items aligning in the center of the page which I can't find why. Of all things, it is working in IE win, but not in FF win and Safari. Site: http://www.copyquality.co.nz CSS: http://www.copyquality.co.nz/styles/main.css Any help would be much appreciated. David __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Center alignment problem
Sorry, I didn't mention that it is the home page only. The table (dare I say it!) in the center containing the javascript navigation buttons etc is what is too far left. Everything else, from what I can see, is centered. David On 19/8/05 8:40 AM, CJ Larson [EMAIL PROTECTED] wrote: Other than the site map and the bottom left fixed graphic rendering differently, I don't see a center align in FF 1.0.6 that doesn't occur in IE 6. Which specific items are you having problems with? -Original Message- I am having trouble with items aligning in the center of the page which I can't find why. Of all things, it is working in IE win, but not in FF win and Safari. Site: http://www.copyquality.co.nz CSS: http://www.copyquality.co.nz/styles/main.css __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] dreamweaver mx -awful for css design
[EMAIL PROTECTED] wrote: I hear studio 8 is meant to be a big improvement but WHY do my pages look all over the place in dreamwever and when I preview them in a browser ...perfect. This is so annoying...does anyone know of a good css extension or other visual application so I can see my DIV's as I build them? In some cases DW is worse than IE in its ability to render CSS I use DW MX2004 and it is slightly better than MX Not only does DW not render the page correctly, but it keeps changing the code. Recently I couldn't work out why a list generated navbar kept not functioning correctly. I finally realised that DW was adding code, in fact an extra li to the list (eg. liblah/lilili)! I find that BBEdit is excellent (Mac). The only reason why I tend to stick with DW is because of its imagemapping which is simple to use when needed, and, I guess, its easy to use uploading features. David __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check on a mac IE
Is there anyone that could do a site check on a mac IE for me? Apparently the site is 'not working' in mac IE. Basically the header area has lost its formatting. I checked in Safari to see what it should look like. The various items are all centered. This seems to be a problem with Mac IE for some reason, and I've noticed a few on the list who've had the problem, and would love to be put in the right direction myself on this issue. David __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Navigation problems
lia href=store.html id=firstlinkDigital Storefront/a/li
#headernavbar #firstlink {border-left: 0;}
Good.
Okay, the above (finally) worked when I sorted out the cascade matters! I
think that Rowan and Sean's ideas would have worked too, but haven't checked
them out yet having sorted out the cascade effect.
Great tutorial, Sean. Thanks for putting that up for me! I'd like to work
through it a bit more, although, I see I can download the files. Very
helpful markup.
Rowan:
Thanks for the suggestion on the line-height. It seems to have helped in
getting the bar height correct, but the text is still sitting at the top of
the bar.
David
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Positioning problem in IE Mac/ Disappearing problem IEWin
Hi, This is my first foray into css positioning. Problem 1: Positioning on IEMac 5.2 I have a problem with IE Mac not positioning correctly (or rather, as I would like it!). Please look at: http://www.dab-hand.co.nz/testbay/copyquality/index.html View Source for CSS (still in development stage; will link to a style sheet once I've sorted all this out). While I'm still playing around trying to get the main navigation graphic to be in the center of the page and keep the footer below it, it is the header section that is really having problems on IE Mac. Everything in the header is centered in a line down the page. It shows okay in in Safari, FF and IE Win as far as I can see. As I've said, I am new to this and learning as I go, so if there is a better way to lay this out, let me know! My main concern is to correct the problem in IE Mac. (Sorry about the table for the central graphic in the content section, but I have yet to figure out how to do this without adding to the graphics download time. I'm sure that there is a way, but it seems quite complicated in css. Any suggestions are welcome!) Problem 2: Disappearing Background Problem in IEWin http://www.dab-hand.co.nz/testbay/copyquality/services/pickup_delivery.html View Source for the CSS I have a graphic fixed bottom left of the page. This seems to show correctly in all browsers that I have been able to check (IEMac, Safari, FF,), but it doesn't appear at all in IEWin. What would be causing this problem, and what would be the fix? I would greatly appreciate any help I can get! Thanks, David __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
